Split Bitmap Text

SplitBitmapText renders text as separate bitmap text segments. Use the exposed chars, words, and lines arrays when you need to animate many text segments efficiently.

SplitBitmapText is a Container, not a sprite, so it does not have an outer anchor or anchorX/anchorY prop. Position the split text with x, y, or position; use charAnchor, wordAnchor, and lineAnchor for the segment transform origins.

Please see the PixiJS SplitBitmapText docs for detailed information about the PixiJS API.

SplitBitmapText uses a bitmap font atlas. Install or load the font before rendering the component. It is a good choice for long strings, frequently changing text, or many simultaneous per-character animations.

Demo

Code example

split-bitmap-text-demo.tsx

import { onTick, PixiCanvas, SplitBitmapText, usePixiScreen } from "pixi-solid";
import type * as Pixi from "pixi.js";
import { BitmapFont } from "pixi.js";

const fontName = "SplitBitmapDemoFont";

BitmapFont.install({
  name: fontName,
  style: {
    fontFamily: "Arial",
    fontSize: 42,
    fill: "white",
  },
});

const DemoComponent = () => {
  const pixiScreen = usePixiScreen();
  let splitTextRef: Pixi.SplitBitmapText | undefined;
  let elapsed = 0;

  onTick((ticker) => {
    if (!splitTextRef) return;

    elapsed += ticker.deltaMS;
    splitTextRef.chars.forEach((character, index) => {
      character.y = Math.sin(elapsed * 0.004 + index * 0.45) * 12;
    });
  });

  return (
    <SplitBitmapText
      ref={(instance) => {
        splitTextRef = instance;
      }}
      text="Fast bitmap animation"
      style={{
        fontFamily: fontName,
        fontSize: 42,
        fill: "#fff4b3",
      }}
      charAnchor={{ x: 0.5, y: 1 }}
      x={20}
      y={pixiScreen.height * 0.5}
    />
  );
};

export const Demo = () => (
  <PixiCanvas style={{ "aspect-ratio": "2/1.5" }} background="#4527a0">
    <DemoComponent />
  </PixiCanvas>
);

Bitmap fonts

Install a bitmap font before creating SplitBitmapText:

import { SplitBitmapText } from "pixi-solid";
import { BitmapFont } from "pixi.js";

BitmapFont.install({
  name: "GameFont",
  style: {
    fontFamily: "Arial",
    fontSize: 40,
  },
});

<SplitBitmapText
  text="Fast per-character animation"
  style={{ fontFamily: "GameFont", fontSize: 40, fill: "white" }}
/>

The component exposes the same chars, words, lines, autoSplit, and transform-origin props as SplitText. The character segments use bitmap text, so they inherit BitmapText's font atlas and glyph coverage requirements.