Up until pretty recently I've been working with Unity, using the fancy pants plugin 2DToolkit. One thing I loved about 2dtk was that it had a screen where you would plan out your animations which was reading in realtime from a PSD file - so what I would do is just draw out all my frames into the PSD file while running and jumping with the animation in my game. Seeing the instant live feedback in game was a huge time saver during game jams.

Now instead of Unity I'm using HaxeFlixel (flash), which is a fantastic framework. However, my current workflow is driving me insane. It goes something like this:

1) Start a new row of 32x32 blocks in photoshop

2) Sketch out a very rough idea of what the animation will be. Fiddle with layers for a bit to get a mock-view of the animation

3) Save PSD, then save a separate .png file.

4) Open flashdevelop, compile and run, then move around in the game and check the animation.

5) Close swf file, go back to photoshop, move a few pixels

3) Save PSD, then save a separate .png file.

4) Open flashdevelop, compile and run, then move around in the game and check the animation.

5) Close swf file, go back to photoshop, move a few pixels

It's a terrible workflow. I find I can usually get decently far with just fiddling with the animation frames in photoshop, but eventually you need to test the animations in the game itself.

So I'm curious - for those doing 2D artwork how do you build out your animations without rebuilding the game every 5 seconds? Are you lucky enough to be using engines that have more real-time feedback? How do you manage longer animations?

Recently I was working on getting some shaders working in my project, so I added a button w/ hotkey to reload the shaders.

I never thought of using [Paint Shop Pro's] layers to test an animation. Usually, I just save the frames separately (at first) in a single folder, open them with Window's "Preview" program, and hit the left or right arrow keys to cycle through them. This has an annoying white flash between each frame.

It would be nice to have a tiny tool that loads a spritesheet and demonstrates the animation, including customizable frame speeds, and even customizable movement speeds for test movement.

I would honestly recommend a change of workflow. But I had it understood that you could actually preview things in photoshop via a sort of timeline.

I'm no expert, but the bit of 2d animation I have done has been using Cosmigo Pro Motion. It is great for pixel art, but the palette is 256 colors so it could work for "HD" sprites as well. It contains many things meant for pixel art though, including automatic tiling(for painting out tile edges, etc...), and can even be used to create and test tileset maps. The animation preview can also change the speed of things.

One thing to consider if you are making 2d games....maybe you could switch to a different engine. Generally, the better engines for many people are better in many areas, from capabilities at play time down to art/media pipelines. Unity does quite well there, especially for the 3d side. I prefer GameMaker: Studio for 2d games, and it excels as well both in performance and capabilities for game design as well as art pipeline, even having a not that bad sprite creator internal to the IDE. But, it doesn't have the "auto-import" kind of functions that Unity has yet, so you would still have to import changes each time. On the other hand, once you have the basics working right, the little tweaks may be better done in the internal sprite editor in some instances.

@Servant: That sounds pretty close to how I worked before hand :D The only reason I stopped doing that was I found it difficult to add or remove frames. Oh the number of headaches I ended up with from the file-preview flashing white until the wee hours of the morning.

@kburkhart84: The timeline is what I'm using now, and it's ok, but since all my sprites are in individual positions (like a regular spritesheet), it makes it hard to visualize the frames animating until I get it in game. I've never quite figured out a way to preview the animation in photoshop when the images are in a spritesheet style format.

I keep thinking, surely someone has a system but maybe everyone is just cobbling together the tools they have.

Well, I would think you would be better doing things using the frames, and then only when you are done exporting to the spritesheet format. This is where actual dedicated pixel art animation software is good, as it can automatically export things the way you want, which could be as separate frames, or in the traditional sprite sheet format. This includes tilesets too.

Well, I would think you would be better doing things using the frames, and then only when you are done exporting to the spritesheet format. This is where actual dedicated pixel art animation software is good, as it can automatically export things the way you want, which could be as separate frames, or in the traditional sprite sheet format. This includes tilesets too.

This is close to what I was thinking. PS allows you to build animations and export to .gifs. You can use that, keeping your 32x32 grid, and see your full animation.

Missed this:

@kburkhart84: The timeline is what I'm using now, and it's ok, but since all my sprites are in individual positions (like a regular spritesheet), it makes it hard to visualize the frames animating until I get it in game. I've never quite figured out a way to preview the animation in photoshop when the images are in a spritesheet style format.



I keep thinking, surely someone has a system but maybe everyone is just cobbling together the tools they have.

If you cut each of your sheet into 32x32 so your actual image is 32x32 and everything is a different layer, you can use the timeline for it.

Maybe a simple spritesheet player would be a decent tool to have. Even as an app for a secondary device/screen.

Maybe a simple spritesheet player would be a decent tool to have. Even as an app for a secondary device/screen.

That's a really good idea - I don't need to preview it in-game all the time, I just want to preview the spritesheet running as I save. I hadn't actually thought of it that way. I'll poke around online and see if there's anything closer to that.

Edit: So I ended up finding FlxSpriter. You give it a PSD file, setup some frames in XML and then you can play your animation on loop. It even live reloads! It took a bit of effort to get it running though (it depends on a few libraries that the readme doesn't mention) and the fact that you have to manually update an xml file is a bit of a pain. But, this is much better than my current system. I also found Spritesheet Preview which has a much nicer interface (no XML files) but it doesn't support live reloading and can't read PSD files.

Maybe a simple spritesheet player would be a decent tool to have. Even as an app for a secondary device/screen.

That's a really good idea - I don't need to preview it in-game all the time, I just want to preview the spritesheet running as I save. I hadn't actually thought of it that way. I'll poke around online and see if there's anything closer to that.

I'm tempted to write one. I'd have a use for it.