feat: sync normalized clean squirrel animation sheet

src/main.js

@@ -13,6 +13,8 @@ class ForestScene extends Phaser.Scene {
     this.totalMushrooms = 5;
     this.touch = { left: false, right: false };
     this.touchPointers = { left: new Set(), right: new Set() };
+    this.wasGrounded = false;
+    this.landing = false;
   }
 
   preload() {
@@ -39,7 +41,10 @@ class ForestScene extends Phaser.Scene {
       fill.destroy();
     });
 
-    this.load.image('player-sheet', '/assets/player-sheet.png');
+    this.load.spritesheet('player-game', '/assets/player-game-sheet.png', {
+      frameWidth: 280,
+      frameHeight: 220
+    });
     this.load.image('flora-sheet', '/assets/flora-sheet.png');
     this.load.image('fauna-sheet', '/assets/fauna-sheet.png');
     this.load.image('terrain-sheet', '/assets/terrain-sheet.png');
@@ -108,20 +113,6 @@ class ForestScene extends Phaser.Scene {
       this.textures.get(textureKey).add(name, 0, x, y, width, height);
     };
 
-    [
-      ['idle0', 15, 87, 134, 153],
-      ['idle1', 148, 91, 129, 150],
-      ['idle2', 269, 90, 127, 151],
-      ['idle3', 393, 86, 153, 154],
-      ['run0', 607, 101, 148, 139],
-      ['run5', 1286, 105, 147, 135],
-      ['jump0', 23, 355, 172, 140],
-      ['jump1', 187, 328, 176, 146],
-      ['fall0', 496, 330, 134, 161],
-      ['fall1', 643, 325, 135, 167],
-      ['land0', 982, 345, 194, 146],
-      ['land1', 1203, 348, 163, 144]
-    ].forEach(([name, x, y, w, h]) => addFrame('player-sheet', name, x, y, w, h));
 
     addFrame('terrain-sheet', 'ground-main', 24, 32, 341, 107);
     addFrame('terrain-sheet', 'log-platform', 21, 327, 269, 79);
@@ -155,32 +146,39 @@ class ForestScene extends Phaser.Scene {
 
     this.anims.create({
       key: 'squirrel-idle',
-      frames: frames('player-sheet', ['idle0', 'idle1', 'idle2', 'idle3']),
+      frames: this.anims.generateFrameNumbers('player-game', { frames: [0, 1, 2, 3, 4] }),
       frameRate: 4,
       repeat: -1
     });
 
     this.anims.create({
       key: 'squirrel-run',
-      frames: frames('player-sheet', ['run0', 'run5']),
+      frames: this.anims.generateFrameNumbers('player-game', { frames: [6, 7, 8, 9, 10, 11] }),
-      frameRate: 7,
+      frameRate: 11,
       repeat: -1
     });
 
     this.anims.create({
       key: 'squirrel-jump',
-      frames: frames('player-sheet', ['jump0', 'jump1']),
+      frames: this.anims.generateFrameNumbers('player-game', { frames: [12, 13] }),
       frameRate: 8,
       repeat: 0
     });
 
     this.anims.create({
       key: 'squirrel-fall',
-      frames: frames('player-sheet', ['fall0', 'fall1']),
+      frames: this.anims.generateFrameNumbers('player-game', { frames: [14, 15] }),
       frameRate: 5,
       repeat: -1
     });
 
+    this.anims.create({
+      key: 'squirrel-land',
+      frames: this.anims.generateFrameNumbers('player-game', { frames: [16, 17] }),
+      frameRate: 10,
+      repeat: 0
+    });
+
     this.anims.create({
       key: 'frog-hop',
       frames: frames('fauna-sheet', ['frog0', 'frog1', 'frog2', 'frog3', 'frog4']),
@@ -449,13 +447,13 @@ class ForestScene extends Phaser.Scene {
   }
 
   createPlayer() {
-    this.player = this.physics.add.sprite(160, 520, 'player-sheet', 'idle0');
+    this.player = this.physics.add.sprite(160, 520, 'player-game', 0);
-    this.player.setScale(0.58);
+    this.player.setScale(0.42);
     this.player.setCollideWorldBounds(true);
     this.player.setDragX(900);
     this.player.setMaxVelocity(330, 760);
-    this.player.body.setSize(58, 88, true);
+    this.player.body.setSize(95, 145, true);
-    this.player.body.setOffset(38, 54);
+    this.player.body.setOffset(92, 65);
     this.player.play('squirrel-idle');
   }
 
@@ -761,21 +759,36 @@ class ForestScene extends Phaser.Scene {
     }
 
     const grounded = this.player.body.blocked.down || this.player.body.touching.down;
+
+    if (grounded && !this.wasGrounded) {
+      this.landing = true;
+      this.player.play('squirrel-land', true);
+      this.player.once('animationcomplete-squirrel-land', () => {
+        this.landing = false;
+      });
+    }
+
     if (grounded) {
       this.player.setAngle(0);
-      if (Math.abs(this.player.body.velocity.x) > 35) {
+      if (!this.landing) {
-        this.player.play('squirrel-run', true);
+        if (Math.abs(this.player.body.velocity.x) > 35) {
-      } else {
+          this.player.play('squirrel-run', true);
-        this.player.play('squirrel-idle', true);
+        } else {
+          this.player.play('squirrel-idle', true);
+        }
       }
     } else if (this.player.body.velocity.y < 0) {
+      this.landing = false;
       this.player.play('squirrel-jump', true);
       this.player.setAngle(Phaser.Math.Clamp(this.player.body.velocity.x * 0.012, -5, 5));
     } else {
+      this.landing = false;
       this.player.play('squirrel-fall', true);
       this.player.setAngle(Phaser.Math.Clamp(this.player.body.velocity.x * 0.012, -5, 5));
     }
 
+    this.wasGrounded = grounded;
+
     this.acornGroup.children.iterate(acorn => {
       if (!acorn?.active) return;
       acorn.setAngle(Math.sin(time * 0.003 + acorn.getData('phase')) * 10);