2D Animated "Sprites"?

Hey guys,

I know there's been a lot of discussion lately about 2D stuff going on, so forgive me if this has already been answered... but the Search function isn't really helping me out.

So, I have a bunch of .PNG's I plan on using for an animated piece of the environment. It's painstaking but I do plan to do the whole game this way- essentially sprites that are hand-drawn. Since I currently have the 40-hr-a-week job, I thought it would probably be easiest (for both focus and consistency's sake) to do all my 2D animations first, then when they are done, import them to Unity and actually begin coding the game itself.

If I preview these by making them a .APNG or something, will that import into Unity okay or will I need to do a "sprite" (using the term loosely) sheet?

Thanks for any help guys. I've been drawing all day and I'm so happy I finally got the ball really going on this, only to realize that beyond the art I barely know a thing. :c

 

If you look at my current project, at current I'm using sequences of PNG files for my sprite animations. It's certainly doable.

However, what is this '.APNG' format you speak of? And, what saves to it? I don't think I've seen that in GIMP yet...

 

Apparently .APNG is a format specifically for an animated .PNG, but I've never seen it in use to be honest. I'm just not sure how to sequence them all together.

Luckily for me I do have Autodesk's Flipbook, so I can at least preview frames as animations. For some reason though, they all have ugly black outlines when previewed so hopefully this doesn't translate to Unity....

 

Unity doesn't have any support for .apng. Depending on how you do the sprites, you would normally make a texture atlas (AKA sprite sheet), or possibly wait for Unity 4.3.

--Eric

 

I'm not sure what is the most correct way of doing it but my old solution uses PNG texture atlases.

I have been revisiting my 2D stuff lately to see if there is something worth salvaging and I don't see myself not doing art atlases in future. Beside draw calls advantage and whatever, spread sheets really make maintaining art lots of easier for me. And my art needs lots of maintaining. I couldn't possible do art assets before hand, my game design is too darn iterative and chaotic.

What I do is I generate quad meshes (a bit unnecessary I suppose) for those atlases and then I just manipulate UV coordinates. Also for lots of stuff I use a simple custom shader with two textures. I remember I had some weird frustrating visual problems for a long time which I ended up fixing by turning off anti-aliasing .

 

I'm a 3d guy, so the only experience with 2d I have comes from that one project where the artist made the explosion sprites in 2d.

Bascially you're asking "How do I get my pictures to move in Unity" if I understand you correctly.

As for the file format, if I had to take a wild guess I'd say .apng is a png file with alpha channel for transparency? I know there's rgba, maybe it's kind of like that. In any case, you won't know until you import one of those into Unity and see for yourself by applying it to a plane and seeing how it looks. I think it's good practice anyways when you start a new workflow, take the first finished object/sprite an take it into unity to see if it works before you make hundreds of copies.

As for the question folder of single sprites or spritesheet, you can do both, I've done both so I'm confident it works. Here's what you have to consider though: for single sprites what I had to do is to make an array that contains each frame texture. Then set the material texture each frame to the next one. This means each frame, a new picture gets loaded, placed on the object, and then rendered and whatever else it does. And this process is unfortunately noticeably slow.

If you had all frames on a single sheet, you would have to load one (albeit bigger) picture. And that pictures would simply be moved(offset) to show the portion that contains the current frame. And in the big picture it still drove the size of the 120 explosion frames from 61mb to 20mb, so that worked out for me. Instead of scrpting this sheet offset myself, I used the wiki solution, and it worked great for me. To bring the 120 single frames into one nicely organized sheet, I used Sprite Sheet Maker. Make sure to enable that one option that makes all sprites the same size.

Good luck!

 

An .apng is an "animated" png. It was intended as a replacement for .gifs. It never took off, and few apps/browsers support it.

---

I usually just use texturepacker : http://www.codeandweb.com/texturepacker
Unity tuts here: http://www.codeandweb.com/texturepacker/tutorials#unity

Typically, you always want to use atlases over individual images or sprite sheets whenever possible, especially if you have a lot of animation. Though, depending on the size of your project and platform it may not make a noticeable impact (but a good habit to get into) for instance a desktop/web player deployment with few animations... not a huge concern.

If your target is mobile, optimize as much as possible at every opportunity. Use native GPU formats like pvr, tight atlases, and organize efficiently. It doesn't take much to break a mobile device, and it sucks to optimize after the fact (especially if you have a ton of artwork).

See link my sig for example of an optimization nightmare in 2D + mobile.

Good luck.

 

Thanks for the responses guys! I will play around and see what I can get to work the best/fastest in Unity.

In the meantime, for being my first ever 2D animation, I'm pretty proud of myself. Could use some tweaking still, but this is it rendered together as a Quicktime .mov:

http://youtu.be/IVtQbB8sq7g

 

Is that the correct link? It doesn't appear to be moving. ??

 

Sorry- I should have probably mentioned it's just a subtle pulsing glow. My fault. The statue itself is totally stationary, it's just the color shift as it lights up (the pale blue in the center). But it IS ridiculously hard to see.... Sorry about that.

 

I'm actually working on an animated png or .apng importer for Unity. Its definitely not ready yet but if you bus want C# code for loading the apng check out my code here.
https://github.com/bungalow12/animatedimage

 

I am actually wondering if I can import swf files from Flash or animated assets from Toon Boom for a 2D game into Unity... The process of creating the sprites frame by frame is time consuming and non efficient... thanks!!

 

Check out https://www.assetstore.unity3d.com/en/#!/content/13593

It's a pretty solid solution.