excalibur 0.32.0-alpha.1575 → 0.32.0-alpha.1577

package/CHANGELOG.md

@@ -74,6 +74,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
+- Fixed issue where onRemove would sometimes not be called
 - Fixed issue where pointer containment WAS NOT being uses on collision shape geometry, only their bounds
 - Fixed issue where overriding built in uniforms and graphics no longer worked as v0.30.x
 - Fixed issue where clearSchedule during a scheduled callback could cause a cb to be skipped

package/build/dist/EntityComponentSystem/Entity.d.ts

@@ -266,7 +266,7 @@ export declare class Entity<TKnownComponents extends Component = any> implements
      */
     _add(engine: Engine): void;
     /**
-     * Removes Actor, meant to be called by the Scene when Actor is added.
+     * Removes Actor, meant to be called by the Scene when Actor is removed.
      *
      * It is not recommended that internal excalibur methods be overridden, do so at your own risk.
      * @internal

package/build/dist/excalibur.development.js

@@ -1,4 +1,4 @@
-/*! excalibur - 0.32.0-alpha.1575+b861d89 - 2025-11-28
+/*! excalibur - 0.32.0-alpha.1577+cbacdb4 - 2025-11-29
 https://github.com/excaliburjs/Excalibur
 Copyright (c) 2025 Excalibur.js <https://github.com/excaliburjs/Excalibur/graphs/contributors>
 Licensed BSD-2-Clause
@@ -5247,7 +5247,7 @@ mask:     ${(this.mask >>> 0).toString(2).padStart(32, "0")}
       }
     }
     /**
-     * Removes Actor, meant to be called by the Scene when Actor is added.
+     * Removes Actor, meant to be called by the Scene when Actor is removed.
      *
      * It is not recommended that internal excalibur methods be overridden, do so at your own risk.
      * @internal
@@ -5414,7 +5414,7 @@ mask:     ${(this.mask >>> 0).toString(2).padStart(32, "0")}
       }
     }
     removeEntity(idOrEntity, deferred = true) {
-      var _a, _b;
+      var _a, _b, _c, _d;
       let id = 0;
       if (idOrEntity instanceof Entity) {
         id = idOrEntity.id;
@@ -5448,7 +5448,8 @@ mask:     ${(this.mask >>> 0).toString(2).padStart(32, "0")}
           entity.childrenRemoved$.unsubscribe(childRemovedHandler);
           this._childRemovedHandlerMap.delete(entity);
         }
-        if ((_b = (_a = this._world) == null ? void 0 : _a.scene) == null ? void 0 : _b.engine) {
+        entity._remove((_b = (_a = this._world) == null ? void 0 : _a.scene) == null ? void 0 : _b.engine);
+        if ((_d = (_c = this._world) == null ? void 0 : _c.scene) == null ? void 0 : _d.engine) {
           this._world.scene.engine.stats.currFrame.actors.killed++;
         }
       }
@@ -24253,7 +24254,7 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
     }
   }
   const logoImg = "data:image/png;base64,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";
-  const loaderCss = "/* Buttons styles start */\n\nbutton#excalibur-play {\n  display: inline-block;\n  position: relative;\n  z-index: 999;\n  border-radius: 6px;\n  border: none;\n  /*border: 3px solid;\n    border-color: white;\n    box-shadow: 0 0 10px #ccc;*/\n  padding: 1rem 1.5rem 1rem 4rem;\n  margin: 0;\n  text-decoration: none;\n  background: #00b233;\n  color: #ffffff;\n  font-family: sans-serif;\n  font-size: 2rem;\n  white-space: nowrap;\n  line-height: 1;\n  cursor: pointer;\n  text-align: center;\n  transition:\n    background 250ms ease-in-out,\n    transform 150ms ease;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n\n  -webkit-animation: excalibur-button-fadein 200ms; /* Safari, Chrome and Opera > 12.1 */\n  -moz-animation: excalibur-button-fadein 200ms; /* Firefox < 16 */\n  -ms-animation: excalibur-button-fadein 200ms; /* Internet Explorer */\n  -o-animation: excalibur-button-fadein 200ms; /* Opera < 12.1 */\n  animation: excalibur-button-fadein 200ms;\n}\n\n/*\nbutton#excalibur-play {\n  display: none;\n}*/\n\nbutton#excalibur-play:after {\n  position: absolute;\n  content: '';\n  border: 8px solid;\n  border-color: transparent transparent transparent white;\n  left: 35px;\n  top: 24px;\n  width: 0;\n  height: 0;\n}\n\nbutton#excalibur-play:before {\n  position: absolute;\n  content: '';\n  border: 3px solid;\n  left: 19px;\n  top: 14px;\n  border-radius: 20px;\n  width: 30px;\n  height: 30px;\n}\n\nbutton#excalibur-play:hover,\nbutton#excalibur-play:focus {\n  background: #00982c;\n}\n\nbutton#excalibur-play:focus {\n  outline: 1px solid #fff;\n  outline-offset: -4px;\n}\n\nbutton#excalibur-play:active {\n  transform: scale(0.99);\n}\n\n@keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Firefox < 16 */\n@-moz-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Safari, Chrome and Opera > 12.1 */\n@-webkit-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Internet Explorer */\n@-ms-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Opera < 12.1 */\n@-o-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n";
+  const loaderCss = "/* Buttons styles start */\nbutton#excalibur-play {\n  display: none;\n}\n\nbutton#excalibur-play {\n  box-sizing: border-box;\n  display: flex;\n  gap: 0.25rem;\n  white-space: nowrap;\n  justify-content: center;\n  position: relative;\n  z-index: 999;\n  border-radius: 6px;\n  border: none;\n  padding: 1rem;\n  margin: 0;\n  text-decoration: none;\n  background: #00b233;\n  color: #ffffff;\n  font-family: sans-serif;\n  font-size: 2rem;\n  white-space: nowrap;\n  line-height: 1;\n  cursor: pointer;\n  text-align: center;\n  transition:\n    background 250ms ease-in-out,\n    transform 150ms ease;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n\n  -webkit-animation: excalibur-button-fadein 200ms; /* Safari, Chrome and Opera > 12.1 */\n  -moz-animation: excalibur-button-fadein 200ms; /* Firefox < 16 */\n  -ms-animation: excalibur-button-fadein 200ms; /* Internet Explorer */\n  -o-animation: excalibur-button-fadein 200ms; /* Opera < 12.1 */\n  animation: excalibur-button-fadein 200ms;\n}\n\nspan#excalibur-play-icon {\n  content: '';\n  display: inline-block;\n  position: relative;\n  width: 2rem;\n  height: 2rem;\n}\n\nspan#excalibur-play-icon:after {\n  box-sizing: border-box;\n  position: absolute;\n  content: '';\n  border: 0.5rem solid;\n  border-color: transparent transparent transparent white;\n  left: calc(50% - 0.1rem);\n  top: calc(30% - 0.1rem);\n  width: 0;\n  height: 0;\n}\n\nspan#excalibur-play-icon:before {\n  box-sizing: border-box;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  position: absolute;\n  content: '';\n  border: 3px solid;\n  border-radius: 1rem;\n  width: 2rem;\n  height: 2rem;\n}\n\nbutton#excalibur-play:focus {\n  outline: 1px solid #fff;\n  outline-offset: -4px;\n}\n\nbutton#excalibur-play:active {\n  transform: scale(0.99);\n}\n\n@keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Firefox < 16 */\n@-moz-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Safari, Chrome and Opera > 12.1 */\n@-webkit-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Internet Explorer */\n@-ms-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Opera < 12.1 */\n@-o-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n";
   const _Loader = class _Loader2 extends DefaultLoader {
     constructor(loadablesOrOptions) {
       const options = Array.isArray(loadablesOrOptions) ? {
@@ -24279,8 +24280,16 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
           buttonElement = document.createElement("button");
         }
         buttonElement.id = "excalibur-play";
-        buttonElement.textContent = this.playButtonText;
         buttonElement.style.display = "none";
+        if (buttonElement) {
+          const span = document.createElement("span");
+          span.id = "excalibur-play-icon";
+          buttonElement.appendChild(span);
+          const text = document.createElement("span");
+          text.id = "excalibur-play-text";
+          text.textContent = this.playButtonText;
+          buttonElement.appendChild(text);
+        }
         return buttonElement;
       };
       this._originalOptions = { ..._Loader2._DEFAULT_LOADER_OPTIONS, ...options };
@@ -24350,7 +24359,7 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
           this.engine.browser.window.on("resize", resizeHandler);
         }
         this._playButtonShown = true;
-        this._playButton.style.display = "block";
+        this._playButton.style.display = "flex";
         document.body.addEventListener("keyup", (evt) => {
           if (evt.key === "Enter") {
             this._playButton.click();
@@ -24429,7 +24438,13 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
     _positionPlayButton() {
       if (this.engine) {
         const { x: left, y: top, width: screenWidth, height: screenHeight } = this.engine.canvas.getBoundingClientRect();
-        if (this._playButtonRootElement) {
+        if (this._playButtonRootElement && this._playButtonElement) {
+          const text = this._playButtonElement.querySelector("#excalibur-play-text");
+          if (screenWidth < 450) {
+            text.style.display = "none";
+          } else {
+            text.style.display = "inline-block";
+          }
           const buttonWidth = this._playButton.clientWidth;
           const buttonHeight = this._playButton.clientHeight;
           if (this.playButtonPosition) {
@@ -24439,6 +24454,10 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
             this._playButtonRootElement.style.left = `${left + screenWidth / 2 - buttonWidth / 2}px`;
             this._playButtonRootElement.style.top = `${top + screenHeight / 2 - buttonHeight / 2 + 100}px`;
           }
+          if (screenWidth < 450) {
+            this._playButtonRootElement.style.left = `${left + screenWidth / 2 - buttonWidth / 2}px`;
+            this._playButtonRootElement.style.top = `${top + screenHeight / 2 - buttonHeight / 2 + 25}px`;
+          }
         }
       }
     }
@@ -24450,7 +24469,6 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
     onDraw(ctx) {
       const canvasHeight = this.engine.canvasHeight / this.engine.pixelRatio;
       const canvasWidth = this.engine.canvasWidth / this.engine.pixelRatio;
-      this._positionPlayButton();
       ctx.fillStyle = this.backgroundColor;
       ctx.fillRect(0, 0, canvasWidth, canvasHeight);
       let logoY = canvasHeight / 2;
@@ -33441,7 +33459,7 @@ Read more about this issue at https://excaliburjs.com/docs/performance`
       this._count += count;
     }
   }
-  const EX_VERSION = "0.32.0-alpha.1575+b861d89";
+  const EX_VERSION = "0.32.0-alpha.1577+cbacdb4";
   polyfill();
   exports2.ActionCompleteEvent = ActionCompleteEvent;
   exports2.ActionContext = ActionContext;

package/build/dist/excalibur.js

@@ -1,4 +1,4 @@
-/*! excalibur - 0.32.0-alpha.1575+b861d89 - 2025-11-28
+/*! excalibur - 0.32.0-alpha.1577+cbacdb4 - 2025-11-29
 https://github.com/excaliburjs/Excalibur
 Copyright (c) 2025 Excalibur.js <https://github.com/excaliburjs/Excalibur/graphs/contributors>
 Licensed BSD-2-Clause
@@ -5247,7 +5247,7 @@ mask:     ${(this.mask >>> 0).toString(2).padStart(32, "0")}
       }
     }
     /**
-     * Removes Actor, meant to be called by the Scene when Actor is added.
+     * Removes Actor, meant to be called by the Scene when Actor is removed.
      *
      * It is not recommended that internal excalibur methods be overridden, do so at your own risk.
      * @internal
@@ -5414,7 +5414,7 @@ mask:     ${(this.mask >>> 0).toString(2).padStart(32, "0")}
       }
     }
     removeEntity(idOrEntity, deferred = true) {
-      var _a, _b;
+      var _a, _b, _c, _d;
       let id = 0;
       if (idOrEntity instanceof Entity) {
         id = idOrEntity.id;
@@ -5448,7 +5448,8 @@ mask:     ${(this.mask >>> 0).toString(2).padStart(32, "0")}
           entity.childrenRemoved$.unsubscribe(childRemovedHandler);
           this._childRemovedHandlerMap.delete(entity);
         }
-        if ((_b = (_a = this._world) == null ? void 0 : _a.scene) == null ? void 0 : _b.engine) {
+        entity._remove((_b = (_a = this._world) == null ? void 0 : _a.scene) == null ? void 0 : _b.engine);
+        if ((_d = (_c = this._world) == null ? void 0 : _c.scene) == null ? void 0 : _d.engine) {
           this._world.scene.engine.stats.currFrame.actors.killed++;
         }
       }
@@ -24253,7 +24254,7 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
     }
   }
   const logoImg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdQAAAB2CAYAAABxhGI9AAAACXBIWXMAAAsSAAALEgHS3X78AAAKnUlEQVR42u3dP2wjSx0H8N8hJIonIRmJjsq0SBR+BQ1dcqKhe0lD77SvSwpKkJKGPulpktfRIMUdEqKIqV57rpAokM4dbSiyq7ONPTP7x39ifz7SFbnEnp3xer47O7uzH15fXwMA6OYHmgAABCoACFQAEKgAgEAFAIEKAAIVAAQqACBQAUCgAoBABQCBCgAIVAAQqAAgUAFAoAIAAhUABCoACFQAEKgAgECFLbmOiNeFf2PbAyz68Pr6qhUgbRwR92v+/zwiJrYHMEKFMmcN///UtgcQqFBk1PD/97U9Qx8VCFSgu4EmAIEKAAIVAAQqACBQ4Z25jojP8eX+0WtNAgIVaOY+Im5j+eKh24h41jQgUIEyZ7F5NaPU7wCBCiwYd/w9cOB+qAlgJ3KLLow0EV198803RWvJfvfddx+0lhEqHKu5JgAjVCBvlhmFzjQRXUekHz9+TP79y8uLRjNChXfvoePvAYEKxNtj1e42/O5JoIJABcrdRMRVLM+X3kTEpaaB988cKuzWg9EobTWdMx0Oly8uN4dqhAoARqgnaN3arHfqu7OyH8ItKLVB/P+CEfMTHyGPY3npx1m8zWGDEeoBfUk/xdti57dr/r1Wv2+6EPow3tZ5rRdS72s1neuF97xvWd+XTH0/V+UMttDWqbI/r2nrxfp+jv2uSjSO7S+OXy/A/3lN+9xX5T5HxEUPZZ0tfB71+w57eJ/HFu+z+jkv1u92YX9fbI/HhX3JA9rp5MPr66tWaG9UfUGbrHIzi7cLUyYFf/tpTady03EEeL8mUJ6i7MKYNvWNqr4Pe2jradXO60LrvPAz2PQ5RPX684ah8dxD+2zantnCgVipSVV+m/tgB9W2DDq2Sx/vM95wcHhZhWVJm8yrv58cSgfTdc70+++/X/r522+/tUKSEepBqo+om4ZLPerMjUwuNnQCtx1GWJtee1FwdD5uWd86xLs8UaVt2aNEO1/saZ/Z5rYMW4zq6v34rGV9Bg3q2eZ9SkeNm9qwyUh30OPIHYFKx5FG03C7znSOqYBq+qW/zpQ3anH037TNHluG6f0WPsPhHvab4QFty7ogOeuxDYcNy2/zu2214WNYWxmBurNO8bGn97pNBOO8xy/9uCorZZ4I2r4C7aJgO7ZV9iE49Dm6NvOWx+pWE9CUq3zbdTp9doz38TbXtzqH9RT5CyWe422OaZoZGeZCabrhPQY9HjwsjpTvCg4YtlE2+Ta/j2bzn8fqrDqgm+6yUHOmAvWUjAtGhbNYvsBknDnqH1Qhc7VmxHgeb/NbudA5j/UXlYwif2p6luhAc9teu1npiHKnDs8if6tCm7JLX3NKpgttXe9ruc9mHMd7a83iwdxF5vt8tutARaCeklRnNK9C8WnNF7geJQ4T4XG3JhSnVdilQrG+yOnrlVHfsEGYzhNBn7Lu6tS7+HJafJQ4EMiNlNqWXZ9WPvVgnVYHG5M1ByDXkT6leX2EgTqJtyt45yv7S2qO3sEZjZhDLXeR+YKdJ0Zdk8QocvH9N732KrNtq+FZ/zzIHABcJrYpd+Xv14lOd5ap76SgrduW/VTQ1qcQpqnbgu4ifZvUMNpd9XuoZmvCtPaQ2Y/BCHVLgbrJTeRPDdVf6pfMKDU2fOkHmVFFfXr3MsouLsnNvV5kRoe5+s431PeuoKPqWnaurY/ZPBEeqwceN4l96iwO6H7Mjq4y7VGPVNe10VaZMzVCPVWpI/Z6FZbcv5fMqGCU+dLfFGzj58jP8+bCdJCo7yzKTwdOF0bu9Ug7V4c+yz7FJfYeGoysUss0HssIdVZwYLDujMqlESoCdTtGsZtbHnJBeNdDSJSs0jTKdMJN1HNX54Wv7bvsU9NkVJVa13dX+/wuArV0X/l5RHyo/lnfF4G6p6DrS0kHdtXhy35TGErDPYZUn2WfWqDOo/lVqdMD2O/hKJhD7S/odukymq9s02QN4EEPR/zbaOumZc+r15zK1Zqznl9jsfiemTM1QmV3HUuTkedlg9HIQzRbUD93dfC+2tpj2fIHEH2+RqCCQH13gZq7hWXTNpVu19OB1fc9nQ0AKOKUb5lU0P1kDyOneoWk0lOZ9cIP0x7qu8+2BhCoR2wYu1+e7DmaXzBSsu5vaX1ne2zrpmUPTmxf7PM1Dm4y/vC7ny7Nif7+z/9ZmtM0Z3panPLtPmra9f16bcK0Dpbnwk43Vd/RHtu6zfNQTy1QBy3aqG2g9nVmxml+BOoJyT3NpWmn9xhfFnu4bvDa+44BXhqqfdf3uUF9+yz77AT31Yue2mjecYQ62NLfgkA9ghHqLNEhNem4H1c6vdyDxhf/bpz5m4coW/c39wi6VH2bPtHlcaV9cvXts+zxCe6rTeqc2ndL7uGd93QwM9bFcAzMoZZ7SgTBbWx+asui61h/iq1+RmjqdbnQXQ3T1DNQ63V/U9ucqm/pMzPb1rePsk/1iTOjgvatR4W3Lc8ULB78pELyrnAfeTcj1NU509/86mfJ33/8+Mf00a05UyPUEw7UVCeWG/WNEiExyHRMt5ltW30izUPk18ytt7lNfc8i//DvtvXto+ySA5BjljsLUF8lPkqMPEtW1JomDsiGBZ9Byb4NAvUITSN9GuwsIj6t6UTOqk7jJREkmzqli8xIs96udSO20sX0H1vW92IL9e1a9rgqVyf91gbPsTy9UD9n9lOkT8k+RfkFR5PMNqxOcdSf32PBvg3vilO+zdxE+okx9Wm0ph36XYsRZCpMF993GOk5qvqB3Dct6jvssb67KvuUNJ3frw92bhr8/STSF0JdRPMLpUCgnsgo9S76PZ246ZFk1wWvK5m3vVoYvW1Sz7nN91jfXbQ1ZQc7TW6HeaoOalypG/8/p/rP1aNAc6ZHzSnfdqPUPhdy2PQw6Nz9gSVhuhiqueUHR3uu7y7K3rdDX4u46ZrPbUa0IFBZ0seKQ3XQTRt2vm3W/a2DbNKys++rvm3ep6+y1x2UdP3bWU9lzra47U1GmlctX/sQ23t+aOlByLTh/4NAPaCRxtcdO5HLSJ/6vNtCwGx67VPmPbvWd1q9frKHtp4kAqRJ2HR9j762JfX3bZ//elPtj13PPDx1+D5tqk/Xi6NO8SHz7MmH19dXrdBNfVFP6T2PT1UHNit87/t4m5+aRH+nQBdvqyhZDKJLfZs8h7XPsqdV2ZOV+tanKB8aln0dyxdAXbV4j4gvt4oMOrbP6vbU73NW7TMlbdTnPrWpfqXfh9HKZ9vke7KuTeZRNtXRSe6+1FV//ce/ln5eXfsXgcqXzr6+9261M3moOoa7E6nvTZTfy7iNsmfb7kjfgXGsvxe0vihsEts9HTquPpt1q1vtahu2TqAiUAEEKj0zhwoARqgAu/OnX/442WH+9xc/Wvr58re/Tr7f41/+ZsRqhAoACFQAEKgAcHjMoQJskJsz/eqrr5Z+vvr7v5fmQFevAl5lztQIFQAQqAAgUAHgIJlDBdhgdQ41N2eKESoAIFABQKACwFEwhwoARqgAIFABQKACAAIVAAQqAAhUABCoAIBABQCBCgACFQAEKgAgUAFAoAKAQAUAgQoACFQAEKgAIFABQKACAAIVAAQqAAhUABCoAIBABQCBCgACFQAQqAAgUAFAoAKAQAUAlvwPcFDns1DsH4sAAAAASUVORK5CYII=";
-  const loaderCss = "/* Buttons styles start */\n\nbutton#excalibur-play {\n  display: inline-block;\n  position: relative;\n  z-index: 999;\n  border-radius: 6px;\n  border: none;\n  /*border: 3px solid;\n    border-color: white;\n    box-shadow: 0 0 10px #ccc;*/\n  padding: 1rem 1.5rem 1rem 4rem;\n  margin: 0;\n  text-decoration: none;\n  background: #00b233;\n  color: #ffffff;\n  font-family: sans-serif;\n  font-size: 2rem;\n  white-space: nowrap;\n  line-height: 1;\n  cursor: pointer;\n  text-align: center;\n  transition:\n    background 250ms ease-in-out,\n    transform 150ms ease;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n\n  -webkit-animation: excalibur-button-fadein 200ms; /* Safari, Chrome and Opera > 12.1 */\n  -moz-animation: excalibur-button-fadein 200ms; /* Firefox < 16 */\n  -ms-animation: excalibur-button-fadein 200ms; /* Internet Explorer */\n  -o-animation: excalibur-button-fadein 200ms; /* Opera < 12.1 */\n  animation: excalibur-button-fadein 200ms;\n}\n\n/*\nbutton#excalibur-play {\n  display: none;\n}*/\n\nbutton#excalibur-play:after {\n  position: absolute;\n  content: '';\n  border: 8px solid;\n  border-color: transparent transparent transparent white;\n  left: 35px;\n  top: 24px;\n  width: 0;\n  height: 0;\n}\n\nbutton#excalibur-play:before {\n  position: absolute;\n  content: '';\n  border: 3px solid;\n  left: 19px;\n  top: 14px;\n  border-radius: 20px;\n  width: 30px;\n  height: 30px;\n}\n\nbutton#excalibur-play:hover,\nbutton#excalibur-play:focus {\n  background: #00982c;\n}\n\nbutton#excalibur-play:focus {\n  outline: 1px solid #fff;\n  outline-offset: -4px;\n}\n\nbutton#excalibur-play:active {\n  transform: scale(0.99);\n}\n\n@keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Firefox < 16 */\n@-moz-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Safari, Chrome and Opera > 12.1 */\n@-webkit-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Internet Explorer */\n@-ms-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Opera < 12.1 */\n@-o-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n";
+  const loaderCss = "/* Buttons styles start */\nbutton#excalibur-play {\n  display: none;\n}\n\nbutton#excalibur-play {\n  box-sizing: border-box;\n  display: flex;\n  gap: 0.25rem;\n  white-space: nowrap;\n  justify-content: center;\n  position: relative;\n  z-index: 999;\n  border-radius: 6px;\n  border: none;\n  padding: 1rem;\n  margin: 0;\n  text-decoration: none;\n  background: #00b233;\n  color: #ffffff;\n  font-family: sans-serif;\n  font-size: 2rem;\n  white-space: nowrap;\n  line-height: 1;\n  cursor: pointer;\n  text-align: center;\n  transition:\n    background 250ms ease-in-out,\n    transform 150ms ease;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n\n  -webkit-animation: excalibur-button-fadein 200ms; /* Safari, Chrome and Opera > 12.1 */\n  -moz-animation: excalibur-button-fadein 200ms; /* Firefox < 16 */\n  -ms-animation: excalibur-button-fadein 200ms; /* Internet Explorer */\n  -o-animation: excalibur-button-fadein 200ms; /* Opera < 12.1 */\n  animation: excalibur-button-fadein 200ms;\n}\n\nspan#excalibur-play-icon {\n  content: '';\n  display: inline-block;\n  position: relative;\n  width: 2rem;\n  height: 2rem;\n}\n\nspan#excalibur-play-icon:after {\n  box-sizing: border-box;\n  position: absolute;\n  content: '';\n  border: 0.5rem solid;\n  border-color: transparent transparent transparent white;\n  left: calc(50% - 0.1rem);\n  top: calc(30% - 0.1rem);\n  width: 0;\n  height: 0;\n}\n\nspan#excalibur-play-icon:before {\n  box-sizing: border-box;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  position: absolute;\n  content: '';\n  border: 3px solid;\n  border-radius: 1rem;\n  width: 2rem;\n  height: 2rem;\n}\n\nbutton#excalibur-play:focus {\n  outline: 1px solid #fff;\n  outline-offset: -4px;\n}\n\nbutton#excalibur-play:active {\n  transform: scale(0.99);\n}\n\n@keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Firefox < 16 */\n@-moz-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Safari, Chrome and Opera > 12.1 */\n@-webkit-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Internet Explorer */\n@-ms-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Opera < 12.1 */\n@-o-keyframes excalibur-button-fadein {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n";
   const _Loader = class _Loader2 extends DefaultLoader {
     constructor(loadablesOrOptions) {
       const options = Array.isArray(loadablesOrOptions) ? {
@@ -24279,8 +24280,16 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
           buttonElement = document.createElement("button");
         }
         buttonElement.id = "excalibur-play";
-        buttonElement.textContent = this.playButtonText;
         buttonElement.style.display = "none";
+        if (buttonElement) {
+          const span = document.createElement("span");
+          span.id = "excalibur-play-icon";
+          buttonElement.appendChild(span);
+          const text = document.createElement("span");
+          text.id = "excalibur-play-text";
+          text.textContent = this.playButtonText;
+          buttonElement.appendChild(text);
+        }
         return buttonElement;
       };
       this._originalOptions = { ..._Loader2._DEFAULT_LOADER_OPTIONS, ...options };
@@ -24350,7 +24359,7 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
           this.engine.browser.window.on("resize", resizeHandler);
         }
         this._playButtonShown = true;
-        this._playButton.style.display = "block";
+        this._playButton.style.display = "flex";
         document.body.addEventListener("keyup", (evt) => {
           if (evt.key === "Enter") {
             this._playButton.click();
@@ -24429,7 +24438,13 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
     _positionPlayButton() {
       if (this.engine) {
         const { x: left, y: top, width: screenWidth, height: screenHeight } = this.engine.canvas.getBoundingClientRect();
-        if (this._playButtonRootElement) {
+        if (this._playButtonRootElement && this._playButtonElement) {
+          const text = this._playButtonElement.querySelector("#excalibur-play-text");
+          if (screenWidth < 450) {
+            text.style.display = "none";
+          } else {
+            text.style.display = "inline-block";
+          }
           const buttonWidth = this._playButton.clientWidth;
           const buttonHeight = this._playButton.clientHeight;
           if (this.playButtonPosition) {
@@ -24439,6 +24454,10 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
             this._playButtonRootElement.style.left = `${left + screenWidth / 2 - buttonWidth / 2}px`;
             this._playButtonRootElement.style.top = `${top + screenHeight / 2 - buttonHeight / 2 + 100}px`;
           }
+          if (screenWidth < 450) {
+            this._playButtonRootElement.style.left = `${left + screenWidth / 2 - buttonWidth / 2}px`;
+            this._playButtonRootElement.style.top = `${top + screenHeight / 2 - buttonHeight / 2 + 25}px`;
+          }
         }
       }
     }
@@ -24450,7 +24469,6 @@ If you want to do custom drawing, use Actor.graphics, or any onPreDraw or onPost
     onDraw(ctx) {
       const canvasHeight = this.engine.canvasHeight / this.engine.pixelRatio;
       const canvasWidth = this.engine.canvasWidth / this.engine.pixelRatio;
-      this._positionPlayButton();
       ctx.fillStyle = this.backgroundColor;
       ctx.fillRect(0, 0, canvasWidth, canvasHeight);
       let logoY = canvasHeight / 2;
@@ -33441,7 +33459,7 @@ Read more about this issue at https://excaliburjs.com/docs/performance`
       this._count += count;
     }
   }
-  const EX_VERSION = "0.32.0-alpha.1575+b861d89";
+  const EX_VERSION = "0.32.0-alpha.1577+cbacdb4";
   polyfill();
   exports2.ActionCompleteEvent = ActionCompleteEvent;
   exports2.ActionContext = ActionContext;