Fixed frontend animation switch after atk and stun.

battle_srv/models/room.go

@@ -1338,6 +1338,7 @@ func (pR *Room) applyInputFrameDownsyncDynamicsOnSingleRenderFrame(delayedInputF
 			thatPlayerInNextFrame := nextRenderFramePlayers[playerId]
 			if 0 < thatPlayerInNextFrame.FramesToRecover {
 				// No need to process inputs for this player, but there might be bullet pushbacks on this player
+                // Also note that in this case we keep "CharacterState" of this player from last render frame
 				playerCollider.X += bulletPushbacks[joinIndex-1].X
 				playerCollider.Y += bulletPushbacks[joinIndex-1].Y
 				// Update in the collision system
@@ -1373,6 +1374,7 @@ func (pR *Room) applyInputFrameDownsyncDynamicsOnSingleRenderFrame(delayedInputF
 				Logger.Debug(fmt.Sprintf("roomId=%v, playerId=%v triggered a falling-edge of btnA at currRenderFrame.id=%v, delayedInputFrame.id=%v", pR.Id, playerId, currRenderFrame.Id, delayedInputFrame.InputFrameId))
 			} else {
 				// No bullet trigger, process movement inputs
+                // Note that by now "0 == thatPlayerInNextFrame.FramesToRecover", we should change "CharacterState" to "WALKING" or "IDLE" depending on player inputs
 				if 0 != decodedInput.Dx || 0 != decodedInput.Dy {
 					thatPlayerInNextFrame.DirX = decodedInput.Dx
 					thatPlayerInNextFrame.DirY = decodedInput.Dy

frontend/assets/scenes/login.fire

@@ -440,7 +440,7 @@
       "array": [
         0,
         0,
-        210.7364624020594,
+        210.4441731196186,
         0,
         0,
         0,

frontend/assets/scenes/offline_map_1.fire

@@ -454,7 +454,7 @@
       "array": [
         0,
         0,
-        210.7364624020594,
+        210.4441731196186,
         0,
         0,
         0,

frontend/assets/scripts/AttackingCharacter.js

@@ -53,13 +53,47 @@ cc.Class({
     // Update per character state
     let newCharacterState = rdfPlayer.characterState;
     let prevCharacterState = (null == prevRdfPlayer ? window.ATK_CHARACTER_STATE.Idle1[0] : prevRdfPlayer.characterState);
+    const newAnimName = window.ATK_CHARACTER_STATE_ARR[newCharacterState][1];
+
+    // As this function might be called after many frames of a rollback, it's possible that the playing animation was predicted, different from "prevCharacterState" but same as "newCharacterState". More granular checks are needed to determine whether we should interrupt the playing animation.  
     if (newCharacterState != prevCharacterState) {
-      // Anim is edge-triggered
-      const newAnimName = window.ATK_CHARACTER_STATE_ARR[newCharacterState][1];
-      if (newAnimName != this.animComp.animationName) {
-        this.animComp.playAnimation(newAnimName);
-        console.log(`JoinIndex=${rdfPlayer.joinIndex}, Resetting anim to ${newAnimName}, state changed: (${prevCharacterState}, prevRdfPlayer is null? ${null == prevRdfPlayer}) -> (${newCharacterState})`);
+      if (newAnimName == this.animComp.animationName) {
+        if (ATK_CHARACTER_STATE.Idle1[0] == newCharacterState || ATK_CHARACTER_STATE.Walking[0] == newCharacterState) {
+          if (false == this.animComp._playing) {
+            this.animComp.playAnimation(newAnimName);
+          }
+          // No need to interrupt
+          // console.warn(`JoinIndex=${rdfPlayer.joinIndex}, not interrupting ${newAnimName} while the playing anim is also ${this.animComp.animationName}, player rdf changed from: ${null == prevRdfPlayer ? null : JSON.stringify(prevRdfPlayer)}, , to: ${JSON.stringify(rdfPlayer)}`);
+          return;
+        }
       }
+      this._interruptPlayingAnimAndPlayNewAnim(rdfPlayer, prevRdfPlayer, newCharacterState, newAnimName);
+    } else {
+      // newCharacterState == prevCharacterState
+      if (newAnimName != this.animComp.animationName) {
+        // the playing animation was falsely predicted
+        this._interruptPlayingAnimAndPlayNewAnim(rdfPlayer, prevRdfPlayer, newCharacterState, newAnimName);
+      }
+    // TODO: What if (newAnimName == this.animComp.animationName) but (false == this.animComp._playing) by now? Do we just force it to play from beginning or use "this._interruptPlayingAnimAndPlayNewAnim"? 
+    }
+  },
+
+  _interruptPlayingAnimAndPlayNewAnim(rdfPlayer, prevRdfPlayer, newCharacterState, newAnimName) {
+    if (ATK_CHARACTER_STATE.Idle1[0] == newCharacterState || ATK_CHARACTER_STATE.Walking[0] == newCharacterState) {
+      // No "framesToRecover"
+      // console.warn(`JoinIndex=${rdfPlayer.joinIndex}, playing new ${newAnimName} from the beginning: while the playing anim is ${this.animComp.animationName}, player rdf changed from: ${null == prevRdfPlayer ? null : JSON.stringify(prevRdfPlayer)}, , to: ${JSON.stringify(rdfPlayer)}`);
+      this.animComp.playAnimation(newAnimName);
+    } else {
+      const animationData = this.animComp._armature.animation._animations[newAnimName];
+      let fromAnimFrame = (animationData.frameCount - rdfPlayer.framesToRecover);
+      if (fromAnimFrame > 0) {
+        // console.warn(`JoinIndex=${rdfPlayer.joinIndex}, playing ${newAnimName} from the middle: rdfPlayer.framesToRecover=${rdfPlayer.framesToRecover} while the playing anim is ${this.animComp.animationName}, player rdf changed from: ${null == prevRdfPlayer ? null : JSON.stringify(prevRdfPlayer)}`);
+      } else if (fromAnimFrame < 0) {
+        // For Atk1 or Atk2, it's possible that the "meleeBullet.recoveryFrames" is configured to be slightly larger than corresponding animation duration frames
+        fromAnimFrame = 0;
+      }
+      // console.warn(`JoinIndex=${rdfPlayer.joinIndex}, playing ${newAnimName} from the middle: fromAnimFrame=${fromAnimFrame}, animFrameCount=${animationData.frameCount}, rdfPlayer.framesToRecover=${rdfPlayer.framesToRecover} while the playing anim is ${this.animComp.animationName}`);
+      this.animComp._armature.animation.gotoAndPlayByFrame(newAnimName, fromAnimFrame);
     }
   },
 });

frontend/assets/scripts/Map.js

@@ -632,7 +632,7 @@ cc.Class({
         self.musicEffectManagerScriptIns.playBGM();
       }
     } else {
-      console.warn(`Anomaly when onRoomDownsyncFrame is called by rdf=${JSON.stringify(rdf)}`);
+      console.warn(`Anomaly when onRoomDownsyncFrame is called by rdf=${JSON.stringify(rdf)}, recentRenderCache=${self._stringifyRecentRenderCache(false)}, recentInputCache=${self._stringifyRecentInputCache(false)}`);
     }
 
     // [WARNING] Leave all graphical updates in "update(dt)" by "applyRoomDownsyncFrameDynamics"
@@ -827,17 +827,17 @@ cc.Class({
         console.error("Error during Map.update", err);
       } finally {
         // Update countdown
-        if (null != self.countdownNanos) {
-          self.countdownNanos = self.battleDurationNanos - self.renderFrameId * self.rollbackEstimatedDtNanos;
-          if (self.countdownNanos <= 0) {
-            self.onBattleStopped(self.playerRichInfoDict);
-            return;
-          }
+        self.countdownNanos = self.battleDurationNanos - self.renderFrameId * self.rollbackEstimatedDtNanos;
+        if (self.countdownNanos <= 0) {
+          self.onBattleStopped(self.playerRichInfoDict);
+          return;
+        }
 
-          const countdownSeconds = parseInt(self.countdownNanos / 1000000000);
-          if (isNaN(countdownSeconds)) {
-            console.warn(`countdownSeconds is NaN for countdownNanos == ${self.countdownNanos}.`);
-          }
+        const countdownSeconds = parseInt(self.countdownNanos / 1000000000);
+        if (isNaN(countdownSeconds)) {
+          console.warn(`countdownSeconds is NaN for countdownNanos == ${self.countdownNanos}.`);
+        }
+        if (null != self.countdownLabel) {
           self.countdownLabel.string = countdownSeconds;
         }
         ++self.renderFrameId; // [WARNING] It's important to increment the renderFrameId AFTER all the operations above!!!