TS Animation System

Summary:

We didn’t have a method in our apps to do animation without hand coding it. This was due to the fact that we render on Pixi, but have no game engine, so we built our own on Typescript and Electron.

I was tasked with creating animation ability.

Tech stack:

Typescript

React / Redux

Electron

Pixi

Benefits of a Timeline System

• Scales better for large sequences of items
• Drop in drop out animation replacement
• No huge PRs with custom code
• Animator/designer controlled, so frees devs of also being animators
• Can merge UI animations, custom component value changes, spine animations and particles into one readable format
• Engine / Game agnostic, as is a framework of reading data and processing it
• Eliminates old Tween code which under the hood does not do what it says it does
• Works nicely with current framework’s components
• Exposes framework component issues we haven’t tested before so we can fix cracks in code
• Can be slotted into current and any future game using prodigy framewok

Breakdown:

Create an animation format. IE .animation,

Which get automatically saved to .animation files.

Which Gets processed by a TimelineProcessor framework element

And gets sent to a Timeline component, to preview and update animations in editor

And gets linked via a signal hook to any game event.

What I did to get there

• Created the .animation format
  after figuring out how to access game components, this would be a minimal clean data which contains only object to change values of, the values, the way it changes values, and any custom properties such as eases or staggers to use.
• Created a Timeline Processor framework class
  which takes real object links, finds them and sets them up for animation. Sets links between the animation file, and a signal to hook to.
• Created a timeline component
  that converts all the objects to animate to sudo objects, and animates them using framework calls to the related component type.
• Created a Timeline Processor Framework Component
  which allows live preview in editor of any supplied animation, inheriting from timeline processor
• Creating a timeline view in Editor
  Which allows setting , removing , keys live in editor. With each key change, the animation file updates its data

Visuals!

I designed how it would look before even started to code.
Here you can drag and drop new animation files to apply to the timeline. And the redux state updates.

Before the full timeline we need a More basic component,designed that too.

Under the hood:

• This component updates animation data in memory , it binds itself to the active redux state , and to the GUIDs of linked objects.
• On export, the links and core data stays. At render time, it uses the data, which then gets processed to the framework to animate to our chosen renderer. In this case PIXI. The timeline core also converts our simplified animation format to the dedicated pixi render calls.
• It takes care of not updating when off stage, when the new values havent changed, etc. Any optimization this way can be done at framework level.
• It also has the ability to save and load to a physical animation file, which can also be used in a full timeline.

Bonus:

Here are some quick videos i made for people to use the newly created component