CreateJs Bitmap Text

createjs is a great library for creating games in HTML5. It’s flash like syntax makes it more easier for flash developers to create HTML5 games.

One of the ways to add text to createjs games is using createjs textfield class. The built in textfield class depends on webfont which behaves differently across browsers and does not look smooth.

Another approach is using bitmap fonts but there is no built-in support for bitmap fonts in createjs.  There is one great article for creating bitmap fonts in createjs. It explained how to create a bitmap text field in createjs. But the disadvantage with this method is that all the letters need to be of fixed size and there is no support for kerning. It means we can not follow this approach for creating bitmap fonts with regular font like Arial.

So I ported bitmap text class in starling to createjs.

Here is the git repository for the source and the example.

The demo can be found here.

Features:

  • Multiline text
  • Horizontal and Vertical alignments
  • Kerning
  • Change color of the text using setColor method [Updated!]

If you found any bugs or want to leave some feedback please leave a comment!

25 thoughts on “CreateJs Bitmap Text”

  5. Hi Lanny!
    I have seen that implementation and As I have seen it supports fonts with equal width and there is no support for kerning. WIth this implementation you can create bitmap fonts with normal system fonts and it does support kerning!

    Reply

  7. Hi, i am trying to use your (nice ;)) code but i get errors in BitmpapChar getWidth and getHeight :

    return this.mTexture.spriteSheet.getFrame(this.mTexture.currentFrame).rect.width returns
    an error i got to change it to

    return this.mTexture.spriteSheet._frames[this.mTexture.currentFrame].rect.width

    Still afer that i cannot see the text on stage, any ideas?
    Is this still working with latest createjs minified bundle?

    Many thanks!

    Reply

  10. Hi there – is this still being maintained? It’s a great little tool but there are two minor bugs. (1) halign=center can lead to rendering on a fractional pixel, solution is two round or floor the value that is divided by 2. (2) using horizontal letter spacing on centered text will leave the text off-center (the spacing is only added in the right direction – the xOffset needs to be pulled back by 1/2 of the value added and then rounded in order to get this to work correctly. Thanks!

    Reply

    1. Hi Rob,

      Thanks for the suggestions
      I am not working on this currently. Will find some time to update with latest libraries as well as the fixes you mentioned.

      Thanks

      Reply

  11. Hey, i am using your bitmaptext class for easalJS and having one issue with setColor. Is there any way i can set text color of particular characters in text using start and end index?

    Reply

    1. Hi,

      At this moment it does not support multiple colors for the same text field.
      You can probably extend this to create multiple instances of text fields with different colors and attach them to a single sprite!

      Reply

  12. I posted two issues on the github page, but I thought I would post here as well just for due diligence. Where is the BitmapFont class implementation that you seem to take advantage of? And is there any way to make this work with spritesheets, the way the createjs BitmapText implementation does?

    Reply

    1. Hi,
      Thanks for posting the issues. I will try to look into them ASAP.

      I haven’t seen createjs BitmapText implementation. In fact my implementation also uses spritesheet only and each character is a sprite.
      I used it one of my phonegap application and I learned that webfonts performed better on device than my bitmaptext implementation. So I ended up using webfonts than bitmap fonts.

      Reply

      1. Hi, I’ve replaced Createjs and BitmapText to latest version in my app and it works fine.
        Thanks!

  16. Uncaught TypeError: Cannot read property ‘0’ of undefined …error on line below:
    var bitmapFont = new BitmapFont(“images/cooper.png”,”images/cooper.xml”,32);

    what am I doing wrong here?

    Reply

    1. Works in my projects with createjs-2014.12.12
      I think you need to pass the actual bitmap and xml object references as a parameters there, not the path string.

      Reply

Leave a comment