Jump to content

Sprite animation: play only frames 1 to x (numeric index)


Recommended Posts

I'm trying out Phaser, and I can't seem to get it to display just the first row of this spritesheet:
What happens is that it goes through the entire spritesheet instead of  just the first 21 frames. What's the proper format for the frame indexes passed into Sprite.animations.add ? Should I be pushing objects into the frames array instead of integers? Should I start with 1 instead of 0?
Here's what I have so far:

var game = new Phaser.Game(64, 64, Phaser.AUTO, '', { preload: preload, create: create, update: update });function preload(){	/* 32x32 is the size of each frame */	game.load.spritesheet('characters', 'assets/sprites/characters.png', 32, 32);}function create(){	/* Loop through Xam's sprites */	var frames;	var i;	var xam;	/* [0,1,2,...,21] */	frames = [];	for (i=0;i<22;i++)	{		frames.push(i);	}	xam = game.add.sprite(game.world.centerX, game.world.centerY, 'characters');	xam.anchor.setTo(0.5, 0.5);	xam.animations.add('loop',frames,15,true,true);	xam.animations.play('loop');}function update(){ }

I saw some examples that used Game.load.atlasJSONHash, is that the only way to accomplish this?
This is my first post here, so I'm also open to being lectured on posting standards. :)
I may have found something...
Phaser 1.0.4, FrameData.js, line 196 checks if frames isn't empty, but the parameter that's passed is named input.
I replaced frames with input and it worked as expected. I'd like to confirm if this is the way it should work, though; I might be breaking something else by doing this haha
By the way, instead of pushing integers into the array, I had to put the indexes in an object like so:

frames = [];for (i=0;i<22;i++){	frames.push({index:i});}

Phaser 1.0.4, FrameData.js, line 212 seems to need the index property.

Link to comment
Share on other sites

Ah that was a result of some late night changes. I have renamed the parameter back again properly and pushed 1.0.5 (which I'll carry on working on with the next bundle of changes).


To answer your question: if you want the animation to only cover some of the frames in the image then you should pass an array of either indexes (if you are using a sprite sheet) or frame names if you are using a texture atlas.


Also take a look at game.math.numberArray, ideal for exactly this.

Link to comment
Share on other sites

I'll have a look at that later tonight, but it should be the index of the frame rather than a reference to the Frame itself.


To be honest I need to rethink how Animations could work (and I'm very open to suggestions!!) because right now you're limited in that you can't have an animation that spans more than one image, and I also think there is an issue with spriteSourceSize values not being always used properly, but I'll debug that further once I've got this game out of the way.


I just need to think of a sensible way for someone to 'declare' an animation. It's actually quite complex because of all the ways you could do that, but it needs something better than what is there at the moment.

Link to comment
Share on other sites

Wow, that does sound complicated. Especially if the sprite frame size changes from image to image.


I think I should wait until I get a better picture of how Phaser works before I make any suggestions.

Thank you so much for responding so quickly despite everything you're trying to juggle right now!

Link to comment
Share on other sites



I'm now using phaser.js from 45426be0bc2458b9aaff3b896c78e2066ed37a52. Code is almost the same as in starstruck. And to be exact, it's not a warning, it's an uncaught error and it still persists.


My image is a spritesheet:

game.load.spritesheet('player', 'images/player_37x45.png', 37, 45, 18);

Kind regards


Link to comment
Share on other sites


  • Recently Browsing   0 members

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