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

Sublime Text 2: My Code Editor of Choice

Many have asked me what code editor I use for HTML/Javascript/CSS development.  My response: Sublime Text 2.  Here’s why:

1. Beautiful

The layout is so simple and the default theme makes it easy to read.  The right-most panel allows easy scrolling throughout your file.

2. Super Fast

I have previously used Eclipse for HTML/JS/CSS editing, but once I switched to Sublime, I noticed a huge difference in performance.  Sublime is incredibly fast and light, even with its code hinting, where Eclipse tends to pause in and out.

3. Awesome Shortcuts

– Command + P (or Control P for Linux/Windows) and then [start typing name of file] allows you to find files in your project.

– Command + P (or Control P for Linux/Windows) and then “@” gives you a list of all methods in the opened file.

– Command + P (or Control P for Linux/Windows) and then “:” and then a number jumps to that line number in the opened file.

– Command + [a number] to switch to another opened file (“1” being the first opened file, “2” being the second, and so on).

– Shift + Command + F allows you to search through your files in specified directories.

Any other popular shortcuts out there?

4. Multiple Layouts

Sometimes, I want to see the HTML and Javascript at the same time, or the HTML and the CSS at the same time.  Sublime allows for multiple column layout, for up to 4 columns, 3 rows, and a grid of 4 files.

5. Easy Plugins with Package Control

For installing plugins easily, download Package Control here: http://wbond.net/sublime_packages/package_control.  After installation, Command + Shift + P and type “install” to select “Package Control: Install Package.”  It will list tons of available plugins for you.

6. SublimeLinter Plugin

Speaking of plugins, a great one for finding potential errors is SublimeLinter – https://github.com/SublimeLinter/SublimeLinter.  To install, use Command + Shift + P and type “install” to select “Package Control: Install Package.”  In the list that it returns, type “SublimeLinter” and select it.  And that’s it, it’s installed!  Sublime will also keep this up to date for you.

Any other plugin recommendations?

So in short, I’m a huge fan of Sublime Text 2.  Why not give it a spin?