Hi !
Featured games (90)
games approved by the League of Dukes
Games in Showcase (789)
Games in Android Showcase (234)
games submitted by our members
Games in WIP (864)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  How To Make 2D Customizable Sprites and Animations  (Read 17508 times)
0 Members and 1 Guest are viewing this topic.
Offline Rayexar
« Posted 2014-01-04 13:26:07 »


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!
Offline trollwarrior1
« Reply #1 - Posted 2014-01-04 13:29:44 »

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.
Offline Rayexar
« Reply #2 - Posted 2014-01-04 13:52:18 »

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.
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline Drenius
« Reply #3 - Posted 2014-01-04 13:59:11 »

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.
Offline Rayexar
« Reply #4 - Posted 2014-01-04 14:05:27 »

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.
Offline trollwarrior1
« Reply #5 - Posted 2014-01-04 21:58:59 »

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.
Offline moogie

JGO Ninja

Medals: 16
Projects: 6
Exp: 10 years

Java games rock!

« Reply #6 - Posted 2014-01-04 22:27:52 »

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.

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)

Java4k RIP 2014
Offline Oskuro

JGO Ninja

Medals: 77
Exp: 10 years

Coding in Style

« Reply #7 - Posted 2014-01-05 00:22:58 »

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. Smiley

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

Offline Rayexar
« Reply #8 - Posted 2014-01-05 04:05:43 »


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:

What do you guys think?
Offline Oskuro

JGO Ninja

Medals: 77
Exp: 10 years

Coding in Style

« Reply #9 - Posted 2014-01-05 04:51:16 »

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:

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">
    <animation name="RUN">
  <subsprite name="Body" xPosition="0" yPosition="0">
    <animation name="RUN">

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:

Click to Play

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 Smiley

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline ctomni231

JGO Wizard

Medals: 99
Projects: 1
Exp: 7 years

Not a glitch. Just have a lil' pixelexia...

« Reply #10 - Posted 2014-01-05 22:53:22 »

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 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.

Offline Rayexar
« Reply #11 - Posted 2014-01-07 12:18:31 »

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.
Offline Oskuro

JGO Ninja

Medals: 77
Exp: 10 years

Coding in Style

« Reply #12 - Posted 2014-01-07 13:49:44 »

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.

Pages: [1]
  ignore  |  Print  

hadezbladez (2595 views)
2018-11-16 13:46:03

hadezbladez (928 views)
2018-11-16 13:41:33

hadezbladez (2551 views)
2018-11-16 13:35:35

hadezbladez (500 views)
2018-11-16 13:32:03

EgonOlsen (3675 views)
2018-06-10 19:43:48

EgonOlsen (4028 views)
2018-06-10 19:43:44

EgonOlsen (2440 views)
2018-06-10 19:43:20

DesertCoockie (3247 views)
2018-05-13 18:23:11

nelsongames (3293 views)
2018-04-24 18:15:36

nelsongames (4264 views)
2018-04-24 18:14:32
Java Gaming Resources
by philfrei
2019-05-14 16:15:13

Deployment and Packaging
by philfrei
2019-05-08 15:15:36

Deployment and Packaging
by philfrei
2019-05-08 15:13:34

Deployment and Packaging
by philfrei
2019-02-17 20:25:53

Deployment and Packaging
by mudlee
2018-08-22 18:09:50

Java Gaming Resources
by gouessej
2018-08-22 08:19:41

Deployment and Packaging
by gouessej
2018-08-22 08:04:08

Deployment and Packaging
by gouessej
2018-08-22 08:03:45 is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!