I'm working on a game that uses sprite sheets with rotation for animations. While the effect is pretty good, the quality of the rotations is somewhat lacking. I exported a flash animation to png sequence and then used a C# app to do matrix based rotations (System.Drawing.Drawing2D.Matrix).

Unfortunately, there are several places where the image gets clipped.

What would you suggest for a way to get high quality rotations from either flash or the exported PNGs? A circle should fit within the same image boundaries. I don't mind a new program that I must write or an existing program I must download/buy.

I don't see where clipping occurs? And I don't really understand the question. You want to create a 3 dimensional ball which has two halves in different colors, and use it as 2d sprite? The spritesheet seems pretty complete for that. What exactly is the nature of the quality issue?
–
LearnCocos2DOct 9 '10 at 22:03

I guess it is hard to see. There are several sides of the rolling balls which are cut short. I guess I was looking for a tried and true way to set up this sheet with exact scaling and placement on the sheet. I think I'm off by just one or two pixels here and there.
–
BenMaddoxOct 10 '10 at 0:45

6 Answers
6

Write some Actionscript to generate the spritesheets for you, and either use the BitmapData in flash, or use as3corelib to export the pngs for you.

If your originals are vector, it is probably best for flash to take care of the rendering at different rotations/scales, as rotating a png is destructive, and lowers the quality.

If you are doing a game in ActionScript, there is no need to export a PNG for the graphics, you can make sprite sheets in memory from regular Timeline Animations.

If you need the PNGs for a non ActionScript game, you could make the sprite sheets in ActionScript from timeline animations and export the BitmapData with this library that can export different formats with the help of a webserver with PHP.

Edit: I tried to explain it, but I realized my explaination was broken.

Instead of trying to poorly retype it. This is a better resource. Although I don't know why he draws the clips to the stage with EnterFrame for each rotation, you can just loop through the clip without ever having to make it a display child.

That is excellent to know, I was just dealing with an issue of some nasty noise on a rounded shape I made in Inkscape then exported to png. I'll have to try this when I get home.
–
CodexArcanumOct 12 '10 at 18:57

Whenever I need to do large batch image transformations, I immediately turn to the GIMP. You can very easily write a Scheme program that uses the (thorougly documented, easily searchable) GIMP data API to manipulate images in any way you can name, and it's possible to do it all from the command line, as well. Over time I've developed a host of scripts that have made my life as a developer much easier, and gotten good experience working with Scheme in the process. If you're not comfortable working in Scheme, there are language bindings for Perl as well. You can use the Script-Fu Procedure Browser that comes with the GIMP to search the documentation.

You will always get some clipping if you restrict the rotated images to the same dimensions as the original image. Even your circular image is ultimately made up of squares, and when you rotate a square, the corners will move outside the original boundaries.

To accommodate a 10 pixel square in all possible rotations you need at least 15 pixels to accommodate the 45° rotation, ie. the length of the diagonal. You can calculate this using Pythagoras' theorem: for squares you need about 42% extra space in both directions, for example.