Question about platformer tutorial

72 views
Skip to first unread message

andrew...@gmail.com

unread,
Oct 30, 2016, 8:53:07 PM10/30/16
to melonJS - A lightweight HTML5 game engine
Hi all,

I completed the melonjs platformer tutorial http://melonjs.github.io/tutorial-platformer/. And I had a question on advancing forward. I feel the next most important part of the game would be a win condition and a satisfying failure condition. So like "if you collect all the coins you win" or "you simply get to the end of the game" does anyone know a way to add that sort of victory condition?

As for a failure condition is there a way to give multiple lives where you put a few pictures of the sprite in the bottom left that are removed every time an enemy hits you or when you hit certain collision markers like in a pit. And would it be easier to end the game if you lose and make them start over?

Does anyone have an example in code of a victory or defeat condition using melonjs?

Jay Oster

unread,
Oct 30, 2016, 9:15:00 PM10/30/16
to mel...@googlegroups.com
Yep, we'll usually use the me.LevelEntity class to define a "goal area" to advance to the next level. Another valuable example is the Platformer example in the source code: http://melonjs.github.io/melonJS/examples/platformer/ We only include two maps in this example, but it shows how you can create a more-or-less complete platformer game, just by adding more maps and chaining them together.

If you want to explore other goal conditions, like the "collect all the coins" idea ... You'll probably want to create a manager class to manage all of the conditions required to satisfy the goal condition. In the simple case, this is just a global counter; It starts at zero, every coin collected increases the counter by 1, when the counter hits the specific "all coins collected" value for the stage, it advances to the next map, and the manager resets the counter to zero for the next stage.

A more complicated manager would be one that tracks objectives; (collect three keys, unlock the cages to rescue the birds, and talk to the rabbit) But it's the same basic principle. In both cases, the manager can be any kind of class you want... an abstract base class, a global singleton (my favorite), or just a bunch of global functions, for that matter!

Also, here's a little game I put together a long time ago whose win condition is collecting all of the items in a TODO list: http://blipjoy.github.io/sprung_fever/public/index.html And the code for the class in question: https://github.com/blipjoy/sprung_fever/blob/gh-pages/public/js/entities/hud.js#L89-L209 (The errands class is used by the exit class to determine if the goal has been accomplished.)

I hope that gives you some ideas to start with.


--
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+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Message has been deleted

aaron.g...@gmail.com

unread,
Oct 30, 2016, 9:17:10 PM10/30/16
to melonJS - A lightweight HTML5 game engine
Ignore my reply, Jay's is way better :)
> To unsubscribe from this group and stop receiving emails from it, send an email to melonjs+u...@googlegroups.com.

na...@actop.com

unread,
Nov 2, 2016, 9:54:24 AM11/2/16
to melonJS - A lightweight HTML5 game engine, andrew...@gmail.com
I was just going through the same tutorial and did a few things to use as failure conditions.

For example you can use the hud to display the number of lives remaining similar to how the tutorial shows the score for the number of coins collected.

Inside HUD:
/*init*/
this.score = -1;
this.lives = -1;

/*update*/
if (this.score !== game.data.score) {
this.score = game.data.score;
return true;
}
if (this.lives !== game.data.lives){
console.log("Updating lives");
this.lives = game.data.lives;
return true;
}

/*Draw*/
this.font.draw(context, game.data.lives, 40, 40); //Top left corner

Then when you hit an enemy you decrease that information inside the game.data, in this tutorial you'd add the logic inside game.PlayerEntity in the init you would add an initial value such as 'game.data.lives = 3'

then inside onCollision for types.ENEMY_OBJECT you can use something like
if(!this.renderable.flickering){
game.data.lives = game.data.lives-1;
if(game.data.lives === 0){
//Player lost, reset game//
game.data.score = 0;
me.levelDirector.loadLevel('area01');
}
}
this.renderable.flicker(750);

I also used a bottom collision object to reset the player and score if they fell off the platforms.

You can do similar things with winning conditions too, like Jay posted earlier you can have goal collision areas or using the game.data like how this tutorial uses game.data.score to track the score from coins, just use logic inside the coin collected collision method to perform an action like displaying an end screen.

fereshta...@gmail.com

unread,
Nov 4, 2016, 10:09:19 PM11/4/16
to melonJS - A lightweight HTML5 game engine, andrew...@gmail.com, na...@actop.com
Instead of resetting level and score, reloading area01, couldn't we just prevent the player from falling off edge of the screen? I tried putting collision object lines at the start and end of the screen where the player could fall off but I couldn't get it to work in blocking the player from falling off or disappearing.

Jay Oster

unread,
Nov 4, 2016, 10:28:28 PM11/4/16
to mel...@googlegroups.com, andrew...@gmail.com, na...@actop.com
Yes. You have to "solidify" the shapes with one of the following options:
  • Put the shapes into an object layer named "collision" (this is what the platformer tutorial recommends)
  • Give the shapes a name that matches a class in the entity pool, and write an appropriate collision handler for the class.
The latter is more involved, and better suited for "custom" collision types.

--
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+unsubscribe@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages