Falling Dots 2 hour game

Making a Phaser game in an 2 hours

Most of the time I spend about a week or two on a game for my office, mostly refining things based on suggestions the team has made. When I’m doing my own games, however, there are times that I want to bust out a game in an hour or two.

Of course, if we are going to only spend 120 minutes on a game, we are somewhat limited in the games we can make. To make it a bit easier, there are several things I always do.

Prepare the graphics and sounds ahead of time. I keep asset folders I call game kits that I may someday make a game out of or not. When I feel inspired to make a game I look through these.

I use the Phaser snippets, although I don’t do this as much as I use to, it is good for reference.

I keep a code library of game parts, that I recently released publicly as the Ultimate Game Parts Template. I’ll be using the free version to make this game.

The Game – Falling Dots

To play the game you click on the rings to flip the colors to match the top of the ring to the color of the falling dots. Both dots have to match or the game is over.

Setting Up

Download the template and make a copy of the template folder. Name the folder fallingDots

Loading the images

Open the code in your favorite editor. Then copy the images into images/main. Next, locate the js/states folder

The first file we want is stateLoad.js

Here is where we can set up all the assets.

We can still use:

but to save time I’ve set up some shortcuts, the first of which is loadMain which simply loads an image from image/main/ and give it the same key as the base name. The function looks like this:

So to load the images we just paste this into the end of the preload section of stateLoad.js

ring.png
ring.png

 

logo.png
logo.png

For the sprite sheets, we need to load them the same way we always have.

dots.png
dots.png

Loading Audio

For the audio, I also set up 2 helper functions. 1 for .mp3 files and 1 for .wav files. Note: These are already in the template.

This will load an audio file from the audio/sfx folder making the key the same name as the file

So we load our audio files like this:

and the background music

the last step is to locate this line in the stateLoad.js create file (line 52) and change the audio key if needed

Note: the media manager is a class that manages the sound in the game

 

StateLoad.js should now look like this:

 

Making the game.

Aligning and scaling

Now that the assets are loaded the first thing that we will do is make an alignment grid. This will allow us to position the game elements regardless of the size of the game. That means by using this method our game elements will be placed in the correct place on phone, table, and computer.

Find out more about the Align Grid

Place this in the create function of stateMain

For debugging we can turn on the grid

And this is the result:

Now, let’s add in the rings, and we will set the background color to gray

The reason for setting the rings’ x and y positions at 0,0 is because we will be placing the rings with the grid class

this.agrid.placeAt(x,y,sprite);

the x and y positions start at 0

We also need to scale the rings by getting the game.width to sprite.width ratio. You can find this by using the Align utility

This will log out to the browser’s developer panel

I get the output:0.2916666666666667

We then set the scale of the rings based on that

You will not see any visible changes unless you switch to view in a mobile view.

Here is how it looks now on the laptop version

If you turn off the scaling, here is how it looks on the iPad. Notice that the rings are smaller than the cells.

With the scaling turned on, the rings are scaled correctly

 

Flipping the ring

To keep track of what color the ring is, we will set a custom property of color in the ring sprite

Let’s now make a function to flip the rings.

When you first create a sprite, the angle is a 0, if the angle is 0, then we change the angle to 180, or vice versa. We will also update the color based on the angle.

Now we set the listeners to flip the rings

In the create function

Clicking the rings will now flip them.

Making the Dots

We need to have two dots fall at the same time, so we will make a group of two dots called a row.

We will also need a group to hold the rows

In the create function

Let’s set up a function to make the rows.

At the end of the create function call the makeRow function

 

Making the rows fall

To be able to change the speed set up a variable in the create function

We will move everything down with the code in the update function

Your game should now look like this

Adding Components

This is where the Ultra template will save you a lot of time with its built-in components

Adding the score box

In the create function

You can change the font size and color or the components in the js\themes\blueTheme.js file

Adding the sound Buttons

In the create function

These buttons will toggle on and off the sound and music

Events

The template is event-driven, and there is an instance of a Phaser.Signal class called eventDispatcher

To Increase the Score

This will be dispatched if the colors match the rings

The score is held in model.score and this event will trigger updates in the scoreBox

in the create function at the top, we need to clear the score if the player hits play again

Playing a sound

to play a sound we dispatch a G.PLAY_SOUND event

We will use the beep key if the colors match and hit if they do not

Increasing the speed

For every five points we will increase the speed. Place this code right after the score is updated

Your stateMain file should now look like this

There are also resources to put together a title screen. See my tutorial on how to put together a title screen here.

Play Now!

 

Leave a Reply