November 26, 2017

Introducing onion skinning for the Godot game engine

You may already know about the great open source Godot game engine. I've been contributing to it since two years ago or so. Today I'm writing here to announce a feature I developed for the upcoming 3.0 version, and of which I'm pretty proud of: onion skinning.

So what's onion skinning?

It's a technique used in animation from its early days consisting in the ability to draw frames of animation on a semitransparent paper (onion paper) so you can see the previous frame through it. That provides the artist with a good reference to base his new drawing in.

Of course, this concept once brought to computers gets much more flexible: arbitrary number of see-through layers, ability to see the past and/or the future, etc. Every decent software package with an animation editor features it nowadays. And some people was requesting it for Godot.

This picture from the Adobe Animate CC documentation [CC-NC-SA] is fairly telling about the concept:

How it looks like in Godot?

This images are from the pull request I made and based on the main character from the 3D platformer example. (By the way, this works for both 2D & 3D.)

With the default past/present colors (that you can change in the editor settings), seeing one frame to the past and to the future.
This time with three-step depth to the past only, differences-only mode enabled.

Technical challenge

Well, implementing this was quite hard. A number of instrastructure additions had to be made.

Save/restore animated values

At first sight, to be able to display past/future steps of an animation I could just save the current timepoint and let the internal animatioin player move back and/or forth as required, to finally instruct it to move to the original time point so the user sees the UI in the same state as before.

There was a problem with this: if the user had already modified the value of any of the animated properties, such value would be lost since the player is only aware of values stored in keyframes. As a consequence he would even be unable to move some node if its position was part of the animation since it would get reset to whatever value it should get at the current point in the animation.

The solution was to add to the animation player the ability of saving and restoring the current values of every property of every node targeted by any animation track.

Capture frames

To sum up, I needed to have the ability in the editor to render arbitrary scenes and capture them in order to later overlay them over the regular scene view. This required the following:

  • Extending the existing draw-on-top-of-editor-viewport facilities to the 3D editor's viewpors as well.
  • Making the renderer able to render the full scene off-screen (without swapping buffers, in OpenGL terms).
  • Playing dirty tricks with the composition of viewports in order to get the resulting scene rendered to a texture I had control over. (Something that has to happen as much times as the onion skinning settings determine.)

For juicier details, you can check the the pull request.

This is how the relevant pop-up menu looks like.

Wrap up

This has still some limitations and will be more useful when auto-keyframing and stop-at-key get added. Of course, I'll have to fix several bugs before the final Godot 3.0 for sure.

But with its current features this is something useful already and I'm happy I've been able to finish it in time, before the feature-freeze.

Let's hope people likes it at aleast a half of how much I've struggled to make it! :)

12 comments:

  1. Great! This will come in handy for my animation-heavy game.

    ReplyDelete
  2. Nice. Thanks for the time and hard work u put on this!

    ReplyDelete
  3. Hurray! Onion Skinning for Godot, this will be handy to make good use of.

    ReplyDelete
  4. Thank you for your work, sir.

    ReplyDelete
  5. This looks great. I'm looking forward to using it for my next project :D

    ReplyDelete
  6. thanks for contribute, keep the hard work dude :D

    ReplyDelete
  7. Wow! Pedro, thank you for your hard work on these contributions! This is super impressive!

    ReplyDelete
  8. thanks for contribute, keep the hard work dude!! ^^

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete