Creates a PIXI.BitmapText

Renders a line or multiple lines of text using bitmap font.

The primary advantage of this class over Text is that all of your textures are pre-generated and loading, meaning that rendering is fast, and changing text has no performance implications.

Supporting character sets other than latin, such as CJK languages, may be impractical due to the number of characters.

To split a line you can use ‘\n’, ‘\r’ or ‘\r\n’ in your string.

PixiJS can auto-generate fonts on-the-fly using BitmapFont or use fnt files provided by: for Windows or for Mac.

You can also use SDF, MSDF and MTSDF BitmapFonts for vector-like scaling appearance provided by: for SDF and MSDF fnt files or for SDF, MSDF and MTSDF json files

A BitmapText can only be created when the font is loaded.


  import { Application, Loader, BitmapText } from 'svelte-pixi'

    [['desyrel', '/assets/desyrel.xml']]
    text={"the fox jumps over\nthe lazy dog"}
    style={{ fontName: 'Desyrel', fontSize: 48, align: 'center' }}

Component API


Name Type Default Description
anchor PointLike The anchor sets the origin point of the text.
instance PIXI.BitmapText The PIXI.BitmapText instance. Can be set or bound to.
roundPixels boolean If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation.
Advantages can include sharper image quality (like text) and faster rendering on canvas.
The main disadvantage is movement of objects may appear less smooth.
style PIXI.IBitmapTextStyle Sets the style
text string The text of the BitmapText object.

Additional props are passed on to Container


Name Props Fallback


Name Type Detail
added forwarded
click forwarded
mousedown forwarded
mousemove forwarded
mouseout forwarded
mouseover forwarded
mouseup forwarded
mouseupoutside forwarded
pointercancel forwarded
pointerdown forwarded
pointermove forwarded
pointerout forwarded
pointerover forwarded
pointertap forwarded
pointerup forwarded
pointerupoutside forwarded
removed forwarded
removedFrom forwarded
rightclick forwarded
rightdown forwarded
rightup forwarded
rightupoutside forwarded
tap forwarded
touchcancel forwarded
touchend forwarded
touchendoutside forwarded
touchmove forwarded
touchstart forwarded