It might be a little bit redundant at this point, but this week I worked on, you guessed it, yet more sprites. It is the third blog post in a row about sprites, and it’s quite hard to come up with anything new to write about, but here goes nothing.

Learning to animate is a steep climb. It is very hard when you start out, and once you get there, you might find, to your annoyance, an elevator at the top. But such is the nature of learning manual tasks such as these; only by learning how to do it the tough way, do you gain the ability to take shortcuts. When I first started making sprites for our game, it was taking a very long time to get each sprite done, and it felt like a gargantuan task to get them done on time, and that was when I was cutting and pasting left and right, so I would have to redraw as little as possible. Fast forward to now, and you’ll find me working on a death animation. What makes it tricky is the motion I have decided on. I want our character to fall out from flying, hit the ground with her shoulder, then roll over. This means Almost no assets from previous frames can be re-used, it has to be drawn from scratch, frame by frame.

I started out by making a sketch for the animation, simple frames made up of very rough lines, so I could plan out the entire things

.

When I had the rough animation, I got to work on the sprites themselves. I largely used the same technique as before; making basic shapes using the polygonal lasso and the paint bucket, while making smoother lines with the normal lasso. Certain details were added with the brush tool, as one might expect. I made all the components of each frame inside a folder for each frame, so I would be able to maintain the individual components, without merging layers, or losing track of which layer is which, due to the issues with making animations in photoshop that I touched upon in my first blog post, namely the fact that it gets very cluttered.

Since I had to draw each frame from scratch I was afraid it would take a very long time get finish the animation, but after struggling with the first frame, each frame that followed was a bit easier to make than the last. But it was still taking a while, the way to counteract this came from an Idea I had gotten a while back, namely, if she dies, maybe she will lose her powers. If this was the case, I could make her armour fade in the first few frames, so I have to draw less and less for each frame. This sped up the process a lot, and I found myself completing it ahead of schedule, leaving room for a bunch of enemy sprites.

So, lesson learned, learn it the hard way, and the easy ways will come naturally. Now, if you’ll excuse me, I’m half an hour late with this, and I should get going. Cheerio!

This week I have made a major change of plans. I was planning for about 24 frames per playable character, as well as about 3-5 frames per enemy, but when play testing it became clear that the some of the animations I had planned would not be needed, as such, I am dropping all plans of any forward- and backwards-leaning sprites. Since the background is already moving, moving the player character backward makes it appear as if she is only decelerating, as such, an animation for moving backward might actually look a bit odd. As for moving forward, it appears as if she is already moving fast enough to where further acceleration would do little to how her clothes and hair animate. This basically cuts the workload for sprites in half, leaving more room for things like music (which I will cover in a future blog post).

So with the alpha on the horizon, I set my goals on replacing the place-holder sprites in our current build. That is the other player character, as well as the standard enemy. I started out by making a simple pallet swap for the female player character, something we were planning on doing anyway, to take the place of the first sprite draft I made for her, which we were using as the place holder. I made sure that this swap had clearly different and contrasting colours from the standard pallet, so that they can easily be spotted and differentiated between in the game, since you have to control each character separately. It remains to be seen if this worked.

After making the pallet swap, I started sketching out the standard enemy, using a few idea I got from the play test, namely to give the enemy a skateboard, to remove the need of animating a walk cycle. This meant I was able to complete this sprite very quickly. All I had to do was draw the torso, then add legs that I could cut up using the polygonal lasso, angle them using transform, and then filling in the gaps. Then all I had to do was add a skateboard. Since the sprites with angled legs would only be used when moving in the opposite direction, I could keep the torso stationary, instead of having to animate it compensating and leaning for balance. This way it is also easier to make the firing of projectiles look better, since the projectile will always spawn in the same place relative to the sprite, as the torso, and as such the weapon, is stationary within the sprite itself. lastly I added a few little details like electricity casting light over the arm, and that was that.

Finally, I got to the big task of that day; giving our character a death animation. Unlike previous animations, where I’ve been able to re-use assets from previous frames, this one uses a lot of unique frames, as the animation ends with her rolling on the ground. This means I have to draw each fram individually. I have not yet completed this task, but I have been able to at least make a rough sketch of the animation. Hopefully I will be able to complete it before the alpha, but it will be tough.

This week I’ve been churning away at animating the sprites of one of our protagonist. While I got off to a rough start, due to my inexperience in sprite animation, I caught on pretty quickly.

It is quite frustrating, though, since Photoshop handles animation in a very unorthodox way. Let’s compare it to a more conventional animation tool; Adobe Flash.

In Flash you have a timeline that also acts as your list of layers. You add frames to a layer, draw a new image, and you can pick between blank or duplicated key frames, which helps if you want to either draw a new image, or make adjustments to the last one. Then you can also add normal frames. They extend the time the previous key frame remains in view. With these tools, it is easy to keep layers separated, while remaining well sorted and organized.

In Photoshop, you create a new frame, then you either create a new layer, or duplicate a previous one, make your adjustments, then hide the layers you don’t want to be visible. This way, each layer represents a possible element to show in the frame, but you do not have multiple layers of frames. This way your layers easily get disorganized, since each frame tends to be its own layer. It is quite messy.

The issue is that I really want some of the more advanced drawing tools in Photoshop, while I want a robust animation system like that of Flash. But Photoshop lacks the animation capabilities of Flash, while Flash can not even come close to the prowess of the art tools in Photoshop.

Despite these issues, I did manage to get into a flow when animating in Photoshop, and the animations are coming along quite well. As I do it more and more, I’m sure I will find ways to organize my layers better, as I get faster at it.

Since we chose to have our characters flying instead of running, I was able to avoid making a walk cycle. Instead I only have to make their cosmetics and hair move in the wind. Each character sprite will be made up of the same amount of sprites;

• 3 idle pose sprites
• 4 leaning sprites for transitions into moving in a direction
• 3 sprites each for left and right strafing, as well as full lean back and forward tilting
• 1 sprite for taking damage
• 4 sprites for the death animation

That is a total of 24 sprites per character, which feels very doable, especially considering I am able to re-use elements from previous sprites, such as hip protection, bracers and scarves.