excaliburjs · eonarheim · Aug 6, 2022 · Jul 30, 2022 · Aug 6, 2022 · Aug 6, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
+- Fixed issue where world origin was inconsistent when the using `ex.DisplayMode.FitScreenAndFill` when the screen was resized.
 - Fixed issue where context opacity was not respected when set in a `preDraw`
 - Fixed issue where `ex.Sound.loop` was not working, and switching tab visibility would cause odd behavior with looping `ex.Sound`
 - Fixed issue where adding a `ex.ParticleEmitter` as a child did not position particles according to the parent

diff --git a/sandbox/index.html b/sandbox/index.html
@@ -12,6 +12,7 @@
       <li><a href="tests/sprite-tint/">Sprite Tint</a></li>
       <li><a href="tests/parallel/">Parallel Actions</a></li>
       <li><a href="tests/isometric/">Isometric Map</a></li>
+      <li><a href="tests/contentarea/">Content Area</a></li>
       <li><a href="tests/emitter/">Particle Emitter</a></li>
       <li><a href="tests/textcrash/">Many Text instances without failure (Chrome)</a></li>
       <li><a href="tests/decode-many/">Decode Many Images without failure (Chrome)</a></li>

diff --git a/sandbox/tests/contentarea/index.html b/sandbox/tests/contentarea/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>ContentArea</title>
+</head>
+<body>
+  <script src="../../lib/excalibur.js"></script>
+  <script src="index.js"></script>
+</body>
+</html>
diff --git a/sandbox/tests/contentarea/index.ts b/sandbox/tests/contentarea/index.ts
@@ -0,0 +1,71 @@
+
+var engine = new ex.Engine({
+  width: 400,
+  height: 400,
+  displayMode: ex.DisplayMode.FitScreenAndFill
+});
+
+var box = new ex.Actor({
+  width: 10,
+  height: 10,
+  color: ex.Color.Red,
+  pos: ex.vec(0, 0),
+  anchor: ex.vec(0, 0)
+});
+
+var bounds = new ex.Actor({
+  color: ex.Color.Green,
+  height: 1,
+  width: 1,
+  anchor: ex.vec(0, 0)
+});
+
+engine.currentScene.onPreDraw = (ctx: ex.ExcaliburGraphicsContext) => {
+  ctx.save();
+  ctx.z = -99;
+  const red = ex.Color.fromHex('#F84541');
+  const green = ex.Color.fromHex('#3CCC2E');
+  const blue = ex.Color.fromHex('#3DDCFC');
+  const yellow = ex.Color.fromHex('#FDCF45');
+
+  const bb = engine.screen.contentArea.clone();
+  bb.top++
+  bb.left++
+  bb.bottom--
+  bb.right--;
+  bb.draw(ctx, ex.Color.Yellow);
+
+  ctx.drawCircle(ex.vec(bb.left + 6, bb.top + 6), 10, green);
+  ctx.drawCircle(ex.vec(bb.right - 6, bb.top + 6), 10, blue);
+  ctx.drawCircle(ex.vec(bb.left + 6, bb.bottom - 6), 10, yellow);
+  ctx.drawCircle(ex.vec(bb.right - 6, bb.bottom - 6), 10, red);
+  ctx.restore();
+}
+
+engine.add(bounds);
+engine.add(box);
+
+bounds.on("preupdate", () => {
+  // const topLeft = engine.screen.screenToWorldCoordinates(ex.vec(engine.screen.contentArea.left, engine.screen.contentArea.top));
+  // const bottomRight = engine.screen.screenToWorldCoordinates(ex.vec(engine.screen.contentArea.right, engine.screen.contentArea.bottom));
+  // bounds.pos = topLeft;
+  // bounds.graphics.current[0].graphic.width = bottomRight.x - topLeft.x;
+  // bounds.graphics.current[0].graphic.height = bottomRight.y - topLeft.y;
+  // bounds.graphics.recalculateBounds();
+});
+
+box.on("preupdate", () => {
+  // box.pos.x = 0;//engine.screen.contentArea.left + 50;
+  // box.pos.y = 0;//engine.screen.contentArea.top + 50;
+
+  // console.log(box.pos);
+});
+
+engine.onPostUpdate = () => {
+  //  engine.currentScene.camera.pos = engine.screen.center;
+}
+
+engine.start().then(() => {
+  console.log(engine.currentScene.camera.pos);
+  box.pos = engine.currentScene.camera.pos;
+});
diff --git a/src/engine/Camera.ts b/src/engine/Camera.ts
@@ -592,7 +592,7 @@ export class Camera extends Class implements CanUpdate, CanInitialize {
       this._engine = _engine;
       this._screen = _engine.screen;
 
-      const currentRes = this._screen.resolution;
+      const currentRes = this._screen.contentArea;
       let center = vec(currentRes.width / 2, currentRes.height / 2);
       if (!this._engine.loadingComplete) {
         // If there was a loading screen, we peek the configured resolution

diff --git a/src/engine/Graphics/GraphicsSystem.ts b/src/engine/Graphics/GraphicsSystem.ts
@@ -96,6 +96,9 @@ export class GraphicsSystem extends System<TransformComponent | GraphicsComponen
       }
 
       this._graphicsContext.save();
+      if (transform.coordPlane === CoordPlane.Screen) {
+        this._graphicsContext.translate(this._engine.screen.contentArea.left, this._engine.screen.contentArea.top);
+      }
 
       // Tick any graphics state (but only once) for animations and graphics groups
       graphics.update(delta, this._token);

diff --git a/src/engine/Screen.ts b/src/engine/Screen.ts
@@ -883,6 +883,8 @@ export class Screen {
       this.viewport = this.resolution;
     }
 
+    this._contentArea = BoundingBox.fromDimension(this.resolution.width, this.resolution.height, Vector.Zero);
+
     if (this.displayMode === DisplayMode.FitScreen) {
       this._computeFit();
     }