[SOLVED] How to add tween.js to PlayCanvas typescript

Juan_Pedro_Andres · January 17, 2021, 6:46pm

Hello all,
I continue in the process of creating an app with playcanvas typescript. I used to work with the playcanvas tweenjs versión.
Do you know how can I continue using it with typescript? how to integrate it?
I tried to migrate to “@tweenjs/tween.js” but it stopped to function as soon as the app enter VR mode

thanks for all received help

Leonidas · January 17, 2021, 7:02pm

Hi @Juan_Pedro_Andres,

The PlayCanvas tween library doesn’t have a npm module or TS types release.

You can still use it in your TS project, search online on how to add a plain JavaScript library to it. You can then link the following file and use it by bypassing any TS type error:

github.com

playcanvas/playcanvas-tween/blob/master/tween.js

pc.extend(pc, function () {

    /**
     * @name pc.TweenManager
     * @description Handles updating tweens
     * @param {pc.Application} app  The application
     */
    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

Juan_Pedro_Andres · January 17, 2021, 7:08pm

Thanks Leonidas, I will try to follow your advice

Juan_Pedro_Andres · January 18, 2021, 12:19pm

Done and working

oliverxyz · January 23, 2023, 9:41pm

Hi Juan,

can you elaborate on how you got it to work?
Did you link tweenjs in the html head or import it in typescript?

I am trying the latter and whatever I do, I get

TypeError: Cannot redefine property: TweenManager

Thanks!

karmacod3r · November 14, 2024, 10:12am

There are typings in the playcanvas-tween library now:

github.com

playcanvas/playcanvas-tween/blob/main/index.d.ts

declare namespace pc {
    type TweenTarget = Record<string, unknown> | Quat | Vec4 | Vec3 | Vec2;
    
    // Easing Functions
    export function Linear(t: number): number;
    export function QuadraticIn(t: number): number;
    export function QuadraticOut(t: number): number;
    export function QuadraticInOut(t: number): number;
    export function CubicIn(t: number): number;
    export function CubicOut(t: number): number;
    export function CubicInOut(t: number): number;
    export function QuarticIn(t: number): number;
    export function QuarticOut(t: number): number;
    export function QuarticInOut(t: number): number;
    export function QuinticIn(t: number): number;
    export function QuinticOut(t: number): number;
    export function QuinticInOut(t: number): number;
    export function SineIn(t: number): number;
    export function SineOut(t: number): number;
    export function SineInOut(t: number): number;

This file has been truncated. show original