@pixi/text

What is @pixi/text?

@pixi/text is a package within the PixiJS library that provides functionality for creating and manipulating text objects in a 2D WebGL renderer. It allows developers to add, style, and animate text in their PixiJS applications.

What are @pixi/text's main functionalities?

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

Other packages similar to @pixi/text

three-text2d

three-text2d is a package for Three.js that provides similar text rendering capabilities in a 3D context. It allows for the creation of 2D text in a 3D scene, with support for various styles and animations. Compared to @pixi/text, three-text2d is more suited for 3D applications.

konva

Konva is a 2D canvas library that provides a wide range of functionalities, including text rendering. It allows for the creation of complex text objects with various styles and animations. Konva is more versatile in terms of 2D drawing capabilities compared to @pixi/text, which is more focused on WebGL rendering.

fabric

Fabric.js is a powerful and simple JavaScript HTML5 canvas library. It provides text rendering capabilities along with a wide range of other features for creating and manipulating canvas objects. Fabric.js is more comprehensive in terms of canvas manipulation compared to @pixi/text, which is specialized for PixiJS applications.

README

@pixi/text

Installation

npm install @pixi/text

Usage

import * as text from '@pixi/text';