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

In a Zelda game, some enemies are triggered when Link comes near on the range of enemy. Either they attack with arrows or move to where Link is and attack. I want to try this to my game, but mine is just a simple one, I wanted to make enemy move to the players place and do an attack.

This method checks for the pixels distance of object 1 and object 2.

 here because I just want to know points between the two object. There’s a lot of other type of function you can use. ( check the Phaser official 

Move the enemy object to specific destination or in our case the player object.

With that in mind what we need now is animation for your enemy

So what I’m doing is when the distance between the two object ( player and enemy ) is 

 the enemy object will move next to the player object.

This is post is just the gist of it, there’s a lot of other scenario that you can think of from this, like adding attacking functionality when enemy is beside or near the player. This is just the basic way to make a enemy or object move to a certain destination.

I wanted to make enemies move to the players place and do an attack.

Building Game with Phaser: Enemy Range Detection

 on google verse about how to implement player climbing ladder. It’s very straight forward particularly the 

 statement to check if the player status is climbing, walking or jumping then made a lot of rules if what to do if player is on or inside the ladder ( read the article it's much more than what I wrote ).

Though I have different setup, I didn’t really use 

 so I ended up spaghetti code ( you’re welcome ).

When you want to make to object clash you use 

 . But ladder? it overlaps and collides. Collide with the top of the ladder so player can stand on them, overlap so player can walk through them and climb them.

I used the helper function from the example in the article, to check if the player is on top ladder.

check as process callback to check whether the player is on top of ladder or not.

For overlap I continuously check them in 

 if the player and ladder object are overlapping / touching.

To actually climb the ladder player object gravity is set to 

 so that we can pass this status to the player object and allowing us to move into the zone up and down.

 we can make the player move with up and down.

This works for me at the moment, I spent a great time implementing this as I don’t want to use state base for player which I think much more easier if I did state based. But I persist and came up with this piece of 

Note as well when building the stage or level for your game with ladders make sure you have even platform and ladder height because I got an issue before that the player fell down and got stuck into the ladder when you’re just trying to walk the top of it.

How to make a ladder in a platformer game.             

Building Game with Phaser: Player and Ladder

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: Integrating Custom fonts for your game

Building Game with Phaser: Enemy Range Detection

Building Game with Phaser: Player and Ladder