mobile background

Ratopia DevDiary #4 - Character Animation

Cassel
15 Jul 2022
Views 8065


Hello everyone, it's Cassel, developer of <Ratopia>

We are now in mid-summer, and long JangMa-Cheol(monsoon-like season) has arrived.

Hope someday we could put such periodic weather feature in the game,

we are struggling on developing


For this month, I'd like to talk about how we made character animations in <Ratopia>.

Since I've failed to summarize, how we build ratizen's AI system will be on the next DevDiary.



Character Animation


In <Ratopia>, I wanted ratizens to have more detailed animation on their actions than that of <Ratropolis>.

Thus we had to think a lot about how will we keep the conceptual design of the game while continue to enhance the animation quality.


Since the animations of characters are supposed to be both realistic and exaggerated like cartoon.

For this, we used Squash & Stretch method.

Just like that small familiar mouse character in cartoon, this will make characters to be cute, curious, and mischievous.


34c308004f27e.png

436fc5fb80004.png

Examples of Squash & Stretch


On Spine program, interpolation process of animations is automatically handled, 

so the characters could be softly stretched and shrunk.

And this will make the game will become more energetic and bouncier when used on UIs and other features in the game.


For each of the ratizen's animations, we've put all the possible action to a single rat, and other rats to share its animation.

All the ratizens have same base image, but only the skin of it will change to have distinguished design.

This will make us unable to have various silhouettes of rat characters, 

but this will enable us to make various designs of rats quick enough. 

And also, thinking about how the sims of simulation games are designed, this seems to be suitable method.


cdeef29f6c600.png

The project file of all animations for all of the rats


However, since we were managing all the animation files in a single project,
we had to organize those with great care, and took bit more of time on organizing hundreds of those.

I wonder how many new animations will be added to the projects, and what new problems those will bring.



Skin System


Limited silhouette means limited parts to show the design's specialties.

These specialties of characters were supposed to be backed up with adding new skins,

but this was not really an easy job at the beginning.


Previously, we mad each images for each parts, trimmed those to not have any margins,

and applied mesh function to put naturalistically moving hair and capes.

This was a handy function of Spine program, but in order to use this, 

we had to manage all the parts every time, when any new were added, to fit with their image sizes.

This took so much time, and was really uncomfortable to add new features such as long hair or short skirts.

So we had to simplify the process.


Trying many possible options, we ended up with giving up the mesh function of the program.

This could be a bit disappointing but possible decision,

since when measured, we were not using it a lot anyways.


e84849d6fb6e7.png

Simplified method of designing, considering the future work efficiency


As we get used to the new method, it became a lot easier to add new cloths.

In addition to this, I think this could make it possible to add user-made cloths late on too.

It only if a possibility yet though.



Interaction & Structure animations


As the structure resources got stacked up, we made character animations fir with each of those.

It was a simple work; make an animation of a character for a building,

and when the character approached to the building, play it.



60e7b4ade715d.png

Interaction animation of using bed


Designing backside of ratizens might give doubled amount of works to the artists.

So in the early game, we have made animations only working in front of the buildings.

But as the time goes, we found out that for some buildings, it could become much natural looking, 

if we could put ratizens to work behind of some objects of the buildings.

To make it possible, we cropped the building image into parts, distinguished the layer order of these images,

and tried to organized it with the layer of the characters.


29a8c086abcfd.png

Winery with separated barrel parts


But using Spine program to design the building and mixing it with the characters were problematic.

The draw-order function, which controls drawing order of images in the animation, 

only indicated what is on the project currently working on.

So for the animation, the files had to be divided into a citizen part, a part showing in front of the citizen,

and the part showing behind of the citizen.


In order to play the characters to move to the front and the back of the buildings on the right timing,
the animation had to be managed on the Unity program anyways.

In the end, we decided to create the animations of the structures on Unity program, 

and synchronize it with the character animations designed on Spine program.



705314c9d47cc.png

Synchronized Animation


There still are some remained inconveniences of working, such as working on two programs in turns,

but be hold, it was very good.

This was what we could do the most for a moment, however, hope we will find better method in the future.



Adding Effect


As new animations were added up, I to become a bit greedier, wanted more to put.

'It could look better when dusts or light effect get implemented' I thought.


So we added new effects to fit on new animations.

Light origins and smoke were done with particle system on Unity program,

and those cannot be shown with such function were drawn sprite images.

 

45d538f7b210d.png

Furnace with effects


When designing the effects, we have made those with the one without colors,

so that they can be used in different building with different colors, for just in case.


We are still learning many things and we are still doing a lot of trial and errors,

the appearance pf visible development of buildings and characters were really impressive.

I hope we can make something even better when you finally be able to launch the game.



Game Experiencing Day


I believe playing various games related to what we are creating really helps.

When having discussion, it becomes much easier to understand opinions with examples of experienced games,

and many new ideas could be followed with such games.


So, for every other week, we are having a time to play and discuss about other games,

For both to encourage members' understanding on genre of city building and simulations,

and to get a chance for new creative ideas.


99324aa87dc83.png

Games we have experienced through the day


If we could not find any game to refer,

we played board games based with background of ancient and medieval times of the world,

and try to gain knowledge about the age of empires.


As we level up our knowledge

we sure will be able to make more detailed games with a better quality.

So I guess we will continue to have such time.



Thank you so much for reading this long article.

For the next time, I'll write about the player character's and citizens' action tree.

If you subscribe this page and add your email address, you will get the newest news of the game for free.

Hope you have a great second half of the 2022,

and hope you have an amazing day.


Thankyou.


8 17