#ScreenshotSaturday: Our Animation Process

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!

#ScreenshotSaturday: Movement Level Up!

Character Leg Animator

This saturday, we’d like to present you our new animator system. In a brainstorming, we decided to split the character in several animators, like the leg animator which you see above. This way we are able to perform mixed animations like walking backwards and strafing. Combats will be much more dynamic and challenging. Last but not least, you will be able to customize your character in every corner 😉

Week In Review: Perfectionism

This week has been used to optimize our first animations and to consider user feedback 🙂

Visuals

  • Main character walk animations revision
  • Main character idle animation with revision
  • Main character run in progress

Code

  • New HUD bars
  • Stamina added
  • Combat system setup in progress
  • Input manager refactoring
  • Minor improvements and fixes
  • Animator system refactoring

Weeks In Review: Time for Refactoring

The past few weeks have been used for every coders favourite task: refactoring! In simple words: we took our working features and revised them with new knowledge and better performance. This is intense work with no visual outcome, but utterly necessary to keep the performance and project architecture in good shape.

Visuals

  • House interiour
  • Toilet interiour
  • Main character walk animation sketch
  • Main character animation in progress
  • Water shader with moon reflection in progress

Code

  • NPC sight with obstacle consideration
  • NPC sight memory
  • Sprite management refactored
  • Mist shader refactored
  • Sprite override (when equip armour) refactored
  • AI refactoring
  • AI tasks
  • Baked pathfinding paths
  • Pathfinding grid refactoring
  • Pathfinding A* refactoring in progress

Week In Review: Let there be light!

Last week has contained some free days, but still progress has been made!

Visuals

  • Main character design and animation in progress
  • Water shader with moon reflection in progress
  • Crops shader improved
  • Day / night cycle improved
  • Sprite lighting system with lightmaps
  • Sun orientated dynamic shadows
  • Sprites receive shadows from light sources

There will be a demo video of our new lighting system this week, so you dare not miss it!

Week In Review: ‘The Mill’ and shaders, shaders, shaders…

Let’s bring you up to date with our weekly summary!

Visuals

  • Second scene ‘The Mill’
  • Main character design and animation in progress
  • Sprite distortion via shaders for dynamic wind visualization
  • Shader for 3D mist effect
  • Dithering shader for new field of view visualization

Unity

  • Implementation of our second scene
  • WeatherManager refactoring
  • Manual and dynamic weather feature
  • LockDirection feature for upcoming combat system
  • Learn the ropes of shaders
  • Several fixes and minor improvements
  • Combat system performance boost
  • Combat system in progress
  • Character editor in progress

Check out our recent weather teaser and don’t miss our main character revelation on next #ScreenshotSaturday! Take care!