Developer Diary : Phaser Platforming

Development Activity

During class this week, we were looking into creating a platformer in Visual Studio using HTML and JavaScript. To do this, we studied a HTML5 framework called ‘Phaser’, which is an open source framework that allows us to use it to make our own games.

“Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers.”

(photonstorm, 2020)

For the first week we just mostly covered some documentation on the framework using the documentation wiki for the framework, we later on used this as a reference for some of our projects this week.

The website manages to cover a wide range of the framework’s functions ranging from; namespaces, classes, events, game objects, scene and even physics (See Figure 1).

Figure 1 (Courtesy of photonstorm)

To enable ‘Phaser’ for our project, we had to install a JavaScript file with the same name. Then, we would put alongside the other file where we’d be writing our main code (See Figure 2).

Figure 2

We also run both the scripts simultaneously as soon as the program starts up by declaring the sources within our HTML file as shown on Figure 3. Our program will load the ‘phaser.js’ file first as it comes before our main file titled ‘FirstScene.js’ (See Figure 3).

Figure 3

To start off, we had to create a scene for our project. This would be our first room in the game and where all the action would take place (See Figure 4).

This would also be considered as a part of a class, as it would have some other similar functions tied to it as well such as animations and objects.

Figure 4 (Courtesy of photonstorm)

Once we started writing out our code, we declared a class-name and then extended from our main code template to phaser’s base template as shown in Figure 5.

Figure 5

How this works exactly is that this enables for you to use the same information in more than one place, this means that there wouldn’t be any need to repeat yourself when writing code in different files.

This usually can help to save plenty of time when working on a project as you won’t need to do as much work rewriting entire blocks of code when using different templates.

“Templates help when you want to use the same information or layout in more than one place. You don’t have to repeat yourself in every file. And if you want to change something, you don’t have to do it in every template, just one!”

(, 2020)

For this project, we also covered in class how to use assets within the engine such as sprite animations. In our project we had an assets folder stored alongside our JavaScript one, located in this folder were several png files for assets like platforms and the player animations (See Figure 6.

Figure 6

To ensure that these would be loaded into the game, we had to use a preload method, which is called before the scene’s ‘create’ method, this allows us to preload assets that the scene may need as shown in Figure 7

Figure 7

These were mostly just singular images that had been loaded in, however we also had to add in a player sprite-sheet which would consist of multiple frames that had to play specific animations.

To start off I used a sprite-sheet I’d made awhile ago as shown in Figure 8, this just contains a simple walk cycle facing left and right as well as an idle animation in the centre too (See Figure 8).

Figure 8

How this would work in the program is that the sprite’s frames are assigned a specific size that each sprite would be fitted into, for this one each frame of the sprite-sheet is considered 32 pixels wide, and tall.

This is as shown in Figure 9, where I set the size of the frames.

Figure 9

When any of the current controls are pressed, depending on the key being pressed the program will select a starting and ending point with frames that will then be played and looped.

For instance, holding the left key will play the frames of the sprite-sheet between 0 and 5, which are the walking sprites facing left.

On the right key being pressed, it will play the frames from 7 to 12 which is the animation for the right walking animation.

If neither of these buttons are being pressed, then an idle animation will be triggered, in which it will just stay on a single frame (See Figure 10)

Figure 10

Before creating an actual sprite-sheet, I looked towards researching how to create one myself. To put it into more detail, a sprite is considered to be a single graphic image that can appear as a part of a scene.

“Sprites are a popular way to create large, complex scenes as you can manipulate each sprite separately from the rest of the scene. This allows for greater control over how the scene is rendered, as well as over how the players can interact with the scene.”

(Steven Lambert, 2013)

Frames are put into an order that creates a continuous movement, which then creates a cycle.

This is started off by creating a function that creates the image and then sets its path – as spritesheets may have different sizes we will also have to consider the frame’s width and height (This has to be the same for each sprite to make drawing the animation much easier).

How the animation will work in-game is that it needs to be updated constantly.

“To update the spritesheet animation, all we have to do is change which frame we will draw. Below is the spritesheet divided into each of its frames and numbered.”

(Steven Lambert, 2013)

This is explaining what is goes on in Figure 11, each frame of the animation will be played in a specific order.

spritesheet divided into frames and numbered
Figure 11 (Courtesy of Steven Lambert)

add some reflection (I like doing spritesheets because i like art) (wolud i wanna use this myself?) (Where would i use it how would i use it) (what other games use this that i wouldn’t mind emulating?)

This would be something that I might be able to get the hang of quite quickly, as I particularly enjoy doing sprite sheets because I also enjoy creating art in my spare time – which can vary between pixel art or small animations.

I’ve already got some experience in doing so from before in the past and this project, so I think I am well capable of doing sprite-sheets whether it’s for the player or some other details within the game.

I could however also try to look towards any particularly styles of animation that I like from other games, for example I could make use out of doing “Sub-pixel” animation, as present in games such as Metal Slug which is a game well recognised for it’s pixel art and animations.

Luis Zuno (2019)

An example of sub-pixel animation can be shown from this video, as it goes into depth about explaining how games with pixelated art styles can create a more subtle animation on smaller sprites which is done via colour value shifting.

Bibliography 2020. Phaser 3 API Documentation – Index. [online] Available at: <> [Accessed 8 December 2020]. 2020. Template Extending · Honkit. [online] Available at: <> [Accessed 8 December 2020].

Lambert, S., 2013. An Introduction To Spritesheet Animation. [online] Game Development Envato Tuts+. Available at: <–gamedev-13099#:~:text=When%20you%20put%20many%20sprites,many%20images%20and%20display%20them.> [Accessed 8 December 2020]. 2020. What Is Sub-Pixel Animation?. [online] Available at: <> [Accessed 8 December 2020].

Leave a Reply

Your email address will not be published. Required fields are marked *