Accessing sprites in sprite sheet?

[dandorf]

I have an image, which childbirth in 16 parts, and created a sprite sheet. 

 

game.load.spritesheet('Cuadro', 'Cuadro.png', 81, 65, 16);

 

Now I want to access each sprite (those 16). How should I do it? 

 

I want to show that 16 sprites in a specific order, and do not know how to access those 16 sprites resulting image. 

 

Any help? 

 

Sorry for my English.

[charlie_says]

var sprite = game.add.sprite(100,100,'Cuadro');

sprite.frame = 0;// or any number up to 15 to access a specific frame

or,

sprite.animations.add('ani', [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15], 1, true);

sprite.play('ani');// plays all the frames, at 1 frame per second, looping.

[dandorf]

Thank you. 

 

But .. that way I can only display one at a time, no? 

 

I would like to display them all at once.

[charlie_says]

Then, you don't really need  a spritesheet,

 

game.load.image('Cuadro', 'Cuadro.png');

game.add.image("Cuadro",100,100);

[dandorf]

My idea is to get the sprites from an image. 

 

If I do as you indicate me, then I would have to make separate sprites from the outset. And the idea is to get these sprites from an image. Do you understand what I say? 

 

I thought I could create the sprite sheet and then do a "for": 

 

sprite.frame = i;    where "i" would be increased 

 

And would get these sprites in an array or something ...

[dandorf]

Any help please?

[ragnarok]

I think this does something similiar to what you want:

http://examples.phaser.io/_site/view_lite.html?d=animation&f=multiple+anims.js&t=multiple anims

 

Or, you could do, I guess:

var enemy1,enemy2, player;   function preload() {        ...        this.load.spritesheet('allsprites', 'assets/sprites/all.png',16,16,16);        ...   }  function create() {     ...     enemy1=game.add.sprite(20, 40, 'allsprites');     enemy1.animations.add('beYourself', [11]);     enemy2=game.add.sprite(50, 40, 'allsprites');     enemy2.animations.add('beYourself', [12]);     player=game.add.sprite(50, 40, 'allsprites');     player.animations.add('beYourself', [1]);     ...  }function update(){  player.animations.play('beYourself',1);  enemy1.animations.play('beYourself',1);  enemy2.animations.play('beYourself',1);  ...}

But I think, working with an atlas is cleaner. Shoebox might help with making the needed JSON- or XML-File: http://renderhjs.net/shoebox/

 

Edit: Or I totally misunderstood your request and you could simplier do:

var anim;   function preload() {        ...        game.load.spritesheet('Cuadro', 'Cuadro.png', 81, 65, 16);        ...   }  function create() {     anim=game.add.sprite(20, 40, 'Cuardo');     anim.animations.('birth', [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15])  }function update(){  anim.animations.play('birth',1);  ...}

[dandorf]

That way works, but I can not be controlled sprites. 

Can you take each part of the sprite sheet and put them in separate sprites?

 

[lewster32]

Untested but something like this may work:

// get all of the numeric indices created for the 'allsprites' sprite sheetvar frames = game.cache.getFrameData('Cuadro').getFrames();// loop through the indices and create a separate sprite using each index for the framefor (var f = 0, len = frames.length; f < len; f++) {  game.add.sprite(0, 0, 'Cuadro', frames[f]);}

[lewster32]

Alternatively (and more likely to work, but less dynamic as it assumes you know how many sprites you need):

// add 16 sprites each with a different frame number, offsetting the x position// by 32 for each one (so they don't all appear on top of one another)for (var s = 0; s < 16; s++) {  game.add.sprite(s * 32, 0, 'Cuadro', s);}

[dandorf]

Thanks lewster32 

With that code, always gets me the same frame of the sprite sheet ... I do not understand why. (The first sprite)

[lewster32]

Even with the second example? If both cause only the first frame to be displayed, it seems to me that your sprite sheet is not being parsed correctly. Can you manually do this?

game.add.sprite(0, 0, 'Cuadro', 0);game.add.sprite(32, 0, 'Cuadro', 7);game.add.sprite(64, 0, 'Cuadro', 15);

That should display three different frames from the sprite sheet - if not, the sprite sheet isn't being parsed correctly.

[dandorf]

Well, then afterwards when it could I will prove it. Nonetheless, in case it works (in order that if it will work), I continue without being able CONTROL like these sprites. Do not be if you know to that I refer..

 

It wanted to have Them in an array every Sprite, to do some checkings during the game.

[lewster32]

A Group is a perfect place to put sprites:

var cuadroGroup = game.add.group();game.add.sprite(0, 0, 'Cuadro', 0, cuadroGroup);game.add.sprite(32, 0, 'Cuadro', 7, cuadroGroup);game.add.sprite(64, 0, 'Cuadro', 15, cuadroGroup);cuadroGroup.forEach(function(cuadro) {  // This will let you do something to each sprite (cuadro) in  // the group, so let's move each one down the screen by 10 pixels.  cuadro.y += 10;});

If you want to actually control them as in move them with the cursor keys, look at this example and adapt it to the above.