Trying Phaser’s mouse event so I decided to make a small quick game. There’s no really grand plan this time for I wanted only for this game to be just a quick simple and I wanted to finish it within the day.

Phaser has a great options for generating random numbers you can read it more in their 

 to randomly use a number between a two values. This is great when creating a random number for your game like for me is I need to randomized 

 to your image/sprite once you create them, I needed this so I can click “hit” my asset during the game.

 method on my emitters often, I didn’t realize that this one can also listen to mouse events. This method used to register a callback function so you need the specific mouse event like 

Last game I already have to deal with time event but last time its more of a stopwatch, this time I needed a count down timer. So if you call the instance of your timer you can get its elapse time automatically as that’s how the timer event work, but if you want to get the count down you need a bit more help, and Phaser already have a built in methods for that. One is 

 this checks the timer event instance has start counting. Of course you’ll need to set your event delay to start on a certain time like 10 seconds. The very important method here is the 

 that you need to convert for your preference time pattern

Anything that you wanted to change in your game during gameplay will go to the 

 pillar like the timer UI if you wanted to show time countdown.

This is the first time I had to change the image size of my asset so 

The game is a “Whack-A-Mole” game you just have to hit/click into the image as it pops up and for only 10 seconds and you got a score every time you hit one ( my highest is 30 ). It’s really simple game really the code is just removing and displaying the asset back but in different position and the random number generator helps me on that. Per usual I have the game up in my 

 but with a fineness. I just want to try out a simple mouse event and decide what to do for my next game as I plan to incorporate mouse event. It doesn’t really matter what your game looks like right now that you’re learning the important is having fun with building, learning the foundation and doing it consistently.

Trying Phaser’s mouse event so I decided to make a small quick game.

Building Game with Phaser: A small quick game

I made a new platformer game. The game might be similar to the first game in the sense platformer but this time I made it with more context like attacking enemies, going up and down a ladder ( object ), some obstacle that kills the player, camera moving with the player and opening doors with keys.

I try to make the game as simple as possible so it have a minimalistic feels to it I think. Anyway I found a free asset in 

. I had some issue with sprites during build but not because of the asset, because of my lack of skills on sprites and how to properly use them.

My level design sucks so bad but hey at least I have a level. Though I had some improvement during the level building.

I choose to make a platformer game again so that I can reuse some of my old code and familiarize more in making games with Phaser. I added some new feature on the game rather than just sticking on all the feature of the first one.

The game is more of a “adventure” type game unlike before that you just need to collect all items in a level, this time you only have to collect one key to open the door so you can move to the next level. Also obstacle not only move back and fort this time the enemy moves when a player got close to them then attack. Yes player can also attack the enemy. Anyway too much information just play the game.

Camera integration to a player character 

Setting up a camera into a player that follows them is pretty easy, just using the Phaser built in camera method and adding which object they should follow.

AI is pretty big word, but its actually just an if else statement I’d use to make the enemy move and interact with the player.

It’s really annoying to making sure your sprite goes or do what you wanted, but handling them especially if the you don’t under the sprite your using can be so frustrating. My experience is I just find out if you flip the sprite it doesn’t mean that it will behave as you wanted it to be so best to make sure to test the sprite that you’re going to use.

Attack zone is the imaginary box that you make so that when a Player attack an attack zone box will quickly enabled and when a enemy hit box collapse or overlap with it the enemy died and same to the player hit box. The difference is that enemy attack zone is automated while the player is triggered.

 I actually spent time making the ladder object work and I still don’t really get it. Ladder is really complex as you need so many things to check, whether the player is inside or outside the ladder object, the player is on top the ladder, what the player can do when inside the ladder. Here is the best resources I’ve found 

Phaser have a default fonts but it doesn’t limit you to use your bitmap as fonts, it’s easy like adding your images or sprites into the game, the issue is you have to stick to pixel size you have when you created the fonts ( basically it doesn’t scale so going to stick on that pixel you have ) I have a post regarding setting up your custom fonts 

The goal in the game is very simple, player looks for the key and open the level door. But this time enemies will attack the player if the player get too close to them, but player can attack back too, also hazards like spikes are added in the game to make the game “interesting”. The final score will show the UI for total kills, retries, and I also show how long they finish the game.

The game still have a lot of room for improvement for sure. It still have some issues that I can’t figure out right now, so I’ll try to fix in the future if I can and learn about how to go about the issue. Right now the first build can be played from start to finish. Hopefully in the future if I learned new stuff I can update this game and work on some of the issue.

My second game built in PhaserJs and what I learned building the same game concept.

Building Game with Phaser: My 2nd Platformer game

You can use google fonts in your Phaser game

Download the google font and import in your game assets and preload them.

Without downloading and adding fonts file in your asset you can also use google fonts CDN and add it to your 

Why do you need to preload them fonts? Well Phaser renders text to canvas element and your font must be fully downloaded and loaded into the browser memory before Phaser draws the text.

Bitmap text is a image of letters that are created for the purpose of using them as alternative font for your game or any old digital interfaces. But in this case we’re using it for our Phaser game.

This is very straight forward to preload the image and it’s data file if any.

A data file is a file with details of the specific characters coordinates. But this data file is not always needed specially if your text / font used a fixed-width grid layout.

Next is to create or draw the bitmap font to the game. If you’re using the custom font you’ve imported and doesn't have a data file you’ll need to add configuration so Phaser knows how to draw each letters.

If you have bitmap text data file ( as long the xml or json follows the correct data pattern with Phaser) you don’t have to do this the config setup dance

It really depends on your need for your game. If you want to use specific font that is only available for you or you made it specifically for your game then I suggest better use bitmap import. But in most cases default font for the browser will suffice.

Sometimes the free font from google or the default Phaser mono font is not enough for your game and you wanted to use your own made font ( even though its ugly ). 

Building Game with Phaser: Integrating Custom fonts for your game

At the moment the missus uses a worksheet to store her tasks and meeting notes for her work. This application will help her store it on a cloud database for portability and additional features that she wants like sorting by categories or adding priority level to her task.

My goal for this project is to learn the NextJs Server Component use Appwrite as my database and do all my code using Typescript.

A task list application for storing work-related tasks and notes. Unlike a simple to-do list application this will be able to add categories and priorities for sorting and reporting purposes. 

Hi, I'm Owa Aquino.

👉 This website is here to help me become a better developer.

💻 What I'm working on

Tasks List

📝Latest Posts

Building Game with Phaser: A small quick game

Building Game with Phaser: My 2nd Platformer game

Building Game with Phaser: Integrating Custom fonts for your game