tweening is hard

src/classes/Bastion.ts

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

src/classes/game/AnimationManager.ts

@@ -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 Animate(animatable: Animateable) {
         this.AnimationQueue.push(animatable);

src/main.ts

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

src/scenes/Main.ts

@@ -1,5 +1,5 @@
 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 { MissionPickerScene } from './MissionPicker';
 import Scene from './Scene';
@@ -62,6 +62,6 @@ export class MainScene extends Scene {
         b2.onClick = (e) => {
             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, () => {}));
     }
 }