Successfully Integrating Phaser 3 into your React/Redux App (Part 2)

A tutorial on building a Phaser game within your React/Redux app.

This is part two of a three part tutorial. To start from the beginning, checkout my first post here. Or skip to part three here.

This section will focus on creating the entities and MainScene. By the end of part two, your Phaser game will have a background image, platforms, fireflies, and your player of course!

Step six: Entities

Entities are class constructors that allow us to assign properties and methods to a certain type of character or object in our game. By applying an entity class to multiple sprites in the game, we keep our code dry.

Player

In game/entities/Player.js, import ‘phaser’. Then define a Player class that extends Phaser.Physics.Arcade.Sprite.

Your constructor should be prepared to take four arguments: the scene they exist in, the x and y coordinates, and the spriteKey.

Line 7 adds the entity to the given scene, and line 8 applies the game’s physics to the Player. The game’s physics were set in the config in game/index.js.

Remember to export your Player class so that it can be imported into MainScene.

Ground

In game/entities/Ground.js, import ‘phaser’. Then define a Ground class that extends Phaser.Physics.Arcade.Sprite.

Your constructor should be prepared to take four arguments: the scene they exist in, the x and y coordinates, and the spriteKey.

Line 7 adds the entity to the given scene.

Remember to export your Ground class so that it can be imported into MainScene.

Fireflies

In game/entities/Firefly.js, import ‘phaser’. Then define a Firefly class that extends Phaser.Physics.Arcade.Sprite.

Your constructor should be prepared to take four arguments: the scene they exist in, the x and y coordinates, and the spriteKey.

Line 7 adds the entity to the given scene.

Remember to export your Firefly class so that it can be imported into MainScene.

Step seven: Set up your MainScene

In MainScene.js, import phaser and your entities.

Define a MainScene class that extends Phaser.Scene. Phaser’s three main functions for creating a game are preload, create, and update. These will now be methods on our MainScene class.

Be sure to pass your sceneKey (‘MainScene’) into the super of your constructor. Then, load all of your sprites and images into the preload method.

Now we will set up the create method.

At the top of your create method, define the world bounds, add the background image, and create a new instance of your Player class. The methods setBounce and setGravity both affect the way your player moves in the game, and are stylistic choices. setColliderWorldBounds prevents your player from disappearing outside the edge of the game.

Once you’ve added your player, add some ground for them to stand on.

Then create some fireflies for them to catch.

Finally, the last thing to add to your create method is colliders, so that your player can’t walk through walls.

At this point, when you launch your app, you should see all your entities in the MainScene!

To add functionality, checkout part three of this tutorial here.