Jump to content

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

Alexander Farber

Recommended Posts

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');
    var darkSmallLetters = new Array(33);
    var darkLargeLetters = new Array(33);
    var whiteSmallLetters = new Array(33);
        .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')
    function init() {
        var board = new PIXI.Sprite(PIXI.loader.resources.board.texture);
        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;
            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;

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

Link to comment
Share on other sites

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


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...