Merge branch '7111-sdk-add-an-option-in-the-gem-to-interpolate-between-frames-in-step-by-step-mode' into 'master'

feat(SDK): animate viewer when step-by-stepping

See merge request codingame/game-engine!225

Author: CodinGameCommunity

engine/core/src/main/resources/view/core/Drawer.js

@@ -11,6 +11,7 @@ import { ModuleError } from './ModuleError.js'
 export class Drawer {
   constructor (customDemo) {
     this.toDestroy = []
+    this.stepByStepAnimateSpeed = config.stepByStepAnimateSpeed || null
 
     let demo = customDemo || defaultDemo
 
@@ -434,11 +435,17 @@ export class Drawer {
     }
   }
 
-  updateScene (scope, question, frames, frameNumber, progress, speed, reason) {
+  updateScene (scope, question, frames, frameNumber, progress, speed, reason, demo, force) {
+    const parsedFrame = frames[frameNumber]
+    if (!force && this.checkSteppedToNextFrame(scope, parsedFrame)) {
+      this.startAsynchronousAnimation(scope, progress, parsedFrame)
+      return
+    }
+
     /** ************************************* */
     /*        SYNCHRONOUS                     */
     /** ************************************* */
-    var parsedFrame = frames[frameNumber]
+
     scope.currentFrame = parsedFrame
     scope.currentProgress = progress
     scope.reason = reason
@@ -455,6 +462,16 @@ export class Drawer {
     }
   }
 
+  startAsynchronousAnimation (scope, progress, currentFrame) {
+    scope.targetProgress = progress
+    scope.currentProgress = 0
+    scope.currentFrame = currentFrame
+  }
+
+  checkSteppedToNextFrame (scope, parsedFrame) {
+    return scope.currentFrame && scope.currentFrame !== parsedFrame && scope.currentFrame === parsedFrame.previous && this.speed === 0
+  }
+
   initEndScene (scope, failure) {
     scope.endSceneViewed = false
   }
@@ -495,6 +512,12 @@ export class Drawer {
       scope.endTime = 0
     }
 
+    if (this.stepByStepAnimateSpeed && this.isAsynchronousAnimationOngoing(scope)) {
+      var p = scope.currentProgress + step / 200 * this.getFrameSpeed(this.currentFrame) * this.stepByStepAnimateSpeed
+      p = Math.min(scope.targetProgress, p)
+      this.updateScene(this.scope, this.question, this.frames, this.currentFrame, p, this.speed, this.reasons[this.currentFrame], false, true)
+    }
+
     for (let moduleName in this.modules) {
       const module = this.modules[moduleName]
       if (typeof module.animateScene === 'function') {
@@ -508,6 +531,10 @@ export class Drawer {
     return true
   }
 
+  isAsynchronousAnimationOngoing (scope) {
+    return scope.targetProgress != null && scope.currentProgress !== scope.targetProgress
+  }
+
   getFrameSpeed (frameNumber) {
     return BASE_FRAME_DURATION / this.getFrameDuration(frameNumber)
   }
@@ -738,7 +765,7 @@ export class Drawer {
     var key
     window.PIXI = Drawer.PIXI || window.PIXI
     this.oversampling = oversampling || 1
-    
+
     const notifyRenderer = () => {
       if (this.currentFrame >= 0) {
         this.changed = true

playground/misc/misc-3-release-notes.md

@@ -2,8 +2,14 @@
 
 The CodinGame SDK is regularly updated and improved. This document lets you know what changed in the latest releases.
 
+## Next versions
+
 ## 3.4.10
 
+### 🎁 New features
+
+- Added an optional export to `config.js` called `stepByStepAnimateSpeed` which lets you set whether to animate the view when stepping from one frame to the next
+
 ### 🐞 Bug fix
 
  - Fixed Tooltip not showing all texts of stacked sprites below the cursor