Tutorial: Making your first Phaser game

tutorial_header

This article was written by Alvin Ourrad and Richard Davey.

Freshly updated for Phaser 2.0!

Welcome to the our first tutorial on Making a Game with Phaser. Here we will learn how to create a small game involving a player running and jumping around platforms collecting stars. While going through this process we’ll explain some of the core features of the framework.

What is Phaser?

Phaser is an HTML5 game framework which aims to help developers make powerful, cross-browser HTML5 games really quickly and, unlike some others, has solely been built to work with the mobile browsers. The only browser requirement is the support of the canvas tag. It also borrows a lot from Flixel.

Requirements

  • Download the source files and assets that go with this tutorial.
  • You need to have a very, very basic knowledge of JavaScript.
  • Also make sure you go through the Getting Started Guide, it will show you how to download the framework, set up a local development environment, and give you a glimpse of the structure of a Phaser project and its core functions.

If you’ve gone through the Getting Started Guide you will have downloaded Phaser and got everything set-up and ready to code. Download the resources for this tutorial from here and unzip it into your web root.

Open the part1.html page in your editor of choice and let’s have a closer look at the code. After a little boilerplate HTML that includes Phaser the code structure looks like this:

Line 1 is where you bring Phaser to life by creating an instance of a Phaser.Game object and assigning it to a local variable called ‘game’. Calling it ‘game’ is a common practice, but not a requirement, and this is what you will find in the Phaser examples.

The first two parameters are the width and the height of the canvas element that Phaser will create. In this case 800 x 600 pixels. Your game world can be any size you like, but this is the resolution the game will display in. The third parameter can be either Phaser.CANVAS, Phaser.WEBGL, or Phaser.AUTO. This is the rendering context that you want to use. The recommended parameter is Phaser.AUTO which automatically tries to use WebGL, but if the browser or device doesn’t support it it’ll fall back to Canvas.

The fourth parameter is an empty string, this is the id of the DOM element in which you would like to insert the canvas element that Phaser creates. As we’ve left it blank it will simply be appended to the body. The final parameter is an object containing four references to Phasers essential functions. Their use is thoroughly explained here. Note that this object isn’t required – Phaser supports a full State system allowing you to break your code into much cleaner single objects. But for a simple Getting Started guide such as this we’ll use this approach as it allows for faster prototyping.

Load Assets

Let’s load the assets we need for our game. You do this by putting calls to game.load inside of a function called preload. Phaser will automatically look for this function when it starts and load anything defined within it.

Currently the preload function is empty. Change it to:

This will load in 4 assets: 3 images and a sprite sheet. It may appear obvious to some of you, but I would like to point out the first parameter, also known as the asset key. This string is a link to the loaded asset and is what you’ll use in your code when creating sprites. You’re free to use any valid JavaScript string as the key.

Create a Sprite

In order to add a sprite to our game place the following code in the create function:

If you bring up the page in a browser you should now see a black game screen with a single star sprite in the top left corner:

part3

The order in which items are rendered in the display matches the order in which you create them. So if you wish to place a background behind the star sprite you would need to ensure that it was added as a sprite first, before the star.

World Building

Under the hood game.add.sprite is creating a new Phaser.Sprite object and adding the sprite to the “game world”. This world is where all your objects live, it can be compared to the Stage in Actionscript3.

Note: The game world has no fixed size and extends infinitely in all directions, with 0,0 being the center of it. For convenience Phaser places 0,0 at the top left of your game for you, but by using the built-in Camera you can move around as needed.

The world class can be accessed via game.world and comes with a lot of handy methods and properties to help you distribute your objects inside the world. It includes some simple properties like game.world.height, but also some more advanced ones that we will use in another tutorial.

For now let’s build up the scene by adding a background and platforms. Here is the updated create function:

If you run this, which you’ll find as part4.html in the tutorial zip file, you should see a much more game-like scene:

part4

The first part is the same as the star sprite we had before, only instead we changed the key to ‘sky’ and it has displayed our sky background instead. This is an 800×600 PNG that fills the game screen.

Groups

Groups are really powerful. As their name implies they allow you to group together similar objects and control them all as one single unit. You can also check for collision between Groups, and for this game we’ll be using two different Groups, one of which is created in the code above for the platforms.

As with sprites game.add creates our Group object. We assign it to a new local variable called platforms. Now created we can add objects to it. First up is the ground. This is positioned at the bottom of the game and uses the ‘ground’ image loaded earlier. The ground is scaled to fill the width of the game. Finally we set its ‘immovable’ property to true. Had we not done this the ground would move when the player collides with it (more on this in the Physics section).

With the ground in place we create two smaller ledges to jump on to using the exact same technique as for the ground.

Ready Player One

Create a new local variable called ‘player’ and add the following code to the create function. You can see this in part5.html:

This creates a new sprite called ‘player’, positioned at 32 pixels by 150 pixels from the bottom of the game. We’re telling it to use the ‘dude’ asset previously loaded. If you glance back to the preload function you’ll see that ‘dude’ was loaded as a sprite sheet, not an image. That is because it contains animation frames. This is what the full sprite sheet looks like:

dude

You can see 9 frames in total, 4 for running left, 1 for facing the camera and 4 for running right. Note: Phaser supports flipping sprites to save on animation frames, but for the sake of this tutorial we’ll keep it old school. We define two animations called ‘left’ and ‘right’. The ‘left’ animation uses frames 0, 1, 2 and 3 and runs at 10 frames per second. The ‘true’ parameter tells the animation to loop. This is our standard run-cycle and we repeat it for running in the opposite direction. With the animations set we create a few physics properties.

The Body and Velocity: A world of physics

Phaser has support for a variety of different physics systems. It ships with Arcade Physics, Ninja Physics and P2.JS Full-Body Physics. For the sake of this tutorial we will be using the Arcade Physics system, which is simple and light-weight, perfect for mobile browsers. You’ll notice in the code that we have to start the physics system running, and then for every sprite or Group that we wish to use physics on we enable them.

Once done the sprites gain a new body property, which is an instance of ArcadePhysics.Body. This represents the sprite as a physical body in Phasers Arcade Physics engine. The body object has itself a lot of properties that we can play with. To simulate the effects of gravity on a sprite, it’s as simple as writing this:

This is an arbitrary value, but logically, the higher the value, the heavier your object feels and the quicker it falls. If you add this to your code or run part5.html you will see that the player falls down without stopping, completely ignoring the ground we created earlier:

part5

The reason for this is that we’re not yet testing for collision between the ground and the player. We already told Phaser that our ground and ledges would be immovable. Had we not done that when the player collided with them it would stop for a moment and then everything would have collapsed. This is because unless told otherwise, the ground sprite is a moving physical object (also known as a dynamic body) and when the player hits it, the resulting force of the collision is applied to the ground, therefore, the two bodies exchange their velocities and ground starts falling as well.

So to allow the player to collide and take advantage of the physics properties we need to introduce a collision check in the update function:

The update function is called by the core game loop every frame. The Physics.collide function is the one that performs the magic. It takes two objects and tests for collision and performs separation against them. In this case we’re giving it the player sprite and the platforms Group. It’s clever enough to run collision against all Group members, so this one call will collide against the ground and both ledges. The result is a firm platform:

part6

Controlling the player with the keyboard

Colliding is all good and well, but we really need the player to move. You would probably think of heading to the documentation and searching about how to add an event listener, but that is not necessary here. Phaser has a built-in Keyboard manager and one of the benefits of using that is this handy little function:

This populates the cursors object with four properties: up, down, left, right, that are all instances of Phaser.Key objects. Then all we need to do is poll these in our update loop:

Although we’ve added a lot of code it should all be pretty readable. The first thing we do is reset the horizontal velocity on the sprite. Then we check to see if the left cursor key is held down. If it is we apply a negative horizontal velocity and start the ‘left’ running animation. If they are holding down ‘right’ instead we literally do the opposite. By clearing the velocity and setting it in this manner, every frame, it creates a ‘stop-start’ style of movement.

The player sprite will move only when a key is held down and stop immediately they are not. Phaser also allows you to create more complex motions, with momentum and acceleration, but this gives us the effect we need for this game. The final part of the key check sets the frame to 4 if no keyis held down. Frame 4 in the sprite sheet is the one of the player looking at you, idle.

Jump to it

The final part of the code adds the ability to jump. The up cursor is our jump key and we test if that is down. However we also test if the player is touching the floor, otherwise they could jump while in mid-air. If both of these conditions are met we apply a vertical velocity of 350 px/sec sq. The player will fall to the ground automatically because of the gravity value we applied to it. With the controls in place we now have a game world we can explore. Load up part7.html and have a play. Try tweaking values like the 350 for the jump to lower and higher values to see the effect it will have.

part7

Starshine

It’s time to give our little game a purpose. Let’s drop a sprinkling of stars into the scene and allow the player to collect them. To achieve this we’ll create a new Group called ‘stars’ and populate it. In our create function we add the following code (this can be seen in part8.html):

The process is similar to when we created the platforms Group. Using a JavaScript ‘for’ loop we tell it to create 12 stars in our game. They have an x coordinate of i * 70, which means they will be evenly spaced out in the scene 70 pixels apart. As with the player we give them a gravity value so they’ll fall down, and a bounce value so they’ll bounce a little when they hit the platforms. Bounce is a value between 0 (no bounce at all) and 1 (a full bounce). Ours will bounce somewhere between 0.7 and 0.9. If we were to run the code like this the stars would fall through the bottom of the game. To stop that we need to check for their collision against the platforms in our update loop:

As well as doing this we will also check to see if the player overlaps with a star or not:

This tells Phaser to check for an overlap between the player and any star in the stars Group. If found then pass them to the ‘collectStar’ function:

Quite simply the star is killed, which removes it from display. Running the game now gives us a player that can dash about, jumping, bouncing off the platforms and collecting the stars that fall from above. Not bad for a few lines of hopefully mostly quite readable code :)

part8

Finishing touches

The final tweak we’ll make is to add a score. To do this we’ll make use of a Phaser.Text object. Here we create two new variables, one to hold the actual score and the text object itself:

The scoreText is set-up in the create function:

16×16 is the coordinate to display the text at. ‘score: 0′ is the default string to display and the object that follows contains a font size and fill colour. By not specifying which font we’ll actually use the browser will default, so on Windows it will be Arial. Next we need to modify the collectStar function so that when the player picks-up a star their score increases and the text is updated to reflect this:

So 10 points are added for every star and the scoreText is updated to show this new total. If you run part9.html you will see the final game.

part9

Conclusion

You have now learnt how to create a sprite with physics properties, to control its motion and to make it interact with other objects in a small game world. There are lots more things you can do to enhance this, for example there is no sense of completion or jeopardy yet. Why not add some spikes you must avoid? You could create a new ‘spikes’ group and check for collision vs. the player, only instead of killing the spike sprite you kill the player instead. Or for a non-violent style game you could make it a speed-run and simply challenge them to collect the stars as quickly as possible. We’ve included a few
extra graphics in the zip file to help inspire you.

With the help of what you have learnt in this tutorial and the 250+ examples available to you, you should now have a solid foundation for a future project. But as always if you have questions, need advice or want to share what you’ve been working on then feel free to ask for help in the Phaser forum.

More tutorials will follow, stay tuned :)

Posted on December 7th 2013 at 1:59 am by .
View more posts in Phaser. Follow responses via the RSS 2.0 feed.


65 Responses

Leave a comment
  • December 7th 2013 at 11:25 am

    Very good article to begin with Phaser. I also like how the docs are full with nice examples.

  • December 7th 2013 at 12:29 pm

    Very nice tutorial.

    I’d like to see more in-depth tutorials like this one.

  • Jorge
    December 7th 2013 at 5:26 pm

    Thanks!

  • STuFF
    December 7th 2013 at 8:22 pm

    VERY good post, keep going this way ;)

  • December 8th 2013 at 12:19 am

    Woah, pretty cool tutorial! Might start looking more into this stuff myself :D

  • Ronan
    December 9th 2013 at 11:49 am

    Nice tutorial, makes it easy to start prototyping.

    For a next one, it would be cool if you could talk about how to structure a project to go beyond the prototyping phase: having a title screen, a main menu, a setting screen, going from one screen to another… everything you add to the prototype to make it a game.

    This kind of subjects are not often found in tutorials and examples.

  • DaveB
    December 10th 2013 at 2:36 am

    Thank you! This is a great tutorial and the examples/documentation are awesome. I can’t wait to keep going!

  • small fish
    December 11th 2013 at 11:07 am

    After AS3 sorta just fizzled out for web, to find this is like a long struggle through the dessert, only to find a huge sea of fresh drinking water that is phaser and pixi. It’s very inspiring. Thank you!

  • atheneith
    December 13th 2013 at 3:19 am

    This tutorial was great. Can’t wait to see the next.

  • December 20th 2013 at 10:35 am

    Excellent tutorial… incredible framework!!

  • December 24th 2013 at 8:17 am

    Thanks a lot for this tutorial !

  • December 29th 2013 at 12:18 pm

    does not works on safari: localhost,
    the online version works perfectly fine on safari, not sure what is missing .

    any clue ?

  • December 30th 2013 at 12:20 pm

    All html5 games (that need the ability to load external resources) have to be run via a web server of some kind: http://phaser.io/getting-started-js.php

  • December 30th 2013 at 6:43 pm

    Nice job, I like Phaser and I like your games! :)
    I just wrote a little tutorial/blog post that shows how you can split up and organize your codebase in classes using Phaser. I often read questions where newbies ask how to take advantage of OOP in Javascript, maybe it will help someone: http://toastedware.com/?p=258

  • Jérôme
    January 1st 2014 at 2:24 pm

    Great tutorial : clear and smart.
    Really good work !

  • January 3rd 2014 at 11:02 am

    Thank you for your work!

  • January 4th 2014 at 3:31 pm

    Since the fact I’m really loving Phaser, I wrote another tutorial that talks about integrating a level editor (Toast Editor, a small HTML5 level editor still in development and coded by me) in your workflow, using tilemaps and tilesets:

    http://toastedware.com/?p=297

  • chris
    January 15th 2014 at 7:16 pm

    what if i wanted the stars to “squish” a bit when they hit the ground? i know i would have to add an extra frame to the sprite, but the code and where to add the code –that is my real question. *thank you*

  • Jeremy
    January 20th 2014 at 7:19 pm

    I’m completely new to Phaser so I’m sure I’m missing something very obvious….but I’m trying to load Part1.html or Part3.html and no sprites show up on screen. Just a green square with a diagnol slash through it. Please advise.

    Thanks!

  • January 20th 2014 at 7:46 pm

    Jeremy – my guess would be that you’re just trying to open the files directly in a web browser and not via a web server? See this guide here for help: http://phaser.io/getting-started-js.php

  • Jeremy
    January 20th 2014 at 7:46 pm

    Ok, this is weird. It works in Firefox, but not Chrome? Why would that be?

  • Jeremy
    January 21st 2014 at 12:44 pm

    Thanks for that Rich! Totally my fault for not fully reading the guide. Plus, I was thrown that it works by opening it in Firefox, but not in Chrome. All I had to do was point to 127.0.0.1/part1.html and the page was
    served up as expected. Thanks again! Oh and I sent you an email regarding Wii U dev yesterday prior to this post. Hope you have some good news for me (fingers crossed!) If not, I’m still pursuing Phaser :D

  • January 29th 2014 at 4:16 am

    Nice tutorial. Like to hear if you post more tutorials.

  • February 5th 2014 at 4:39 pm

    Nice work, this helps diving into Phaser. I copied part1.html and filled out the code along with the tutorial, no issues. Thanks :)

  • James Truty
    February 10th 2014 at 1:47 am

    This is a great and thorough tutorial, thank you so much! The only thing I would fix is change the case of the initial score text to “Score” so that is it consistent.

  • Calebe Aires
    February 10th 2014 at 2:07 pm

    New version gravity an bounce is taking different results. Phaser v1.1.4

  • jake
    February 13th 2014 at 4:35 pm

    Yeah with the new version the gravity and bounce has changed a lot.

    I’m also getting weird collisions when crashing into the side of a platform where the dude will stop falling and just hover in mid air. Anyone else getting this same problem know of a fix?

  • Chris
    February 19th 2014 at 3:01 pm

    I haven’t yet gotten to this point but when I try to run stuff in CLOUD9, it won’t let me run the HTLM file and it always gives me an error when I try to run the Javascript file.

  • Derek
    February 20th 2014 at 3:02 pm

    I, like jake above reports, am seeing weird collision behaviour when the player collides with the side of the platforms. The player velocity goes to zero and stops falling even though it is only beside the platform. It is really annoying. I’ve experimented with changing the bounce.x value thinking that might have had something to do with it but it made no difference. Why would the vertical velocity go to zero when the collision is horizontal? Help!

  • Everardo Barriga
    February 23rd 2014 at 10:43 pm

    Hey guys I need some help when I try to open part3.html from my web server I get. You don’t have permission to access /phaser_tutorial_02/ on this server. Any ideas on how to fix this, I am completely new to this stuff!
    Thanks!

  • March 4th 2014 at 6:52 am

    Phaser looks great !
    Unfortunatly, I can’t download the zip from ‘Download the source files and assets’ withchromium on ubuntu…

  • March 4th 2014 at 7:20 am

    I’ve finally found the source of this tutorial in tutorials in the clone of phaser from github !

  • March 4th 2014 at 8:43 am

    the “Download the source files and assets” is 404, can you help me?

  • March 5th 2014 at 3:32 pm

    Thank you very much for this excellent tutorial.

  • Gabe
    March 6th 2014 at 2:41 pm

    Has anyone figured out why the collisions are weird on the side of the platform? As others have stated, you hang in mid air while touch the platforms from the side.

  • March 6th 2014 at 4:23 pm

    Gabe – basically it’s a bug, sorry. We’ve done a lot of work on the physics systems for the next version, which is released March 13th, so hopefully not too long to wait!

  • Ian
    March 8th 2014 at 9:48 pm

    I’m new to games development and this tutorial was easy to follow and a lot of fun, thanks! As an additional touch I want my little dude to drop down through platforms after pressing the down key. I guess I could set a flag after the down key is pressed and put a conditional around collide(player, platforms) until that flag is cleared (when dude has fully passed through platform). Would that do? Or does Phaser provides any additional ‘sugar’ to make this even easier?

  • ngita
    March 24th 2014 at 7:32 pm

    Clearing and readable code, this framework seems to be a good choice.

  • rndOutput
    March 31st 2014 at 6:00 am

    Diggin Phaser and I appreciate the in-depth tutorial. One question though.

    Should leaving off the .y indicating the axis to apply the bounce to cause the player to move up at an angle ONLY when going left? But function ok going right? To see what I am talking about

    Change

    player.body.bounce.y = 0.2;

    to

    player.body.bounce = 0.2;

    Also in this state you can only jump when moving right. But if you face left while in the air, you fall as expected until you touch the ground. Then you start running up and left again.

    Granted, the behavior is the result of my error. It still seems odd the way it breaks to my newbie self.

  • March 31st 2014 at 12:08 pm

    Bounce is a Phaser.Point object (see here: http://docs.phaser.io/Phaser.Point.html) so it has x and y properties, along with other handy functions. So if you do bounce = 0.2 you’ve basically erased the point object that was there and replaced it with a number, so all the calculations from that point on will be broken.

  • rndOutput
    April 1st 2014 at 4:07 am

    Ah! Thank you Rich for the clarification and explanation.

  • theBaffo
    April 4th 2014 at 11:10 am

    I think this part is not correct:

    scoreText.content = ‘Score: ‘ + score;

    You should use:

    scoreText.setText(‘Score: ‘ + score);

  • Mikael
    April 10th 2014 at 8:41 pm

    Hi,
    Nice tutorial :)

    When following through the text using phaser 2.0.2 it seems that some things are missing/wrong (they are correct in the html files though)

    I had to add:
    stars.enableBody = true;
    after the stars creation, and I had to set scoreText.text instead of scoreText.content.

  • J::S
    April 21st 2014 at 8:29 am

    Great tutorial! But there were things left out of the tutorial that make a difference in following it step-by-step. I noticed that under “Starshine” you forgot to mention that you need to make the star’s body enabled (star.bodyEnabled = true). Also, under “Finishing Touches” you have scoreText.content instead of scoreText.text, which is what I found in page9’s code. Besides that, great stuff!

  • April 28th 2014 at 6:45 am

    This looks great! Can’t wait to start building the first game. I think I’m going to use it as part of a personal resume.

  • May 7th 2014 at 6:50 am

    Hi

    First of all, thanks for building such a great framework and for this excellent tutorial. I implemented most of it successfully but had a couple of problems. First, when I ran certain code, the game area went blank and dark. Secondly, I somehow only ended up with one star graphic instead of 12.

    Here are the bits of code (commented out because when they were switched off, everything else (but the faults in question) worked well. Much thanks in advance for any advice.

    /*game.physics.arcade.collide(stars, platforms);*/ //Adding this code turns the screen dark for some reason
    //game.physics.arcade.overlap(player, stars, collectStar, null, this); //So does this code

  • Necha
    May 8th 2014 at 10:51 am

    Great tutorial!

    Just like the people above me, I just want to point out:

    1. When making the stars, you didn’t include the

    stars.enableBody = true;

    Although it’s in the example code.

    2. And when making the score, in function collectStar (player, star), instead of
    scoreText.content = ‘Score: ‘ + score;

    it should be:
    scoreText.text = ‘Score: ‘ + score;

    For those who are saying that you can’t open it in Chrome, in your Chrome advanced settings, untick the box “Use hardware acceleration when available”.

  • pyros2097
    May 18th 2014 at 9:10 am

    There’s a bug in this example when using phaser version 2.0.4 you need to add this line after creating stars
    stars.enableBody = true
    otherwise it returns null in the for loop

  • Icy
    May 27th 2014 at 10:13 pm

    Hi,

    I tried to convert your tutorial to TypeScript. Everything worked well but I am getting an undefined error in update function. Can you help me about this? Here is my typescript code:

    module PhaserSample {
    export class Game extends Phaser.Game {
    platforms: Phaser.Group;
    stars: Phaser.Group;
    player: Phaser.Sprite;
    cursors: Phaser.CursorKeys;
    scoreText: Phaser.Text;
    score = 0;

    constructor() {
    super(800, 600, Phaser.AUTO, ‘content’);
    }

    preload() {
    this.load.image(‘sky’, ‘Assets/sky.png’);
    this.load.image(‘ground’, ‘Assets/platform.png’);
    this.load.image(‘star’, ‘Assets/star.png’);
    this.load.spritesheet(‘dude’, ‘Assets/dude.png’, 32, 48);
    }

    create() {
    // We’re going to be using physics, so enable the Arcade Physics system
    this.physics.startSystem(Phaser.Physics.ARCADE);

    // A simple background for our game
    this.add.sprite(0, 0, ‘sky’);

    // The platforms group contains the ground and the 2 ledges we can jump on
    this.platforms = this.add.group();

    // We will enable physics for any object that is created in this group
    this.platforms.enableBody = true;

    // Here we create the ground.
    var ground = this.platforms.create(0, this.world.height – 64, ‘ground’);

    // Scale it to fit the width of the game (the original sprite is 400×32 in size)
    ground.scale.setTo(2, 2);

    // This stops it from falling away when you jump on it
    ground.body.immovable = true;

    // Now let’s create two ledges
    var ledge = this.platforms.create(400, 400, ‘ground’);

    ledge.body.immovable = true;

    ledge = this.platforms.create(-150, 250, ‘ground’);

    ledge.body.immovable = true;

    // The player and its settings
    this.player = this.add.sprite(32, this.world.height – 150, ‘dude’);

    // We need to enable physics on the player
    this.physics.arcade.enable(this.player);

    // Player physics properties. Give the little guy a slight bounce.
    this.player.body.bounce.y = 0.2;
    this.player.body.gravity.y = 300;
    this.player.body.collideWorldBounds = true;

    // Our two animations, walking left and right.
    this.player.animations.add(‘left’, [0, 1, 2, 3], 10, true);
    this.player.animations.add(‘right’, [5, 6, 7, 8], 10, true);

    this.cursors = this.input.keyboard.createCursorKeys();

    this.stars = this.add.group();
    this.stars.enableBody = true;

    for (var i = 0; i < 12; i++) {
    var star = this.stars.create(i * 70, 0, 'star');

    star.body.gravity.y = 6;

    star.body.bounce.y = 0.7 + Math.random() * 0.2;
    }

    this.scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
    }

    update() {
    // Collide the player and the stars with the platforms
    this.physics.arcade.collide(this.player, this.platforms);

    this.physics.arcade.collide(this.stars, this.platforms);

    this.physics.arcade.overlap(this.player, this.stars, this.collectStar, null, this);

    // Reset the players velocity (movement)
    this.player.body.velocity.x = 0;

    if (this.cursors.left.isDown) {
    // Move to the left
    this.player.body.velocity.x = -150;

    this.player.animations.play('left');
    }
    else if (this.cursors.right.isDown) {
    // Move to the right
    this.player.body.velocity.x = 150;

    this.player.animations.play('right');
    }
    else {
    // Stand still
    this.player.animations.stop();
    this.player.frame = 4;
    }

    if (this.cursors.up.isDown && this.player.body.touching.down) {
    this.player.body.velocity.y = -350;
    }
    }

    collectStar(player, star) {
    // Removes the star from the screen
    star.kill();

    this.score += 10;
    this.scoreText.text = 'Score: ' + this.score;
    }
    }
    }

  • marvin
    June 21st 2014 at 10:21 am

    very good tugorial. thank you very much ~ :)

  • Marcus
    July 3rd 2014 at 7:58 pm

    Thank you for this awesome and helpful tutorial!

  • Sean
    July 6th 2014 at 10:59 pm

    Any chance you could show us how the enemy baddie sprite would move along the platform?

  • Enguerran
    July 10th 2014 at 2:13 pm

    I’ve just done this tut and ran it on an Android phone with Cordova. The thing is, even if this game seems really simple, it’s really laggy on Android. Any idea to optimise it ?

  • July 22nd 2014 at 8:35 am

    Great tutorial!

    One thing I found which wasn’t obvious and not mentioned in the tutorial. Text is rendered in the same order as other sprite objects. So if you add the scoreText before other sprite objects, it will appear behind other objects, or not even show up if it’s the first object added to the game (actually it’s behind the background.)

  • July 22nd 2014 at 8:39 am

    i forgot to ask. the game pauses when the browser window loses focus. How can you make it keep running even when browser is not in focus?

  • August 3rd 2014 at 9:55 pm

    Hi awesome tutorial and thanks for including downloadable source so I can play with it to understand it even better.

    One newbie question – is there any chance you could include a floating platform/ledge which isn’t connected to the side of the play area? I’m trying to understand how to control the width/height of the ledges better.

  • Abhilash
    August 9th 2014 at 8:14 pm

    Newbie:
    I tried adding up and down motion also like:
    else if (cursors.up.isDown) {
    // Move to the right
    player.body.velocity.y = -50;
    player.animations.play(‘top’);
    } else if (cursors.down.isDown) {
    // Move to the right
    player.body.velocity.y = 50;
    player.animations.play(‘bottom’);
    }

    The character is moving but when we press up arrow key, player will go till top of the game screen, and when down arrow is pressed it will fall from top. I tried setting player.body.gravity.y = 0; still it falls down or flies up. let and right motion is perfect, I need a similar behavior when moving up or down.

  • Auk
    August 29th 2014 at 4:29 pm

    Have a question:

    Managed to get the tutorial set up on my web root and everything, but when I view part3.html in Chrome (which seems to use WebGL), the star sprite takes up the entire canvas unless I specify Phaser.CANVAS in the game initializer.

    Any idea why this behavior happens if it uses WebGL?

Make yourself heard