Thursday, 6 June 2013

EaselJS: Spritesheets

Still figuring this out myself, but here is what I have so far...

A sprite sheet is an image of all the frames of an animation, I'm not sure if it has to be a .png, but that will work.


In the example file, there were loads of scripts added, but I replaced it with the one script and it still worked for me...


Line 24: Create a 'spritesheet' - seems to be a way of telling the page which sections of the spritesheet are what, etc.
"animations" is, I think, used if you want to use your spritesheet as an animation? I don't know.

Lines 26 and 27: These two lines both define certain frames as part of a sequence. Sort of like if you had frames in Flash, and a frame had a name, and then when it reached a certain frame, it would loop back to the beginning, or go to another named frame.
On line 26, it's saying that the run sequence is to start from section 0 of the sprite sheet, and go through to section 25, and then, though I have commented this out, to go to the sequence of frames called 'jump', which is defined on the next line.

Line 28: Defines the source file for the image that is the spritesheet.

Lines 29 to 36: Tells it how to recognise what frames are on the sprite sheet.
"hieght" and "width" are how many pixels each section of the image is that should be taken as a frame. I'm not sure how you are supposed to know this, I made a sprite sheet using zoe, and it gave me a file that was 2048 by 512 pixels, with two rows of 7 frames. So I divided 2048 by 7 to get "width", and 512 by 2 to get "height". It worked for me. I suggest you try altering these values so you can see what goes wrong.
"regX" and "regY" are the registration co-ordinates for the animation that will result from the sprite sheet.
"count" is how many frames you have in total, I think.

Line 38: Assign your animation to a variable (a BitmapAnimation) that you can then position etc, and generally treat like a movie clip.

Line 61: If you use gotoAndPlay without any parameters, it will just play everything that the spritesheet is capable of. Or you can tell it which 'frame' to go to.

Line 64: You need the Ticker to get it to work, but strangely, it won't pause in the way a Tween will. So...