Any better way to manage Animation Sequence with huge number of frames and sizes?

Solar2D Advanced Graphics
#1

Hi,

I’ve use the spritesheet to do simple animation for the image which is small in dimension. However, in the interactive ebook app that I will be working on, there are many pages, and each page there will be many animated elements, for characters and props.

Each of the animated image sequence for the character and props are big in size, which is average 600-800px height and about 200-400px width. and there are about 5-10 image sequence for each type of the animation. I was wondering how to better manage and do the animation for such big dimension image and sequence?

I could barely squeeze 4 images in a spritesheet of 2048x2048, so maybe using spritesheet may not be as ideal, and I have a few hundreds of total animated image sequence, and the total file size is huge as all are saved as transparent PNG (to put in front of the background), and large in number as well.

Thank you.

#2

Hi,

Big animations take up big space. There’s not much you can do about this except downsize certain elements. Most of my projects use clever approaches to work around these issues. “Big” animations, without the hit in file size, can be achieved by

  1. Intelligent slicing (e.g. the shape of a “plus” symbol + has empty space in the four corners. If you keep it as a square source image you use a lot of texture memory and space. Slicing intelligently means seperating areas with high and low detail or empty space to reduce the memory imprint.

  2. Re-use of certain elements

  3. Particle animation or procedural, mathematic animation.

  4. Creating “skeleton-based” or forward-kinematic animations. You can create a smoothly animated running man out of 60 frames of his full body, or of just 15 small images for all of his body parts.

Best of luck,

Thomas

Also, don’t forget that background elements don’t need to be as sharp as foreground elements, per se.

#3

  • Are you using a texture packing tool, like TexturePacker?

  • Is using lossy compression like JPG an option?

  • Is using 8-bit PNG an option? (note that this will only reduce filesize - memory footprint will remain the same)

  • Is resizing the images an option?

In my own project, facing a similar problem, I did skeletal animations with Spine instead of sprite animations. I only have a bunch of tiny images of each body part and the rest is JSON and code.

#4

If Spine is a bit too much for you, don’t forget you can get away with really simple math.sin(timer) and math.cos(timer)-based animations for a lot of creatures. I have birds flying and flapping wings, spiders crawling and humans running, all done by just saying something link “upperRightLeg.rotation = 20 + math.sin(timer+40/100)*30”.

Where 20 is the base centered angle of the leg, 100 is the speed of the movement (the higher the number the slower the oscillation), 30 is the amplitude (the “size”) of the oscillation, 40 is the “phase” of the animation (often just zero to be honest), and timer is of course a local value that is just the system time.

Doing this every frame will make body parts oscillate. Extend this math to incorporate running speed etc… at will.

Cheers,

Thomas

#5

I think for eBook applications you need to think about a more specialist way of doing it, like Thomas’ idea, for example, I did some experiments with a simplified form of Spine https://github.com/autismuk/coccyx Corona is really designed for game sprites.

#6

Thanks all for the recommendation.

  • Using 8-bit PNG is not an option, as the edge of the transparent image is not ideal.

  • As each of the frame of the animation on each page is quite unique, so it is not possible to simply change the position of certain part (or reuse) like what most game sprite animation did.

I will look into Spine and see how to deal with the animation, and also will try to scale down to the optimized size without compromising too much of the quality.

#7

Hi,

Big animations take up big space. There’s not much you can do about this except downsize certain elements. Most of my projects use clever approaches to work around these issues. “Big” animations, without the hit in file size, can be achieved by

  1. Intelligent slicing (e.g. the shape of a “plus” symbol + has empty space in the four corners. If you keep it as a square source image you use a lot of texture memory and space. Slicing intelligently means seperating areas with high and low detail or empty space to reduce the memory imprint.

  2. Re-use of certain elements

  3. Particle animation or procedural, mathematic animation.

  4. Creating “skeleton-based” or forward-kinematic animations. You can create a smoothly animated running man out of 60 frames of his full body, or of just 15 small images for all of his body parts.

Best of luck,

Thomas

Also, don’t forget that background elements don’t need to be as sharp as foreground elements, per se.

#8

  • Are you using a texture packing tool, like TexturePacker?

  • Is using lossy compression like JPG an option?

  • Is using 8-bit PNG an option? (note that this will only reduce filesize - memory footprint will remain the same)

  • Is resizing the images an option?

In my own project, facing a similar problem, I did skeletal animations with Spine instead of sprite animations. I only have a bunch of tiny images of each body part and the rest is JSON and code.

#9

If Spine is a bit too much for you, don’t forget you can get away with really simple math.sin(timer) and math.cos(timer)-based animations for a lot of creatures. I have birds flying and flapping wings, spiders crawling and humans running, all done by just saying something link “upperRightLeg.rotation = 20 + math.sin(timer+40/100)*30”.

Where 20 is the base centered angle of the leg, 100 is the speed of the movement (the higher the number the slower the oscillation), 30 is the amplitude (the “size”) of the oscillation, 40 is the “phase” of the animation (often just zero to be honest), and timer is of course a local value that is just the system time.

Doing this every frame will make body parts oscillate. Extend this math to incorporate running speed etc… at will.

Cheers,

Thomas

#10

I think for eBook applications you need to think about a more specialist way of doing it, like Thomas’ idea, for example, I did some experiments with a simplified form of Spine https://github.com/autismuk/coccyx Corona is really designed for game sprites.

#11

Thanks all for the recommendation.

  • Using 8-bit PNG is not an option, as the edge of the transparent image is not ideal.

  • As each of the frame of the animation on each page is quite unique, so it is not possible to simply change the position of certain part (or reuse) like what most game sprite animation did.

I will look into Spine and see how to deal with the animation, and also will try to scale down to the optimized size without compromising too much of the quality.

#12

Spine.

But what we really need for this is video playback with alpha channel.

#13

but the video is native object and it can’t be added to group and to change the order of the video object…

#14

+1 

or +10000000

#15

I personally don’t have the need for video with alpha playback, but I am surprised by the fact that it’s so hard to do. For clarity’s sake: I’m not critical of Corona engineers, because if it was dead simple they would have implemented it already, but I would have thought that would be a pretty straightforward thing in openGL, mapping a video texture to a polygon.
 

Not so, apparently!

#16

http://coronalabs.com/blog/2013/12/19/holiday-surpril-time-effects/

shape.fill = { type=“camera” }
why not
shape.fill = { type=“video” ,src=“foo.mp4” }

#17

I stand corrected! I thought I’d seen something on the blog a while ago about video feed, webview and even camera feed to a polygon. But no alpha channel on the video then? Even, so, if the resolution is high enough, with clever compositing you can achieve amazing results I presume.

#18

It will only work if you build your animations using Flash (and even then, only if you separate out the components), but I’ve had good luck creating full-screen iPad-sized animations using Animo (formerly called “SpriteLoq”). It’s not the simplest of procedures, especially since Animo’s built-in Corona support was based on Graphics 1.0, and since it’s now owned by a CL competitor, it likely won’t get an update - but you can get it to work under G2.0 with some effort. Essentailly you isolate your Flash animation down to smaller components, then export those individual components as SWF files, which Animo converts into spritesheet data (you can combine multiple SWFs into a single spritesheet). Then you reassemble them in your code, layering as needed. I’ve taken full-screen animations that would have never fit onto even a 4096x4096 sheet if rendered as full-sized frames, and squeezed them into 1024x2048 sheets by breaking them down and using Animo. It’s a bit labor-intensive, but the results are good if the conditions are right.

Something that I really like about Animo is that it automatically places your spritesheets on the Corona stage where they were on the Flash canvas - so you just give all the individual components an x/y value of 0, 0 and they are lined up properly. Just throw them all into a display.newGroup() and you can move the animation as a whole by adjusting the group’s x/y values. It’s one less thing to worry about.

Here’s a link to Animo (there’s a free trial): http://lanica.co/products/animo/spriteloq/ 

#19

i do some animation from flash 
you can export sprite sheet directly from flash in to corona 
but still if the animation is big and lots of frames
there is a problem 

and if the animatinon going to be retina style its going to huge !

#20

Hey guys,

Just trying to drum up some support for rendering videos to texture for fills (similar to how it’s done with the device camera). If you haven’t already, please go to the feature request page and toss some votes in. It’s been a long time coming, and I think we would all benefit from seeing this happen sooner than later!

Here’s where you can vote: http://feedback.coronalabs.com/forums/188732-corona-sdk-feature-requests-feedback/suggestions/3578468-video-render-to-texture