fix: [#3092] FadeBy completes consistently

closes: #3092

CHANGELOG.md

@@ -104,6 +104,7 @@ are doing mtv adjustments during precollision.
 
 ### Fixed
 
+- Fixed issue where `ex.Fade` sometimes would not complete depending on the elapsed time
 - Fixed issue where `ex.PolygonColliders` would get trapped in infinite loop for degenerate polygons (< 3 vertices)
 - Fixed issue where certain devices that support large numbers of texture slots exhaust the maximum number of if statements (complexity) in the shader.
 - Fixed issue where `ex.Label` where setting the opacity of caused a multiplicative opacity effect when actor opacity set

src/engine/Actions/Action/Fade.ts

@@ -6,20 +6,18 @@ import { Action, nextActionId } from '../Action';
 export class Fade implements Action {
   id = nextActionId();
   private _graphics: GraphicsComponent;
-  public x: number;
-  public y: number;
 
   private _endOpacity: number;
-  private _speed: number;
-  private _originalSpeed: number;
+  private _remainingTime: number;
+  private _originalTime: number;
   private _multiplier: number = 1;
   private _started = false;
   private _stopped = false;
 
-  constructor(entity: Entity, endOpacity: number, speed: number) {
+  constructor(entity: Entity, endOpacity: number, time: number) {
     this._graphics = entity.get(GraphicsComponent);
     this._endOpacity = endOpacity;
-    this._speed = this._originalSpeed = speed;
+    this._remainingTime = this._originalTime = time;
   }
 
   public update(elapsedMs: number): void {
@@ -29,7 +27,7 @@ export class Fade implements Action {
 
     if (!this._started) {
       this._started = true;
-      this._speed = this._originalSpeed;
+      this._remainingTime = this._originalTime;
 
       // determine direction when we start
       if (this._endOpacity < this._graphics.opacity) {
@@ -39,11 +37,12 @@ export class Fade implements Action {
       }
     }
 
-    if (this._speed > 0) {
-      this._graphics.opacity += (this._multiplier * (Math.abs(this._graphics.opacity - this._endOpacity) * elapsedMs)) / this._speed;
+    if (this._remainingTime > 0) {
+      this._graphics.opacity +=
+        (this._multiplier * (Math.abs(this._graphics.opacity - this._endOpacity) * elapsedMs)) / this._remainingTime;
     }
 
-    this._speed -= elapsedMs;
+    this._remainingTime -= elapsedMs;
 
     if (this.isComplete()) {
       this._graphics.opacity = this._endOpacity;
@@ -53,7 +52,7 @@ export class Fade implements Action {
   }
 
   public isComplete(): boolean {
-    return this._stopped || Math.abs(this._graphics.opacity - this._endOpacity) < 0.05;
+    return this._stopped || this._remainingTime <= 0;
   }
 
   public stop(): void {
@@ -63,5 +62,6 @@ export class Fade implements Action {
   public reset(): void {
     this._started = false;
     this._stopped = false;
+    this._remainingTime = this._originalTime;
   }
 }

src/spec/ActionSpec.ts

@@ -1216,6 +1216,17 @@ describe('Action', () => {
       expect(actor.graphics.opacity).toBe(1);
     });
 
+    it('can go from 1 from 0 with large time steps', () => {
+      actor.graphics.opacity = 0;
+
+      actor.actions.fade(1, 200);
+      for (let i = 0; i < 10; i++) {
+        scene.update(engine, 115);
+      }
+
+      expect(actor.graphics.opacity).toBe(1);
+    });
+
     it('can go back and forth from 0 to 1 (#512)', () => {
       actor.graphics.opacity = 0;