Jump to content

Every sprite change on texture.setFrame


Recommended Posts

Hi, I am new to HTML5 game developement. I want to make a simple game using PIXI.js.


What I try to do is to get 3 different squares sprites from tilesset. Somehow every block creation changes the sprites of the blocks which were created before.. 

Here is my code:

( function() {        var stage = new PIXI.Stage( 0xF5F5F5 ),            renderer = PIXI.autoDetectRenderer( 400, 500 ),            loader = new PIXI.AssetLoader( ["spritesheet.png"] );                        //Block positions in spritesheet            RED_BLOCK = {                "x" : 42,                "y" : 30            },            YELLOW_BLOCK = {                "x" : 58,                "y" : 30            },            ORANGE_BLOCK = {                "x" : 74,                "y" : 30            };                    loader.onComplete = spriteLoaded;        loader.load();        document.body.appendChild(renderer.view);        function spriteLoaded() {            var r1 = new block(RED_BLOCK);            var y1 = new block(YELLOW_BLOCK);            var o1 = new block(ORANGE_BLOCK);            stage.addChild(r1.sprite);            y1.sprite.x = 16;            o1.sprite.x = 32;            stage.addChild(y1.sprite);            stage.addChild(o1.sprite);            renderer.render(stage);        }        function block(blockColor) {            var tilesSet = PIXI.TextureCache["spritesheet.png"];            var square = new PIXI.Rectangle( blockColor.x, blockColor.y, 16, 16);            square.x = blockColor.x;            square.y = blockColor.y;            tilesSet.setFrame(square);            this.sprite = new PIXI.Sprite(tilesSet);        }    })();

If there is some better (best) practice to use sprites from tilesset I would be thankful for explaining it.

Thanks in advance!

Link to comment
Share on other sites

They all have the same texture, so when you change it they are all effected, because they are all using the exact same texture object. LIkely what you want is the same *Base*Texture not the same Texture:

        function block(blockColor) {            var tilesSet = new PIXI.Texture(                PIXI.BaseTextureCache["spritesheet.png"],                new PIXI.Rectangle(blockColor.x, blockColor.y, 16, 16)            );            this.sprite = new PIXI.Sprite(tilesSet);        }

Where are you getting confused?

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...