How to get quality sprite sheet generation with rotations

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.

• wooah! This image is moving!! :D – LearnCocos2D Oct 9 '10 at 21:59
• 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? – LearnCocos2D Oct 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. – BenMaddox Oct 10 '10 at 0:45
• Did you try ImageMagick for the generation of the Spritesheet? See here: gamedev.stackexchange.com/questions/335/… – bummzack Oct 11 '10 at 15:33
• ImageMagick didn't appear to do rotation automatically. – BenMaddox Oct 11 '10 at 22:28

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.

http://github.com/mikechambers/as3corelib

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.

• If you need some help with generating a sprite sheet from animation frames I can give a general explanation. – AttackingHobo Oct 11 '10 at 19:51
• That link looks like an excellent resource. I'm reading over it now, but it looks like the solution. – BenMaddox Oct 13 '10 at 1:30

You need a bigger image, or a (slightly) smaller ball.

It is a known issue that raster image algorithms tend to create ugly aliases on round(ish) objects, if they touch the 'edges'.

The easiest fix is adding a small 'background space' to all your balls. So for each of your generated tiles, instead of this:

+-----+
|.000.|
|00000|
|00000|
|00000|
|.000.|
+-----+


You add some blank space, like so:

+-------+
|.......|
|..000..|
|.00000.|
|.00000.|
|.00000.|
|..000..|
|.......|
+-------+


For such small images, a 1-pixel border should be enough. Bigger ones sometimes require 2 or 3 pixels.

• 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. – CodexArcanum Oct 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.

Some procedures of interest to get you started:

• gimp-image-new
• gimp-image-resize
• gimp-image-get-layers
• gimp-drawable-transform-rotate
• gimp-image-merge-visible-layers
• gimp-image-set-active-layer

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.

Write a Script in Schema language in Gimp.That will be easy to handle this.

http://zwoptexapp.com/ might do what you want (It's a Mac OS X application)