Categories
Uncategorised

Developer Diary : Phaser Platforming Part 4

Development Activity

As of December 21st, I’ve begun adding some more progress onto my platformer game, I’ve now implemented a couple of new animations for the player as well as starting on the enemies and obstacles of the game – there are also game start and game over screens too.

At first, once I loaded the game it was quite blurry due to the canvas having to stretch the small sprites out onto a bigger screen as shown on Figure 1.

Figure 1

The game screen’s is around 256 pixels wide and high as to compensate for the small sprites, to keep the art sharp and from being stretched we have to include a very important feature in our config part of our HTML file for Phaser which enables pixel art mode (See Figure 2).

Figure 2

Now that this has been enabled, the has a much more sharper look.

Figure 3

This was a feature that I had found on the Phasers website’s example pages, and is also what I used as a reference for my own code:

http://phaser.io/examples/v3/view/game-config/pixel-art-mode

Figure 4 (Courtesy of Phaser)

I’ve also implemented some working player animations into the game, this includes; walking, jumping and dying (See Figure 5).

Figure 5

Most animations as shown, are first created within SceneA’s file which is when the game is in action (See Figure 6).

You can see many of these animations are assigned to a certain key, these can be activated throughout the code and even by player input which is how it works for the player’s animations.

Figure 6

In Figure 7, as you can see if any of the arrow key inputs on the keyboard are pressed then the code will first check if the player’s body is being blocked by anything underneath it – this means that the player is standing on top of a surface and thus will play a normal walk animation.

There is also an else if function to determine whether the player is standing still on this surface or not, if so then the idle animation will play – this is triggered when none of the player inputs are being pressed.

However, if the player is not standing on any surface, then this must mean that they’re in mid-air – this is where we would want to play our jump animation.

Figure 7

Within the game there is also some enemies, those being bats and sawblades.

The sawblades are pretty much a static enemy that stays in space, they take up around 32×32 pixels, so they can cover quite a large amount of area. The player will most likely have to jump over to avoid them properly as they will obstruct their path.

Once the game has started up, the code will try to detect the objects layer of our tiled layout and then try to find any object labelled ‘saw’, for each point it finds a saw will then be spawned there.

Figure 8

If the player collides with the saw, then this function will be activated. As shown in Figure 9, once activated the game will trigger a death animation for the player as well as removing the saw’s collider as to not accidentally trigger the collision again.

Figure 9

I’ve also started on doing the second level for this game, which will feature some parallax backgrounds as well as an enemy that can move.

As seen in Figure 10, I have added a new layer to the tiles with the name ‘middetail’. You can also see that I have added a bat spawn object included with a destination for it to move.

Figure 10

For the parallax tiles to work, I needed to set a scrollfactor onto the layer to make it scroll at a certain speed compared to the other layers.

“Parallax scrolling is when the website layout sees the background of the web page moving at a slower rate to the foreground, creating a 3D effect as you scroll.”

Alex Black, 2020

Figure 11 shows the new layer being made, and a “setScrollFactor” component being added onto it.

Figure 11

When I move my character forwards, the ‘middetail’ layer of the level slides slightly more to the right at a different pace than the other layers. This is our parallax details at work (See Figure 12).

Figure 12

Here you can also see the bat enemy ai at work here, when the bat spawns it simply travels between its spawn point and assigned destination at figure 13.

Figure 13

As shown in Figure 14’s code, we create a for loop with variables for our spawn and destination, as well as a ‘line’ for our enemy to follow. Both the ‘batspawn’ and ‘batdest’ objects in our tiled layout will be detected by the findpoint as well as a ‘+ i’ which helps count for multiple instances of the object.

A line is then created between our spawn and destination, the bat will then follow this line. There is also a yoyo and ease component which allows it to move back and forward albeit at a smoother pace as evident by the gif on Figure 13.

Figure 14

The game also has some screens for when it starts up as well as when the player fails too.

As shown in Figure 15 the game starts off with a straightforward message that the player can click to begin. Once the player dies, a game over screen is presented in-which the player can click on to restart the game back from the start.

Figure 15

Within the code are two functions, the startgame function is activated once the game is started up and enables the player to resume control once a mouse input is detected, the end screen is quite similar although it sets off a restartgame function.

There is also an alpha component which gradually increases to give it an easing effect, this makes the transition between screens look more smooth.

Figure 16

The game over screen function is also triggered once the animation for the player dying is completed as seen on Figure 17.

Figure 17

Bibliography

photonstorm.com, P., 2020. Phaser – Examples – Pixel Art Mode. [online] Phaser.io. Available at: <http://phaser.io/examples/v3/view/game-config/pixel-art-mode> [Accessed 30 December 2020].

Bloq, C., 2020. 18 Stunning Parallax Scrolling Websites. [online] Creative Bloq. Available at: <https://www.creativebloq.com/web-design/parallax-scrolling-1131762> [Accessed 30 December 2020].

Categories
Uncategorised

Developer Diary : Phaser Platforming Part 3

Development Activity

As of December the 14th, I’ve started work on my own platformer game on Phaser. To start myself off I created some sprites for the player as well as some tiles to use.

Using my knowledge on spritesheets, I created some player animations using Piskel, which is a browser based editing software which specializes in pixel art animations.

This site is particularly handy to use as described, you are able to see a preview of your sprite’s animation on the fly, as well as easily being able to export sheets into columns.

“Piskel is an easy-to-use sprite editor. It can be used to create game sprites, animations, pixel-art… It is the editor used in piskelapp.com.”

Piskelapp.com (2020)

Using this software, I created a whole spritesheet containing all the necessary player animations I’ll need for the platformer; this includes idle sprites, walking sprites, jumping sprites and even a death sprite.

You can see the whole spritesheet on figure 1, and a preview of all the animations on figure 2. Each frame on the spritesheet is around 16×16 pixels in size, although depending on the game I may have to make the sprites bigger so that the player is more easily visible – however I can also move the camera to a smaller resolution.

Figure 1 (Self Collection)
Figure 2 (Self Collection)

As shown on figure 3, I’ve also created a simple small tilesheet containing mostly square tiles that were 16×16, these are what I plan to be on the collision layer of the game which is the surface the player will be able to collide with.

Included on the far right are also some details, which will be on a details layer and won’t collide with the player.

Figure 3 (Self Collection)

On Figure 4, using Tiled I created a simple layout for the first level, as you can see I’ve also created some separate layers for the tiles on the right for both solids and details.

Figure 4

I’ve also included an objects layer, which contains the player and goal’s spawn. The purpose of these is to add some extra information to our tilemap which will prove useful later on during our coding.

This enables us to easily place a player spawn point precisely where we want without having to specify coordinates in our code for the placements of our objects.

“Using objects you can add a great deal of information to your map for use in your game. They can replace tedious alternatives like hardcoding coordinates (like spawn points) in your source code or maintaining additional data files for storing gameplay elements.”

Tiled stable (2019)

For the purpose of this game, I will be using this feature for the player spawns as well as many other objects. This will help save more time for the project in an albeit more efficient way as well.

As you can see in-game, I’ve managed to get the tilesheet to load in-game as well as getting the player and goal spawns to work (See Figure 5).

Figure 5

How I managed to do this was at first I had to make sure the tilesheet and json file for the level I’d created in Tiled were preloaded into the game.

Afterwards once the game starts and the program creates our objects, the code would then try to search for a point within SceneA (Which is our first level) and look for some of the key points we inserted into our Tiled level earlier, such as the spawn and goal points we had on our objects layer.

Figure 6

As shown from Figure 6, the bottom part shows how the code tries to find a spawn point for the player.

At first it searches through our objects layer on our Tiled level and looks for our “playerSpawn” entity with the same name, once it finds this, it then adds the player’s sprite to the starting point.

Bibliography

Descottes, J., 2020. Piskel – Free Online Sprite Editor. [online] Piskelapp.com. Available at: https://www.piskelapp.com/ [Accessed 26 December 2020].

Doc.mapeditor.org. 2019. Working With Objects — Tiled 1.4.2 Documentation. [online] Available at: https://doc.mapeditor.org/en/stable/manual/objects/ [Accessed 27 December 2020].

Categories
Uncategorised

Developer Diary : Phaser Platforming Part 2

Development Activity

During the 8th of December, we did some more work using Phaser and creating another platformer prototype to experiment with. For this session, we focused more on creating using parallax tiles as well as some UI elements such as game start and over screens included.

One of the elements we created for this prototype was to create a parallax background using the program “Tiled”.

This is a program made to make level design much more faster and easier, it uses spritesheets which have a structure consisting of square tiles, it also can do different types of tiles as well.

Tiled supports editing tile maps in various projections (orthogonal, isometric, hexagonal) and also supports building levels with freely positioned, rotated or scaled images or annotating them with objects of various shapes.

(Thorbjørn Lindeijer, 2020)

I figure this might be easy for me to get the hand of, as I’ve also had some experience in creating tiled spritesheets before in the past, as shown on Figure 1. Included in the diagram I have an empty tile which I’ve labelled its size, each tile in the image is around 32×32 pixels.

Figure 1 (Self Collection)

For our game, we’ll have 3 separate layers to our tiles; the decoration layer which will have decorative tiles that the player can walk through, the collision layer representing platforms that the player will be able to move on, and the midground layer which will be the layer that scrolls with the parallax background – thus emitting a 3D-like effect (See Figure 2).

Figure 2 (Self Collection)

How this works in the code is that when we load our tiles, we set a “ScrollFactor” to the midground layer.

What this does is control the influence of the movement of a camera upon a certain game object. For example, when a camera scrolls it will change the position at which this game object is rendered on screen, it doesn’t change the game object’s actual position values however.

“A value of 1 means it will move exactly in sync with a camera. A value of 0 means it will not move at all, even if the camera moves. Other values control the degree to which the camera movement is mapped to this Game Object.”

(photonstorm, 2020)

For our code, we may want to set this layer to have a scroll factor of 0.5 as our background may have a different and much higher one. This’ll also enhance the effect even more making it look like multiple objects are moving in the background at different distances (See Figure 3).

Figure 3 (Self Collection)

Figure 4 shows how this works in-game, as I move the character to the right notice how the hearts on the gameplay layer move independently from the trees and bushes (Which is our midground layer).

Figure 4 (Self Collection)

What we also did for our game was learn to create some simple UI screens which would enable the player to start and reset the game if they had died (See Figure 5).

Figure 5 (Self Collection)

We created several functions that would trigger once the game started and ended, these being “startGame()” and “showEndScreen()” (See Figure 6).

Figure 6 (Self Collection)

What happens in startGame() is that once the player inputs a mouse click then the program targets the introscreen’s object and sets its alpha (This controls the transparancy of the object) to 0, the duration also determines how fast it goes from 1 to 0.

This essentially hides the start screen once the player clicks to start, this is pretty much some very basic UI.

The opposite happens with showEndScreen(), in which the value is set from 0 to 1, making the image non-transparent. There is also an extra part of the function which restarts the game.

Although this is some fairly basic UI, I reckon that I might be able to create some simple menus if I were to expand upon doing these. This could possibly be down with multiple different inputs aside from the mouse click in-which we could give the player the option to restart or exit the game.

I can use the UI in my game to help convenience the player better, it will also make explaining the game much less vague to them.

Bibliography

Editor, T., 2020. Tiled Map Editor By Thorbjørn. [online] itch.io. Available at: <https://thorbjorn.itch.io/tiled> [Accessed 19 December 2020].

Photonstorm.github.io. 2020. Phaser 3 API Documentation – Namespace: Scrollfactor. [online] Available at: <https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Components.ScrollFactor.html> [Accessed 20 December 2020].

Categories
Uncategorised

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!”

(djangogirls.org, 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

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].