fix: [#1687] Actor z-index regression

CHANGELOG.md

@@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
+- Fixed z-index regression where actors did not respect z-index ([#1678](https://github.com/excaliburjs/Excalibur/issues/1678))
 - Fixed Animation flicker bug when switching to an animation ([#1636](https://github.com/excaliburjs/Excalibur/issues/1636))
 - Fixed `ex.Actor.easeTo` actions, they now use velocity to move Actors ([#1638](https://github.com/excaliburjs/Excalibur/issues/1638))
 

src/engine/Actor.ts

@@ -977,9 +977,10 @@ export class ActorImpl extends Entity implements Actionable, Eventable, PointerE
    * @param newIndex new z-index to assign
    */
   public setZIndex(newIndex: number) {
-    this.scene.cleanupDrawTree(this);
-    this._zIndex = newIndex;
-    this.scene.updateDrawTree(this);
+    const newZ = newIndex;
+    this.scene?.cleanupDrawTree(this);
+    this._zIndex = newZ;
+    this.scene?.updateDrawTree(this);
   }
 
   /**

src/engine/Scene.ts

@@ -83,7 +83,7 @@ export class Scene extends Class implements CanInitialize, CanActivate, CanDeact
 
   private _isInitialized: boolean = false;
 
-  private _sortedDrawingTree: SortedList<Actor> = new SortedList<Actor>(Actor.prototype.getZIndex);
+  private _sortedDrawingTree: SortedList<Actor> = new SortedList<Actor>(a => a.z);
 
   private _broadphase: CollisionBroadphase = new DynamicTreeCollisionBroadphase();
 

src/engine/Util/SortedList.ts

@@ -66,14 +66,14 @@ export class SortedList<T> {
         }
       } else if (this._getComparable(element) < node.getKey()) {
         if (node.getLeft() == null) {
-          node.setLeft(new BinaryTreeNode(this._getComparable.call(element, element), [element], null, null));
+          node.setLeft(new BinaryTreeNode(this._getComparable(element), [element], null, null));
           return true;
         } else {
           return this._insert(node.getLeft(), element);
         }
       } else {
         if (node.getRight() == null) {
-          node.setRight(new BinaryTreeNode(this._getComparable.call(element, element), [element], null, null));
+          node.setRight(new BinaryTreeNode(this._getComparable(element), [element], null, null));
           return true;
         } else {
           return this._insert(node.getRight(), element);

src/spec/ActorSpec.ts

@@ -1,5 +1,5 @@
-import { ExcaliburMatchers, ensureImagesLoaded } from 'excalibur-jasmine';
 import * as ex from '@excalibur';
+import { ensureImagesLoaded, ExcaliburMatchers } from 'excalibur-jasmine';
 import { TestUtils } from './util/TestUtils';
 
 describe('A game actor', () => {
@@ -520,6 +520,39 @@ describe('A game actor', () => {
     expect(invisibleActor.draw).not.toHaveBeenCalled();
   });
 
+  it('can be drawn with a z-index', (done) => {
+    engine = TestUtils.engine({
+      width: 62,
+      height: 64,
+      suppressHiDPIScaling: true
+    });
+
+    const green = new ex.Actor({ x: 50, y: 50, width: 40, height: 40, color: ex.Color.Green });
+    const blue = new ex.Actor({ x: 40, y: 40, width: 40, height: 40, color: ex.Color.Blue });
+
+    green.z = 1;
+    blue.z = 2;
+
+    // Actors currently need to be in a scene for z to work
+    scene.add(blue);
+    scene.add(green);
+
+    scene.draw(engine.ctx, 100);
+
+    ensureImagesLoaded(engine.canvas, 'src/spec/images/ActorSpec/zindex-blue-top.png').then(([canvas, image]) => {
+      expect(canvas).toEqualImage(image);
+
+      green.z = 2;
+      blue.z = 1;
+      scene.draw(engine.ctx, 100);
+
+      ensureImagesLoaded(engine.canvas, 'src/spec/images/ActorSpec/zindex-green-top.png').then(([canvas, image]) => {
+        expect(canvas).toEqualImage(image);
+        done();
+      });
+    });
+  });
+
   it('can have a graphic drawn at an opacity', (done) => {
     engine = TestUtils.engine({
       width: 62,