feat: adjust player hair dynamics for improved facing alignment

Author: CoolSpring8

src/view/PlayerView.ts

@@ -756,7 +756,7 @@ export class PlayerView {
     this.respawnSprite.container
       .setVisible(true)
       .setAlpha(sample.ghostAlpha)
-      .setScale(sample.ghostScaleX * snapshot.facing, sample.ghostScaleY);
+      .setScale(sample.ghostScaleX, sample.ghostScaleY);
 
     this.respawnAura
       .setVisible(sample.auraAlpha > 0.001)
@@ -854,7 +854,7 @@ export class PlayerView {
   }
 
   private squash(scaleX: number, scaleY: number): void {
-    this.playerSprite.container.setScale(Math.abs(scaleX) * this.facing, scaleY);
+    this.playerSprite.container.setScale(Math.abs(scaleX), scaleY);
   }
 
   private applyFastFallScale(snapshot: PlayerSnapshot): void {
@@ -899,7 +899,7 @@ export class PlayerView {
     const delta = PLAYER_VISUALS.scaleRelaxRate * dt;
     this.playerSprite.container.scaleX = this.approach(
       this.playerSprite.container.scaleX,
-      this.facing,
+      1,
       delta,
     );
     this.playerSprite.container.scaleY = this.approach(
@@ -1199,7 +1199,6 @@ export class PlayerView {
 
   private syncFacing(facing: PlayerSnapshot["facing"]): void {
     this.facing = facing;
-    this.playerSprite.container.scaleX = Math.abs(this.playerSprite.container.scaleX) * facing;
   }
 
   private isDashActive(snapshot: PlayerSnapshot): boolean {
@@ -1223,6 +1222,7 @@ export class PlayerView {
   ): void {
     sprite.container.setPosition(x, y);
     this.setGlyphSpritePose(sprite, pose, w, h);
+    this.setGlyphSpriteFacing(sprite, this.facing);
     this.setGlyphSpriteColors(sprite, bodyColor, hairColor);
     this.setGlyphHairPositions(sprite);
   }
@@ -1250,6 +1250,13 @@ export class PlayerView {
     }
   }
 
+  private setGlyphSpriteFacing(sprite: GlyphSprite, facing: PlayerSnapshot["facing"]): void {
+    const flipped = facing < 0;
+    sprite.body.setFlipX(flipped);
+    sprite.bangs.setFlipX(flipped);
+    sprite.legacyHair.setFlipX(flipped);
+  }
+
   private updateGlyphHairState(
     sprite: GlyphSprite,
     snapshot: PlayerSnapshot,

src/view/playerHair.ts

@@ -39,13 +39,13 @@ const HAIR_LAYOUTS: Record<Sqrt11Pose, { anchor: HairPoint; segmentOffset: HairP
 };
 
 const DEFAULT_HAIR_NODE_COUNT: number = SQRT11_HAIR_RADII.length;
-const DEFAULT_FOLLOW_RATE = 40;
+const DEFAULT_FOLLOW_RATE = 20;
 
 export function resolveHairLayout(snapshot: HairSnapshotLike): HairLayout {
   const pose = resolveHairPose(snapshot);
   const base = HAIR_LAYOUTS[pose];
   const localVx = snapshot.vx * snapshot.facing;
-  let offsetX = base.segmentOffset.x + clamp(-localVx / 140, -0.6, 0.7);
+  let localOffsetX = base.segmentOffset.x + clamp(-localVx / 140, -0.6, 0.7);
   let offsetY = base.segmentOffset.y;
 
   if (!snapshot.onGround) {
@@ -59,17 +59,20 @@ export function resolveHairLayout(snapshot: HairSnapshotLike): HairLayout {
   }
 
   if (snapshot.state === "dash") {
-    offsetX -= 0.4;
+    localOffsetX -= 0.4;
     offsetY -= 0.45;
   } else if (snapshot.state === "climb") {
-    offsetX += 0.15;
+    localOffsetX += 0.15;
     offsetY -= 0.1;
   }
 
   return {
-    anchor: base.anchor,
+    anchor: {
+      x: base.anchor.x * snapshot.facing,
+      y: base.anchor.y,
+    },
     segmentOffset: {
-      x: clamp(offsetX, -1.9, 0.35),
+      x: clamp(localOffsetX, -1.9, 0.35) * snapshot.facing,
       y: clamp(offsetY, 0.45, 2.15),
     },
     maxDistance: base.maxDistance,

tests/model/player-hair.test.ts

@@ -51,6 +51,30 @@ describe("sqrt(11) player hair", () => {
     expect(dash.segmentOffset.y).toBeLessThan(run.segmentOffset.y);
   });
 
+  test("facing mirrors the hair anchor and segment direction instead of reusing the same side", () => {
+    const right = resolveHairLayout({
+      facing: 1,
+      isCrouched: false,
+      onGround: true,
+      state: "normal",
+      vx: 0,
+      vy: 0,
+    });
+    const left = resolveHairLayout({
+      facing: -1,
+      isCrouched: false,
+      onGround: true,
+      state: "normal",
+      vx: 0,
+      vy: 0,
+    });
+
+    expect(left.anchor.x).toBe(-right.anchor.x);
+    expect(left.anchor.y).toBe(right.anchor.y);
+    expect(left.segmentOffset.x).toBe(-right.segmentOffset.x);
+    expect(left.segmentOffset.y).toBe(right.segmentOffset.y);
+  });
+
   test("step keeps each node within the configured max distance of its target", () => {
     const layout = {
       anchor: { x: 0, y: 0 },