Hi everyone, I am an amateur developer as well as designer and I really love to play board games before. Now I am trying to create a game similar to snake and ladders or game of dice for mobile device. I am really having hard time to know if the animation can be smoothly generated as sprite. Because when I tried those games, especially G.o.D, the animation is really smooth as if the heads, limbs and hair fringes are actually moving on their own but still connected. Any idea if this is part of the tweening or something?

They are in fact moving on their own.

Every moving part is a separated layer of the character, like in this picture:

These are used by an animation software called "Live2D"

The character have no animation by default, but you can add movement to each part individually and animate it via rotation, translation or scaling.

Every "layer" (torso, arms, legs, hair) are different entities drawn in order one over one another, this way you have control over every part (let's say you want to rotate the arm, but not the torso)

Now using the example of the game you've shown us, take the girl with the long red hair:
They probably have a sprite map for her body without the back of her hair and the hair sprite itself in another place, when rendering the scene, they will draw first the hair in it's position relative to the body rotate it a little to give a sensation of animation and then draw the body over it. This way the player feels as it is only one entity.

You can combine both sprite animation with this layering technique to obtain a hybrid animation like in the G.o.D.

Hope it was helpful.

I am really having hard time to know if the animation can be smoothly generated as sprite.

Yes, it can. Skilled animators are good at that type of work. Amateurs often struggle with it.

Any idea if this is part of the tweening or something?

There are many ways to implement it. The post above shows one way of composing characters. It is script-heavy but can work well, where the animator has a collection of pieces that are rotated and translated by animation scripts. It can be implemented as a sequence of fully-composed images, where each animation sequence is completely drawn by hand (or exported by a 3D modeling program and touched-up by hand) and images are played in order like a movie or flip-book. It can be implemented sequences of rendered segments which are basically a mix of the two, many scripted segments that are animated and each segment has hand drawn sequences of clips.

There are also programs that automatically generate image tweens between multiple still images, but that probably is not what you are looking for in this example.

You can use a tool like Spine:

http://esotericsoftware.com/spine-in-depth

If you have the full version and use the plugin in your game you can then skeletally animate your sprites. It also allows you freeform deformation of your sprites. This can produce the smoothness you are looking for.


Another similar package is Spriter:

http://www.brashmonkey.com/spriter.htm

I haven't had any experience with this one but it seems to be quite popular.

If you are not quite good at 2D animations already, and don't want to go the 2D Bones / Separate layers route (the first gives a certain feel to your animations, the second one can be quite laborious to draw, depending on how freely your characters should move), 3D animations are your best bet.

True, 3D Modelling, rigging and animation has a huge overhead. Its a very technical process that takes years to learn. So if you only need a few animations, and only for a sidescroller, the 2D route can be faster (certainly for 2D Bone animation, also for normal spritesheet animation).

If you need extra fluid animations, a lot of different animations, animations with lots of turning of the character (in which case 2D Bone animation stops being such a good fit), or worst of all, animations for isometric characters, you should look into creating the animations with 3D models, similar to what frob described.

Once you have modelled your character and rigged it, you can quickly pose it, render the pose from the camera perspective of your choosing, and then create a single animation frame from that pose.

When you start having 100's of frames in your spritesheet, you will spend exponentially more time to draw all these frames the traditional 2D way, than just rendering them out from a 3D Package.

Also keep in mind some game nowadays are actually managing to make 3D models look almost like 2D... I am quite amazed how well Guilty Gear Xrd Sign managed to do that.

I was kinda shocked the first time the game left the normal 2D view during a special attack. Took me by surprise, I thought it was 2D Sprites before! Given how they looked way smoother than the 2D Sprites of SNKs newest King of Fighters, and how there are rumours the cost for the sprites almost killed even a still quite big and well known studio as SNK because they wanted them to look HD, with tons of smooth animations, I should have known better. Still, shows how you well you can fake 2D if you go the extra mile and not just throw some cel shaders on your models.

Haven't watched it yet, but this video seems to talk about how they pulled it off:

http://www.polygon.com/2015/5/26/8663003/guilty-gear-xrd-cel-shading-making-of

>> I am really having hard time to know if the animation can be smoothly generated as sprite.

all gaming devices can refresh the screen fast enough to yield smooth sprite animation.

all you have to do is write code that produces smooth animation. so it can't be insanely inefficient, and you'll need some way to control the speed of the entire thing (fixed timestep, framerate limiter, vsync, only runs on one hardware configuration so the device speed is always the same, etc).

Thanks Norman, though my concern is, if the game of dice sprite sheet shows nodding characters along with the x-axis with very smooth motion, i am thinking if it is pure sprite sheets because it's going to be a lot of work.

They are in fact moving on their own.

Every moving part is a separated layer of the character, like in this picture:

These are used by an animation software called "Live2D"

The character have no animation by default, but you can add movement to each part individually and animate it via rotation, translation or scaling.

Every "layer" (torso, arms, legs, hair) are different entities drawn in order one over one another, this way you have control over every part (let's say you want to rotate the arm, but not the torso)

Now using the example of the game you've shown us, take the girl with the long red hair:
They probably have a sprite map for her body without the back of her hair and the hair sprite itself in another place, when rendering the scene, they will draw first the hair in it's position relative to the body rotate it a little to give a sensation of animation and then draw the body over it. This way the player feels as it is only one entity.

You can combine both sprite animation with this layering technique to obtain a hybrid animation like in the G.o.D.

Hope it was helpful.

Thanks Guilherme, I thought of this before and seems you are right about moving them like paper dolls will be a very good starting point. At the same time, I am still curious on how can they rotate the head along y-axis and render it smoothly like a slow motion 3D but still 2D animation. It's kinda hard to explain on words but you can check out the game as reference if you have time. I just thought they might be a very good animators or they are using a software or masking technique.

I am really having hard time to know if the animation can be smoothly generated as sprite.

Yes, it can. Skilled animators are good at that type of work. Amateurs often struggle with it.

Any idea if this is part of the tweening or something?

There are many ways to implement it. The post above shows one way of composing characters. It is script-heavy but can work well, where the animator has a collection of pieces that are rotated and translated by animation scripts. It can be implemented as a sequence of fully-composed images, where each animation sequence is completely drawn by hand (or exported by a 3D modeling program and touched-up by hand) and images are played in order like a movie or flip-book. It can be implemented sequences of rendered segments which are basically a mix of the two, many scripted segments that are animated and each segment has hand drawn sequences of clips.

There are also programs that automatically generate image tweens between multiple still images, but that probably is not what you are looking for in this example.

Thanks Frob, I am also open to try the programs you are talking about to know if they will work as I expected.

You can use a tool like Spine:

http://esotericsoftware.com/spine-in-depth

If you have the full version and use the plugin in your game you can then skeletally animate your sprites. It also allows you freeform deformation of your sprites. This can produce the smoothness you are looking for.


Another similar package is Spriter:

http://www.brashmonkey.com/spriter.htm

I haven't had any experience with this one but it seems to be quite popular.

Thanks Buster, I will try these out.