Every sprite change on texture.setFrame

[toyo]

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!

[Bolko]

I dont understand the problem, can you post a link to an example or at least screenshots?

[xerver]

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?