tweening is hard

This commit is contained in:
koneko 2025-01-10 01:07:30 +01:00
parent 94caafa020
commit b371b48020
4 changed files with 41 additions and 5 deletions

View File

@ -6,7 +6,7 @@ import { Grid } from './game/Grid';
import WaveManager from './game/WaveManager'; import WaveManager from './game/WaveManager';
import TowerManager from './game/TowerManager'; import TowerManager from './game/TowerManager';
import { GameScene } from '../scenes/Game'; import { GameScene } from '../scenes/Game';
import AnimationManager from './game/AnimationManager'; import { AnimationManager } from './game/AnimationManager';
export class Engine { export class Engine {
public static app: PIXI.Application; public static app: PIXI.Application;

View File

@ -45,7 +45,43 @@ export class FadeInOut extends Animateable {
} }
} }
export default class AnimationManager { export class Tween extends Animateable {
public tweenTime: number;
public pixiObject: PIXI.Container;
private goalX: number;
private goalY: number;
private ticks: number = 0;
constructor(timeInFrames: number, object: PIXI.Container, fromX, fromY, goalX, goalY, callbackFn: Function) {
super();
this.tweenTime = timeInFrames;
this.pixiObject = object;
this.callbackFn = callbackFn;
this.goalX = goalX;
this.goalY = goalY;
this.pixiObject.x = fromX;
this.pixiObject.y = fromY;
}
public update(ms) {
super.update(ms);
this.ticks++;
const objX = this.pixiObject.x;
const objY = this.pixiObject.y;
// TODO: fix this by the time you get to using it, it moves the obj too fast and wrong
if (objX != this.goalX) {
let diff = this.goalX - objX;
this.pixiObject.x += ms * diff * (this.ticks / this.tweenTime);
}
if (objY != this.goalY) {
let diff = this.goalY - objY;
this.pixiObject.y += ms * diff * (this.ticks / this.tweenTime);
}
if (this.ticks >= this.tweenTime) this.Finish();
}
}
export class AnimationManager {
public AnimationQueue: Animateable[] = []; public AnimationQueue: Animateable[] = [];
public Animate(animatable: Animateable) { public Animate(animatable: Animateable) {
this.AnimationQueue.push(animatable); this.AnimationQueue.push(animatable);

View File

@ -4,7 +4,7 @@ import Assets from './classes/Assets';
import { MainScene } from './scenes/Main'; import { MainScene } from './scenes/Main';
import { GameScene } from './scenes/Game'; import { GameScene } from './scenes/Game';
import { log } from './utils'; import { log } from './utils';
import AnimationManager from './classes/game/AnimationManager'; import { AnimationManager } from './classes/game/AnimationManager';
(async () => { (async () => {
const app = new PIXI.Application(); const app = new PIXI.Application();

View File

@ -1,5 +1,5 @@
import { Engine } from '../classes/Bastion'; import { Engine } from '../classes/Bastion';
import { FadeInOut } from '../classes/game/AnimationManager'; import { FadeInOut, Tween } from '../classes/game/AnimationManager';
import Button, { ButtonTexture } from '../classes/gui/Button'; import Button, { ButtonTexture } from '../classes/gui/Button';
import { MissionPickerScene } from './MissionPicker'; import { MissionPickerScene } from './MissionPicker';
import Scene from './Scene'; import Scene from './Scene';
@ -62,6 +62,6 @@ export class MainScene extends Scene {
b2.onClick = (e) => { b2.onClick = (e) => {
alert('Does nothing for now, just placeholder.'); alert('Does nothing for now, just placeholder.');
}; };
Engine.AnimationManager.Animate(new FadeInOut('out', 120, b2.container, () => console.log(b2.container.alpha))); Engine.AnimationManager.Animate(new Tween(300, b2.container, 100, 600, 620, 600, () => {}));
} }
} }