试图从一个PNG文件创建的精灵，它始终是最后一个字母

Question

由于pixi.js新手我有一种感觉，做一些明显的事情错了 -

对于一个文字游戏，我试图加载的33张照片字母（各为60×60像素）从PNG文件（1980×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