A Tool for Creating OpenGL Animation Textures
Updated Sept 28, 2009: You can now hard-code the number of columns. Also included the full source code.
Updated: I fixed a bug to do with image sizing. The new download is at the end of this post.
I’m in the midst of writing my first iPhone game. I had a need to create an animation from a series of frames I produced in 3DS Max and play them back in the game. I googled the web for the best way to do this and it seems for short animations (less than 50 frames or so) like explosions and rotating asteroids the best technique for OpenGL is to stick them all together on the same texture and just change the displayed coordinates on the polygon I was using. For example:
I began by doing this myself, manually in Photoshop. What a time waster! Every time I wanted to update an animation or tweak it, it represented up to an hour of work just to do the work of resizing and stitching the images together on a grid. I then had the bright idea of automating the process. I wrote a tool in .NET that does exactly that, while preserving the alpha channel of PNG images. It sorts (by filename), resizes, stitches, and outputs the result to a neatly sized PNG graphic that can then be converted to an OpenGL texture. Remember that if you use this tool, the maximum texture size is 1024×1024 so you have to limit your animations to something that will fit in that grid.
I first tried it with an asteroid animation and it worked nicely. I’ve included the asteroid frames in the download for you to use or as an example. I also did it with an animation I made in ParticleIllusion for an explosion:
Now, on the Objective-C side of things, you need to write a class that can take these stitched assets and animate over each frame. I’ve whipped something up using the Texture2D classes provided by Apple (which I’ve augmented somewhat). Three methods are provided:
-(void)setupAnim:(int)pxWidth:(int)pxHeight:(int)frameWdth:(int)frameHt:(int)frmCnt
This takes the pixel width and height of the entire image, as well as the pixel width and height of each frame, and finally the number of frames.
-(void)incFrame
Initially the currentFrame value is set to 0 (the top left frame). You can manually set this property, or use this function incFrame() to bump it up one. When the end is reached, it will loop to the beginning.
-(void)drawFrame:(Texture2D*)animTexture:(float)x:(float)y:(float)width:(float)height:(float)rotation
This will draw the frame using the special Texture2D class I provided with an x,y, width, height, and rotation (in degrees).
If you have suggestions for a better way to do what I’m trying to do – please let me know! This utility is free to download if you find it useful, however.
Below you can see the asteroid in action!
[...] So we have an occasion to be interested in embedding custom fonts in an iPhone application. Specifically, this DS-Digital font. It turns out that custom fonts are not quite as easy as one would hope to work with in an iPhone application. As a matter of fact, if you look around the ‘net, you’ll find opinions ranging from “it would be really hard” to “it’s not actually possible”, with people doing things like rendering fonts into UIImages to do that kind of thing since they can’t sort it out from the documentation. Yoiks! We’re looking for something rather more transparent than that! (Although we do note that the tool linked there would be quite handy indeed for using custom fonts in actual OpenGL work, like games … as would that author’s texture creator here.) [...]
This is a great app!!! I will be using it to stich together my annimations.
However, please note that there is a bug in the app. I tried stiching together 45 images that were 150pix wide and 103 pixels high. The last row of images were being cut off. Please let me know if this is something that can be fixed or if there are limtations in the image size that I am using. Thanks!
Thanks.. looks like an issue on the .net side of things. I think if you play with the dimensions of the source images it will sort it out. I will try to fix this before I go away on vacation on Friday and re-post.
Hi, Alexei
This is a nice app, thank you. Unfortunately it seems impossible to get texture which is a square (e.g. 512×512) and consists of 16 squares (128×128). Actually would be totally amazing if it was possible to define rows and colums, not just output size.
If there is a way to add that, then your app could be widely used not just for iphone dev.
Thanks again )
Hey Almakos,
I’ll make this change for you in the next couple days hopefully.
OK I am posting this fix along with the full source code.
[...] getting some good feedback on my iPhone Animation Tool, I decided to do another release. This time, I added the ability to hard-code the number of [...]
Wow, you rock!
That is truly awesome.
Huge thanks for this update, Alexei.
P.S. couple days
You’re welcome!