Displaying random sprite from Atlas

[Rafaelx]

I'm trying to add 1 out of the 5 images in atlas randomly, but they all show up one on top of the other, is there a way to fix this? Basically I want 1 of the sprites to display could be any of the 5 every time I run my level, but all I get is all 5 at the same time.

 

 


///Declaration

 this.load.atlas('Monsters', 'images/monsters.png', 'images/monsters.json');


////Where I call sprite

 this.figuritaspega = this.game.add.sprite(0, 0, 'Monsters');
        this.figuritaspega.frame = this.rnd.integerInRange(0,4);
         this.figuritaspega = this.game.add.group;
        this.figuraarriba = this.add.sprite(1015, 140, this.figuritaspega);
        this.figuraarriba.scale.set(0.9 , 0.9 );

////.json below

{"frames": [

{
	"filename": "amarillo.png",
	"frame": {"x":0,"y":0,"w":188,"h":200},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":188,"h":200},
	"sourceSize": {"w":188,"h":200}
},
{
	"filename": "azul.png",
	"frame": {"x":188,"y":0,"w":240,"h":200},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":240,"h":200},
	"sourceSize": {"w":240,"h":200}
},
{
	"filename": "naranja.png",
	"frame": {"x":428,"y":0,"w":162,"h":200},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":162,"h":200},
	"sourceSize": {"w":162,"h":200}
},
{
	"filename": "rojo.png",
	"frame": {"x":590,"y":0,"w":190,"h":200},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":190,"h":200},
	"sourceSize": {"w":190,"h":200}
},
{
	"filename": "rosa.png",
	"frame": {"x":780,"y":0,"w":231,"h":200},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":231,"h":200},
	"sourceSize": {"w":231,"h":200}
}],
"meta": {
	"app": "http://www.codeandweb.com/texturepacker",
	"version": "1.0",
	"image": "monsters.png",
	"format": "RGBA8888",
	"size": {"w":1011,"h":200},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:41785e106df91b6daf42364753f15c41:5fca3c08999ac8d93eabfac98fafaf65:8fc4d3ec51ba7bc700054b5f64cf62b1$"
}
}

 

Edited August 10, 2016 by Rafaelx
edited tile I was wrong on old title.

[drhayes]

You need one more param on your sprite creation:

this.figuritaspega = this.game.add.sprite(0, 0, 'Monsters', 'rojo.png');

 

[Rafaelx]

Ok sure this is to display one, but what if I want a different one Everytime I go into the level? Is that possible?

[3ddy]

You can create array with all graphic names and then just randomly choose one from this array

[drhayes]

I haven't tried this, but I bet you could use the "getItem" method of Phaser.Cache to get the actual atlas JSON and then pick a frame at random? If that's what you're looking for, so you don't have to hard-code the values beforehand?

[Rafaelx]

Ok let me look into this and yes that is what I want I wand a random sprite to come up every time I run a level.

[Rafaelx]

No idea guys, there has to be an easy way to display random sprites is it really that hard?

[istvan89]

You can provide a frame id (number) instead of frame name (string) when creating your sprite, so this should do what you want:

this.figuritaspega = this.game.add.sprite(0, 0, 'Monsters', this.rnd.integerInRange(0,4));

Also there are problems with the rest of your code. This line wont create a group, it just passes the group creation function reference to the figuritaspega variable:

this.figuritaspega = this.game.add.group;

It should be:

this.figuritaspega = this.game.add.group();

And the rest won't work too, because you try to pass a group to the key parameter of this.add.sprite function:

this.figuraarriba = this.add.sprite(1015, 140, this.figuritaspega);
this.figuraarriba.scale.set(0.9 , 0.9 );

 

[Rafaelx]

That is it thanks a lot, and yes I guess I was not paying attention to those mistakes since I was frustrated with the rnd thing, and now that I see it I see how simple it was thanks a lot works like a charm.

[istvan89]

Great!:)