Adding Custom Fonts in Phaser

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

You can download free fonts in ttf format from http://dafont.com. You can convert the ttf to fnt or png formats using the web application http://kvazars.com/littera/.
Load the font in your HTML or CSS

<head>
  <style>
    @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;
    }
  </style>
</head>
<body>
  <span id="preload-font"></span>
</body>

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

this.game.add.text(
  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 gamejolt.com.

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:

http://gamejolt.com/games/adventure/the-homebound-predicament/60296/

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);
  this.sprite.animations.add('player_walk');

  // 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.sprite.animations.stop();
}

This gets called on every frame.

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