Large animations with cocos2d « cocos2d for iPhone

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

Large animations with cocos2d

(14 posts) (7 voices)

Started 1 year ago by Dunc
Latest reply from mongoose54

Tags:

Dunc
Member

Hi all,

I'm working on an iPad app at the moment which requires a fair amount of flip-book style animation in some scenes (using CCAnimation/CCAnimate, etc). In the first scene, for example, I have 187 frames (PNGs). Each frame measures 450 x 450, and weighs in at about 70KB. This works great in the simulator. However, the device I'm testing it on (having to use ad-hoc distribution, as the test device is at about 100 miles away) terminates the app as soon as it tries to load this scene.

I ran the app through instruments on the simulator, and it the memory usage exceeds 220MB (over 1MB per texture!). So a few questions I guess -

1) what's the best way to go about implementing flip-book animations in cocos2d on the iPad, and

2) are there limits on amount of memory an app can take up?

3) is there a better way for me to convert these .pngs into textures to bring memory usage down?

In a related issue - one of my scene's which was causing a crash was consisted of around 50 frames (much smaller dimensions). This worked fine in a build of the app which only had this scene in it. But when rolled out with the other scenes, the app would crash when trying to load this scene. I have tried clearing the texture class on scene load, but it seems to make no difference...

Any advice would be greatly appreciated!

Cheers,

Dunc.

Posted 1 year ago #
abitofcode
Moderator

187 frames of 450px x 450px (which will be 512px x 512px in memory) would probably be better suited to video.

Each 4 frames placed within a 1024 x 1024 sprite atlas at RGBA8888 will use approx 4Mb of memory;

* can you get the frames smaller
* can you use PVRTC, if its a flip effect you probably won't notice the quality difference
* Do you need quite so many frames

:s

Posted 1 year ago #
Dunc
Member

Thanks for responding, abitofcode.

Is it possible to embed video into a cocos2d scene, or overlay it? For Pig Chase, I launched a movie trailer directly into MediaPlayer. Haven't come across another way of doing it... I agree though, video would be far more suited to this particular situation.

I can't shrink the frames due to design constraints. I could perhaps work to reduce the frames used for the largest animation (ie, the 187 frame sequence), as there are chunks of non-movement. But based on another scene which also crashes, the number of frames required would still potentially cause a crash.

Should a 70KB PNG become such a large texture? (in Instruments they show as > 1MB each). I'm not too sure on PVRTC. Is this another file format? Or do I have to do something to convert the PNGs in to PVRTC first and then pass them in to a sprite somehow?

Sorry for the n00b questions - Pig Chase on iPhone didn't give me any of these problems, but then it's using much smaller animation frames, and I'm using a sprite atlas for each pig animation. This doesn't seem to be much of an option with iPad stuff, due to the sprite sheet size limits... unless I'm missing something...

I'll go and read up on this PVRTC you speak of :)

Thanks again.

D.

Posted 1 year ago #
Codemattic
Moderator

"Should a 70KB PNG become such a large texture?" Its expanded into ram. The lossless compression helps reduce your game's filesize (or flash-ram-size to be more accurate), but doesnt reduce the amount of ram your game uses for textures.

"I'm not too sure on PVRTC." Images in that format are kept compressed in ram which saves memory and is faster to draw. The format is such that the expansion can be handled by specialized hardware in the iPhone. But its lossy and you lose some quality.

"Is this another file format?" Google is your friend.

Posted 1 year ago #
Dunc
Member

Thanks Codemattic - I shouldn't have been so fast to ask questions! That makes sense... and Google is indeed my friend!

I do have another question though...

@abitofcode mentioned that the 450x450 images would be 512x512 in memory. What are the increments (ie, how much space would a 50x50 image take up, or a 200x200, etc)?

Thanks again.

D.

Posted 1 year ago #
abitofcode
Moderator

They go up in powers of 2 so 50x50 would become 64x64

Posted 1 year ago #
Dunc
Member

gotcha. Thanks for this. I think I now understand why using sprite atlas is preferable to multiple pngs...

D.

Posted 1 year ago #
brendang
Member

Pardon the branch off this thread, but it is related. In general, is it more efficient to use Sprite atlases of prerendered 'animations'. or to animate sprites using transforms? Like in the case of a project with 20-30 scenes / 'pages' and there are animated elements on each page / 'scene'?

B.

Posted 1 year ago #
Dunc
Member

Well, from playing with this, I'd say a healthy mix of techniques is required to keep memory usage to a minimum (especially on the iPad, where image sizes are that much bigger). For example, I originally had a full screen animation where the "character" moves along a wobbly course across the scene. Lots of white space, so the compression of the original images was really good, resulting in low .png file sizes. However, each frame ended up taking up 4MB of texture memory! Switched to just having the character sprite animation in a texture atlas / sprite sheet, and moving the sprite location in code. Much better.

In another scene, I have an animation of the character performing a task which lasts about 10 seconds. Originally, I just had a png for each frame. Now I have squeezed as many frames as I can onto sprite sheets (3 in all), and controlled play back in code by having multiple spritesheets, managing a sprite each, and hiding / showing them when each animation sequence completes. Yes, it's messier, and takes more fiddling around in code to get it working, but seems to do the job and no more crashing on the device! Which is nice.

D.

Posted 1 year ago #
brendang
Member

Great info Dunc, thanks for the feedback on what techniques you've been using and finding successful.

Posted 1 year ago #
Chirag
Member

Is it possible to embed video into a cocos2d scene, or overlay it?

I have the same question, but cant find an answer. Could someone please address this..

Posted 1 year ago #
knightforked
Member

I have already posted this in another thread but it seemed to me that this one is more relevant to my question.

I have 1024x768 32 bit frames but the app just crashes after loading ~19-20 frames. How many frames can I load maximum? I am just running a test as to what is the maximum number of frames that I can push cocos2d to animate. I am working on iPad version 3.2.2(7B500).

Does anyone have any other ideas to solve this issue? I don't want to go through the compressed images route (PVR Textures) as I cannot afford to loose anything with the image quality. With my rough estimates my app strikes a texture limit of ~63MB. Does anyone have numbers for what is the limit on RAM for textures?

Could I solve this using threads? Say each producer (for example 2) loads an animation of 5-10 frames and a consumer thread constructs an action on those and runs them in a lock step fashion?

Thanks in advance for any help.

Posted 1 year ago #
knightforked
Member

Well, to answer my own question, view based and many graphics operations must be performed on main thread, so threads is not an option. How about asynchronous i/o? Any other ideas?

Thanks again!

Posted 1 year ago #
mongoose54
Member

Have you ever managed to solve the problem with animation on your application? I have been busting my head against the wall over the past weeks for my iPad application and there is nothing I can do to perform animation on 1024x768 images?

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.