Adding Custom Fonts in Phaser

Obtain the ttf, fnt, and png formats of the font

You can download free fonts in ttf format from You can convert the ttf to fnt or png formats using the web application
Load the font in your HTML or CSS

    @font-face {
      font-family: 'dimbo'; src: url('assets/fonts/dimbo-regular.ttf');
    * {
      margin: 0;
      padding: 0;
      font-family: 'dimbo', sans-serif;
    #game_div {
      margin: auto;
      background: #000;
    #preload-font {
      font-family: 'dimbo', sans-serif;
      text-indent: -9999px;
      font-size: 0;
  <span id="preload-font"></span>

Preload the font in your JS code

preload : function() {
  game.load.bitmapFont('dimbo', 'assets/fonts/dimbo.png', 'assets/fonts/dimbo.fnt');

Add the text to the screen
  10, // x
  10, // y
  'Test', // text
  { // font, style, alignment
    font: "14px dimbo",
    fill: '#ff0000',
    align: 'center'

My Adventure Jam Entry: The Homebound Predicament

For the past week during my free time, I have been working on a point-and-click adventure game in Javascript as part of the Adventure Jam, a game jam on

The Homebound Predicament Title Screen
The Homebound Predicament Title Screen

I developed this game in Javascript and used the Phaser game engine.  I chose Javascript because I was already comfortable using it and I write in it everyday at work.  I chose Phaser because I was in the mindset of it since I have been using it with my other game, Scuba Chibi.

As far as artwork, I drew everything in Flash.  I chose Flash because it was the only vector art program that I had, and I wanted to be able to resize things if needed without getting any artifacts.  I decided to use a black-and-white sketching style primarily because I didn’t have much time to make clean lines and to color, and I also liked the look of it.

Since my free time was very limited and I am but a one-person team, my game design was cut down by about 80%.  I initially had 6 scenes, but as the days went by, I had to cut that down to 3.  I initially had 10 collectible items, but that went down to 2.  I definitely wanted to keep the jar, though, because of its ability to interact with other objects such as filling it up with liquids and emptying them out into other objects.  I also had about 5 endings at first, but then I cut that down to 2.  Ultimately, I just wanted to have a playable and complete game, even if it was short.

Eventually, I would like to expand the game and put back in the things that I had to take out in order to meet the 4/17 deadline.  So, your feedback and comments are greatly appreciated!  Thanks for playing!  🙂

Gamejolt Link:

How to Move Player to Mouse Click or Tap in Phaser

Make a player.js module.

// Player
Player = function() {
  // we'll keep track of the player moving, since update() gets called on every frame
  this.isMoving = null;
Player.prototype = {

Here are some functions that will go into Player.prototype:

Initialize the player_walk sprite, which contains side-by-side frames of a player walking.

create: function() {
  // ... add player "this.sprite" to the game world ...
  // we've just started; don't let the player move yet
  this.isMoving = false;

  // walk animation
  this.sprite.loadTexture('player_walk', 0);

  // move character on input down/tap
  game.input.onDown.add(this.moveCharacter, this);

This is what happens when you click the screen with the mouse or tap on the screen.

moveCharacter: function(pointer) {
  // the player is moving now!
  this.isMoving = true;

  // 300 means 300 pixels per second. This is the speed the sprite will move at, regardless of the distance it has to travel.
  var duration = (game.physics.arcade.distanceToPointer(this.sprite, pointer) / 300) * 1000;

  // pointer.x and pointer.y are the input x and y values coming from the mouse click or tap.
  tween = game.add.tween(this.sprite).to({ x: pointer.x, y: pointer.y }, duration, Phaser.Easing.Linear.None, true);

  // once tween is completed, call moveCharacterComplete()
  tween.onComplete.add(this.moveCharacterComplete, this);

Let’s stop the player from walking once he’s reached his destination.

moveCharacterComplete: function() {
  this.isMoving = false;

This gets called on every frame.

update: function() {
  if (this.isMoving) {
    // play sprite at 12 frames per second'player_walk', 12, true);
  } else {