Improve pixel units and story transitions

src/game/scenes/StoryScene.ts

@@ -9,8 +9,11 @@ const portraitKeys: Record<PortraitKey, string> = {
   zhangFei: 'portrait-zhang-fei'
 };
 
+type AlphaObject = Phaser.GameObjects.Image | Phaser.GameObjects.Rectangle | Phaser.GameObjects.Text;
+
 export class StoryScene extends Phaser.Scene {
   private pageIndex = 0;
+  private transitioning = false;
   private background?: Phaser.GameObjects.Image;
   private chapterText?: Phaser.GameObjects.Text;
   private portrait?: Phaser.GameObjects.Image;
@@ -107,10 +110,39 @@ export class StoryScene extends Phaser.Scene {
       return;
     }
 
-    this.cameras.main.fadeOut(120, 0, 0, 0);
-    this.time.delayedCall(130, () => {
+    this.transitioning = true;
+    this.tweens.killTweensOf([this.background, ...this.dialogueObjects()]);
+    this.tweens.add({
+      targets: this.dialogueObjects(),
+      alpha: 0.18,
+      duration: 90,
+      ease: 'Sine.easeIn'
+    });
+    this.tweens.add({
+      targets: this.background,
+      alpha: 0.68,
+      duration: 120,
+      ease: 'Sine.easeIn',
+      onComplete: () => {
       this.applyPage(page);
-      this.cameras.main.fadeIn(180, 0, 0, 0);
+        this.background?.setAlpha(0.68);
+        this.setDialogueAlpha(0.18);
+        this.tweens.add({
+          targets: this.dialogueObjects(),
+          alpha: 1,
+          duration: 170,
+          ease: 'Sine.easeOut'
+        });
+        this.tweens.add({
+          targets: this.background,
+          alpha: 1,
+          duration: 220,
+          ease: 'Sine.easeOut',
+          onComplete: () => {
+            this.transitioning = false;
+          }
+        });
+      }
     });
   }
 
@@ -172,7 +204,7 @@ export class StoryScene extends Phaser.Scene {
   }
 
   private advance() {
-    if (this.cameras.main.fadeEffect?.isRunning) {
+    if (this.transitioning) {
       return;
     }
 
@@ -184,4 +216,24 @@ export class StoryScene extends Phaser.Scene {
     this.pageIndex += 1;
     this.showPage(this.pageIndex);
   }
+
+  private dialogueObjects() {
+    const objects: Array<AlphaObject | undefined> = [
+      this.chapterText,
+      this.portrait,
+      this.portraitFrame,
+      this.portraitDivider,
+      this.nameText,
+      this.bodyText,
+      this.progressText
+    ];
+
+    return objects.filter((object): object is AlphaObject => object !== undefined);
+  }
+
+  private setDialogueAlpha(alpha: number) {
+    this.dialogueObjects().forEach((object) => {
+      object.setAlpha(alpha);
+    });
+  }
 }