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

Question

As pixi.js newbie I have a feeling to do some obvious thing wrong -

For a word game I am trying to load pictures of 33 letters (each is 60 x 60 pixels) from a PNG-file (1980 x 60 pixels large) with the following code:

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);
}

However only the last letter (the z) is drawn across the board.

I don't want to use a TexturePacker or similar program, because my graphical resources are very simple (just a game board and 2 horizontal stripes of letter pictures: 1234567abcdefghijklmnopqrstuvwxyz).

What am I doing wrong in the above code please?

Answer 1

why not using the http://pixijs.github.io/docs/PIXI.extras.BitmapText.html You can check the BitmapText examples : https://pixijs.github.io/examples/#/demos/text-demo.js

All those calculations you are doing are already done for you in the BitmapText

If you really need to do it that way you have to create Pixi.Texture via the Pixi.BaseTexture