PlayCanvas simple animation tool on editor

commention · November 4, 2020, 2:24pm

Hello,

I wanted to give a try to JSON script attributes system and created a little script in order to animate my UI elements without any code with editor capabilities.

Tutorial video

Timeline.js

github.com

devcem/Playcanvas-UI-Components/blob/master/Timeline.js

var Timeline = pc.createScript('timeline');

Timeline.attributes.add('autoplay', { type : 'boolean' });

Timeline.attributes.add('position', { type : 'boolean', default : false });
Timeline.attributes.add('scale', { type : 'boolean', default : false });
Timeline.attributes.add('rotation', { type : 'boolean', default : false });
Timeline.attributes.add('opacity', { type : 'boolean', default : false });
Timeline.attributes.add('custom', { type : 'boolean', default : false });
Timeline.attributes.add('duration', { type : 'number', default : 1 });
Timeline.attributes.add('delay', { type : 'number', default : 0 });
Timeline.attributes.add('ease', {
    type : 'string',
    enum : [
        { Linear : 'Linear' },
        { QuadraticIn : 'QuadraticIn' },
        { QuadraticOut : 'QuadraticOut' },
        { QuadraticInOut : 'QuadraticInOut' },
        { CubicIn : 'CubicIn' },
        { CubicOut : 'CubicOut' },

This file has been truncated. show original

PlayCanvas Tween.js

github.com

playcanvas/playcanvas-tween/blob/main/tween.js

pc.extend(pc, function () {

    /**
     * @name pc.TweenManager
     * @description Handles updating tweens
     * @param {pc.AppBase} app - The AppBase instance.
     */
    var TweenManager = function (app) {
        this._app = app;
        this._tweens = [];
        this._add = []; // to be added
    };

    TweenManager.prototype = {
        add: function (tween) {
            this._add.push(tween);
            return tween;
        },

        update: function (dt) {

This file has been truncated. show original

Cheers!

yaustar · November 4, 2020, 2:36pm

Nice! Interestingly, Will has done something similar recently too!

commention · November 4, 2020, 6:19pm

Oh that’s amazing. I will check this out too, thanks

Albertos · November 4, 2020, 10:04pm

Very handy @commention! Thanks for sharing!