Phaser 3 Nintendo style controller

I’m sure that some of you may be nostalgic for the days of youth when the Nintendo NES was the most popular game system on the planet. My first video game was pong, which was followed quickly by the Atari 2600. I saw the Nintendo controller a bit of a breakout. The way it was set up it allowed not only for player movement and two actions, but it also provided a way to navigate on-screen menus.

When the Nintendo NES first came out in 1985, I was still using a computer without a mouse. (or internet, copy and paste, or hard drives, but I still made games!)

The games of those days may seem a bit simple compared to now, but with the advent of mobile devices simpler retro games have experienced a small rebirth.

This tutorial is part 3 on a series of platform games. You can find part1 on animation and part 2 on setting up a platform game on this site.

The code uses the Utility Template which is a template of my own devising that saves a bit of time with a few utility classes.

Game Controller Class

First, let’s make a new class so we easily use this in other games. Name a new file called gamePad.js. We will extend it by a UIBlock class to be able to use it as a lightweight container.

Preload the images

Next, let’s preload the images for the game controller in the sceneMain file’s preload function. Although all the images above all included, I’m only going to use the cross and buttons.

Put the controller into the scene

Now add the controller to the scene. At this point, it will be just an empty object. We will pass both the scene and the alignGrid into the constructor. We will use the grid to line up the images to the grid. For now, the controller will be positioned at an x and y position of 0,0 so we can properly line up the graphics. Later we will position the gamePad in the game.

Make class members

We will need to access the config variables in the rest of the functions. We will create class members to promote the config properties.

Add the graphics to the game pad

Now we can start adding in the graphics into the gamePad class.

Turn on the grid

First, go back to sceneMain and make sure the alignGrid’s numbers are turned on to help with positioning.

Here is how we will position the images on the grid.

add the cross

Add the cross into position 12, and scale it to 15% of the game’s width, by using the Align class

Add the buttons

Next, add in 2 red button images and positions 18 and 20 and scale them to 10% of the game’s width.

Add invisible buttons

Because the cross is one image it is difficult to determine which section of the cross is being pressed. To keep things simple let’s place a white square over each of the places that can be pressed. We will later set the transparencies to hide the squares.

Here is how the controller should look now.

Now let’s hide the buttons by setting them to a very low alpha value. The reason we will not set visible to false is that doing so will not allow the images to be clicked.

add the back

The last image we need to bring in is the grey background. Place this at the very top of adding the images, to ensure it goes behind all the other images.

Place the controller


Hook up the buttons

set buttons to interactive

Make all the buttons clickable by using setInteractive()

Add listeners

Add listeners to each button that will call a function.

Add functions

Lastly, add those functions to be called. For now, we will just log out which button is being pressed.

Below is the entire code so far



You can download the source below

Leave a Reply