top of page

Animation Graph

Introduction
During my internship, my biggest priority was designing and implementing an animation graph (node based state-machine) for our in-house engine. The back-end was already done when I came on board, so my focus was on the front-end.

Research
I began by first researching how other game engines like Unity, Unreal engine and Godot approached and implemented their own versions of the node based state-machine.

This way I got the chance to look at and analyze what worked for each engine and what I could get from them to use for my own design.

Wireframing & Visual Prototyping
After researching and gathering data from each engine, I started on creating the visual prototypes. Every visual prototype would showcase the different features that I planned to implement.

Creating the visual prototypes was also a way for me to visually communicate  my ideas for each feature to the rest of the team.

(wireframes and protypes I created in figma for the state machine)

(wireframes and protypes I created in figma for the blend space)

Proposal
Having completed the visual prototypes, I combined them all in a proposal draft and presented them as gifs. This approach would make it easy for the people reviewing to know exactly what and how I would implement each feature and give them a opportunity to pinpoint any issues or missing features.

(one of the first wireframe/protype for creating nodes)

(wireframe/protype for creating connections between nodes)

(newer wireframe/protype for 1D blending in blend space)

Implementation
Now it was time to bring the visual prototypes to life. The only obstacle was to figure out how to faithfully bring each idea to reality, with the GUI library Dear ImGui. Thankfully I had experience using Dear ImGui since before, and with some experimenting was able to successfully bring the ideas to life.

But there were a few design ideas that sounded good on paper but upon implementing them, proved to not have been the best. This prompted me to go back once I finished with the implementation and redo the design. Which resulted into a better experience for the user.

Final result

Present day
Nearing the end of my internship I was able to have finished implementing the node based state-machine. But my job wasn't done there, once I got on full-time I went on to implement creating global variables, previewing how the nodes transition and are currently working on the visual prototypes for implementing blend space.

The execution has exceeded my expectations and I am extremely proud of the final version. But there is always something more to improve and optimize. The most important aspect is what the user experience is like and what the users think. And so far the people in my team are very happy with it.

Tools used
Dear Imgui was used as the GUI library, was implemented in c++ and I exposed all the functions to angelscript.

The scripting language used to implement the animation graph was angelscript.

Wireframing and prototyping I did in figma.

bottom of page