Tutorial space invaders

[Matthias Guth]

Hi all,

new to melonJS I'm trying the Space Invaders tutorial and encoutered an issue in the step when modifying the renderable.property in enemy.js:

chooseShipImage: function () { var frame = ~~(Math.random() * 3); this.renderable.addAnimation("idle", [frame], 1); this.renderable.setCurrentAnimation("idle"); }

After adding this, the screen stays black after switching to the play.js screen after preloading. But resizing the window will make the entities visible. The issue is still there if I use the step1 files from Github. Is there some redraw line missing?

Happens on:

- Chromium: Version 51.0.2704.79 Built on Ubuntu 16.04, running on LinuxMint 18 (64-bit)

- Firefox 47.0

Cheers,

Matthias

[aaron.g...@gmail.com]

Hi there, this is a small bug in the code. My apologies for that. You can fix it by defining the update method on the enemy:

update: function(dt) {
this._super(me.Entity, 'update', [dt]);
return true;
}

MelonJS will not redraw the screen if it doesn't have to. Returning true from an update method tells the engine that his entity needs to be repainted. So since nothing was returning true, nothing got painted after the play screen loaded. I'll update the tutorial to reflect this later tonight. Thanks a bunch for reporting the issue, and please don't hesitate to ask any further questions.

[Matthias Guth]

Wow, thanks for your very fast reply and the solution :)

There is also a small bug in the tutorial (http://melonjs.github.io/tutorial-space-invaders) :

    me.game.world.addChild(me.pool.pull("enemy"), 2);




The constructor for enemy awaits x and y coordinates for initialization so this should be something like this:

    me.game.world.addChild(me.pool.pull("enemy", 50, 50), 2);




And there's one inconsistency in the next step (applying movement):

    me.game.world.addChild(new game.Player(), 1);
    me.game.world.addChild(new game.Enemy(50, 50), 2);

Here the entities are instanciated in a different way than before.

Hth,

Matthias

[aaron.g...@gmail.com]

Thanks for the feedback. This is where I sometimes wish it was a compiled language, catch little things like that :). That said, me.Vector2 will initialize with 0,0, so I think it should still work...

Good catch on the lack of using pooling there. I'll double check the source code for the steps as well.

[Matthias Guth]

 Wow, not only your response time is very impressive but you also commited the fixes. Fantastic! Thanks a lot :)

I'm facing the next problem:

 At this point, you should add #debug to the URL: http://localhost:8000/#debug and tap on the checkbox next to "hitbox" in the debug panel. 

 The debug panel does not react on any clicks so I can't check the hitbox - not in FF nor in Chromium :( Any hint on this?

[Jay Oster]

You can enable debug flags without clicking, as a short-term workaround. Seems it's not documented, actually. But you can set the following flags to true in your startup code: https://github.com/melonjs/melonJS/blob/f45a65531574003aa99a541b3bb2ef7dee677c6e/plugins/debug/debugPanel.js#L154-L156

--
You received this message because you are subscribed to the Google Groups "melonJS - A lightweight HTML5 game engine" group.
To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Matthias Guth]

Thanks for the hint, works wonderful! So... is it a local issue in my setup? Or some bug?

[Matthias Guth]

Hm, another question: Is there a solution for the challenges somewhere? I'm struggling with another thing: I created the win and lose screens and want to display that font thing. It's woking in debug mode but not without (I only get the background but no Message) oO The Message class:

game.Message =  me.Renderable.extend({
 init: function (x, y, message, hexColor) {
   this.message = message;
   this._super(me.Renderable, "init", [x, y, 32, 32]);
   this.font = new me.Font("Arial", 32, (new me.Color()).parseHex(hexColor));
 },
 draw: function (renderer) {
   this.font.draw(renderer, this.message, this.pos.x, this.pos.y);
});

the win-screen:

game.WinScreen = me.ScreenObject.extend({
    onResetEvent: function() {
        me.game.world.addChild(new me.ColorLayer("background", "#0f0f0f"), 0);
        this.message = new (game.ModalMessage.extend({
            init: function () {
                this._super(game.ModalMessage, "init", [100, 100, "Alien Killer!", "#ffffff"]);
            },
            update: function(time) {
                this._super(game.ModalMessage, "update", [time]);
                if (me.input.isKeyPressed("shoot")) {
                    me.state.change(me.state.PLAY);
                }
            }
        }));
        me.game.world.addChild(this.message, 2);
    }
});

Update and so on is working as it should but only the message is not displayed.

Cheers,

Matthias

(ah and thanks for that nice engine :) )

[Jason Oster]

You need an update method that returns true. Alternatively you can call me.game.repaint(); it's just not the idiomatic approach.

--

[Matthias Guth]

Hmmm... I added the update function to the Message Class:

    update: function () {
        return true;
    }

But it's still only showing up in debug mode...

You received this message because you are subscribed to a topic in the Google Groups "melonJS - A lightweight HTML5 game engine" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/melonjs/tx_ECOFRz3Q/unsubscribe.
To unsubscribe from this group and all its topics, send an email to melonjs+u...@googlegroups.com.

[Matthias Guth]

Hmkay... I added the update function to the Message Class:

[aaron.g...@gmail.com]

In your win screen, i see you're using game.ModalMessage instead of game.Message. Your extend is also not returning true at the bottom of update(). Where are you using game.Message if I may ask?

Basically we want the update control of an entity to be controlled by the dev, so one can optimize around only drawing when needing to.

[Matthias Guth]

Ah sorry, I renamed the ModalMessage class for the posting and missed one occurence. But here's the code (with the update function)

game.Message =  me.Renderable.extend({
 init: function (x, y, message, hexColor) {
 this.message = message;
 this._super(me.Renderable, "init", [x, y, 32, 32]);
 this.font = new me.Font("Arial", 32, (new me.Color()).parseHex(hexColor));

 this.z = 200;

 },
 draw: function (renderer) {
 this.font.draw(renderer, this.message, this.pos.x, this.pos.y);

 },

 update: function () {
 return true;
 }

});

I use an instance of the Message class here:

game.WinScreen = me.ScreenObject.extend({
    onResetEvent: function() {

        me.game.world.addChild(new me.ColorLayer("background", "#0f0f0f"), 0);

        this.message = new (game.Message.extend({
            init: function () {
                this._super(game.Message, "init", [100, 100, "Alien Killer!", "#ffffff"]);
            },
            update: function(time) {
                this._super(game.Message, "update", [time]);

                if (me.input.isKeyPressed("shoot")) {
                    me.state.change(me.state.PLAY);

                }
            }
        }));
        me.game.world.addChild(this.message, 2);
    }
});

And in a second (almost identical) ScreenObject called LoseScreen. The code seems syntactically correct (at least I do not get any issues in Firebug), but Message will ony display in debug mode.

[aaron.g...@gmail.com]

No worries, that clears it up. Since your extended message is what gets added, that update function is what returns true. You could do something like:

update: function(time) {

if (me.input.isKeyPressed("shoot")) {
me.state.change(me.state.PLAY);

}

return this._super(game.Message, "update", [time]);
}

Since your game.Message update returns true. Or:

update: function(time) {

if (me.input.isKeyPressed("shoot")) {
me.state.change(me.state.PLAY);

}

return true;
}

Since all your game.Message update does is return true. Simply delete it, and return true from the extended one instead.

[Matthias Guth]

Aaaah, now the penny dropped :) I overloaded the draw function when extending it. Thanks a lot again!