fix: #fe player/critters falling through ground on big screens

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- `FE` player doesn't fall through ground on big screens.
+- `FE` animals don't fall through ground on big screens.
+
 ## [0.3.0] - 2022-03-24
 
 ### Added

frontend/src/js/critter.ts

@@ -35,7 +35,7 @@ class Critter extends Phaser.Physics.Arcade.Sprite {
 
     this.body = new Phaser.Physics.Arcade.Body(this.scene.physics.world, this);
     this.scene.physics.world.add(this.body);
-    this.scene.physics.add.collider(this, this.scene.ground);
+    this.setCollideWorldBounds(true);
 
     this.setScale(scale);
 

frontend/src/js/fight_scene.ts

@@ -19,7 +19,6 @@ interface InputStatus {
 
 export default class FightScene extends Phaser.Scene {
   foes: Array<Foe>;
-  ground: Phaser.Types.Physics.Arcade.ImageWithStaticBody;
   player: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody;
   cluesGroup: Phaser.Physics.Arcade.Group;
   beGame: Types.Game;
@@ -32,7 +31,6 @@ export default class FightScene extends Phaser.Scene {
   }
 
   preload() {
-    this.load.image("ground", "assets/background_layers/ground.png");
     this.load.spritesheet("oezi", "assets/sprites/player/oezi.png", {
       frameWidth: 27,
       frameHeight: 35,
@@ -97,12 +95,29 @@ export default class FightScene extends Phaser.Scene {
     createAnim(this, "hit", "hit", 0, 9);
     createAnim(this, "missing", "miss", 0, 6);
 
-    this.ground = this.physics.add
-      .staticImage(0, this.cameras.main.height - 25, "ground")
-      .refreshBody()
-      .setImmovable(true);
-    // TODO: re-enable
-    //this.ground.body.allowGravity = false;
+    this.physics.world.setBounds(
+      0,
+      0,
+      this.cameras.main.width,
+      this.cameras.main.height - 30,
+      false,
+      false,
+      false,
+      true,
+    );
+
+    this.physics.world.on(
+      "worldbounds",
+      function (
+        body: Phaser.Physics.Arcade.Body,
+        up: boolean,
+        down: boolean,
+        left: boolean,
+        right: boolean,
+      ) {
+        body.gameObject.emit("hitWorldBounds", { up, down, left, right });
+      },
+    );
 
     this.player = this.physics.add
       .sprite(
@@ -117,7 +132,7 @@ export default class FightScene extends Phaser.Scene {
 
     this.player.play({ key: "player_run" });
 
-    this.physics.add.collider(this.player, this.ground);
+    this.player.setCollideWorldBounds(true);
 
     this.tweens.add({
       targets: this.player,
@@ -125,7 +140,7 @@ export default class FightScene extends Phaser.Scene {
       ease: "Power2",
       duration: 2000,
       onComplete: () => {
-        setAnimation(this.player, "player_idle");
+        setAnimation(this.player, "player_run");
       },
     });
 

frontend/src/js/spear.ts

@@ -28,7 +28,9 @@ class Spear extends Phaser.Physics.Arcade.Sprite {
     //scene.physics.world.enableBody(this, Phaser.Physics.Arcade.DYNAMIC_BODY);
     this.body = new Phaser.Physics.Arcade.Body(scene.physics.world, this);
     scene.physics.world.add(this.body);
-    scene.physics.add.collider(this, scene.ground, this.hitGround.bind(this));
+    this.setCollideWorldBounds(true, 0, 0.2);
+    this.body.onWorldBounds = true;
+    this.on("hitWorldBounds", this.hitGround.bind(this));
     this.body.setBounce(0, 0.2); // TODO: bounce only at small angles
 
     if (this.target) {