Prev Chapter – Chapter 5: Sprites and Animation with Pixi.js
Text elements play a crucial role in user interfaces and game narratives. In this chapter, we’ll explore how to integrate text into your Pixi.js games and applications, from displaying simple labels to creating dynamic and stylized text.
Displaying Simple Text
Pixi.js makes it easy to display simple text elements on the canvas. You can create text objects using the PIXI.Text class.
Creating Basic Text
Here’s how to create a basic text element and add it to the stage:
fontFamily: 'Arial',
fontSize: 24,
fill: 0xffffff, // White color (in hexadecimal)
});
basicText.x = 50;
basicText.y = 100;
app.stage.addChild(basicText);
In this code:
- We create a PIXI.Text object with the text content, font family, font size, and fill color specified in the options object.
- We set the position of the text element using the x and y properties.
- Finally, we add the text object to the Pixi.js stage.
Text Styling
You can further style your text elements by adjusting properties such as fontStyle, fontWeight, lineHeight, and dropShadow. These properties allow you to control the appearance of the text to match your game’s visual style.
fontFamily: 'Verdana',
fontSize: 36,
fill: 0xff9900, // Orange color
fontStyle: 'italic',
fontWeight: 'bold',
lineHeight: 45,
dropShadow: true,
dropShadowColor: 0x000000, // Black color
dropShadowBlur: 5,
dropShadowDistance: 2,
});
styledText.x = 100;
styledText.y = 200;
app.stage.addChild(styledText);
In this example, we’ve added additional styling to the text element, including italicized text, bold font weight, increased line height, and a drop shadow effect.
Dynamic Text
Dynamic text is often used to display changing information such as scores, timers, or player names. Pixi.js allows you to update the content of a text element dynamically.
Updating Text Content
To update the content of a text element, simply set the text property to a new value:
fontFamily: 'Arial',
fontSize: 24,
fill: 0xffffff,
});
dynamicText.x = 50;
dynamicText.y = 300;
app.stage.addChild(dynamicText);
// Update the text content dynamically
let score = 0;
setInterval(() => {
score++;
dynamicText.text = `Score: ${score}`;
}, 1000);
In this code, we create a dynamic text element and update its content every second to display an increasing score.
Bitmap Text
For more stylized and customized text, you can use bitmap fonts in Pixi.js. Bitmap fonts are pre-rendered fonts where each character is a separate image. Pixi.js supports bitmap fonts through the PIXI.BitmapText class.
const bitmapFont = new PIXI.BitmapText('PIXI.js', { fontName: 'font' });
bitmapFont.x = 50;
bitmapFont.y = 400;
app.stage.addChild(bitmapFont);
In this example, we load a bitmap font and create a PIXI.BitmapText element with the text “PIXI.js.”
Working with Web Fonts
While Pixi.js supports system fonts and bitmap fonts, you can also use custom web fonts in your games and applications. To use a web font, you’ll need to load it and register it with Pixi.js.
Loading Web Fonts
You can load web fonts using CSS or JavaScript libraries like WebFontLoader. Here’s an example using WebFontLoader:
WebFont.load({
google: {
families: ['Montserrat:300,400,700', 'Open Sans:400,700'],
},
active: () => {
// Web fonts are loaded, continue with Pixi.js code
const webFontText = new PIXI.Text('Web Font Text', {
fontFamily: 'Montserrat',
fontSize: 36,
fill: 0x0099cc, // Blue color
});
webFontText.x = 100;
webFontText.y = 500;
app.stage.addChild(webFontText);
},
});
In this code, we use WebFontLoader to load the Montserrat and Open Sans fonts from Google Fonts. Once the fonts are loaded, we create a text element using the ‘Montserrat’ font.
Conclusion
In this chapter, you’ve learned how to work with text and fonts in Pixi.js. You can create simple text elements, style them, update text dynamically, use bitmap fonts, and even incorporate web fonts to match your game’s visual style and functionality.
Text elements are essential for conveying information, instructions, and storytelling in your games and applications. In the next chapter, we’ll explore user input and interaction, enabling players to control and engage with your Pixi.js creations.