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

[Alexander Farber]

Hello fello game developers,

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?

Thank you
Alex

[Fatalist]

54 minutes ago, Alexander Farber said:

PIXI.loader.resources.dark_small_letters.texture.frame = rect;

You are modifying only one texture, which is shared by all letters. Create a new texture for each letter instead:

 

var letterTexture = new PIXI.Texture(PIXI.loader.resources.dark_small_letters.texture.baseTexture, rect);
darkSmallLetters[i] = new PIXI.Sprite(letterTexture);

 

[ivan.popelyshev]

What he said.

Create a texture for every letter, they are cheap, its basically rectangle and a link to base texture. Then create all your sprites. You can also use some code from BitmapText https://github.com/pixijs/pixi.js/blob/dev/src/extras/BitmapText.js