#ScreenshotSaturday: Our Animation Process

Published by admin on

Torben here, the artist behind Rubikons graphics. We got some questions, how we do our sprite animations for Rubikon and whether its rotoscopy or not. Well, kinda sorta. Thats why I want to give you a quick overview of our process for this weeks screenshot saturday. So here we go:

Step 1: Base Animation in Unity

As a starting point for our base animations (walk, run, attacks etc) I use 3D animations from Mixamo that get tweked later on until they fit our project. More specific / simpler animations (interacting with a specific item, idles) are done from scratch and do not involve this step.

I import the 3D model and animation in a template Unity project with a camera set up to match the angle we need for our game. From there I export all needed keyframes with the help of the awesome Unity plugin Frame Exporter.

Step 02: Work-In-Progress Spritesheet in Photoshop

After that I throw them into a Photoshop project to quickly change the sizes of our frames to match the rest of the animations. With the help of John Wordsworths Sprite Sheet Generator for Photoshop I export them as a work-in-progress-spritesheet for further work in Aseprite.

All of this is just the preparation for the actual animation and does not take a lot of time. For me its well worth the hassle because of the fluid & natural movement of the animation afterwards, as well as the saved time that I would otherwise need to get the angles and perspectives right, would I draw every frame from scratch.

Step 03: Rough Tracing in Aseprite

The spritesheet then gets imported into Aseprite. I trace the frames roughly with a fixed set of colours for depth and defined layers for items. We changed this set up quite a bit while in development and as of now we have a some seperate layers for arms, torso, head and so forth.

From here I export a rough spritesheet, we import it into Unity und try it out. In general this is the most important part of the process, because there is always some tweaking in regards to timing, weight and perspective involved, as well as some back & forth with the other team members until we are satisfied with it.

Step 04: Refining In Aseprite

If we are happy with the rough version and everything works within the project we refine the graphics. This is usually the most satisfying part of the process, because you can finally see your graphics come to life 🙂

Step 05: Import into Unity

After exporting all layers seperately from Aseprite our code master Tony adds the animation to our character prefab in Unity so we can test it and tweak all remaining issues that might occur with the new graphics.

And thats it. We hope this little insight was interesting and if you have any thoughts or questions feel free to post them in the comments. Peace!


Leave a Reply

Your email address will not be published. Required fields are marked *