23rd Nov 2021

Game development for beginners in Phaser 3

Game Design

Written By, Hakeem Saiyed Tosif Ahmed

What is Phaser?

Phaser is an HTML 5 game framework in which you can make cross-browser games. The only requirement is that your browser should support the canvas tag.
As we all know, “Gaming Industry” is growing faster day by day and Phaser is one of the best ways to achieve what time demands. Anyone with the basic knowledge of coding can start working with Phaser.

Basic requirement to start with Phaser3.

We need IDE to write code, local web server to run the program and latest version of Phaser3

Picking an IDE

You’re going to need an editor for preparing your JavaScript code.
There are many options available like  Sublime Text , Visual Studio Code or you can use notepad / notepad++.
There are different options available for local servers like WAMP , XAMPP and MAMP server.

Downloading Phaser

Phaser is an open source project and you can download it for free.
You can download with following command in terminal

NPM

You can also use CDN

CDN

You can download js file or whole zip file to start your work

Downloading file

Here is the link from which you can download.
https://phaser.io/download/stable

Our folder structure would look like this.

Assets folder will include Images & Spritesheet.
Sounds folder contain Audio files which we are using in the game.
Index.html file is where our main html code and we are using Phaser.min.js for phaser.

How to load Assets?

Phaser will automatically look for the “preload” function at the starting. It will load anything defined inside preload().
You need to load your assets in the preload function.

How to load an image in Phaser 3?

Syntax to load an image :

Let’s see Example

How to load sound in Phaser 3?

Syntax to load sound :

How to display your assets in Phaser 3?

In the last steps we learned how to load your assets but to display this asset we need to use another function which is the “create” function.

How to display images in Phaser 3?

Syntax To display image :

Let’s see example

sound-blank
Similarly we can load sprite image and Sound,
Let’s see example of covering sound, image and Spritesheet

To load all the assets we will do something like this.

To display this loaded assets let’s see our create function

Creating a world for our game.

Output

demo-ss

Here is the link for the above example

http://webprojects.cloud/game-demo/blog-game/

Conclusion

Hope this blog will be helpful for starting work in Phaser 3.
There will be more blogs on Phaser 3 and we will complete this game in the next few blogs.

Written By,

Web Designer at Yudiz Solutions Pvt. Ltd