fix: [#2636] Screen element collider & graphics anchor (#2637)

===:clipboard: PR Checklist :clipboard:=== - [x] :pushpin: issue exists in github for these changes - [x] :microscope: existing tests still pass - [x] :see_no_evil: code conforms to the [style guide](https://github.com/excaliburjs/Excalibur/blob/main/STYLEGUIDE.md) - [x] 📐 new tests written and passing / old tests updated with new scenario(s) - [x] 📄 changelog entry added (or not needed) ================== Closes #2636 ## Changes: - Updates ex.ScreenElement logic to properly handle constructor parameters
excaliburjs · May 28, 2023 · d6ddd4b · d6ddd4b
1 parent c7e8e3c
commit d6ddd4b
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -46,6 +46,7 @@ are returned
 
 ### Fixed
 
+- Fixed issue where the `ex.ScreenElement` anchor was not being accounted for properly when passed as a constructor parameter.
 - Fixed issue where you could not use multiple instances of Excalibur on the same page, you can now have as many Excalibur's as you want (up to the webgl context limit).
 - Fixed issue where `ex.ScreenElement` would log a warning when created without a height or width
 - Fixed issue where `ex.Sound` would get confused parsing and playing sound files with a querystring in their path

diff --git a/sandbox/tests/screenelement/index.html b/sandbox/tests/screenelement/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Screen Element</title>
+</head>
+<body>
+  <script src="../../lib/excalibur.js"></script>
+  <script src="./index.js"></script>
+</body>
+</html>
diff --git a/sandbox/tests/screenelement/index.ts b/sandbox/tests/screenelement/index.ts
@@ -0,0 +1,29 @@
+
+var engine = new ex.Engine({
+  width: 600,
+  height: 400
+});
+
+engine.debug.entity.showId = false;
+engine.debug.collider.showGeometry = true;
+engine.debug.transform.showPosition = true;
+
+engine.showDebug(true);
+
+var image = new ex.ImageSource('./spritefont.png');
+
+var loader = new ex.Loader([image]);
+
+var screenElement = new ex.ScreenElement({
+  pos: ex.vec(engine.screen.halfDrawWidth, engine.screen.halfDrawHeight),
+  width: 100,
+  height: 100,
+  anchor: ex.Vector.Half
+});
+// screenElement.collider.useBoxCollider(100, 100, ex.Vector.Half);
+
+screenElement.graphics.use(image.toSprite(), { anchor: ex.vec(0.5, 0.5) });
+
+engine.currentScene.add(screenElement);
+
+engine.start(loader);
diff --git a/sandbox/tests/screenelement/spritefont.png b/sandbox/tests/screenelement/spritefont.png
diff --git a/src/engine/ScreenElement.ts b/src/engine/ScreenElement.ts
@@ -25,9 +25,11 @@ export class ScreenElement extends Actor {
   constructor(config?: ActorArgs) {
     super({ ...config });
     this.get(TransformComponent).coordPlane = CoordPlane.Screen;
-    this.anchor = vec(0, 0);
-    this.body.collisionType = CollisionType.PreventCollision;
-    if (config?.width > 0 && config?.height > 0) {
+    this.anchor = config?.anchor ?? vec(0, 0);
+    this.body.collisionType = config?.collisionType ?? CollisionType.PreventCollision;
+    if (!config?.collider &&
+        config?.width > 0 &&
+        config?.height > 0) {
       this.collider.useBoxCollider(this.width, this.height, this.anchor);
     }
   }

diff --git a/src/spec/ScreenElementSpec.ts b/src/spec/ScreenElementSpec.ts
@@ -48,6 +48,44 @@ describe('A ScreenElement', () => {
     expect(logger.warn).not.toHaveBeenCalled();
   });
 
+  it('can be constructed with a non-default anchor', () => {
+
+    const sut = new ScreenElement({
+      width: 100,
+      height: 100,
+      anchor: ex.vec(.5, .5)
+    });
+
+    expect(sut.anchor).toBeVector(ex.vec(.5, .5));
+    expect(sut.collider.get()).toBeInstanceOf(ex.PolygonCollider);
+    expect(sut.collider.get().bounds.width).toBe(100);
+    expect(sut.collider.get().bounds.height).toBe(100);
+    expect(sut.collider.get().bounds.left).toBe(-50);
+    expect(sut.collider.get().bounds.right).toBe(50);
+    expect(sut.collider.get().bounds.top).toBe(-50);
+    expect(sut.collider.get().bounds.bottom).toBe(50);
+  });
+
+  it('can be constructed with a non-default collider', () => {
+
+    const sut = new ScreenElement({
+      width: 100,
+      height: 100,
+      collisionType: ex.CollisionType.Active,
+      collider: ex.Shape.Circle(50)
+    });
+
+    expect(sut.anchor).toBeVector(ex.vec(0, 0));
+    expect(sut.body.collisionType).toBe(ex.CollisionType.Active);
+    expect(sut.collider.get()).toBeInstanceOf(ex.CircleCollider);
+    expect(sut.collider.get().bounds.width).toBe(100);
+    expect(sut.collider.get().bounds.height).toBe(100);
+    expect(sut.collider.get().bounds.left).toBe(-50);
+    expect(sut.collider.get().bounds.right).toBe(50);
+    expect(sut.collider.get().bounds.top).toBe(-50);
+    expect(sut.collider.get().bounds.bottom).toBe(50);
+  });
+
   it('is drawn when visible', () => {
     screenElement.graphics.visible = true;
     screenElement.graphics.onPostDraw = jasmine.createSpy('draw');