Creating Smart and Fast Sprite Sheets

Question

My goal is to be able to create a game character where I can draw and animate new pieces of armor no problem. I will draw in flash 1 object, and have flash animate that object in my premade animation. After that I will then paste the frames which were provided into a sprite sheet and paste it into the algorithm I built in my game that will animate it. So recap, Draw only 1 frame, automatically animate it and place frames into sprite sheet which java reads in.

The only issue I am having right now is efficiently creating a sprite sheet. I of course will have to stick to a set size for my sprite sheet which could range from either 128x128 or 256x256. What is a good method in creating sprite sheets efficiently? The built in sprite sheet for flash is no good as it doesn't create set squares but rather divides it according to the size of the image example being 126x86 or something. The best method I can think of right now is manually pasting each individual piece and making sure myself they are placed properly and then erasing the borders. Though, that isn't the goal I am going for, I want to make fast and minimal effort when it comes to creating new armor pieces for my character.

Am I using the flash sprite sheet generator wrong? What could possibly be the best way for me to create fast sprite sheets with set sizes from flash? Thanks for taking the time to read this, all answers will be helpful.

Here is some images of what flash does when I generate sprite sheets. It looks pretty good as is, though the issue is there is so much white space. The pieces aren't evenly layed out throughout the 128x128 squares I have. They take up around 2/3 of the width.

Answer 1

You don't actually have to stick to square frames in a spritesheet. The usual way is to optimize the spritesheet image, so it can be efficiently stored and uploaded to rendering context. This way you will have frames of your animation packed tightly by trimming empty space, placing them in efficient order (not necessarily the same order as in the animation) and rotating frames at straight angles. All this allows for storing smaller textures. Naturally, if you use any of these optimizations, you will have to store some mapping data along with the texture; you will also need some code that can read the data and display frames of your animation properly, applying translation and/or rotation to the texture.

There is a number of existing formats and libraries you can use (see video below). There's also a number of tools, apart from Animate, that generate spritesheets and optimize textures (loads of them, really). You may also consider generating a full-framed PNG sequence with Animate and use a different tool for packing spritesheets, if you are not satisfied with what you get from Animate. The way you create a spritesheet is not tied to the display engine you use (i.e. Stage3D), rather to the library you use for working with the resulting texture.

There's a video explaining adobe animate spritesheets. See from 2:50, it explains data formats and trimming. You can create full-framed spritesheets with Animate if you like: this ways you will not have to use a library for playing sprite animation, but you will store a bigger texture and may not meet the 2048x2048 texture size limitation of Stage3D.