0

apologize if my question is a little generic.

I'm trying to move from createJS to PixiJS. In createJS, I usually create bitmap texts starting from .png images, where each image corresponds to a single char. Using texturePacker, I create a spriteSheet .png file and json data, in which each frame is a char. Then I can use the spritesheet object to create directly a bitmap text, like the example below:

var data = {
    "images": [
        "digit.png"
    ],
    "frames": [
        [1, 1, 52, 58, 0, 0, -5],
        [1, 61, 38, 62, 0, 0, -3],
        [1, 125, 48, 68, 0, 0, 0],
        [1, 195, 44, 62, 0, 0, -3],
        [1, 259, 54, 64, 0, 0, -2],
        [1, 325, 52, 68, 0, 0, 0],
        [1, 395, 48, 57, 0, 0, -5],
        [1, 454, 50, 60, 0, 0, -4],
        [1, 516, 44, 58, 0, 0, -5],
        [1, 576, 48, 57, 0, 0, -6],
        [1, 635, 24, 32, 0, 0, -34]
    ],
    "animations": {
        "a": { "frames": [0] },
        "b": { "frames": [1] },
        "c": { "frames": [2] },
        "d": { "frames": [3] },
        "e": { "frames": [4] },
        "f": { "frames": [5] },
        "g": { "frames": [6] },
        "1": { "frames": [7] },
        "2": { "frames": [8] },
        "!": { "frames": [9] },
        "?": { "frames": [10] }
       }
    }

var spriteSheet = new createjs.SpriteSheet(data);
var bitmapText = new createjs.BitmapText("Hello World!", spriteSheet);

This is the whole process (very easy). I was wondering if I can achieve something similar in Pixi.js where it seems that a .fnt file is required.

0 Answers0