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"