Pixi.js with Tween.js

[mirkobil]

Hi, I'm relatively new to Pixi.js, TypeScript, and Tween.js.

I have a simple example using the tween method, and it works fine. However, I have a couple of questions:

import { Application, Container, Graphics, Point, Ticker } from "pixi.js";
import { Tween } from "@tweenjs/tween.js";

export default class GameScene extends Container
    protected tween!: Tween;

    public constructor(config: GameConfig<Data>)
    {
        super();
        this.test();
    }
      
    protected test(): void
    {
        let box = this.createBox();
        this.tween = new Tween(box)
        .to({x: 200, y: 200}, 1000)
        .start();
        Ticker.shared.add(() => this.update());
    }
    
    protected update(): void
    {
        this.tween.update();
        console.log("update");
    }
}

 

Should I update each new tween in each class with its own ticker, or is there a more efficient way?
Am I missing something here, or can I handle tween updates globally at the start of my project, without needing to manually update each one?
I see console.log("update") even after the tween has completed.
Should I unsubscribe from update ticker onComplete?

this.updateCallback = this.update.bind(this);
tween.onComplete(() => Ticker.shared.remove(this.updateCallback))

I must be missing something, because this seems like a more complex way to work with simple tweens. Could someone please help clarify?

I’m using the following versions:

"@tweenjs/tween.js": "^25.0.0",
"pixi.js": "^8.5.2"