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文件创建精灵，它始终是最后一个字母

1 个答案: