A tutorial on building a Phaser game within your React/Redux app.
This is part three of a three part tutorial. To start from the beginning, checkout my first post here. Or skip to part two here.
In part two, we will focus on creating adding movement, animation, sound, and an opening scene. We will also connect our game to the redux store. By the end of this section, your Phaser game will be fully functional within your React/Redux app!
Step Eight: Movement, Animation, and Sound
Movement, sounds, and animation are streamlined through the use entities.
Player Animation
First, let’s create our character animations. In MainScene.js, …
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…
A tutorial on building a Phaser game within your React/Redux app.
Before working with Phaser 3, all the apps I had built used React and Redux for front-end management. When I began trying to integrate a Phaser 3 game into one of my apps, I found few helpful resources. I even found articles telling me NOT to integrate React/Redux with Phaser. But I was determined. After a lot of research, reading documentation, and trying a bunch of methods that didn’t work, I managed to build a fully functional Phaser game within a React/Redux framework. …
