and input bar

Author: rjoken

src/game/InputBar.ts

@@ -0,0 +1,47 @@
+import Phaser from "phaser";
+
+export class InputBar {
+  private scene: Phaser.Scene;
+  private graphics: Phaser.GameObjects.Graphics;
+  private width: number;
+  private height: number;
+  private barHeight: number = 6;
+  private barColor: number = 0x0f380f;
+
+  constructor(scene: Phaser.Scene) {
+    this.scene = scene;
+    this.width = scene.cameras.main.width;
+    this.height = scene.cameras.main.height;
+
+    this.graphics = scene.add.graphics().setDepth(999);
+    this.graphics.setScrollFactor(0);
+  }
+
+  update(lValue: number, rValue: number) {
+    const centerX = this.width / 2;
+    const barY = this.height - this.barHeight;
+    const barWidth = this.width / 2;
+    const leftWidth = barWidth * lValue;
+    const rightWidth = barWidth * rValue;
+
+    this.graphics.clear();
+
+    if (lValue > 0) {
+      this.graphics.fillStyle(this.barColor);
+      this.graphics.fillRect(
+        centerX - leftWidth - 1,
+        barY,
+        leftWidth,
+        this.barHeight
+      );
+    }
+    if (rValue > 0) {
+      this.graphics.fillStyle(this.barColor);
+      this.graphics.fillRect(centerX + 1, barY, rightWidth, this.barHeight);
+    }
+  }
+
+  destroy() {
+    this.graphics.destroy();
+  }
+}

src/game/scenes/GameScene.ts

@@ -4,6 +4,7 @@ import { PlaceholderAssets } from "../createPlaceholderAssets";
 import { AnalogKey, AnalogReport } from "../../components/ConnectDevice";
 import { SpriteAssets } from "../createSpriteAssets";
 import { Obstacle } from "../Obstacle";
+import { InputBar } from "../InputBar";
 
 export class GameScene extends Phaser.Scene {
   private player!: Player;
@@ -29,6 +30,10 @@ export class GameScene extends Phaser.Scene {
 
   private gameEnded: boolean = false;
 
+  private inputBar!: InputBar;
+  private analogL: number = 0;
+  private analogR: number = 0;
+
   constructor() {
     super("GameScene");
   }
@@ -42,10 +47,10 @@ export class GameScene extends Phaser.Scene {
 
   onAnalogReport = (event: AnalogReport) => {
     const { data } = event;
-    const aKey = data.find((d) => d.key === AnalogKey.A)?.value ?? 0;
-    const dKey = data.find((d) => d.key === AnalogKey.D)?.value ?? 0;
+    this.analogL = data.find((d) => d.key === AnalogKey.A)?.value ?? 0;
+    this.analogR = data.find((d) => d.key === AnalogKey.D)?.value ?? 0;
 
-    this.horizontal = dKey - aKey;
+    this.horizontal = this.analogR - this.analogL;
   };
 
   preload() {
@@ -122,6 +127,8 @@ export class GameScene extends Phaser.Scene {
       );
     }
 
+    this.inputBar = new InputBar(this);
+
     this.events.on("shutdown", this.cleanup, this);
   }
 
@@ -152,10 +159,7 @@ export class GameScene extends Phaser.Scene {
       return o.isAlive();
     });
 
-    // Jump when space is pressed or screen is tapped (handled via pointer events)
-    // if (this.input.keyboard && Phaser.Input.Keyboard.JustDown(this.jumpKey)) {
-    //   this.jump();
-    // }
+    this.inputBar.update(this.analogL, this.analogR);
   }
 
   spawnObstacle() {
@@ -226,6 +230,10 @@ export class GameScene extends Phaser.Scene {
       this.player.destroy();
     }
 
+    if (this.inputBar) {
+      this.inputBar.destroy();
+    }
+
     this.obstacles.forEach((o) => o.destroy());
     this.obstacles = [];
   }