robokit: Using Adobe Animate and the PixiAnimate Extension to create WebGL Pixi.js Screen Animations

4 min readMar 7, 2019

robokit

robokit is an open source project that provides a foundation for developing conversational ai/social robot applications. It is described in detail here: https://medium.com/@andrew.rapo/make-your-own-conversational-ai-social-robot-with-robokit-a-crude-approximation-of-jibo-10847e9a2661

This article explains how to use the PixiAnimate extension for Adobe Animate to create screen animations for robokit that are rendered by Pixi.js.

Adobe Animate and the PixiAnimate Extension

Adobe Animate is part of Adobe’s Creative Cloud suite of applications and it is the most powerful tool available for creating timeline-based 2D animations. Using its Custom Platform SDK, Adobe Animate can be extended to generate output for any platform. The open source PixiAnimate extension was developed at Jibo, Inc. so that Adobe Animate could be used to author high-performance, WebGL-based screen animations for Jibo’s Electron/Chrome display system. The PixiAnimate extension exports timeline animations as JavaScript and JSON objects that can be rendered and controlled by Pixi.js.

Pixi.js

Pixi.js is a fast, flexible 2D WebGL renderer and animation system created by Goodboy Digital.

robokit screen animations

robokit’s “eye” animations help convey information about its state and contribute to the (limited) impression that robokit is alert and aware. The eye can blink, look left, look right and display a highlight ring (blue). These animations are authored using Adobe Animate’s familiar timeline animation features.

Shapes like the eye are defined using vectors and/or bitmaps. Animations are defined on the timeline using frame labels, frame actions and animation tweens.

The PixiAnimate extension exports all of the shape, image and animation data as JavaScript and JSON objects.

The animations can then be loaded and controlled by JavaScript code that looks like:

const eyeClassPath = root + '/assets/eye/eye.js';
const eyeClass: any = require(eyeClassPath);this.canvasElement = document.getElementById("stage") 
    as HTMLCanvasElement;
this.renderer = PIXI.autoDetectRenderer(1280, 720, {
    view: this.canvasElement,
    backgroundColor: 0x0,
    antialias: true
});this.stage = new PIXI.Container();
this._loaderCallback = (instance: any, loader: any):void => {
    this.eyeInstance = instance;
    this.eyeInstance.gotoAndStop('idle');
    this.eyeInstance.eye.eye_blue.visible = false;
}
animate.load(eyeClass.library.eye, this.stage, 
    this._loaderCallback as any, basePath);

Animations can be played by referencing the labels defined on the timeline in Adobe Animate, like:

this.eyeInstance.gotoAndStop('idle');
this.eyeInstance.gotoAndPlay('blink');

Installation

Step 1: Get Adobe Animate through the Creative Cloud installer:

Step 2: Install the PixiAnimate extension:

Step 3: Verify that PixiAnimate is installed. It should show up as a new document type in Adobe Animate:

Step 4: Open the robokit/assets/eye/eye.fla file:

Step 5: Make some additions, edits, adjustments, etc.

Step 6: Use the File->Publish Settings… menu to invoke the PixiAnimate exporter and generate new eye JavaScript and JSON files.

Note: The output can be tested by navigating to the robokit/assets/eye folder and starting a local web server like http-server:

npm install -g http-server
cd [robokit]/assets/eye
http-server

Summary

The PixiAnimate extension makes it possible to use Adobe Animate to author high-performance 2D animations for WebGL that can run on everything from a Mac to a Raspberry Pi (to Jibo).

For more information about robokit, see: https://medium.com/@andrew.rapo/make-your-own-conversational-ai-social-robot-with-robokit-a-crude-approximation-of-jibo-10847e9a2661

robokit: Using Adobe Animate and the PixiAnimate Extension to create WebGL Pixi.js Screen Animations

Written by Andrew Rapo