First, we preload the images by providing keys and paths in the preload function<\/p>\n

game.load.image(\"ground\",\"images\/ground.png\");\r\ngame.load.image(\"hero\",\"images\/hero.png\");\r\ngame.load.image(\"bar\",\"images\/powerbar.png\");\r\ngame.load.image(\"block\",\"images\/block.png\");<\/pre>\n
Make the Sky<\/h3>\n
Since the hero is a black square, let’s change the stage color to a sky blue<\/p>\n
Place this in the create function<\/p>\n
\/\/turn the background sky blue\r\ngame.stage.backgroundColor=\"#00ffff\";<\/pre>\n
 <\/p>\n
Add the main parts<\/h3>\n
Now let’s place the ground. Since mobile sizes vary let’s just place the ground at 90% of the screen’s height or in other words 10% from the bottom. We can adjust this later. The hero is 25px tall, so we just need to set him at the same y position as the ground and subtract 25 to have him stand above the ground.<\/p>\n
\/\/add the ground\r\nvar ground=game.add.sprite(0,game.height*.9,\"ground\");\r\n\/\/add the hero\r\nthis.hero=game.add.sprite(game.width*.2,ground.y-25,\"hero\");<\/pre>\n
The game should now look like this<\/p>\n
<\/p>\n
 <\/p>\n
The Power Meter<\/h3>\n
The power meter is just a small bitmap that we can add in and change the width as the power changes. The player will change the power by holding the mouse (or finger) down and then jumping when the mouseUp event is called. The longer the mouse is down the higher the jump will be.<\/p>\n
First, we need a variable to change.<\/p>\n
Place this at the top of the create function<\/p>\n
this.power=0;<\/pre>\n
Next, we place a power bar just above the hero’s head, 25 pixels to the right, and 25 pixels above the hero’s coordinates.<\/p>\n
\/\/add the power bar just above the head of the hero\r\nthis.powerBar=game.add.sprite(this.hero.x+25,this.hero.y-25,\"bar\");\r\nthis.powerBar.width=0;<\/pre>\n
Add in the listeners for the mouseUp and mouseDown<\/p>\n
\/\/set listeners\r\ngame.input.onUp.add(this.mouseUp, this);\r\ngame.input.onDown.add(this.mouseDown, this);<\/pre>\n
When the mouseDown is called we start a timer to keep increasing the power. When the mouseUp is called we stop that timer. We will set the timer at Phaser.Timer.Second\/1000. This means the timer runs 1000 times a second. This will give us a smooth power bar effect.<\/p>\n
mouseDown:function()\r\n{\r\n  this.timer=game.time.events.loop(Phaser.Timer.SECOND\/1000, this.increasePower, this);\r\n},\r\nmouseUp:function()\r\n{\r\n   game.time.events.remove(this.timer);\r\n   this.power=0;\r\n   this.powerBar.width=0;\r\n},<\/pre>\n
The last thing we will cover in this entry is to set up the increasePower function that increases the power variable and changes the width of the power bar. We will limit the power to 50 for now but may change it later as the game develops.<\/p>\n
increasePower:function()\r\n    {\r\n    \tthis.power++;\r\n    \tthis.powerBar.width=this.power;\r\n    \tif (this.power>50)\r\n    \t{\r\n    \t  this.power=50;\r\n    \t}\r\n    },<\/pre>\n
Here is the final code for this lesson:<\/p>\n
var StateMain = {\r\n    preload: function() {\r\n        game.load.image(\"ground\", \"images\/ground.png\");\r\n        game.load.image(\"hero\", \"images\/hero.png\");\r\n        game.load.image(\"bar\", \"images\/powerbar.png\");\r\n        game.load.image(\"block\", \"images\/block.png\");\r\n    },\r\n    create: function() {\r\n        this.power = 0;\r\n        \/\/turn the background sky blue\r\n        game.stage.backgroundColor = \"#00ffff\";\r\n        \/\/add the ground\r\n        var ground = game.add.sprite(0, game.height * .9, \"ground\");\r\n        \/\/add the hero in \r\n        this.hero = game.add.sprite(game.width * .2, ground.y - 25, \"hero\");\r\n        \/\/add the power bar just above the head of the hero\r\n        this.powerBar = game.add.sprite(this.hero.x + 25, this.hero.y - 25, \"bar\");\r\n        this.powerBar.width = 0;\r\n        \/\/set listeners\r\n        game.input.onUp.add(this.mouseUp, this);\r\n        game.input.onDown.add(this.mouseDown, this);\r\n    },\r\n    mouseDown: function() {\r\n        this.timer = game.time.events.loop(Phaser.Timer.SECOND \/ 1000, this.increasePower, this);\r\n    },\r\n    mouseUp: function() {\r\n        game.time.events.remove(this.timer);\r\n        this.power = 0;\r\n        this.powerBar.width = 0;\r\n    },\r\n    increasePower: function() {\r\n        this.power++;\r\n        this.powerBar.width = this.power;\r\n        if (this.power> 50) {\r\n            this.power = 50;\r\n        }\r\n    },\r\n    update: function() {}\r\n}<\/pre>\n
And here is the result:<\/p>\n\n\n