Slide in animations for players.

Author: tesseralis

src/animations.ts

@@ -1,5 +1,6 @@
 import { animate } from "motion";
-import type { Container } from "pixi.js";
+import type { Container, Point } from "pixi.js";
+import { WIDTH } from "./constants";
 
 export async function pulse(obj: Container, amount: number = 1.15) {
   await animate([
@@ -11,3 +12,16 @@ export async function pulse(obj: Container, amount: number = 1.15) {
     [obj.scale, { x: 1, y: 1 }, { duration: 0.15, ease: "easeInOut" }],
   ]);
 }
+
+export async function slideIn(
+  obj: Container,
+  position: Point,
+  direction: Point
+) {
+  obj.position = position.add(direction.multiplyScalar(WIDTH));
+  obj.alpha = 0;
+  await animate([
+    [obj.position, { ...position }, { duration: 1, ease: "easeOut" }],
+    [obj, { alpha: 1 }, { at: 0, duration: 1 }],
+  ]);
+}

src/nodes/Multiplayer.ts

@@ -1,4 +1,4 @@
-import { type Ticker } from "pixi.js";
+import { Point, type Ticker } from "pixi.js";
 import { WIDTH } from "../constants";
 import GameNode from "./GameNode";
 import Player from "./Player";
@@ -8,6 +8,8 @@ import { inputs } from "../inputs";
 import Countdown from "./Countdown";
 import type { IMediaInstance } from "@pixi/sound";
 import { playSound } from "../audio";
+import { LEFT, RIGHT } from "../points";
+import { slideIn } from "../animations";
 
 export default class Multiplayer extends GameNode {
   players: Player[];
@@ -31,15 +33,6 @@ export default class Multiplayer extends GameNode {
         startLevel,
       }),
     ];
-    this.players[0].view.position = {
-      x: (1 / 4) * WIDTH - this.players[0].view.width / 2,
-      y: 0,
-    };
-    this.players[1].view.position = {
-      x: (3 / 4) * WIDTH - this.players[1].view.width / 2,
-      y: 0,
-    };
-
     for (let player of this.players) {
       player.onTopOut = () => {
         this.music?.stop();
@@ -55,11 +48,24 @@ export default class Multiplayer extends GameNode {
         // TODO show win screen
         this.onFinish?.();
       };
-      this.view.addChild(player.view);
     }
   }
 
   async start() {
+    for (let player of this.players) {
+      this.view.addChild(player.view);
+    }
+    slideIn(
+      this.players[0].view,
+      new Point((1 / 4) * WIDTH - this.players[0].view.width / 2, 0),
+      LEFT
+    );
+    slideIn(
+      this.players[1].view,
+      new Point((3 / 4) * WIDTH - this.players[1].view.width / 2, 0),
+      RIGHT
+    );
+
     const countdown = new Countdown();
     this.view.addChild(countdown.view);
     await countdown.start();

src/nodes/SinglePlayer.ts

@@ -1,4 +1,4 @@
-import { type Ticker } from "pixi.js";
+import { Point, type Ticker } from "pixi.js";
 import { WIDTH } from "../constants";
 import GameNode from "./GameNode";
 import Player from "./Player";
@@ -9,6 +9,8 @@ import ScoreScreen from "./ScoreScreen";
 import Countdown from "./Countdown";
 import { type IMediaInstance } from "@pixi/sound";
 import { playSound } from "../audio";
+import { slideIn } from "../animations";
+import { UP } from "../points";
 
 type Mode = "game" | "score";
 
@@ -27,12 +29,6 @@ export default class SinglePlayer extends GameNode {
       levels: campaign,
       startLevel,
     });
-    this.player.view.position = {
-      x: WIDTH / 2 - this.player.view.width / 2,
-      y: 0,
-    };
-    this.view.addChild(this.player.view);
-
     this.player.onLevelUp = (level) => {
       this.background.setGenerator(level.randomQubit);
     };
@@ -54,6 +50,13 @@ export default class SinglePlayer extends GameNode {
   }
 
   async start() {
+    this.view.addChild(this.player.view);
+    slideIn(
+      this.player.view,
+      new Point(WIDTH / 2 - this.player.view.width / 2, 0),
+      UP
+    );
+
     const countdown = new Countdown();
     this.view.addChild(countdown.view);
     await countdown.start();