尝试从 PNG 文件创建精灵，它总是最后一个字母

Question

作为 pixi.js 新手，我感觉自己做错了一些明显的事情 -

对于文字游戏，我尝试使用以下代码从 PNG 文件（1980 x 60 像素大）中加载 33 个字母的图片（每个字母为 60 x 60 像素）：

var stage = new PIXI.Container();
var renderer = new PIXI.WebGLRenderer(1020, 1020);
var boardDiv = document.getElementById('board');
boardDiv.appendChild(renderer.view);

var darkSmallLetters = new Array(33);
var darkLargeLetters = new Array(33);
var whiteSmallLetters = new Array(33);

PIXI.loader
    .add('board' ,'/drawable-mdpi/game_board.png')
    .add('dark_small_letters', '/drawable-mdpi/dark-letters-1980x60.png')
    .add('white_small_letters', '/drawable-mdpi/white-letters-1980x60.png')
    .load(init);

function init() {
    var board = new PIXI.Sprite(PIXI.loader.resources.board.texture);
    stage.addChild(board);

    for (var i = 0; i < 33; i++) {
        var rect = new PIXI.Rectangle(i * 60, 0, 60, 60);

        PIXI.loader.resources.dark_small_letters.texture.frame = rect;
        darkSmallLetters[i] = new PIXI.Sprite(PIXI.loader.resources.dark_small_letters.texture);
        darkSmallLetters[i].x = i * 60;
        darkSmallLetters[i].y = i * 60;
        stage.addChild(darkSmallLetters[i]);

        PIXI.loader.resources.white_small_letters.texture.frame = rect;
        whiteSmallLetters[i] = new PIXI.Sprite(PIXI.loader.resources.white_small_letters.texture);
        whiteSmallLetters[i].x = 100 + i * 60;
        whiteSmallLetters[i].y = i * 60;
        stage.addChild(whiteSmallLetters[i]);
    }

    renderer.render(stage);
}

然而，只有最后一个字母（z）被全面绘制。

我不想使用TexturePacker或类似的程序，因为我的图形资源非常简单（只是一个游戏板和2个水平条纹的字母图片：1234567abcdefghijklmnopqrstuvwxyz）。

请问我在上面的代码中做错了什么？

Answer 1

为什么不使用 http://pixijs.github.io/docs/PIXI.extras.BitmapText.html 您可以查看 BitmapText 示例：https://pixijs.github.io/examples/#/demos/text-demo.js

您所做的所有这些计算都已在 BitmapText 中为您完成

如果你真的需要这样做，你必须通过 Pixi.BaseTexture

创建 Pixi.Texture

尝试从 PNG 文件创建精灵，它总是最后一个字母

Trying to create sprites from a PNG file and it is always the last letter

textures

sprite

sprite-sheet

pixi.js