@pixi/text

Basic Text Creation

This feature allows you to create a basic text object and add it to the PixiJS stage. The text can be positioned using the x and y properties.

const app = new PIXI.Application();
document.body.appendChild(app.view);
const basicText = new PIXI.Text('Hello Pixi!');
basicText.x = 50;
basicText.y = 100;
app.stage.addChild(basicText);

Styled Text

This feature allows you to create text with various styles such as font family, size, color, stroke, and drop shadow. The TextStyle object is used to define these styles.

const style = new PIXI.TextStyle({
  fontFamily: 'Arial',
  fontSize: 36,
  fill: 'white',
  stroke: '#ff3300',
  strokeThickness: 4,
  dropShadow: true,
  dropShadowColor: '#000000',
  dropShadowBlur: 4,
  dropShadowAngle: Math.PI / 6,
  dropShadowDistance: 6,
});
const richText = new PIXI.Text('Styled Text', style);
richText.x = 50;
richText.y = 150;
app.stage.addChild(richText);

Text Animation

This feature allows you to animate text objects. In this example, the text is rotated continuously using the app's ticker.

const animatedText = new PIXI.Text('Animating Text');
animatedText.x = 50;
animatedText.y = 200;
app.stage.addChild(animatedText);
app.ticker.add(() => {
  animatedText.rotation += 0.01;
});