How To Make 2D Customizable Sprites and Animations

Game Mechanics
#1

Hi,

I’ve been working on my project for a while and I’m stuck on one part, which is implementing customizable sprite animations. I would like to be able to have many different sprites for, for example, character animations with different armours and weapons. The game view is top down / 3/4, and characters have different walking animations for different directions. I’m not sure if my explanation is clear, but I’m sure you’ll know what I mean.

What is the best way to achieve this? Art and graphics design has always been the most difficult part of any kind of work for me, so any help will be greatly appreciated.

Thanks, and I hope everyone has had a happy new year!

#2

If you mean changing armor and keeping animation the same, you can either:

  1. Change color of the sprites.
  2. Implement 2D bone animation.

Change CERTAIN colors of the sprites.

#3

Hey, thanks for the really quick reply. I had a look at your suggestion of 2D bone animation and came across Spine. I will look into Spine and try it out, but there doesn’t seem to be many tutorials on using it (with libgdx). Once you export the animation as a JSON, how do you render it? And how does that allow you to customize the parts of the animation?

Spine looks really good and I plan on purchasing it once I have an idea of how to use it with my project.

#4

You do not really have to use such complex skeletal animations like with spine, but you could simply build your character out of a few sprites (one for each armour/weapon slot) and use an own spritesheet or animationset for each item.

#5

Hi, thanks for the reply. I considered that method, and maybe I’m misunderstanding it, but it seems like there are going to be way too many sprites. For example, even if there are 4 different armours, and 4 different weapons, and 4 walking animations for each direction, you would have to make 64 different sprite animations.

#6

That is why it is called 2D bone animation. You attach a sprite to a bone and animate a bone. You can then add any sprite you want.

When you export .json file from spine, it would give you some kind of bone position, rotation data. You would need to use it to render stuff on your own. There is probably no library that handles that for you. You will just have to make it yourself. It is pretty tough though. I tried making bone animation, and it was a bit hard, but I managed to do something.

And yes, there is no “easy” way to make such animated characters. The easiest way is probably with bone animations. When you think about it, 2D bone animations are not even worth it probably. Unless you want your game to have really simplistic look, then go with 3D. But you shouldn’t want to make a complicated game just when you’re starting out anyway.

#7

Not necessarily for my current Java4k entry animation I am overlaying items (i.e. sword, pitch fork) over the top of a person sprite. This means I only need to have 1 sprite animation of the person and 1 sprite animation for the sword.

I have ensured that the items animation follow the person sprite’s hand movement in the person sprite animation.

Here is the sprite for the person:

Here is the sprite for the sword:

and here is the animation of them combined. (7th sprite on the 2nd an 3rd row of units)

915×654 48.6 KB

#8

I don’t think using bones is a good way to go in this case, since it being a top-down 3/4 perspective (if I understood correctly from the OP) you will still need sprites for each angle (up, down, left, right…) Plus animation from such perspective can be hard to achieve via 2d transformations (translations, rotations, scaling…), which is the essence of a bone system.

I’m using composite sprites in my game. Think of them as paper dolls, you have a base sprite, and just paste the clothing pieces on top, so you end up reusing many assets.

There are also tricks. For example, the characters in my game can wear heavy armour, this is represented by adding a sprite for the armour shoulders on top of the body part of the sprite, and then the head on top of it all. Since the shoulders barely move, I don’t need to make complex animations. :slight_smile:

Recoloring individual pieces (for example, making a sword red when it is a fire sword) also helps add more variety with little work.

In any case, don’t sweat it too much, keep in mind that, if the game is a little hectic, players won’t pay that much attention to detail :wink:

#9

Hey,

It seems like using separate sprites is the way to go from what I’ve read, as bone animations may be hard to work with. I thought about the overlaying and composite sprites ideas but I’m not sure how to implement it.

I also just came up with an idea but don’t know if it’s good, could someone please give some suggestions? I was thinking I can set a position for each part of the sprite that can be customised, for example, a position for the head, body, legs, both arms etc, and render different sprite animations at those positions. Each character sprite will be the same size. Something like this:

http://puu.sh/69ZS8.png

What do you guys think?

#10

I do something similar.

For example, for humanoid characters I have the body sprite, the head sprite, and the hands (or weapons) sprite, each set to an specific position and rendering order.

All I have to do is swap the actual bitmaps around. Of course all bitmaps of the same type (say, head sprites) are drawn using the same constraints (size, position, etc).

Here you have an example, except for the scientist in the middle, all these use the same body sprite with different colors, and all I do is swap the head sprites:

720×200 18.9 KB

As for the armour, I just draw a heavier-looking torso and shoulder pieces on top of the same body.

I recommend you try to make sprite composition script based. For example, make a parser that reads a simple text file with all the information regarding sprite position, bitmap names, animation frames, etc… That way you won’t have to delve into code whenever you want to modify the content.

XML Example just off the top of my head (not actual code):


<sprite name="Jhonny">
  <subsprite name="Head" xPosition="0" yPosition="10">
    <file>/sprites/JhonnyHead.png</file>
    <animation name="RUN">
      <frames>1,2,2,3,2,2,1</frames>
    </animation>
  </subsprite>
  <subsprite name="Body" xPosition="0" yPosition="0">
    <file>/sprites/JhonnyBody.png</file>
    <animation name="RUN">
      <frames>1,2,3,4,5,6,7</frames>
    </animation>
  </subsprite>
</sprite>

In fact, the way I have it set up, I can have sprites with mismatching frames, and make them match through the script. For example, the feet’s walk animation has more frames than the shoulders, yet through the script I instruct the animation class to reuse specific frames so they match.

A cute error I’m dealing with now is that the different body parts get out of synch, here you can see an example:

Notice how the head bounces weirdly? Part of the animation script instructs the sub elements how they need to bounce (so I don’t need to include the bounce in the actual sprite, in fact the head parts only have one frame), which is another way to avoid making more sprites than needed.

In any case, just a bunch of ideas, you’ll find the solution that best matches your needs :slight_smile:

#11

Since the view is top-down (isometric?), if you want it to look professional you will have to draw each animation by hand.

There is a few tricks that you can do, but it is kind of difficult to make it look good. You can split an image like this…

Quickly drawn in about 2 seconds from my tablet :stuck_out_tongue:

In other words, you can draw each segment of the drawing by itself and stack them up over each other for each animation frame. It is a lot of work but it allows a lot more freedom of customization when you are doing armor and other things. It’ll also cut down on the amount that you have to draw. Mix this with color swapping and you can do a lot in terms of animation and customization.

The game of “Disgaea” does this with its animations, so you might want to check it out if you need more ideas.

#12

Hey, a quick question with the sprite based animations - because there are separate sprites in each complete character animation, does that mean I have to animate each of the pieces individually, so one walking animation for each style of “legs”, “body” etc?

Also, a more practical question, how would you actually go about creating the animation? I’m okay at creating spritesheets for entire characters whole, but animating, say, arms only for walking seems a bit more difficult. Like I said, I’m not good at art/graphics. I guess the issue is more to do with timing and putting all the pieces together.

#13

You could always do the full sprite animation, and then chop it into pieces.

But yes, each piece needs to be animated.

Another option is to draw a character, put the sprite sheet in a layer, and then draw the pieces (weapons, armours, etc…) on another layer on top of that one, using the base character as a reference.

The good thing is that you can get a lot of characters by combining pieces once you’re done, getting more variety.