Building Web-Based Games and Utility Projects Using JavaScript/

...

/

Load and Display the Required Assets

Load and Display the Required Assets

Learn about sprites and how to load the required images to render them on the canvas.

We'll cover the following...

Introduction

Now that we’ve created a basic skeleton of our game using Phaser, let's implement the logic for our game. As a first step, we will be loading all the required assets for our game. Since this is going to be a one-time operation, it can be written inside the preload() function of the scene object that we created earlier.

Now let's implement this functionality.

Load the required assets for the game

Here, we'll write the logic to load the images. Now, if you remember, we added the three functions in a scene object that was later used by the Phaser.Game class to create a Game object. Below is the structure of the scene object for your reference:

scene = {

    preload : preload, // initialize the game

    create : create, // draw the graphics on HTML

    update : update, // update the game continuously

}
Structure of the scene object

Now, the preload, create, and update functions will have access to the this property, which points to the scene object. The scene object consists of various methods that can be used to perform operations, such as loading an image, loading an audio file, displaying the images on the canvas, and so on. We will be using these methods using the this keyword, because all three functions are part ...

Access this course and 1400+ top-rated courses and projects.