We’ve been slowly but steadily chipping away on our animations. This week we did some more work on our attack animation, the light attack and combat idle and implemented this work in progress version. First you draw, then you fight!
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!
Last weeks Screenshot of our animation controller in Unity got quite some attention. A lot of people mentioned, that we should look into blend trees to improve the controller. So our programmer Tony reworked the controller this week from the ground up. Looks so clean and organized now and it will be way easier to use in the the future 🙂