Categories
Uncategorised

Developer Diary : Phaser Platforming Part 5

Developer Activity

As of December 28th, I’ve begun to add the final touches onto my game. This includes being able to switch between level 1 & 2 as well as creating and implementing some sounds into the game.

Using “BFXR.net”, I managed to create my own custom sounds for my game. This is essentially a free website that’s purpose is to help create some authentic retro sounds for your game, considering my game’s art style I reckon this would’ve been a good fit for it.

Bfxr is an elaboration of the glorious Sfxr, the program of choice for many people looking to make sound effects for computer games.

bfxr.net (2020)

For my game, I created three sound effects. All of these are for the player and include; the death sound played upon when the player’s death sprite is activated, jumping and stepping.

“Jump”
“Player Step”
“Die”

After creating these sounds, I inserted them into the assets folder alongside most of my spritesheets and pngs. These sounds were saved as Wav fil

Figure 1

Using the animation class, I set certain conditions on when these sounds will play.

As seen in Figure 2 and 3, I’ve created a function called “walkSound” which will activate under two different conditions. These conditions being when the player’s walk animation starts, and when it repeats.

Figure 2
Figure 3

What this does is that each time the player starts to walk, a stepping sound will play, this also goes for when the animation loops.

I’ve set it to play this way as to make the sounds play at a more accurate frequency whilst the player is walking, as the final and starting frame of the animation is when the player’s sprite puts their foot down.

In a similar fashion, I also did the same thing with the death sound. It only plays once the player’s “die” sprite is activated (See figure 4)

Figure 4

Something that was slightly more different to do was the “Jump” sound, this is because the controls to the player were in a seperate javascript file, being the basescene.js file.

The marked sections in Figure 5 show the variable for the jump sound being added, and then being played once the player makes a spacebar input.

Figure 5

Our SceneA and SceneB files extend from this file’s class as to carry over the player control functions to each scene, this helps save us a lot of time without having to reinsert this each time – I think this is quite a useful skill to learn for games development, it can even save space as well as time. So I consider it quite important to learn smart shortcuts such as these.

“Taking the existing Phaser classes and extending them to create reusable elements will speed up your game development and simplify testing and prototyping new levels, features, etc.”

Braelyn Sullivan (2020)

As shown in Figure 6, this is the starting line for SceneA, this is what enables our functions from the basescene.js to carry over to our game. So technically we could switch to a new scene, but not have to worry about rewriting our code from the basescene.js.

Figure 6

After doing all this, I’d manage to finally get sounds working for the player in my game, as demonstrated by Figure 7.

Figure 7

One final thing I managed to do was to create a working transition between SceneA and SceneB’s levels.

At first I had to add this onto my index.html file, which would enable both SceneA and SceneB to share the same config between scenes. This is so that the transition can work between levels (See Figure 8).

Figure 8

Within SceneA’s code, there is a function that when you collect a heart another scene will be started in Figure 9.

Figure 9

This will then load our SceneB.js file, in this we have the exact same code as before except we change our class and super to be SceneB (See Figure 10).

Figure 10

This part ended up going fairly smoothly, as it was quite a simple process to do – Figure 11 demonstrates the results of this in action.

Figure 11

Bibliography

photonstorm.com, P., 2020. Phaser – Examples – Audio – Sound Complete. [online] Phaser.io. Available at: <https://phaser.io/examples/v2/audio/sound-complete> [Accessed 2 January 2021].

Bfxr. 2021. Bfxr. [online] Available at: <https://www.bfxr.net/> [Accessed 3 January 2021].

docs.idew.org. 2018. [online] Available at: <https://docs.idew.org/video-game/project-references/phaser-coding/audio> [Accessed 3 January 2021].

Medium. 2020. Extending A Phaser Class To Make Reusable Game Objects. [online] Available at: <https://braelynnn.medium.com/extending-a-phaser-class-to-make-reusable-game-objects-93c11326787e> [Accessed 3 January 2021].

Leave a Reply

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