Introduction to Phaser.js

What is Phaser.js?

Phaser is an open-source and free HTML game development framework that provides us with a set of tools and functions to build complex interactive games on the web. The framework uses WebGL and canvas-based rendering to render the games on the web and mobile browsers. It is a JavaScript-based framework, which makes it very easy to use with HTML. We will be using this framework to build the Spin-N-Win game, which will help you understand various concepts that are commonly used to build games with Phaser. You can download Phaser's JavaScript file from the official website of Phaser.

Now let's go over how the game loop is created in Phaser.

Build a game loop using Phaser.js

As we already discussed, we need to create a game loop when developing any game. The process of creating a game loop in Phaser is a bit different from what we have already seen, although the overall logic remains the same. We need to complete the following steps to create a game loop and a basic skeleton for any game in Phaser:

1. Create a Game object using a configuration object containing the metadata of the game. The metadata of a game includes the width of the game, the height of the game, the rendering mode (canvas or webGL), and the scene information of the game. Generally, the games consist of multiple levels and each level is considered a scene.

2. The scene object is very similar to the game loop. A scene object consists of three predefined functions that we need to implement as per our game's logic:

   1. preload: All the initialization steps are implemented in this function, such as the initializing of variables and the loading of images, audio, and any other assets.

   2. create: This function helps to create and draw the graphics on the HTML web page. This is similar to the draw() function that we discussed earlier.

   3. update: This function updates the game continuously. Here, we do not need to manually set the intervals to update the game loop.

Now let's go ahead and build the skeleton for our game, which we will develop further in the upcoming lessons.