Interactive Animation Toolkit for Unity

From UBC Wiki
Emerging Media Lab
UBC Emerging Media Lab Signature.png
About EML
A collaborative space for UBC faculty, students and staff for exploration of emerging technologies and development of innovative tools and solutions. This wiki is for public-facing documentation for our projects and procedures.
Subpages



Introduction

Typically 2D graphics are insufficient in facilitating the understanding of certain learning outcomes, especially in fields of studies that require the visualization of 3D spaces. As a result, there has been a demand for using emerging technologies to assist students by allowing them to view 3D-scanned material from various perspectives.

The EML has been working collaboratively with subject matter experts in order to create 3D pedagogical Unity applications, such as Fossa Finder and 3D Metabolism, to provide guided tours of various 3D objects. However, this process has been known to be effortful and tedious. Not only do non-technical collaborators struggle to understand the development process, but the developers themselves are often faced with a long array of similar and repeated tasks with no simple alternatives for streamlining their work.

The Interactive Animation Toolkit for Unity (IAT4U) project aims to provide a resource for both developers and subject matter experts that enables efficient prototyping and production of pedagogical AR/VR applications, in order to mitigate existing issues in development.

Primary Features

As of now, the IAT4U has prioritized creating a framework and interface to support the production of animation clips that can be played given certain conditions (e.g., changing the colour of an object when a button is pressed), which is a common feature in 3D guided tours.

Scriptable objects are frequently used data structures for creating 3D guided tours to define animation clips as well as the flow of animation clips. However, the default Unity interface lacks features to easily create and edit these scriptable objects. As a result, a node-based editor system was created by developing custom Unity interfaces in order to simplify and accelerate the process of creating animations as well as facilitate understanding between non-technical subject matter experts and developers. Custom inspector windows allow developers to generate new and edit existing scriptable objects and a node UI allows the sequence and flow of animations to be easily determined.

Methods

Design

The IAT4U interface was designed to be usable for users with varying technological experiences in order to accommodate both non-technical subject matter experts and developers. Inspiration was taken from related and familiar interfaces, particularly ones found in Unity with emphasis on those that are frequently used to help make animations. This allows for dual transfer of knowledge such that advanced Unity developers are able to easily use the IAT4U interface and novice users can transition into using Unity more easily.  

Scriptable objects used to describe animations consist of two arrays; one for the object and the other for the object’s state. Given the implementation of this data structure, Unity’s default Inspector window increases the risk of making errors because users must be careful that corresponding objects and states have the same indices within their respective arrays. In order to mitigate this issue, creation and editor windows were implemented such that the arrays are presented in a dictionary format so object/state pairs can be added and removed together. The overall look and feel of the window was made to resemble Unity’s default interface by preserving the aesthetic and applicable interactions.

In order to establish the flow of animations, creating a node UI is the most intuitive solution as users can “string” together a sequence of animations and include conditions for when they should be played. Various interactions and visual elements are taken from existing Unity interfaces, specifically the Animator Controller and Shader Graph, and improved upon in order to create the IAT4U node window.

Development

The developers of the Interactive Animation Toolkit team would first discuss potential designs and functionalities of the toolkit, while researching its plausibility through research. Our biggest asset was Unity's scripting manual where we could verify that the proposed tasks from the design process could be undertaken. A lot of inspiration for create a custom editor window came from referencing Unity C# code that Unity used internally to create existing editor windows.

Discussion

For the Interactive Animation Toolkit for Unity project we use Unity's newer UI system, the UI Toolkit. This enables us to reuse UI structures and style codes, similar to web development using HTML and CSS. The learning curve for the UI Toolkit may be steep due to the lack of proper guidelines provided by Unity. However experience in web development and familiarity with markup languages used in conjunction with stylesheets will definitely accelerate the learning process.

Findings

Due to the novelty of the UI system (Unity's UI Toolkit) used for IAT4U, finding appropriate tutorials and guidelines to create our goal product was challenging - a lot of materials available were only applicable for Unity's IMGUI system. We also often experienced crashes while making changes to the UI, which we later learned could be prevented if the custom editor windows are closed before we save modifications to our code. There were a lot of experimenting based on snippets of code and Unity manual, but ultimately we were able to achieve creating a prototype for a custom node window as well as a custom scriptable object editing window.

Setup

Provide enough information for a first time user to get up and running.

Code

  • The project was built using Unity 2020.3.7.
  • The code can be found under the UBC Emerging Media Lab GitHub. The private repository is called InteractiveAnimationToolkitForUnity.

Art Assets

First Time Setup Guide

Poster

Development Team

2021S:

  • Rosaline Baek: Project Lead, Developer
  • Alex Zhou: Developer
  • Vita Chan: Designer
  • Allen Chen: Volunteer Designer

FAQ

Bibliography

License

Last edit: May 6, 2019 by Jin Li

Some rights reserved
Permission is granted to copy, distribute and/or modify this document according to the terms in Creative Commons License, Attribution-ShareAlike 4.0. The full text of this license may be found here: CC by-sa 4.0
Attribution-Share-a-like