Merge branch '4589-sdk-spriteanimation-needs-a-pause-function' into 'master'

[FEAT][sdk] spriteanimation needs a pause function

See merge request codingame/game-engine!129

Author: Builder

engine/modules/entities/src/main/java/com/codingame/gameengine/module/entities/Serializer.java

@@ -58,7 +58,8 @@ class Serializer {
         keys.put("zIndex", "z");
         keys.put("blendMode", "b");
         keys.put("images", "I");
-        keys.put("started", "p");
+        keys.put("restarted", "rs");
+        keys.put("playing", "p");
         keys.put("loop", "l");
         keys.put("duration", "d");
         keys.put("baseWidth", "bw");

engine/modules/entities/src/main/java/com/codingame/gameengine/module/entities/SpriteAnimation.java

@@ -13,12 +13,12 @@ public class SpriteAnimation extends TextureBasedEntity<SpriteAnimation> impleme
 
     @Inject GraphicEntityModule entityModule;
 
-    private int START_INDEX = 0;
+    private int RESTART_INDEX = 0;
 
     private String[] images = new String[] {};
 
     private boolean loop;
-    private boolean started;
+    private boolean playing = true;
     private int duration = 1000;
 
     SpriteAnimation() {
@@ -37,65 +37,57 @@ private static void requireValidDuration(int duration) {
     }
 
     /**
-     * Returns whether the animation is flagged to have the graphical counterpart start animating if it hasn't yet.
+     * Returns whether the animation is flagged to have the graphical counterpart play the animation or to pause it.
      * <p>
-     * Default is false.
+     * Default is true.
      * </p>
      * 
-     * @return true if the animation has been started.
+     * @return true if the animation is playing.
      * 
      */
-    public boolean isStarted() {
-        return started;
+    public boolean isPlaying() {
+        return playing;
     }
 
     /**
-     * Begins or restarts the animation, it will always begin at the first image.
-     * <p>
-     * Setting this to false will stop the animation, but it may not be resumed without restarting.
-     * </p>
+     * Plays or pause the animation
      * 
      * @param started
-     *            true to begin or restart animation, false to stop animation
+     *            true to play animation, false to pause animation
      * @return this animation.
      */
-    public SpriteAnimation setStarted(boolean started) {
-        this.started = started;
-
-        if (started) {
-            set("started", START_INDEX, null);
-        } else {
-            set("started", "", null);
-        }
+    public SpriteAnimation setPlaying(boolean playing) {
+        this.playing = playing;
+        set("playing", playing, null);
         return this;
     }
 
     /**
-     * Calls setStarted(true) and forces the animation to play from the start;
+     * Reset the progress of the animation
      * 
      * @return this animation.
      */
     public SpriteAnimation reset() {
-        START_INDEX++;
-        return setStarted(true);
+        set("restarted", RESTART_INDEX++, null);
+        return this;
     }
 
     /**
-     * Calls setStarted(true);
+     * Calls setPlaying(true);
      * 
      * @return this animation.
      */
-    public SpriteAnimation start() {
-        return setStarted(true);
+    public SpriteAnimation play() {
+        return setPlaying(true);
     }
 
     /**
-     * Calls setStarted(false);
+     * Calls setPlaying(false);
      * 
      * @return this animation.
      */
-    public SpriteAnimation stop() {
-        return setStarted(false);
+    public SpriteAnimation pause() {
+        return setPlaying(false);
     }
 
     /**

engine/modules/entities/src/main/resources/view/entity-module/Command.js

@@ -34,7 +34,8 @@ const PROPERTY_KEY_MAP = {
   z: 'zIndex',
   b: 'blendMode',
   I: 'images',
-  p: 'started',
+  rs: 'restarted',
+  p: 'playing',
   l: 'loop',
   d: 'duration',
   bw: 'baseWidth',
@@ -47,7 +48,7 @@ export class CreateCommand {
     this.type = args[0]
   }
 
-  apply (entities, frameNumber) {
+  apply (entities) {
     let entity = EntityFactory.create(this.type)
     entity.id = this.id
     entities.set(this.id, entity)
@@ -61,8 +62,8 @@ export class CreateCommands {
     this.type = args[0]
   }
 
-  apply (entities, frameNumber) {
-    this.commands.forEach(command => command.apply(entities, frameNumber))
+  apply (entities, frameInfo) {
+    this.commands.forEach(command => command.apply(entities, frameInfo.number, frameInfo))
   }
 }
 
@@ -142,20 +143,20 @@ export class PropertiesCommand {
     }
   }
 
-  apply (entities, frameNumber) {
+  apply (entities, frameInfo) {
     let entity = entities.get(this.id)
-    entity.addState(this.t, {values: this.params, curve: this.curve}, frameNumber)
+    entity.addState(this.t, {values: this.params, curve: this.curve}, frameInfo.number, frameInfo)
   }
 }
 export class WorldCommitCommand {
   constructor (args, globalData) {
     this.times = args.map(v => +v)
   }
 
-  apply (entities, frameNumber) {
+  apply (entities, frameInfo) {
     entities.forEach(entity => {
       this.times.forEach(time => {
-        entity.addState(time, {values: {}, curve: {}}, frameNumber)
+        entity.addState(time, {values: {}, curve: {}}, frameInfo.number, frameInfo)
       })
     })
   }

engine/modules/entities/src/main/resources/view/entity-module/EntityFactory.js

@@ -8,7 +8,7 @@ import { BufferedGroup } from './BufferedGroup.js'
 import { SpriteAnimation } from './SpriteAnimation.js'
 
 export class EntityFactory {
-  static create(type) {
+  static create (type) {
     var entity
     switch (type) {
       case 'C':

engine/modules/entities/src/main/resources/view/entity-module/GraphicEntityModule.js

@@ -2,8 +2,6 @@ import { CommandParser } from './CommandParser.js'
 import { fitAspectRatio } from '../core/utils.js'
 import { WIDTH, HEIGHT } from '../core/constants.js'
 import { ContainerBasedEntity } from './ContainerBasedEntity.js'
-import { Entity } from './Entity.js'
-
 export const api = {}
 
 export class GraphicEntityModule {
@@ -38,12 +36,11 @@ export class GraphicEntityModule {
   }
 
   handleFrameData (frameInfo, frameData) {
-    const number = frameInfo.number
     if (frameData) {
       const commands = CommandParser.parse(frameData, this.globalData, frameInfo)
       if (commands) {
         commands.forEach(command => {
-          const loadPromise = command.apply(this.entities, number)
+          const loadPromise = command.apply(this.entities, frameInfo)
           if (loadPromise) {
             this.loadingAssets++
             loadPromise.then(() => {
@@ -54,11 +51,12 @@ export class GraphicEntityModule {
       }
     }
 
-    this.extrapolate(number)
-
     const parsedFrame = {...frameInfo}
 
     parsedFrame.previous = this.frames[this.frames.length - 1] || parsedFrame
+
+    this.extrapolate(parsedFrame)
+
     if (parsedFrame !== parsedFrame.previous) {
       parsedFrame.previous.next = parsedFrame
     }
@@ -72,7 +70,9 @@ export class GraphicEntityModule {
     return arr[arr.length - 1]
   }
 
-  extrapolate (frameNumber) {
+  extrapolate (frameInfo) {
+    const frameNumber = frameInfo.number
+    const previousFrameNumber = frameInfo.previous.number
     this
       .entities.forEach(entity => {
         // Create empty substate array if none
@@ -90,15 +90,23 @@ export class GraphicEntityModule {
         // Sort on t to begin extrapolation
         subStates.sort((a, b) => a.t - b.t)
 
+        if (!subStates.length || this.lastElementOf(subStates).t !== 1) {
+          // Create a subState at t=1
+          entity.addState(1, {}, frameNumber, frameInfo)
+        }
+        let prevState = currentState
+        // If the entity had a state in the previous frame get the last one of them
+        if (entity.states[previousFrameNumber] && previousFrameNumber !== frameNumber) {
+          prevState = entity.states[previousFrameNumber][entity.states[previousFrameNumber].length - 1]
+        }
         for (const state of subStates) {
           // Extrapolate through existing substates, updating the extrapolationMap in the process (currentState)
           Object.assign(currentState, state)
           Object.assign(state, currentState)
-        }
-
-        if (!subStates.length || this.lastElementOf(subStates).t !== 1) {
-          // Create a subState at t=1
-          subStates.push(Entity.createState(1, currentState))
+          if (typeof entity.computeAnimationProgressTime === 'function') {
+            entity.computeAnimationProgressTime(prevState, state)
+          }
+          prevState = state
         }
       })
   }

engine/modules/entities/src/main/resources/view/entity-module/SpriteAnimation.js

@@ -12,7 +12,10 @@ export class SpriteAnimation extends TextureBasedEntity {
       images: '',
       loop: false,
       duration: 1000,
-      started: null
+      playing: true,
+      restarted: null,
+      animationProgressTime: 0,
+      date: 0
     })
   }
 
@@ -21,16 +24,21 @@ export class SpriteAnimation extends TextureBasedEntity {
     this.graphics = new PIXI.Sprite(PIXI.Texture.EMPTY)
   }
 
+  addState (t, params, frame, frameInfo) {
+    super.addState(t, params, frame)
+    const toModify = this.states[frame].find(v => v.t === t)
+    const date = frameInfo.date + frameInfo.frameDuration * t
+    toModify.date = date
+  }
+
   updateDisplay (state, changed, globalData, frame, progress) {
     super.updateDisplay(state, changed, globalData)
 
-    if (state.images && state.started) {
+    if (state.images) {
       const duration = state.duration
-      const date = frame.date + progress * frame.frameDuration
-      const startDate = state.started.date
       const images = state.images.split(',')
 
-      const animationProgress = (state.loop ? unlerpUnclamped : unlerp)(startDate, startDate + duration, date)
+      const animationProgress = (state.loop ? unlerpUnclamped : unlerp)(0, duration, state.animationProgressTime)
       if (animationProgress >= 0) {
         const animationIndex = Math.floor(images.length * animationProgress)
         const image = state.loop ? images[animationIndex % images.length] : (images[animationIndex] || images[images.length - 1])
@@ -44,4 +52,15 @@ export class SpriteAnimation extends TextureBasedEntity {
       this.graphics.texture = PIXI.Texture.EMPTY
     }
   }
+
+  computeAnimationProgressTime (prevState, currState) {
+    if (currState.restarted && currState.restarted.date === currState.date) {
+      currState.animationProgressTime = 0
+    } else {
+      currState.animationProgressTime = prevState.animationProgressTime
+      if (prevState.playing) {
+        currState.animationProgressTime += currState.date - prevState.date
+      }
+    }
+  }
 }

engine/modules/entities/src/main/resources/view/entity-module/properties.js

@@ -1,6 +1,7 @@
 import {lerp, lerpColor, lerpAngle} from '../core/utils.js'
 
 const noLerp = (a, b, u) => u < 1 ? a : b
+const timeLerp = (a, b, u) => b < a ? b : lerp(a, b, u)
 
 const colorOpts = {
   type: Number,
@@ -37,6 +38,10 @@ const boolOpts = {
   },
   lerpMethod: noLerp
 }
+const timeOpts = {
+  type: Number,
+  lerpMethod: timeLerp
+}
 
 export const PROPERTIES = {
   default: {
@@ -53,12 +58,14 @@ export const PROPERTIES = {
   strokeColor: colorOpts,
   tint: colorOpts,
 
+  animationProgressTime: timeOpts,
+
   mask: constOpts,
   baseWidth: constOpts,
   baseHeight: constOpts,
   image: stringOpts,
   images: stringOpts,
-  started: {
+  restarted: {
     type: String,
     convert (value, globalData, frameInfo, t) {
       if (value) {
@@ -70,7 +77,7 @@ export const PROPERTIES = {
     },
     lerpMethod: noLerp
   },
-
+  playing: boolOpts,
   duration: constOpts,
   blendMode: constOpts,