Edit on Github


It is very easy to add text to your game. Create an entity which contains the component "Text":

var helloWorldText = Crafty.e('2D, DOM, Text')
    x: 10,
    y: 10

A very simple text example looks like this:

helloWorldText.text('Hello World');

Styling text

The "Text" component provides several methods for styling the text.

You can set the color by using the .textColor() method:


You can customize the text further by passing an object of styles to the ยด.textFont()` method:

  size: '20px',
  weight: 'bold'

Possible keys are:

  • type
  • weight
  • size
  • family
  • lineHeight
  • variant

2D properties

Most of the standard 2D properties and methods will function with text: you can move it, rotate it, attach it to follow other entities, and so on. There are a couple of caveats:

  • Text will work with Canvas and DOM layers. However, styling will work best with the DOM layer, since browsers are extremely good at displaying text!
  • The height and width of the text entity will be set automatically when using Canvas, since the html canvas has no facilities for reflowing text.