This blog post sums up my journey of learning how to use the famous (and free) HTML5 game framework 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.
I will also try to add my struggles and little snippets of advice I get along the way.
Curiosity led me to Phaser's getting started tutorial, where I got to follow basic steps to set up my working environment.
These steps included:
http-serveras it is simple to use, requires little to no configuration and is powerful enough for production usage.
http-server ./my-game/) and navigating to the displayed link.
As the tutorial recommended, I then proceeded to the Making your first Phaser game tutorial.
It's a thoroughly well explained tutorial, where little to no prior knowledge is required.
All the assets can be found here and the code is already available in the Phaser repository cloned beforehand (in the
It is divided as follows:
htmlfile containing the baseline for our game (namely the instance of a
preload()method defined in the previous step. We then create a sprite in our canvas. Let's not forget that all of this is accessible thanks to our HTTP server, just serve the right directory and launch
http://xxx.xxx.xxx.xxx:port/part3.htmlin your browser of choice.
skybackground instead of the
star, the former is a 800x600 PNG that fills the game screen. We also create a
platformgroup that contains the ground and the 2 ledges we can jump on.
groups, as they allow to group together similar objects and control them as one unit (we have already created a group that contained the platforms). We then create a new variable called player giving it a position and a sprite sheet (loaded in the Loading assets part), enable its physics, set its physics properties (bounce, gravity & collisions) and finally add its walking animations (right and left), while defining the corresponding images in our sprite sheet, the amount of FPS and if it should loop.
Here's what our player's sprite sheet looks like, it contains our running and standing frames
bodyproperty to our element which offers a lot of properties such as
player.body.gravity.y. We also notice that the player does not stand on the ground we have set beforehand, that's because we need to introduce a collision check between the player and the platforms.
Controls: where we set up our keyboard controls. To do so we start by setting our player's body velocity to 0 in order to reset his movements, then we define a
cursors variable containing
game.input.keyboard.createCursorKeys() that will be checked at every frame in
update() in order to catch a keypress, for example if
cursors.left.isDown is true, then our user has pressed the left key. We can also let our user jump by checking if he is touching the ground (in order to avoid mid-air jumps) and if the up key has been pressed.
Goals: in this part, we create a star group that contains 12 stars to our scene (evenly spread out), set each of their gravity value and randomly assign a bounce value (between 0 - no bounce and 1 - full bounce). Let's not forget to enable physics for every star using
stars.enableBody = true and to add collision between our newly created stars and the platform. Finally, using the
overlap method, we catch when our player touches a star and call the
collectStar method that simply kills a star in order to have it disapear from the scene using
Phaser.Textobject, we add the player's score in the scenes top-left. We also add an incrementation in the previously created
collectStarmethod and change the text at the same time to display the player's progress.
This tutorial was a pleasure to go through, it explains Phaser's core concepts with the right amount of details, is illustrated and progresses to a reasonable pace. Finishing it gives you so many ideas to add to this little example, and the possibilities seem endless (with proportional work of course).
I will add content to this post as I keep on using Phaser in the near future, but I hope this introduction was interesting enough to tingle your interest, feel free to check out the amazing documentation and examples given on Phaser's website.
setUpStars()which simply creates our star group and its content)
Please keep in mind that I do not know any of the best practices yet !
All of these changes can be found on this repository.