<title>melonJS</title>

<meta name="description" content="melonJS Tutorial"/>

<meta name="keywords" content=

"melonJS, lightweight, HTML5 game engine, HTML5, javascript, canvas, game, engine, framework, tiled, tile, map, loader, parser, TMX, XML, tutorial"/>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<link rel="stylesheet" type="text/css" href="style/style.css" title="style"/>

<script type="text/javascript">

//<![CDATA[

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-13050059-3']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script');

ga.type = 'text/javascript';

ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(ga, s);

})();

//]]>

</script>

<style type="text/css">

/*<![CDATA[*/

pre.c2 {

font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;

color: #000000;

background-color: #eee;

font-size: 12px;

border: 1px dashed #999999;

line-height: 14px;

padding: 5px;

overflow: auto;

width: 100%

}

p.c1 {

font-weight: bold

}

/*]]>*/

</style>

<div id="main">

<div id="header">

<div id="logo">

<div id="logo_text">

<!-- class="logo_colour", allows you to change the colour of the text -->

<h1><a href="http://www.melonjs.org">melon<span class=

"logo_colour">JS</span></a></h1>

<h2>A lightweight HTML5 game engine</h2>

</div>

</div>

</div>

<div id="site_content">

<div class="sidebar">

<p><img src="media/HTML5_Badge_128.png" alt="HTML5 badge"/></p>

<h3>Useful Links</h3>

<ul>

<li><a href="http://www.mapeditor.org/">Tiled Homepage</a></li>

<li><a href="http://www.tapjs.com/">TapJS Homepage</a></li>

</ul>

</div>

<div id="content">

<h1>A step by step game creation tutorial</h1>

<h2>Introduction:</h2>

<p class="c1">Prerequisites :</p>

<li><a href="http://www.mapeditor.org/">Tiled</a> version 0.7.x, installed

and running

</li>

<li>The melonJS <a href="http://www.melonjs.org/docs/index.html">documentation</a>

for more details

</li>

<li>

<a href="tutorial_template.zip">This template file</a>, containing what we will

use for the tutorial :

<ul>

<li>a copy of melonJS (0.9.2) (/lib)</li>

<li>a level tileset and a metatileset for collision

(/data/area01_tileset/)

</li>

<li>two background for parallax layers (/data/area01_parallax/)</li>

<li>some basic spritesheet (/data/sprite/)</li>

<li>some audio sfx and music (/data/audio/)</li>

<li>a title screen background (/data/GUI/)</li>

<li>a main.js skeleton</li>

<li>a default index.html</li>

</ul>

</li>

<p><b>Testing/debugging :</b><br/>

When using Chrome, and due to the "cross-origin request" security mechanism implemented,

you need to use the "--disable-web-security" parameter or better "--allow-file-access-from-files"

when launching the browser in order to test any local content, else the browser will complain

when trying to load a level map. <br/></p>

<p><b>Additional Credits :</b><br/>

- <a href=

"http://www.spicypixel.net/2008/01/10/gfxlib-fuzed-a-free-developer-graphic-library/">

SpicyPixel.NET</a> for the GfxLib-Fuzed assets<br/>

- <a href="http://www.nosoapradio.us/">noSoapRadio</a> for the in game music</p>

<p>Feel free to modify whatever you want. We also assume here, that you are already

familiar with Tiled; if you need more help with the tool, you can check the Tiled

homepage and wiki for further help</p>

<h2>Part 1: Creating a level using Tiled</h2>

<p>melonJS supports only <i><b>uncompressed</b></i> tilemaps, so before continuing,

please check that your settings are correct (Tiled/Preferences). I recommend the

Base64 encoding, since it produces a smaller file, but it's really up to you.

<img src= "media/tiled_settings.png" alt="Tiled Settings"/></p>

<p>First let's open Tiled and create a new map : for this tutorial we will we use a

640x480 canvas, and since we have 32x32 tiles, we must specify at least 20 and 15 for

the map size. In my example I'll define a <b>40x15</b> level, so we can play with

scrolling background later.</p><img src="media/step1_newmap.png" alt=

"Step 1 of creating a new map"/>

<p>Then let's add both our tileset (using Map/New Tileset), and the "meta" tileset

that we will use for collision. Both have no spacing or margin, so be sure to let the

corresponding values to zero in tiled (note: melonJS support tilesets with margin and

space)</p><img src="media/step1_newtileset.png" alt="Adding a tileset"/>

<p>For the beauty of it, we will create two layers - one background layer, and one

foreground layer. Feel free to use your imagination and do whatever you want. I named

them logically "background" and "foreground", but you can put whatever you want.</p>

<p>Here's what my level looked like when I finished it : <img src=

"media/step1_tiled_level_design.png"

alt="Tiled level design"/></p>

<p>Finally, let's define a background color for our level, by adding a

"background_color" property to the map (Map/Map Properties), and just specify any

color (in CSS format) you prefer.</p><img src="media/step1_background_color.png" alt=

"Setting a background color in Tiled"/>

<p>To finish, let's save our new map as "area01" under the "data" folder. We are done

the first step!</p>

<h2>Part 2: Loading our level</h2>

<p>First let's have a look at our main.js skeleton :</p>

<pre class="c2">

// game resources

var g_resources = [];

var jsApp = {

/* ---

Initialize the jsApp

--- */

onload: function() {

// init the video

if (!me.video.init('jsapp', 640, 480, false, 1.0)) {

alert("Sorry but your browser does not support html 5 canvas.");

return;

}

// initialize the "audio"

me.audio.init("mp3,ogg");

// set all resources to be loaded

me.loader.onload = this.loaded.bind(this);

// set all resources to be loaded

me.loader.preload(g_resources);

// load everything &amp; display a loading screen

me.state.change(me.state.LOADING);

},

/* ---

callback when everything is loaded

--- */

loaded: function() {

// set the "Play/Ingame" Screen Object

me.state.set(me.state.PLAY, new PlayScreen());

// start the game

me.state.change(me.state.PLAY);

}

};

// jsApp

/* the in game stuff*/

var PlayScreen = me.ScreenObject.extend({

onResetEvent: function() {

// stuff to reset on state change

},

/* ---

action to perform when game is finished (state change)

--- */

onDestroyEvent: function() {

}

});

//bootstrap :)

window.onReady(function() {

jsApp.onload();

});

<p>This is very simple. Once the page is loaded, the <b>onload()</b> function is

called, the display and audio is initialized, and all game resources begin loading.

We also define a callback to be called when everything is ready to be used. Within

the callback, we define a new state that will be used for the in game stuff, together

with a <a href="http://www.melonjs.org/docs/symbols/me.ScreenObject.html"> <b>PlayScreen</b> object</a> that we will use to manage the game event (reset,

etc...).</p>

<p>So in order to load our level, the next thing is to add the resources to be loaded

by adding the following information into here (for example) the <b>g_resources</b>

object :</p>

<li>the tileset itself, an image</li>

<li>our map "area01", a <b>"tmx"</b> object</li>

<pre class="c2">

<code>//game resources

var g_resources = [{

name: "area01_level_tiles",

type: "image",

src: "data/area01_tileset/area01_level_tiles.png"

}, {

name: "area01",

type: "tmx",

src: "data/area01.tmx"

}];

<p>Be sure as well to correctly name the tileset resource name accordingly to the

filename, else the level loader will not be able to find the tileset and will

fail.</p>

<p>Finally, in the <b>onResetEvent()</b> function (which is called on a state

change), we ask the level director to display our previously preloaded level :</p>

<pre class="c2">

<code>/* the in game stuff*/

var PlayScreen = me.ScreenObject.extend({

onResetEvent: function() {

// stuff to reset on state change

// load a level

me.levelDirector.loadLevel("area01");

},

/* ---

action to perform when game is finished (state change)

--- */

onDestroyEvent: function() {

}

});

That's all! If you did everything correctly, and open you index.html, you should see

something like this:<br/>

(click on the image to see it running in your browser) <a href=

"./tutorial_step2/index.html"><img

src="media/tutorial_step2.png" alt=

"Step 2 results"/></a><br/>

Yes, nothing fancy yet, but that's only the beginning!</p>

<p>Also in case you didn't noticed, since we defined a 640x480 display in our

application, we only see a part of the map (the half of it to be exact), which is

normal. <b>melonJS</b> automatically create a corresponding viewport, and we will be

able to navigate through the map in the next step, when we will add a "main

player"</p>

<h2>Part 3: Add a main player</h2>

<p>Here we will create a new object by extending the default <a href="http://www.melonjs.org/docs/symbols/me.ObjectEntity.html"> me.ObjectEntity</a>, to create

our player. We will use the provided simple spritesheet <b>(gripe_run_right.png)</b>

to animate our character. It's of course possible to define different animation for

the same entity, but let's keep things simple first.</p><img src=

"media/gripe_run_right.png"

alt="Gripe run right"/>

<p>First, let's add our spritesheet in the list of the resources to be loaded, just

after our map :</p>

<pre class="c2">

<code>//game resources

var g_resources = [{

name: "area01_level_tiles",

type: "image",

src: "data/area01_tileset/area01_level_tiles.png"

}, {

name: "area01",

type: "tmx",

src: "data/area01.tmx"

}, {

name: "gripe_run_right",

type: "image",

src: "data/sprite/gripe_run_right.png"

}];

<p>Then it's time to create our entity:<br>

(Feel free to put this object either in our main.js or in a new file, in my example I use gameObj.js)</p>

<pre class="c2">

<code>/*-------------------

a player entity

-------------------------------- */

var PlayerEntity = me.ObjectEntity.extend({

/* -----

constructor

------ */

init: function(x, y, settings) {

// call the constructor

this.parent(x, y, settings);

// set the walking &amp; jumping speed

this.setVelocity(3, 15);

// set the display to follow our position on both axis

me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);

},

/* -----

update the player pos

------ */

update: function() {

if (me.input.isKeyPressed('left')) {

this.doWalk(true);

} else if (me.input.isKeyPressed('right')) {

this.doWalk(false);

} else {

this.vel.x = 0;

}

if (me.input.isKeyPressed('jump')) {

this.doJump();

}

// check &amp; update player movement

this.updateMovement();

// update animation if necessary

if (this.vel.x!=0 || this.vel.y!=0) {

// update objet animation

this.parent(this);

return true;

}

return false;

}

});

<p>I think the above code is quite easy to understand. Basically, we extend the

<a href="http://www.melonjs.org/docs/symbols/me.ObjectEntity.html"> ObjectEntity</a>, configure the default player speed, tweak the camera,

test if some keys are pressed and manage our player movement (by setting player speed, and then calling the <a href="http://www.melonjs.org/docs/symbols/me.ObjectEntity.html#updateMovement"> updateMovement</a> function). Also, you may notice that I'm

testing the final velocity (this.vel.x and this.vel.y) of my object, which allows me to

know if my object actually moved, and control if I want the sprite animation to run or not.</p>

<p>Note that the functions here above, like <b>doWalk()</b> and <b>doJump()</b>, are

actually <b>helper functions for platform games</b> that basically compute the new player

velocity based on the parameters defined by the <b>setVelocity()</b> function :

<pre class="c2">

/**

* helper function for platform games

* make the entity move left of right

* @param {Boolean} left will automatically flip horizontally the entity sprite

*/

doWalk : function(left) {

this.flipX(left);

this.vel.x += (left) ? -this.accel.x * me.timer.tick : this.accel.x * me.timer.tick;

},

If you do plan to develop any other type of games (or if have more complex needs),

I do <b>not</b> recommend using these function, but to rather directly modify the entity velocity

based on your requirements.

<p>Then, we have to modify our "main" to actually declare our new Object in the

<a href="http://www.melonjs.org/docs/symbols/me.entityPool.html"> EntityPool</a> (that is used by the engine to instantiate object), and finally to map the

keys we will use for the player movement. So our <b>loaded()</b> function will become

:</p>

<pre class="c2">

/* ---

callback when everything is loaded

--- */

loaded: function ()

{

// set the "Play/Ingame" Screen Object

me.state.set(me.state.PLAY, new PlayScreen());

// add our player entity in the entity pool

me.entityPool.add("mainPlayer", PlayerEntity);

// enable the keyboard

me.input.bindKey(me.input.KEY.LEFT, "left");

me.input.bindKey(me.input.KEY.RIGHT, "right");

me.input.bindKey(me.input.KEY.X, "jump", true);

// start the game

me.state.change(me.state.PLAY);

}

<p>And now we can add our entity into the level! Go back to Tiled, add an new Object

Layer, and finally a new Entity.<br/>

Name it (case does not matter) <b>mainPlayer</b> (or using the same name you used

when adding our Object into the entityPool), and add two properties to the Object

:<br/>

- <b>image</b> with the <b>gripe_run_right</b> value (name of our resource<br/>

- <b>spritewidth</b> with the value <b>64</b> which is the size of a single sprite in

the spritesheet<br/>

- <b>spriteheight</b> we don't define this value here since we use a single line spritesheet,

and since in this case the engine will take the actual image height as a value for it.<br/>

<br/>

These two parameters will be passed as parameters (<a href="http://www.melonjs.org/docs/symbols/me.ObjectSettings.html"><b>settings</b> object</a> here above

used by the constructor) when the object will be created. Now you can either specify

these fields here in Tiled, or directly in your code (when dealing with multiple

objects, it can be easier to just specify the name in Tiled, and manage the rest in

the constructor directly).<br/>

<br/>

Note: You also free to add as many properties as you want, they will all be available

in the settings object passed to your constructor.</p><img src=

"media/step3_addEntity.png"

alt="Adding an entity"/>

<p>We are almost done! The last step is to define the collision layer, for this we

will use the other tileset we previously added into Tiled, and specify for each tile

a property corresponding to the tile type.</p><img src="media/step3_metatileset.png"

alt="Using the meta tileset"/>

<p>First, right click on the "Solid" tile (1st one), and add a <b>"type"</b> property

with <b>"solid"</b> as a value.</p><img src="media/step3_tile_solid.png" alt=

"Configuring the solid tile"/>

<p>Then, right click on the "Platform" tile (2nd one), and add a <b>"type"</b>

property with <b>"platform"</b> as a value.</p><img src=

"media/step3_tile_platform.png"

alt="Configuring the platform tile"/>

<p>That's it! Though we won't be using them for this tutorial, it is nice to know

that the others possible values are <b>"lslope"</b> for the left slope,

<b>"rslope"</b> for the right slope, <b>"ladder"</b> for ladder tiles and

<b>"breakable"</b> (you'll never guess) for breakable tiles. Also be careful when

defining these two fields, as the engine is exactly looking for these

labels, so if they are incorrect, it won't work.</p>

<p>Now add a new Tilelayer. This layer <b>MUST contains the keyword "collision"</b>

for the engine to recognize it as a collision layer.</p>

<p>Once the layer added, select it, and just "draw" you level collision map. At the

end it should look like this:</p><img src="media/step3_collision_draw.png" alt=

"Drawing the collision layer"/>

Save everything, and if you now re-open you index.html, you should see something like

this :<br/>

(click on the image to see it running in your browser) <a href=

"./tutorial_step3/index.html"><img

src="media/tutorial_step3.png" alt=

"Step 3 Results"/></a><br/></p>

<p>You will also notice that display is automatically following our player.</p>

<p>One last thing - when creating an object, a collision rectangle is automatically

created to manage collision between objects. For debugging purposes, you can use the

following debug settings in your main to enable it :</p>

<pre class="c2">

<code>me.debug.renderHitBox = true;

<p>If you reload the game, you will see this:</p><img src="media/step3_hitbox1.png"

alt="Enabling hit box"/>

<p>As you can see we have a lot of white space on the left and right of our

character, so let's adjust the collision rectangle to our sprite:</p>

<pre class="c2">

<code>/* -----

constructor

------ */

init: function(x, y, settings) {

// call the constructor

this.parent(x, y, settings);

// set the walking &amp; jumping speed

this.setVelocity(3, 15);

// adjust the bounding box

this.updateColRect(8, 48, -1, 0);

// set the display to follow our position on both axis

me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);

},

<p>Here we add a horizontal 8 pixel offset, and set it's width to 48 pixels. We don't

change the height, so we specify -1.</p><img src="media/step3_hitbox2.png" alt=

"Tweaking the hit box"/>

<p>(Note: When you change the vertical size of the hitbox, be sure to keep the bottom

of the hitboxes aligned.</p>

<h2>Part 4: Add a scrolling background</h2>

<p>This one is very easy. We don't even have to add a single line of code, since

everything is done through Tiled.</p>

<p>First, let's remove in Tiled the "background_color" property (Map/Map properties)

that we added previously at the end of Part 1. Since the background will be filled

with our scrolling layers, we don't need the display to be cleared with a specific

color (furthermore it will save some precious frames).</p>

<p>Then we will use the two following backgrounds :</p>

<p><b>/data/area01_parallax/area01_bkg0.png</b> for the first background

layer</p><img src="media/area01_bkg0.png" alt="Parallax background 1"/>

<p><b>/data/area01_parallax/area01_bkg1.png</b> for the second background

layer</p><img src="media/area01_bkg1.png" alt="Parallax background 2"/>

<p>Let's add them in the resource list:</p>

<pre class="c2">

<code>// game resources

var g_resources = [

// our level tileset

{

name: "area01_level_tiles",

type: "image",

src: "data/area01_tileset/area01_level_tiles.png"

},

// our level

{

name: "area01",

type: "tmx",

src: "data/area01.tmx"

},

// the main player spritesheet

{

name: "gripe_run_right",

type: "image",

src: "data/sprite/gripe_run_right.png"

},

// the parallax background

{

name: "area01_bkg0",

type: "image",

src: "data/area01_parallax/area01_bkg0.png"

}, {

name: "area01_bkg1",

type: "image",

src: "data/area01_parallax/area01_bkg1.png"

}];

<p>Open Tiled, and add two new Tile Layer. These layers <b>MUST contains the keyword

"parallax"</b> for the engine to recognize it as a parallax layers. Be sure as well

to adjust correctly the layer order (the display order being from bottom to

top)</p><img src="media/step4_layer.png" alt="Layering parallax layers"/>

<p>Now right-click the layers to define their properties and add the following

property<br/>

- <b>imagesrc</b> property with the <b>area01_bkg0</b> value for the first layer

(<b>parallax_layer1</b> in my example), and <b>area01_bkg1</b> value for the second

one (<b>parallax_layer2</b> in my example)<br/></p>

<p><img src="media/step4_layer_property.png" alt=

"Configuring parallax properties"/></p>

"Et voila!". If you now open you index.html, you should see:<br/>

<a href="./tutorial_step4/index.html"><img src="media/tutorial_step4.png" alt=

"Step 4 results"/></a><br/></p>

<p>Play around with your player, and enjoy the view :)</p>

<h2>Part 5: Adding some basic objects and enemies</h2>

<p>In this part we will add a collectible coin (that we will use later to add to our

score), using the <b>spinning_coin_gold.png</b> spritesheet : <img src=

"media/spinning_coin_gold.png"

alt="Spinning gold coin"/></p>

<p>And a basic enemy, using the <b>wheelie_right.png</b> spritesheet : <img src=

"media/wheelie_right.png"

alt="Wheelie right sprite"/></p>

<p>As always, add them to the resource list:</p>

<pre class="c2">

<code>// game resources

var g_resources = [

// our level tileset

{

name: "area01_level_tiles",

type: "image",

src: "data/area01_tileset/area01_level_tiles.png"

},

// our level

{

name: "area01",

type: "tmx",

src: "data/area01.tmx"

},

// the main player spritesheet

{

name: "gripe_run_right",

type: "image",

src: "data/sprite/gripe_run_right.png"

},

// the parallax background

{

name: "area01_bkg0",

type: "image",

src: "data/area01_parallax/area01_bkg0.png"

}, {

name: "area01_bkg1",

type: "image",

src: "data/area01_parallax/area01_bkg1.png"

},

// the spinning coin spritesheet

{

name: "spinning_coin_gold",

type: "image",

src: "data/sprite/spinning_coin_gold.png"

},

// our enemty entity

{

name: "wheelie_right",

type: "image",

src: "data/sprite/wheelie_right.png"

},

];

<p>The coin itself is pretty easy; we just extend the <a href="http://www.melonjs.org/docs/symbols/me.CollectableEntity.html"> me.CollectableEntity</a>. Actually,

we could directly use it in Tiled (without needing to create CoinEntity here), but

since we will add some score and some audio sfx later when the coin is collected,

let's do it directly this way.</p>

<pre class="c2">

<code>/*----------------

a Coin entity

------------------------ */

var CoinEntity = me.CollectableEntity.extend({

// extending the init function is not mandatory

// unless you need to add some extra initialization

init: function(x, y, settings) {

// call the parent constructor

this.parent(x, y, settings);

},

// this function is called by the engine, when

// an object is destroyed (here collected)

onDestroyEvent: function() {

// do something when collected

}

});

<p>

Also, just to be sure it's clear for you that both ways of doing this is possible,

we will define the Coin object properties directly in Tiled, so we don't need to add

anything else in the constructor for now :<br>

<img src="media/coin_properties.png" alt="Spinning gold coin"/>

<p>For our enemy, it's a bit longer :</p>

<pre class="c2">

<code>/* --------------------------

an enemy Entity

------------------------ */

var EnemyEntity = me.ObjectEntity.extend({

init: function(x, y, settings) {

// define this here instead of tiled

settings.image = "wheelie_right";

settings.spritewidth = 64;

// call the parent constructor

this.parent(x, y, settings);

this.startX = x;

this.endX = x + settings.width - settings.spritewidth;

// size of sprite

// make him start from the right

this.pos.x = x + settings.width - settings.spritewidth;

this.walkLeft = true;

// walking &amp; jumping speed

this.setVelocity(4, 6);

// make it collidable

this.collidable = true;

// make it a enemy object

this.type = me.game.ENEMY_OBJECT;

},

// call by the engine when colliding with another object

// obj parameter corresponds to the other object (typically the player) touching this one

onCollision: function(res, obj) {

// res.y &gt;0 means touched by something on the bottom

// which mean at top position for this one

if (this.alive &amp;&amp; (res.y &gt; 0) &amp;&amp; obj.falling) {

this.flicker(45);

}

},

// manage the enemy movement

update: function() {

// do nothing if not visible

if (!this.visible)

return false;

if (this.alive) {

if (this.walkLeft &amp;&amp; this.pos.x &lt;= this.startX) {

this.walkLeft = false;

} else if (!this.walkLeft &amp;&amp; this.pos.x &gt;= this.endX) {

this.walkLeft = true;

}

this.doWalk(this.walkLeft);

} else {

this.vel.x = 0;

}

// check and update movement

this.updateMovement();

// update animation if necessary

if (this.vel.x!=0 || this.vel.y!=0) {

// update objet animation

this.parent(this);

return true;

}

return false;

}

});

<p>As you can see here, I specified the <b>settings.image</b> and

<b>settings.spritewidth</b> properties in the constructor directly, meaning that in

Tiled, I won't have to add these properties to my Object (Once again, it's up to you

to decide how to use it).<br/>

Also, I am using the <b>width</b> property given by Tiled to specify a path on which

this enemy will run. Finally, in the onCollision method, I make the enemy flicker if

something is jumping on top of it.</p>

<p>Then again, we add these new objects in the entityPool</p>

<pre class="c2">

// add our object entities in the entity pool

me.entityPool.add("mainPlayer", PlayerEntity);

me.entityPool.add("CoinEntity", CoinEntity);

me.entityPool.add("EnemyEntity", EnemyEntity);

<p>And we are ready to complete our level in Tiled. Create a new object layer, and use the Insert Object tool to add coins and enemies where you want. Right-click on each object and make sure to set their name to either CoinEntity or EnemyEntity. <img src=

"media/tutorial_tiled_step5.png" alt="Step 5"/></p>

<p>Before testing, we also need to modify our player to heck for collision with other

entities. In order to do this, we add a call to the <a href="http://www.melonjs.org/docs/symbols/me.game.html#collide"> <b>me.game.collide(this)</b></a>

function in our mainPlayer code, see below :</p>

<pre class="c2">

/* -----

update the player pos

------ */

update: function() {

if (me.input.isKeyPressed('left')) {

this.doWalk(true);

} else if (me.input.isKeyPressed('right')) {

this.doWalk(false);

} else {

this.vel.x = 0;

}

if (me.input.isKeyPressed('jump')) {

this.doJump();

}

// check &amp; update player movement

this.updateMovement();

// check for collision

var res = me.game.collide(this);

if (res) {

// if we collide with an enemy

if (res.obj.type == me.game.ENEMY_OBJECT) {

// check if we jumped on it

if ((res.y &gt; 0) &amp;&amp; ! this.jumping) {

// bounce

this.forceJump();

} else {

// let's flicker in case we touched an enemy

this.flicker(45);

}

}

}

// update animation if necessary

if (this.vel.x!=0 || this.vel.y!=0) {

// update objet animation

this.parent(this);

return true;

}

return false;

}

});

And this is what you should get (note that I completed the level a little bit, adding

platforms, etc...) :<br/>

<a href="./tutorial_step5/index.html"><img src="media/tutorial_step5.png" alt=

"Step 5 results"/></a><br/></p>

<p>Try to collect your coins, avoid the enemy or jump on it!</p>

<h2>Part 6: Adding some basic HUD information</h2>

<p>It's time now to display some score when we collect those coins, right?</p>

<p>We will use a bitmap font <b>(data/sprite/32x32_font.png)</b> to display our

score, as always we need to add it in our list of resources to be loaded :</p>

<pre class="c2">

<code>// game resources

var g_resources = [

// our level tileset

{

name: "area01_level_tiles",

type: "image",

src: "data/area01_tileset/area01_level_tiles.png"

},

// our level

{

name: "area01",

type: "tmx",

src: "data/area01.tmx"

},

// the main player spritesheet

{

name: "gripe_run_right",

type: "image",

src: "data/sprite/gripe_run_right.png"

},

// the parallax background

{

name: "area01_bkg0",

type: "image",

src: "data/area01_parallax/area01_bkg0.png"

}, {

name: "area01_bkg1",

type: "image",

src: "data/area01_parallax/area01_bkg1.png"

},

// the spinning coin spritesheet

{

name: "spinning_coin_gold",

type: "image",

src: "data/sprite/spinning_coin_gold.png"

},

// our enemty entity

{

name: "wheelie_right",

type: "image",

src: "data/sprite/wheelie_right.png"

},

// game font

{

name: "32x32_font",

type: "image",

src: "data/sprite/32x32_font.png"

}];

<p>Let's then define a new Object, that will extend the <a href="http://www.melonjs.org/docs/symbols/me.HUD_Item.html">me.HUD_Item</a>,

in which we will draw the object value using our font.</p>

<pre class="c2">

<code>/*--------------

a score HUD Item

--------------------- */

var ScoreObject = me.HUD_Item.extend({

init: function(x, y) {

// call the parent constructor

this.parent(x, y);

// create a font

this.font = new me.BitmapFont("32x32_font", 32);

},

/* -----

draw our score

------ */

draw: function(context, x, y) {

this.font.draw(context, this.value, this.pos.x + x, this.pos.y + y);

}

});

<p>And display it when we start a new game :</p>

<pre class="c2">

<code>/* the in game stuff*/

var PlayScreen = me.ScreenObject.extend({

onResetEvent: function() {

// load a level