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();
  }
}

How to add Google Analytics to a Phaser.js and Phonegap Build Project

Sign in to (or sign up for) Google Analytics

Go to Dashboard

Go to Account (or Create a new Account)

Create a new Property – Mobile App  (At first, I had it on Website and got no data.  So, make sure you select Mobile App.)

Fill in the details. Website URL can be fake since it’s a mobile app and not a website. Whatever you put, place it in the code below where it says “yourwebsite.com/this_can_be_a_fake_url.”

You’ll see Tracking ID after clicking button Get Tracking ID. Whatever the Tracking ID is, place it in the code below where it says “UA-x-x.”

Directory can look like this:

- js
  boot.js
  menu.js
-- lib
   phaser-no-physics.min.js
index.html

NOTE:  Notice that the index.html below will include the script src “cordova.js” and “GAPlugin.js.”  You don’t need to have these files physically in your directory; they’ll be generated with the build in Phonegap automatically for you when you create your IPA.  You just need to include the script src in your index.html and that’s it.

Add this to your config.xml:

<!-- Google Analytics -->
<gap:plugin name="com.adobe.plugins.gaplugin" />

Add these to your <body> in index.html:

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="GAPlugin.js"></script>
<script type="text/javascript" src="js/lib/phaser-no-physics.min.js"></script>
<script type="text/javascript" src="js/boot.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script>
  var gaPlugin; // Google analytics stuff
  if(( /(ipad|iphone|ipod|android|windows phone)/i.test(navigator.userAgent) )) {
    // alert('hello world! this is a device');
    document.addEventListener('deviceready', initApp, false);
  } else {
    // alert('hello world! this is NOT a device');
    initApp();
  }

/**
 * Init game, init google analytics
 */
function initApp() {
  game.state.add('menu', Title);

  // Init google analytics
  gaPlugin = window.plugins.gaPlugin;
  gaPlugin.init(onGASuccess, onGAError, "UA-x-x", 10);  // replace UA-x-x with your Tracking ID
}

function onGASuccess() {
  // track page
  gaPlugin.trackPage( gaPluginResultHandler, gaPluginErrorHandler, "yourwebsite.com/this_can_be_a_fake_url");
  continueApp();
}

function onGAError(err) {
  //alert('Error in initializing Google Analytics : ' , err);
  continueApp();
}

function gaPluginResultHandler() {
  // success
}

function gaPluginErrorHandler(err) {
  // error
  //alert('Google Analytics plugin error : ' , err);
}

/**
 * Continue app after google analytics initialization
 */
function continueApp() {
  game.state.start('menu');
}
</script>

In boot.js:

// Phaser game object
var game = new Phaser.Game(GAME_WIDTH, GAME_HEIGHT, Phaser.AUTO, 'game_div', { preload: this.preload, create: this.create, update: this.update, render: this.render }),

  // buttons
  playButton;

// booting / preloading assets
Boot = function () {};
Boot.prototype = {
  preload: function() {
    // loading screen
    game.stage.backgroundColor = '#000';

    // preload all of the game assets

    // menu assets
    game.load.image('playButton', 'assets/images/play-btn.png', 180, 44);
  },
  create: function() {
    // transition to title screen when loaded
    game.state.start('menu');
  }
};

In menu.js:

// Title Page
Title = function(){
};
Title.prototype = {
  preload : function() {
  },
  create : function() {
    // button
    playButton = game.add.button(100, 100, 'playButton', this.transitionGame, this, 0, 0, 0);
  },
  transitionGame : function() {
    // google analytics
    gaPlugin.trackEvent(gaPluginResultHandler, gaPluginErrorHandler, "Button", "Click", "Main Menu - Play Game", new Date().getMilliseconds());
  }
};

Did the code work?  Open your mobile app.  With the app still open, sign in to Google Analytics and go to the Realtime > Overview.  It should say that there is at least one active user online right now (and that’s you!).