fix: Play button position incorrect with css transforms

CHANGELOG.md

@@ -40,6 +40,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
+- Fixed issue with `ex.Loader` start button position when using CSS transforms
 - Fixed issue where adding scenes with the same name did not work when it was previously removed
 - Fixed issue when WebGL context lost occurs where there was no friendly output to the user
 - Fixed issue where HiDPI scaling could accidentally scale past the 4k mobile limit, if the context would scale too large it will now attempt to recover by backing off.

sandbox/html/index.html

@@ -22,6 +22,12 @@
           border-radius: 2px;
           z-index: 2;
         }
+        canvas{ 
+            position: fixed; 
+            top:50%; 
+            left:50%; 
+            transform: translate(-50% , -50%); 
+        }
 
         #page {
           position: fixed;

sandbox/src/game.ts

@@ -51,7 +51,7 @@ var game = new ex.Engine({
   // pixelRatio: 1,
   // suppressPlayButton: true,
   pointerScope: ex.PointerScope.Canvas,
-  displayMode: ex.DisplayMode.FitScreenAndZoom,
+  displayMode: ex.DisplayMode.Fixed,
   snapToPixel: false,
   // fixedUpdateFps: 30,
   pixelRatio: 2,
@@ -153,10 +153,11 @@ cards2.draw(game.graphicsContext, 0, 0);
 
 jump.volume = 0.3;
 
-var boot = new ex.Loader({
-  fullscreenAfterLoad: true,
-  fullscreenContainer: document.getElementById('container')
-});
+var boot = new ex.Loader();
+// var boot = new ex.Loader({
+//   fullscreenAfterLoad: true,
+//   fullscreenContainer: document.getElementById('container')
+// });
 boot.addResource(heartImageSource);
 boot.addResource(heartTex);
 boot.addResource(imageRun);
@@ -986,6 +987,10 @@ game.input.pointers.primary.on('down', (evt: ex.PointerEvent) => {
   }
 });
 
+tileMap.tiles[0].events.on('pointerdown', (evt) => {
+  console.log('tile clicked', evt);
+});
+
 game.input.keyboard.on('up', (evt?: ex.KeyEvent) => {
   if (evt.key == ex.Keys.F) {
     jump.play();

src/engine/Director/Loader.ts

@@ -335,12 +335,12 @@ export class Loader extends DefaultLoader {
   private _positionPlayButton() {
     if (this.engine) {
       const {
+        x: left,
+        y: top,
         width: screenWidth,
         height: screenHeight
       } = this.engine.canvas.getBoundingClientRect();
       if (this._playButtonRootElement) {
-        const left = this.engine.canvas.offsetLeft;
-        const top = this.engine.canvas.offsetTop;
         const buttonWidth = this._playButton.clientWidth;
         const buttonHeight = this._playButton.clientHeight;
         if (this.playButtonPosition) {