“Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers.”
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).
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).
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.
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.
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!”
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
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).
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.
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)
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.
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.
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.
Photonstorm.github.io. 2020. Phaser 3 API Documentation – Index. [online] Available at: <https://photonstorm.github.io/phaser3-docs/> [Accessed 8 December 2020].
Tutorial.djangogirls.org. 2020. Template Extending · Honkit. [online] Available at: <https://tutorial.djangogirls.org/en/template_extending/> [Accessed 8 December 2020].
Lambert, S., 2013. An Introduction To Spritesheet Animation. [online] Game Development Envato Tuts+. Available at: <https://gamedevelopment.tutsplus.com/tutorials/an-introduction-to-spritesheet-animation–gamedev-13099#:~:text=When%20you%20put%20many%20sprites,many%20images%20and%20display%20them.> [Accessed 8 December 2020].
Youtube.com. 2020. What Is Sub-Pixel Animation?. [online] Available at: <https://www.youtube.com/watch?v=Wqd6epIWo6E> [Accessed 8 December 2020].