excalibur 0.26.0-alpha.310 → 0.26.0-alpha.311

package/build/dist/excalibur.js

@@ -1,5 +1,5 @@
 /*!
- * excalibur - 0.26.0-alpha.310+5f94c2f - 2021-11-27
+ * excalibur - 0.26.0-alpha.311+c19e8da - 2021-11-28
  * https://github.com/excaliburjs/Excalibur
  * Copyright (c) 2021 Excalibur.js <https://github.com/excaliburjs/Excalibur/graphs/contributors>
  * Licensed BSD-2-Clause
@@ -1918,6 +1918,7 @@ __webpack_require__.d(__webpack_exports__, {
   "Circle": () => (/* reexport */ Circle),
   "CircleCollider": () => (/* reexport */ CircleCollider),
   "Class": () => (/* reexport */ Class),
+  "Clock": () => (/* reexport */ Clock),
   "ClosestLine": () => (/* reexport */ ClosestLine),
   "ClosestLineJumpTable": () => (/* reexport */ ClosestLineJumpTable),
   "Collider": () => (/* reexport */ Collider),
@@ -1984,6 +1985,7 @@ __webpack_require__.d(__webpack_exports__, {
   "Font": () => (/* reexport */ Font),
   "FontStyle": () => (/* reexport */ FontStyle),
   "FontUnit": () => (/* reexport */ FontUnit),
+  "FpsSampler": () => (/* reexport */ FpsSampler),
   "FrameStats": () => (/* reexport */ FrameStats),
   "GameEvent": () => (/* reexport */ GameEvent),
   "GameStartEvent": () => (/* reexport */ GameStartEvent),
@@ -2084,6 +2086,7 @@ __webpack_require__.d(__webpack_exports__, {
   "Sprite": () => (/* reexport */ Sprite),
   "SpriteFont": () => (/* reexport */ SpriteFont_SpriteFont),
   "SpriteSheet": () => (/* reexport */ SpriteSheet),
+  "StandardClock": () => (/* reexport */ StandardClock),
   "StrategyContainer": () => (/* reexport */ StrategyContainer),
   "Stream": () => (/* reexport */ Stream),
   "SubscribeEvent": () => (/* reexport */ SubscribeEvent),
@@ -2091,6 +2094,7 @@ __webpack_require__.d(__webpack_exports__, {
   "SystemManager": () => (/* reexport */ SystemManager),
   "SystemType": () => (/* reexport */ SystemType),
   "TagComponent": () => (/* reexport */ TagComponent),
+  "TestClock": () => (/* reexport */ TestClock),
   "Text": () => (/* reexport */ Text),
   "TextAlign": () => (/* reexport */ TextAlign),
   "TileMap": () => (/* reexport */ TileMap),
@@ -2104,6 +2108,7 @@ __webpack_require__.d(__webpack_exports__, {
   "Vector": () => (/* reexport */ Vector),
   "VectorView": () => (/* reexport */ VectorView),
   "VisibleEvent": () => (/* reexport */ VisibleEvent),
+  "WebAudio": () => (/* reexport */ WebAudio),
   "WebAudioInstance": () => (/* reexport */ WebAudioInstance),
   "World": () => (/* reexport */ World),
   "canonicalizeAngle": () => (/* reexport */ canonicalizeAngle),
@@ -2664,7 +2669,12 @@ const logMessage = (message, options) => {
  * method do the deprecated one. Inspired by https://github.com/jayphelps/core-decorators.js
  */
 function obsolete(options) {
-    options = Object.assign({ message: 'This feature will be removed in future versions of Excalibur.', alternateMethod: null, showStackTrace: false }, options);
+    options = {
+        message: 'This feature will be removed in future versions of Excalibur.',
+        alternateMethod: null,
+        showStackTrace: false,
+        ...options
+    };
     return function (target, property, descriptor) {
         if (descriptor &&
             !(typeof descriptor.value === 'function' || typeof descriptor.get === 'function' || typeof descriptor.set === 'function')) {
@@ -2677,7 +2687,7 @@ function obsolete(options) {
             obsoleteMessage[message] = 0;
         }
         // If descriptor is null it is a class
-        const method = descriptor ? Object.assign({}, descriptor) : target;
+        const method = descriptor ? { ...descriptor } : target;
         if (!descriptor) {
             // with es2015 classes we need to change our decoration tactic
             class DecoratedClass extends method {
@@ -4491,11 +4501,17 @@ function fail(message) {
 const range = (from, to) => Array.from(new Array(to - from + 1), (_x, i) => i + from);
 /**
  * Create a promise that resolves after a certain number of milliseconds
+ *
+ * It is strongly recommended you pass the excalibur clock so delays are bound to the
+ * excalibur clock which would be unaffected by stop/pause.
  * @param milliseconds
+ * @param clock
  */
-function delay(milliseconds) {
-    return new Promise((resolve) => {
-        setTimeout(() => {
+function delay(milliseconds, clock) {
+    var _a;
+    const schedule = (_a = clock === null || clock === void 0 ? void 0 : clock.schedule.bind(clock)) !== null && _a !== void 0 ? _a : setTimeout;
+    return new Promise(resolve => {
+        schedule(() => {
             resolve();
         }, milliseconds);
     });
@@ -6547,7 +6563,11 @@ class Canvas extends Raster {
         return this._ctx;
     }
     clone() {
-        return new Canvas(Object.assign(Object.assign(Object.assign({}, this._options), this.cloneGraphicOptions()), this.cloneRasterOptions()));
+        return new Canvas({
+            ...this._options,
+            ...this.cloneGraphicOptions(),
+            ...this.cloneRasterOptions()
+        });
     }
     execute(ctx) {
         var _a, _b;
@@ -7496,15 +7516,6 @@ Fill = SpriteEffects_decorate([
 
 
 ;// CONCATENATED MODULE: ./Drawing/Texture.ts
-var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 
 
 /**
@@ -7541,35 +7552,33 @@ class Texture {
     /**
      * Begins loading the texture and returns a promise to be resolved on completion
      */
-    load() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                // Load base64 or blob if needed
-                let url;
-                if (!this.path.includes('data:image/')) {
-                    const blob = yield this._resource.load();
-                    url = URL.createObjectURL(blob);
-                }
-                else {
-                    url = this.path;
-                }
-                // Decode the image
-                const image = new Image();
-                image.src = url;
-                yield image.decode();
-                // Set results
-                this.data = image;
-                this.width = this._sprite.width = image.naturalWidth;
-                this.height = this._sprite.height = image.naturalHeight;
-                this._sprite = new Sprite_Sprite(this, 0, 0, this.width, this.height);
-            }
-            catch (_a) {
-                yield Promise.reject('Error loading texture');
+    async load() {
+        try {
+            // Load base64 or blob if needed
+            let url;
+            if (!this.path.includes('data:image/')) {
+                const blob = await this._resource.load();
+                url = URL.createObjectURL(blob);
             }
-            // todo emit complete
-            this._loadedResolve(this.data);
-            return this.data;
-        });
+            else {
+                url = this.path;
+            }
+            // Decode the image
+            const image = new Image();
+            image.src = url;
+            await image.decode();
+            // Set results
+            this.data = image;
+            this.width = this._sprite.width = image.naturalWidth;
+            this.height = this._sprite.height = image.naturalHeight;
+            this._sprite = new Sprite_Sprite(this, 0, 0, this.width, this.height);
+        }
+        catch (_a) {
+            await Promise.reject('Error loading texture');
+        }
+        // todo emit complete
+        this._loadedResolve(this.data);
+        return this.data;
     }
     asSprite() {
         return this._sprite;
@@ -7616,15 +7625,6 @@ var Sprite_decorate = (undefined && undefined.__decorate) || function (decorator
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var Sprite_awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 
 
 
@@ -7704,21 +7704,19 @@ class SpriteImpl {
     get drawHeight() {
         return Math.abs(this.height * this.scale.y);
     }
-    _initPixelsFromTexture() {
-        return Sprite_awaiter(this, void 0, void 0, function* () {
-            try {
-                const image = yield this.texture.loaded;
-                this.width = this.width || image.naturalWidth;
-                this.height = this.height || image.naturalHeight;
-                this._spriteCanvas.width = this._spriteCanvas.width || image.naturalWidth;
-                this._spriteCanvas.height = this._spriteCanvas.height || image.naturalHeight;
-                this._loadPixels();
-                this._dirtyEffect = true;
-            }
-            catch (e) {
-                this.logger.error('Error loading texture ', this.texture.path, e);
-            }
-        });
+    async _initPixelsFromTexture() {
+        try {
+            const image = await this.texture.loaded;
+            this.width = this.width || image.naturalWidth;
+            this.height = this.height || image.naturalHeight;
+            this._spriteCanvas.width = this._spriteCanvas.width || image.naturalWidth;
+            this._spriteCanvas.height = this._spriteCanvas.height || image.naturalHeight;
+            this._loadPixels();
+            this._dirtyEffect = true;
+        }
+        catch (e) {
+            this.logger.error('Error loading texture ', this.texture.path, e);
+        }
     }
     _loadPixels() {
         if (this.texture.isLoaded() && !this._pixelsLoaded) {
@@ -7890,7 +7888,17 @@ class SpriteImpl {
     }
     _drawWithOptions(options) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const { ctx, x, y, rotation, drawWidth, drawHeight, anchor, offset, opacity, flipHorizontal, flipVertical } = Object.assign(Object.assign({}, options), { rotation: (_a = options.rotation) !== null && _a !== void 0 ? _a : this.rotation, drawWidth: (_b = options.drawWidth) !== null && _b !== void 0 ? _b : this.width, drawHeight: (_c = options.drawHeight) !== null && _c !== void 0 ? _c : this.height, flipHorizontal: (_d = options.flipHorizontal) !== null && _d !== void 0 ? _d : this.flipHorizontal, flipVertical: (_e = options.flipVertical) !== null && _e !== void 0 ? _e : this.flipVertical, anchor: (_f = options.anchor) !== null && _f !== void 0 ? _f : this.anchor, offset: (_g = options.offset) !== null && _g !== void 0 ? _g : this.offset, opacity: ((_h = options.opacity) !== null && _h !== void 0 ? _h : 1) * ((_j = this._opacity) !== null && _j !== void 0 ? _j : 1) });
+        const { ctx, x, y, rotation, drawWidth, drawHeight, anchor, offset, opacity, flipHorizontal, flipVertical } = {
+            ...options,
+            rotation: (_a = options.rotation) !== null && _a !== void 0 ? _a : this.rotation,
+            drawWidth: (_b = options.drawWidth) !== null && _b !== void 0 ? _b : this.width,
+            drawHeight: (_c = options.drawHeight) !== null && _c !== void 0 ? _c : this.height,
+            flipHorizontal: (_d = options.flipHorizontal) !== null && _d !== void 0 ? _d : this.flipHorizontal,
+            flipVertical: (_e = options.flipVertical) !== null && _e !== void 0 ? _e : this.flipVertical,
+            anchor: (_f = options.anchor) !== null && _f !== void 0 ? _f : this.anchor,
+            offset: (_g = options.offset) !== null && _g !== void 0 ? _g : this.offset,
+            opacity: ((_h = options.opacity) !== null && _h !== void 0 ? _h : 1) * ((_j = this._opacity) !== null && _j !== void 0 ? _j : 1)
+        };
         if (this._dirtyEffect) {
             this._applyEffects();
         }
@@ -8058,20 +8066,16 @@ class Sprite extends Graphic {
         return new Sprite_Sprite(tex, sprite.sourceView.x, sprite.sourceView.y, sprite.sourceView.width, sprite.sourceView.height);
     }
     clone() {
-        return new Sprite(Object.assign({ image: this.image, sourceView: Object.assign({}, this.sourceView), destSize: Object.assign({}, this.destSize) }, this.cloneGraphicOptions()));
+        return new Sprite({
+            image: this.image,
+            sourceView: { ...this.sourceView },
+            destSize: { ...this.destSize },
+            ...this.cloneGraphicOptions()
+        });
     }
 }
 
 ;// CONCATENATED MODULE: ./Graphics/ImageSource.ts
-var ImageSource_awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 
 
 
@@ -8120,35 +8124,33 @@ class ImageSource {
     /**
      * Begins loading the image and returns a promise that resolves when the image is loaded
      */
-    load() {
-        return ImageSource_awaiter(this, void 0, void 0, function* () {
-            if (this.isLoaded()) {
-                return this.data;
-            }
-            try {
-                // Load base64 or blob if needed
-                let url;
-                if (!this.path.includes('data:image/')) {
-                    const blob = yield this._resource.load();
-                    url = URL.createObjectURL(blob);
-                }
-                else {
-                    url = this.path;
-                }
-                // Decode the image
-                const image = new Image();
-                image.src = url;
-                yield image.decode();
-                // Set results
-                this.data = image;
-            }
-            catch (error) {
-                throw `Error loading ImageSource from path '${this.path}' with error [${error.message}]`;
-            }
-            // todo emit complete
-            this._loadedResolve(this.data);
+    async load() {
+        if (this.isLoaded()) {
             return this.data;
-        });
+        }
+        try {
+            // Load base64 or blob if needed
+            let url;
+            if (!this.path.includes('data:image/')) {
+                const blob = await this._resource.load();
+                url = URL.createObjectURL(blob);
+            }
+            else {
+                url = this.path;
+            }
+            // Decode the image
+            const image = new Image();
+            image.src = url;
+            await image.decode();
+            // Set results
+            this.data = image;
+        }
+        catch (error) {
+            throw `Error loading ImageSource from path '${this.path}' with error [${error.message}]`;
+        }
+        // todo emit complete
+        this._loadedResolve(this.data);
+        return this.data;
     }
     /**
      * Build a sprite from this ImageSource
@@ -8421,7 +8423,16 @@ class AnimationImpl {
     }
     _drawWithOptions(options) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        const animOptions = Object.assign(Object.assign({}, options), { rotation: (_a = options.rotation) !== null && _a !== void 0 ? _a : this.rotation, drawWidth: (_b = options.drawWidth) !== null && _b !== void 0 ? _b : this.drawWidth, drawHeight: (_c = options.drawHeight) !== null && _c !== void 0 ? _c : this.drawHeight, flipHorizontal: (_d = options.flipHorizontal) !== null && _d !== void 0 ? _d : this.flipHorizontal, flipVertical: (_e = options.flipVertical) !== null && _e !== void 0 ? _e : this.flipVertical, anchor: (_f = options.anchor) !== null && _f !== void 0 ? _f : this.anchor, opacity: ((_g = options.opacity) !== null && _g !== void 0 ? _g : 1) * ((_h = this._opacity) !== null && _h !== void 0 ? _h : 1) });
+        const animOptions = {
+            ...options,
+            rotation: (_a = options.rotation) !== null && _a !== void 0 ? _a : this.rotation,
+            drawWidth: (_b = options.drawWidth) !== null && _b !== void 0 ? _b : this.drawWidth,
+            drawHeight: (_c = options.drawHeight) !== null && _c !== void 0 ? _c : this.drawHeight,
+            flipHorizontal: (_d = options.flipHorizontal) !== null && _d !== void 0 ? _d : this.flipHorizontal,
+            flipVertical: (_e = options.flipVertical) !== null && _e !== void 0 ? _e : this.flipVertical,
+            anchor: (_f = options.anchor) !== null && _f !== void 0 ? _f : this.anchor,
+            opacity: ((_g = options.opacity) !== null && _g !== void 0 ? _g : 1) * ((_h = this._opacity) !== null && _h !== void 0 ? _h : 1)
+        };
         this._updateValues();
         let currSprite;
         if (this.currentFrame < this.sprites.length) {
@@ -9080,8 +9091,8 @@ class SpriteSheet {
         const sprites = [];
         options.spacing = (_a = options.spacing) !== null && _a !== void 0 ? _a : {};
         const { image, grid: { rows, columns: cols, spriteWidth, spriteHeight }, spacing: { originOffset, margin } } = options;
-        const offsetDefaults = Object.assign({ x: 0, y: 0 }, originOffset);
-        const marginDefaults = Object.assign({ x: 0, y: 0 }, margin);
+        const offsetDefaults = { x: 0, y: 0, ...originOffset };
+        const marginDefaults = { x: 0, y: 0, ...margin };
         for (let x = 0; x < cols; x++) {
             for (let y = 0; y < rows; y++) {
                 sprites[x + y * cols] = new Sprite({
@@ -9297,10 +9308,10 @@ class ExcaliburGraphicsContextWebGLDebug {
      * @param height
      */
     drawRect(x, y, width, height, rectOptions = { color: Color.Black }) {
-        this.drawLine(vec(x, y), vec(x + width, y), Object.assign({}, rectOptions));
-        this.drawLine(vec(x + width, y), vec(x + width, y + height), Object.assign({}, rectOptions));
-        this.drawLine(vec(x + width, y + height), vec(x, y + height), Object.assign({}, rectOptions));
-        this.drawLine(vec(x, y + height), vec(x, y), Object.assign({}, rectOptions));
+        this.drawLine(vec(x, y), vec(x + width, y), { ...rectOptions });
+        this.drawLine(vec(x + width, y), vec(x + width, y + height), { ...rectOptions });
+        this.drawLine(vec(x + width, y + height), vec(x, y + height), { ...rectOptions });
+        this.drawLine(vec(x, y + height), vec(x, y), { ...rectOptions });
     }
     /**
      * Draw a debugging line to the context
@@ -9606,7 +9617,7 @@ class Screen {
         this._devicePixelRatio = this._calculateDevicePixelRatio();
         this._alreadyWarned = false;
         this.viewport = options.viewport;
-        this.resolution = (_a = options.resolution) !== null && _a !== void 0 ? _a : Object.assign({}, this.viewport);
+        this.resolution = (_a = options.resolution) !== null && _a !== void 0 ? _a : { ...this.viewport };
         this._displayMode = (_b = options.displayMode) !== null && _b !== void 0 ? _b : DisplayMode.Fixed;
         this._canvas = options.canvas;
         this._ctx = options.context;
@@ -9702,8 +9713,8 @@ class Screen {
     pushResolutionAndViewport() {
         this._resolutionStack.push(this.resolution);
         this._viewportStack.push(this.viewport);
-        this.resolution = Object.assign({}, this.resolution);
-        this.viewport = Object.assign({}, this.viewport);
+        this.resolution = { ...this.resolution };
+        this.viewport = { ...this.viewport };
     }
     peekViewport() {
         return this._viewportStack[this._viewportStack.length - 1];
@@ -10371,15 +10382,6 @@ function circle(ctx, x, y, radius, stroke = Color.White, fill = null) {
 // EXTERNAL MODULE: ./Loader.css
 var Loader_0 = __webpack_require__(1388);
 ;// CONCATENATED MODULE: ./Loader.ts
-var Loader_awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 
 
 
@@ -10503,6 +10505,9 @@ class Loader extends Class {
             buttonElement.style.display = 'none';
             return buttonElement;
         };
+        this._isLoadedPromise = new Promise(resolve => {
+            this._isLoadedResolve = resolve;
+        });
         if (loadables) {
             this.addResources(loadables);
         }
@@ -10578,17 +10583,18 @@ class Loader extends Class {
     /**
      * Shows the play button and returns a promise that resolves when clicked
      */
-    showPlayButton() {
-        var _a;
+    async showPlayButton() {
+        var _a, _b;
         if (this.suppressPlayButton) {
             this.hidePlayButton();
-            return Promise.resolve();
+            // Delay is to give the logo a chance to show, otherwise don't delay
+            await delay(500, (_a = this._engine) === null || _a === void 0 ? void 0 : _a.clock);
         }
         else {
             const resizeHandler = () => {
                 this._positionPlayButton();
             };
-            if ((_a = this._engine) === null || _a === void 0 ? void 0 : _a.browser) {
+            if ((_b = this._engine) === null || _b === void 0 ? void 0 : _b.browser) {
                 this._engine.browser.window.on('resize', resizeHandler);
             }
             this._playButtonShown = true;
@@ -10598,7 +10604,8 @@ class Loader extends Class {
                     this._playButton.click();
                 }
             });
-            const promise = new Promise((resolve) => {
+            this._positionPlayButton();
+            const playButtonClicked = new Promise((resolve) => {
                 const startButtonHandler = (e) => {
                     var _a;
                     // We want to stop propogation to keep bubbling to the engine pointer handlers
@@ -10614,7 +10621,7 @@ class Loader extends Class {
                 this._playButton.addEventListener('touchend', startButtonHandler);
                 this._playButton.addEventListener('pointerup', startButtonHandler);
             });
-            return promise;
+            return await playButtonClicked;
         }
     }
     hidePlayButton() {
@@ -10637,25 +10644,29 @@ class Loader extends Class {
     update(_engine, _delta) {
         // override me
     }
+    areResourcesLoaded() {
+        return this._isLoadedPromise;
+    }
     /**
      * Begin loading all of the supplied resources, returning a promise
-     * that resolves when loading of all is complete
+     * that resolves when loading of all is complete AND the user has clicked the "Play button"
      */
-    load() {
-        return Loader_awaiter(this, void 0, void 0, function* () {
-            yield Promise.all(this._resourceList.map((r) => r.load().finally(() => {
-                // capture progress
-                this._numLoaded++;
-            })));
-            // short delay in showing the button for aesthetics
-            yield delay(200);
-            yield this.showPlayButton();
-            // Unlock browser AudioContext in after user gesture
-            // See: https://github.com/excaliburjs/Excalibur/issues/262
-            // See: https://github.com/excaliburjs/Excalibur/issues/1031
-            yield WebAudio.unlock();
-            return (this.data = this._resourceList);
-        });
+    async load() {
+        var _a, _b;
+        await ((_a = this._image) === null || _a === void 0 ? void 0 : _a.decode()); // decode logo if it exists
+        await Promise.all(this._resourceList.map((r) => r.load().finally(() => {
+            // capture progress
+            this._numLoaded++;
+        })));
+        this._isLoadedResolve();
+        // short delay in showing the button for aesthetics
+        await delay(200, (_b = this._engine) === null || _b === void 0 ? void 0 : _b.clock);
+        await this.showPlayButton();
+        // Unlock browser AudioContext in after user gesture
+        // See: https://github.com/excaliburjs/Excalibur/issues/262
+        // See: https://github.com/excaliburjs/Excalibur/issues/1031
+        await WebAudio.unlock();
+        return (this.data = this._resourceList);
     }
     markResourceComplete() {
         this._numLoaded++;
@@ -15730,7 +15741,7 @@ class GraphicsLayer {
      * @param options
      */
     show(nameOrGraphic, options) {
-        options = Object.assign({}, options);
+        options = { ...options };
         let gfx;
         if (nameOrGraphic instanceof Graphic) {
             gfx = this._graphics.copyGraphics ? nameOrGraphic.clone() : nameOrGraphic;
@@ -15755,7 +15766,7 @@ class GraphicsLayer {
      * @param options
      */
     use(nameOrGraphic, options) {
-        options = Object.assign({}, options);
+        options = { ...options };
         this.hide();
         return this.show(nameOrGraphic, options);
     }
@@ -15862,7 +15873,10 @@ class GraphicsComponent extends Component {
         this.copyGraphics = false;
         this._bounds = null;
         // Defaults
-        options = Object.assign({ visible: this.visible }, options);
+        options = {
+            visible: this.visible,
+            ...options
+        };
         const { current, anchor, opacity, visible, graphics, offset, copyGraphics, onPreDraw, onPostDraw } = options;
         this._graphics = graphics || {};
         this.offset = offset !== null && offset !== void 0 ? offset : this.offset;
@@ -15986,7 +16000,12 @@ class Rectangle extends Raster {
         this.rasterize();
     }
     clone() {
-        return new Rectangle(Object.assign(Object.assign({ width: this.width, height: this.height }, this.cloneGraphicOptions()), this.cloneRasterOptions()));
+        return new Rectangle({
+            width: this.width,
+            height: this.height,
+            ...this.cloneGraphicOptions(),
+            ...this.cloneRasterOptions()
+        });
     }
     execute(ctx) {
         if (this.color) {
@@ -16022,7 +16041,11 @@ class Circle extends Raster {
         this.flagDirty();
     }
     clone() {
-        return new Circle(Object.assign(Object.assign({ radius: this.radius }, this.cloneGraphicOptions()), this.cloneRasterOptions()));
+        return new Circle({
+            radius: this.radius,
+            ...this.cloneGraphicOptions(),
+            ...this.cloneRasterOptions()
+        });
     }
     execute(ctx) {
         if (this.radius > 0) {
@@ -17706,7 +17729,9 @@ class Actor extends Entity {
          * @deprecated will be removed in v0.26.0
          */
         this.traits = [];
-        const { name, x, y, pos, scale, width, height, radius, collider, vel, acc, rotation, angularVelocity, z, color, visible, anchor, collisionType, collisionGroup } = Object.assign({}, config);
+        const { name, x, y, pos, scale, width, height, radius, collider, vel, acc, rotation, angularVelocity, z, color, visible, anchor, collisionType, collisionGroup } = {
+            ...config
+        };
         this._setName(name);
         this.anchor = anchor !== null && anchor !== void 0 ? anchor : Actor.defaults.anchor.clone();
         this.addComponent(new TransformComponent());
@@ -18425,7 +18450,7 @@ Actor_decorate([
  */
 class ScreenElement_ScreenElement extends Actor {
     constructor(config) {
-        super(Object.assign({}, config));
+        super({ ...config });
         this.get(TransformComponent).coordPlane = CoordPlane.Screen;
         this.anchor = vec(0, 0);
         this.body.collisionType = CollisionType.PreventCollision;
@@ -19809,7 +19834,10 @@ class Trigger_Trigger extends Actor {
          * Number of times to repeat before killing the trigger,
          */
         this.repeat = -1;
-        opts = Object.assign(Object.assign({}, triggerDefaults), opts);
+        opts = {
+            ...triggerDefaults,
+            ...opts
+        };
         this.filter = opts.filter || this.filter;
         this.repeat = opts.repeat || this.repeat;
         this.action = opts.action || this.action;
@@ -20319,12 +20347,11 @@ class SystemManager {
         }
     }
     /**
-     * Updates all systems
-     * @param type whether this is an update or draw system
-     * @param context context reference
-     * @param delta time in milliseconds
+     * Initialize all systems in the manager
+     *
+     * Systems added after initialize() will be initialized on add
      */
-    updateSystems(type, context, delta) {
+    initialize() {
         if (!this.initialized) {
             this.initialized = true;
             for (const s of this.systems) {
@@ -20333,6 +20360,14 @@ class SystemManager {
                 }
             }
         }
+    }
+    /**
+     * Updates all systems
+     * @param type whether this is an update or draw system
+     * @param context context reference
+     * @param delta time in milliseconds
+     */
+    updateSystems(type, context, delta) {
         const systems = this.systems.filter((s) => s.systemType === type);
         for (const s of systems) {
             if (s.preupdate) {
@@ -21128,7 +21163,13 @@ class Animation extends Graphic {
         this.goToFrame(0);
     }
     clone() {
-        return new Animation(Object.assign({ frames: this.frames.map((f) => (Object.assign({}, f))), frameDuration: this.frameDuration, reverse: this._reversed, strategy: this.strategy }, this.cloneGraphicOptions()));
+        return new Animation({
+            frames: this.frames.map((f) => ({ ...f })),
+            frameDuration: this.frameDuration,
+            reverse: this._reversed,
+            strategy: this.strategy,
+            ...this.cloneGraphicOptions()
+        });
     }
     /**
      * Create an Animation from a [[SpriteSheet]], a list of indices into the sprite sheet, a duration per frame
@@ -21374,7 +21415,10 @@ class GraphicsGroup extends Graphic {
         this._updateDimensions();
     }
     clone() {
-        return new GraphicsGroup(Object.assign({ members: [...this.members] }, this.cloneGraphicOptions()));
+        return new GraphicsGroup({
+            members: [...this.members],
+            ...this.cloneGraphicOptions()
+        });
     }
     _updateDimensions() {
         let bb = new BoundingBox();
@@ -21715,7 +21759,7 @@ class ParticleEmitter extends Actor {
          * Indicates whether particles should start with a random rotation
          */
         this.randomRotation = false;
-        const { x, y, pos, isEmitting, minVel, maxVel, acceleration, minAngle, maxAngle, emitRate, particleLife, opacity, fadeFlag, focus, focusAccel, startSize, endSize, minSize, maxSize, beginColor, endColor, particleSprite, emitterType, radius, particleRotationalVelocity, randomRotation, random } = Object.assign({}, config);
+        const { x, y, pos, isEmitting, minVel, maxVel, acceleration, minAngle, maxAngle, emitRate, particleLife, opacity, fadeFlag, focus, focusAccel, startSize, endSize, minSize, maxSize, beginColor, endColor, particleSprite, emitterType, radius, particleRotationalVelocity, randomRotation, random } = { ...config };
         this.pos = pos !== null && pos !== void 0 ? pos : vec(x !== null && x !== void 0 ? x : 0, y !== null && y !== void 0 ? y : 0);
         this.isEmitting = isEmitting !== null && isEmitting !== void 0 ? isEmitting : this.isEmitting;
         this.minVel = minVel !== null && minVel !== void 0 ? minVel : this.minVel;
@@ -22785,6 +22829,7 @@ class Scene extends Class {
             this.engine = engine;
             // Initialize camera first
             this.camera._initialize(engine);
+            this.world.systemManager.initialize();
             // This order is important! we want to be sure any custom init that add actors
             // fire before the actor init
             this.onInitialize.call(this, engine);
@@ -23374,6 +23419,41 @@ class Debug {
         this._engine = engine;
         this.colorBlindMode = new ColorBlindFlags(this._engine);
     }
+    /**
+     * Switch the current excalibur clock with the [[TestClock]] and return
+     * it in the same running state.
+     *
+     * This is useful when you need to debug frame by frame.
+     */
+    useTestClock() {
+        const clock = this._engine.clock;
+        const wasRunning = clock.isRunning();
+        clock.stop();
+        const testClock = clock.toTestClock();
+        if (wasRunning) {
+            testClock.start();
+        }
+        this._engine.clock = testClock;
+        return testClock;
+    }
+    /**
+     * Switch the current excalibur clock with the [[StandardClock]] and
+     * return it in the same runnign state.
+     *
+     * This is useful when you need to switch back to normal mode after
+     * debugging.
+     */
+    useStandardClock() {
+        const currentClock = this._engine.clock;
+        const wasRunning = currentClock.isRunning();
+        currentClock.stop();
+        const standardClock = currentClock.toStandardClock();
+        if (wasRunning) {
+            standardClock.start();
+        }
+        this._engine.clock = standardClock;
+        return standardClock;
+    }
 }
 /**
  * Implementation of a frame's stats. Meant to have values copied via [[FrameStats.reset]], avoid
@@ -25048,6 +25128,264 @@ class PointerEventReceiver extends Class {
     }
 }
 
+;// CONCATENATED MODULE: ./Util/Fps.ts
+class FpsSampler {
+    constructor(options) {
+        var _a;
+        this._samplePeriod = 100;
+        this._currentFrameTime = 0;
+        this._frames = 0;
+        this._previousSampleTime = 0;
+        this._beginFrameTime = 0;
+        this._fps = options.initialFps;
+        this._samplePeriod = (_a = options.samplePeriod) !== null && _a !== void 0 ? _a : this._samplePeriod;
+        this._currentFrameTime = 1000 / options.initialFps;
+        this._nowFn = options.nowFn;
+        this._previousSampleTime = this._nowFn();
+    }
+    /**
+     * Start of code block to sample FPS for
+     */
+    start() {
+        this._beginFrameTime = this._nowFn();
+    }
+    /**
+     * End of code block to sample FPS for
+     */
+    end() {
+        this._frames++;
+        const time = this._nowFn();
+        this._currentFrameTime = time - this._beginFrameTime;
+        if (time >= this._previousSampleTime + this._samplePeriod) {
+            this._fps = (this._frames * 1000) / (time - this._previousSampleTime);
+            this._previousSampleTime = time;
+            this._frames = 0;
+        }
+    }
+    /**
+     * Return the currenty sampled fps over the last sample period, by default every 100ms
+     */
+    get fps() {
+        return this._fps;
+    }
+    /**
+     * Return the instantanteous fps, this can be less useful because it will fluctuate given the current frames time
+     */
+    get instant() {
+        return 1000 / this._currentFrameTime;
+    }
+}
+
+;// CONCATENATED MODULE: ./Util/Clock.ts
+
+
+/**
+ * Abstract Clock is the base type of all Clocks
+ *
+ * It has a few opinions
+ * 1. It manages the calculation of what "elapsed" time means and thus maximum fps
+ * 2. The default timing api is implemented in now()
+ *
+ * To implement your own clock, extend Clock and override start/stop to start and stop the clock, then call update() with whatever
+ * method is unique to your clock implementation.
+ */
+class Clock {
+    constructor(options) {
+        var _a, _b, _c;
+        this._onFatalException = () => { };
+        this._maxFps = Infinity;
+        this._lastTime = 0;
+        this._elapsed = 1;
+        this._scheduledCbs = [];
+        this._totalElapsed = 0;
+        this._options = options;
+        this.tick = options.tick;
+        this._lastTime = (_a = this.now()) !== null && _a !== void 0 ? _a : 0;
+        this._maxFps = (_b = options.maxFps) !== null && _b !== void 0 ? _b : this._maxFps;
+        this._onFatalException = (_c = options.onFatalException) !== null && _c !== void 0 ? _c : this._onFatalException;
+        this.fpsSampler = new FpsSampler({
+            initialFps: 60,
+            nowFn: () => this.now()
+        });
+    }
+    /**
+     * Get the elapsed time for the last completed frame
+     */
+    elapsed() {
+        return this._elapsed;
+    }
+    /**
+     * Get the current time in milliseconds
+     */
+    now() {
+        return performance.now();
+    }
+    toTestClock() {
+        const testClock = new TestClock({
+            ...this._options,
+            defaultUpdateMs: 16.6
+        });
+        return testClock;
+    }
+    toStandardClock() {
+        const clock = new StandardClock({
+            ...this._options
+        });
+        return clock;
+    }
+    /**
+     * Schedule a callback to fire given a timeout in milliseconds using the excalibur [[Clock]]
+     *
+     * This is useful to use over the built in browser `setTimeout` because callbacks will be tied to the
+     * excalibur update clock, instead of browser time, this means that callbacks wont fire if the game is
+     * stopped or paused.
+     *
+     * @param cb callback to fire
+     * @param timeoutMs Optionally specify a timeout in milliseconds from now, default is 0ms which means the next possible tick
+     */
+    schedule(cb, timeoutMs = 0) {
+        const scheduledTime = this.now() + timeoutMs;
+        this._scheduledCbs.push([cb, scheduledTime]);
+    }
+    _runScheduledCbs() {
+        // walk backwards to delete items as we loop
+        for (let i = this._scheduledCbs.length - 1; i > -1; i--) {
+            if (this._scheduledCbs[i][1] <= this._totalElapsed) {
+                this._scheduledCbs[i][0]();
+                this._scheduledCbs.splice(i, 1);
+            }
+        }
+    }
+    update(overrideUpdateMs) {
+        try {
+            this.fpsSampler.start();
+            // Get the time to calculate time-elapsed
+            const now = this.now();
+            let elapsed = now - this._lastTime || 1; // first frame
+            // Constrain fps
+            const fpsInterval = this._maxFps === Infinity ? 0 : 1000 / this._maxFps;
+            if (elapsed <= fpsInterval) {
+                return; // too fast 😎 skip this frame
+            }
+            // Resolves issue #138 if the game has been paused, or blurred for
+            // more than a 200 milliseconds, reset elapsed time to 1. This improves reliability
+            // and provides more expected behavior when the engine comes back
+            // into focus
+            if (elapsed > 200) {
+                elapsed = 1;
+            }
+            // tick the mainloop and run scheduled callbacks
+            this._elapsed = overrideUpdateMs || elapsed;
+            this._totalElapsed += this._elapsed;
+            this._runScheduledCbs();
+            this.tick(overrideUpdateMs || elapsed);
+            // if fps interval is not a multple
+            if (fpsInterval > 0) {
+                this._lastTime = now - (elapsed % fpsInterval);
+            }
+            else {
+                this._lastTime = now;
+            }
+            this.fpsSampler.end();
+        }
+        catch (e) {
+            this._onFatalException(e);
+            this.stop();
+        }
+    }
+}
+/**
+ * The [[StandardClock]] implements the requestAnimationFrame browser api to run the tick()
+ */
+class StandardClock extends Clock {
+    constructor(options) {
+        super(options);
+        this._running = false;
+    }
+    isRunning() {
+        return this._running;
+    }
+    start() {
+        this._running = true;
+        const mainloop = () => {
+            // stop the loop
+            if (!this._running) {
+                return;
+            }
+            try {
+                // request next loop
+                this._requestId = window.requestAnimationFrame(mainloop);
+                this.update();
+            }
+            catch (e) {
+                window.cancelAnimationFrame(this._requestId);
+                throw e;
+            }
+        };
+        // begin the first frame
+        mainloop();
+    }
+    stop() {
+        this._running = false;
+    }
+}
+/**
+ * The TestClock is meant for debugging interactions in excalibur that require precise timing to replicate or test
+ */
+class TestClock extends Clock {
+    constructor(options) {
+        super({
+            ...options
+        });
+        this._logger = Logger.getInstance();
+        this._running = false;
+        this._currentTime = 0;
+        this._updateMs = options.defaultUpdateMs;
+    }
+    /**
+     * Get the current time in milliseconds
+     */
+    now() {
+        var _a;
+        return (_a = this._currentTime) !== null && _a !== void 0 ? _a : 0;
+    }
+    isRunning() {
+        return this._running;
+    }
+    start() {
+        this._running = true;
+    }
+    stop() {
+        this._running = false;
+    }
+    /**
+     * Manually step the clock forward 1 tick, optionally specify an elapsed time in milliseconds
+     * @param overrideUpdateMs
+     */
+    step(overrideUpdateMs) {
+        const time = overrideUpdateMs !== null && overrideUpdateMs !== void 0 ? overrideUpdateMs : this._updateMs;
+        if (this._running) {
+            // to be comparable to RAF this needs to be a full blown Task
+            // For example, images cannot decode syncronously in a single step
+            this.update(time);
+            this._currentTime += time;
+        }
+        else {
+            this._logger.warn('The clock is not running, no step will be performed');
+        }
+    }
+    /**
+     * Run a number of steps that tick the clock, optionally specify an elapsed time in milliseconds
+     * @param numberOfSteps
+     * @param overrideUpdateMs
+     */
+    run(numberOfSteps, overrideUpdateMs) {
+        for (let i = 0; i < numberOfSteps; i++) {
+            this.step(overrideUpdateMs !== null && overrideUpdateMs !== void 0 ? overrideUpdateMs : this._updateMs);
+        }
+    }
+}
+
 ;// CONCATENATED MODULE: ./Engine.ts
 var Engine_decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -25074,6 +25412,8 @@ polyfill();
 
 
 
+
+
 /**
  * Enum representing the different mousewheel event bubble prevention
  */
@@ -25125,8 +25465,15 @@ class Engine extends Class {
      * ```
      */
     constructor(options) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         super();
+        /**
+         * Optionally set the maximum fps if not set Excalibur will go as fast as the device allows.
+         *
+         * You may want to constrain max fps if your game cannot maintain fps consistenly, it can look and feel better to have a 30fps game than
+         * one that bounces between 30fps and 60fps
+         */
+        this.maxFps = Number.POSITIVE_INFINITY;
         this._hasStarted = false;
         /**
          * Gets or sets the list of post processors to apply at the end of drawing a frame (such as [[ColorBlindCorrector]])
@@ -25162,11 +25509,14 @@ class Engine extends Class {
             Logger.getInstance().fatal(e);
         };
         this._timescale = 1.0;
-        this._isLoading = false;
         this._isInitialized = false;
         this._deferredGoTo = null;
         this._loadingComplete = false;
-        options = Object.assign(Object.assign({}, Engine._DEFAULT_ENGINE_OPTIONS), options);
+        this._isReady = false;
+        this._isReadyPromise = new Promise(resolve => {
+            this._isReadyResolve = resolve;
+        });
+        options = { ...Engine._DEFAULT_ENGINE_OPTIONS, ...options };
         Flags.freeze();
         // Initialize browser events facade
         this.browser = new BrowserEvents(window, document);
@@ -25275,6 +25625,12 @@ O|===|* >________________>\n\
         if (options.backgroundColor) {
             this.backgroundColor = options.backgroundColor.clone();
         }
+        this.maxFps = (_d = options.maxFps) !== null && _d !== void 0 ? _d : this.maxFps;
+        this.clock = new StandardClock({
+            maxFps: this.maxFps,
+            tick: this._mainloop.bind(this),
+            onFatalException: (e) => this.onFatalException(e)
+        });
         this.enableCanvasTransparency = options.enableCanvasTransparency;
         this._loader = new Loader();
         this.debug = new Debug(this);
@@ -25628,7 +25984,7 @@ O|===|* >________________>\n\
      * @param delta  Number of milliseconds elapsed since the last update.
      */
     _update(delta) {
-        if (this._isLoading) {
+        if (!this.ready) {
             // suspend updates until loading is finished
             this._loader.update(this, delta);
             // Update input listeners
@@ -25636,7 +25992,6 @@ O|===|* >________________>\n\
             this.input.gamepads.update();
             return;
         }
-        this._overrideInitialize(this);
         // Publish preupdate events
         this._preupdate(delta);
         // process engine level events
@@ -25679,10 +26034,10 @@ O|===|* >________________>\n\
     _draw(delta) {
         const ctx = this.ctx;
         this._predraw(ctx, delta);
-        if (this._isLoading) {
+        // Drawing nothing else while loading
+        if (!this._isReady) {
             this._loader.canvas.draw(this.graphicsContext, 0, 0);
             this.graphicsContext.flush();
-            // Drawing nothing else while loading
             return;
         }
         // TODO move to graphics systems?
@@ -25751,64 +26106,105 @@ O|===|* >________________>\n\
     get loadingComplete() {
         return this._loadingComplete;
     }
+    get ready() {
+        return this._isReady;
+    }
+    isReady() {
+        return this._isReadyPromise;
+    }
     /**
      * Starts the internal game loop for Excalibur after loading
      * any provided assets.
      * @param loader  Optional [[Loader]] to use to load resources. The default loader is [[Loader]], override to provide your own
      * custom loader.
+     *
+     * Note: start() only resolves AFTER the user has clicked the play button
      */
-    start(loader) {
+    async start(loader) {
         if (!this._compatible) {
-            return Promise.reject('Excalibur is incompatible with your browser');
-        }
-        let loadingComplete;
-        // Push the current user entered resolution/viewport
-        this.screen.pushResolutionAndViewport();
-        // Configure resolution for loader
-        this.screen.resolution = this.screen.viewport;
-        this.screen.applyResolutionAndViewport();
-        this.graphicsContext.updateViewport();
+            throw new Error('Excalibur is incompatible with your browser');
+        }
+        // Wire loader if we have it
         if (loader) {
+            // Push the current user entered resolution/viewport
+            this.screen.pushResolutionAndViewport();
+            // Configure resolution for loader, it expects resolution === viewport
+            this.screen.resolution = this.screen.viewport;
+            this.screen.applyResolutionAndViewport();
+            this.graphicsContext.updateViewport();
             this._loader = loader;
             this._loader.suppressPlayButton = this._suppressPlayButton || this._loader.suppressPlayButton;
             this._loader.wireEngine(this);
-            loadingComplete = this.load(this._loader);
         }
-        else {
-            loadingComplete = Promise.resolve();
-        }
-        loadingComplete.then(() => {
+        // Start the excalibur clock which drives the mainloop
+        // has started is a slight misnomer, it's really mainloop started
+        this._logger.debug('Starting game clock...');
+        this.browser.resume();
+        this.clock.start();
+        this._logger.debug('Game clock started');
+        if (loader) {
+            await this.load(this._loader);
+            this._loadingComplete = true;
+            // reset back to previous user resolution/viewport
             this.screen.popResolutionAndViewport();
             this.screen.applyResolutionAndViewport();
             this.graphicsContext.updateViewport();
-            this.emit('start', new GameStartEvent(this));
-            this._loadingComplete = true;
-        });
-        if (!this._hasStarted) {
-            // has started is a slight misnomer, it's really mainloop started
-            this._hasStarted = true;
-            this._logger.debug('Starting game...');
-            this.browser.resume();
-            Engine.createMainLoop(this, window.requestAnimationFrame, Date.now)();
-            this._logger.debug('Game started');
-        }
-        else {
-            // Game already started;
         }
-        return loadingComplete;
+        this._loadingComplete = true;
+        // Initialize before ready
+        this._overrideInitialize(this);
+        this._isReady = true;
+        this._isReadyResolve();
+        this.emit('start', new GameStartEvent(this));
+        return this._isReadyPromise;
+    }
+    _mainloop(elapsed) {
+        this.emit('preframe', new PreFrameEvent(this, this.stats.prevFrame));
+        const delta = elapsed * this.timescale;
+        // reset frame stats (reuse existing instances)
+        const frameId = this.stats.prevFrame.id + 1;
+        this.stats.currFrame.reset();
+        this.stats.currFrame.id = frameId;
+        this.stats.currFrame.delta = delta;
+        this.stats.currFrame.fps = this.clock.fpsSampler.fps;
+        const beforeUpdate = this.clock.now();
+        this._update(delta);
+        const afterUpdate = this.clock.now();
+        this._draw(delta);
+        const afterDraw = this.clock.now();
+        this.stats.currFrame.duration.update = afterUpdate - beforeUpdate;
+        this.stats.currFrame.duration.draw = afterDraw - afterUpdate;
+        this.emit('postframe', new PostFrameEvent(this, this.stats.currFrame));
     }
+    /**
+     *
+     * @param game
+     * @param raf
+     * @param nowFn
+     * @deprecated Use [[Clock]] to run the mainloop, will be removed in v0.26.0
+     */
     static createMainLoop(game, raf, nowFn) {
         let lastTime = nowFn();
+        const fpsSampler = new FpsSampler({
+            nowFn,
+            initialFps: game.maxFps === Infinity ? 60 : game.maxFps
+        });
         return function mainloop() {
             if (!game._hasStarted) {
                 return;
             }
             try {
                 game._requestId = raf(mainloop);
+                fpsSampler.start();
                 game.emit('preframe', new PreFrameEvent(game, game.stats.prevFrame));
                 // Get the time to calculate time-elapsed
                 const now = nowFn();
-                let elapsed = Math.floor(now - lastTime) || 1;
+                let elapsed = now - lastTime || 1; // first frame
+                // Constrain fps
+                const fpsInterval = game.maxFps === Number.POSITIVE_INFINITY ? 0 : 1000 / game.maxFps;
+                if (elapsed <= fpsInterval) {
+                    return; // too fast 😎 skip this frame
+                }
                 // Resolves issue #138 if the game has been paused, or blurred for
                 // more than a 200 milliseconds, reset elapsed time to 1. This improves reliability
                 // and provides more expected behavior when the engine comes back
@@ -25822,7 +26218,7 @@ O|===|* >________________>\n\
                 game.stats.currFrame.reset();
                 game.stats.currFrame.id = frameId;
                 game.stats.currFrame.delta = delta;
-                game.stats.currFrame.fps = 1.0 / (delta / 1000);
+                game.stats.currFrame.fps = fpsSampler.fps;
                 const beforeUpdate = nowFn();
                 game._update(delta);
                 const afterUpdate = nowFn();
@@ -25830,8 +26226,15 @@ O|===|* >________________>\n\
                 const afterDraw = nowFn();
                 game.stats.currFrame.duration.update = afterUpdate - beforeUpdate;
                 game.stats.currFrame.duration.draw = afterDraw - afterUpdate;
-                lastTime = now;
+                // if fps interval is not a multple
+                if (fpsInterval > 0) {
+                    lastTime = now - (elapsed % fpsInterval);
+                }
+                else {
+                    lastTime = now;
+                }
                 game.emit('postframe', new PostFrameEvent(game, game.stats.currFrame));
+                fpsSampler.end();
                 game.stats.prevFrame.reset(game.stats.currFrame);
             }
             catch (e) {
@@ -25845,10 +26248,10 @@ O|===|* >________________>\n\
      * Stops Excalibur's main loop, useful for pausing the game.
      */
     stop() {
-        if (this._hasStarted) {
+        if (this.clock.isRunning()) {
             this.emit('stop', new GameStopEvent(this));
             this.browser.pause();
-            this._hasStarted = false;
+            this.clock.stop();
             this._logger.debug('Game stopped');
         }
     }
@@ -25856,7 +26259,7 @@ O|===|* >________________>\n\
      * Returns the Engine's Running status, Useful for checking whether engine is running or paused.
      */
     isPaused() {
-        return !this._hasStarted;
+        return !this.clock.isRunning();
     }
     /**
      * Takes a screen shot of the current viewport and returns it as an
@@ -25874,24 +26277,13 @@ O|===|* >________________>\n\
      * will appear.
      * @param loader  Some [[Loadable]] such as a [[Loader]] collection, [[Sound]], or [[Texture]].
      */
-    load(loader) {
-        const complete = new Promise((resolve) => {
-            this._isLoading = true;
-            loader.load().then(() => {
-                if (this._suppressPlayButton) {
-                    setTimeout(() => {
-                        this._isLoading = false;
-                        resolve();
-                        // Delay is to give the logo a chance to show, otherwise don't delay
-                    }, 500);
-                }
-                else {
-                    this._isLoading = false;
-                    resolve();
-                }
-            });
-        });
-        return complete;
+    async load(loader) {
+        try {
+            await loader.load();
+        }
+        catch (_a) {
+            await Promise.resolve();
+        }
     }
 }
 /**
@@ -26070,13 +26462,25 @@ class Font extends Raster {
         this.flagDirty();
     }
     clone() {
-        return new Font(Object.assign(Object.assign(Object.assign({}, this.cloneGraphicOptions()), this.cloneRasterOptions()), { size: this.size, unit: this.unit, family: this.family, style: this.style, bold: this.bold, textAlign: this.textAlign, baseAlign: this.baseAlign, direction: this.direction, shadow: this.shadow
+        return new Font({
+            ...this.cloneGraphicOptions(),
+            ...this.cloneRasterOptions(),
+            size: this.size,
+            unit: this.unit,
+            family: this.family,
+            style: this.style,
+            bold: this.bold,
+            textAlign: this.textAlign,
+            baseAlign: this.baseAlign,
+            direction: this.direction,
+            shadow: this.shadow
                 ? {
                     blur: this.shadow.blur,
                     offset: this.shadow.offset,
                     color: this.shadow.color
                 }
-                : null }));
+                : null
+        });
     }
     get fontString() {
         return `${this.style} ${this.bold ? 'bold' : ''} ${this.size}${this.unit} ${this.family}`;
@@ -26766,7 +27170,17 @@ let Polygon = class Polygon {
     }
     _drawWithOptions(options) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const { ctx, x, y, rotation, drawWidth, drawHeight, anchor, offset, opacity, flipHorizontal, flipVertical } = Object.assign(Object.assign({}, options), { rotation: (_a = options.rotation) !== null && _a !== void 0 ? _a : this.rotation, drawWidth: (_b = options.drawWidth) !== null && _b !== void 0 ? _b : this.drawWidth, drawHeight: (_c = options.drawHeight) !== null && _c !== void 0 ? _c : this.drawHeight, flipHorizontal: (_d = options.flipHorizontal) !== null && _d !== void 0 ? _d : this.flipHorizontal, flipVertical: (_e = options.flipVertical) !== null && _e !== void 0 ? _e : this.flipVertical, anchor: (_f = options.anchor) !== null && _f !== void 0 ? _f : this.anchor, offset: (_g = options.offset) !== null && _g !== void 0 ? _g : this.offset, opacity: ((_h = options.opacity) !== null && _h !== void 0 ? _h : 1) * ((_j = this.opacity) !== null && _j !== void 0 ? _j : 1) });
+        const { ctx, x, y, rotation, drawWidth, drawHeight, anchor, offset, opacity, flipHorizontal, flipVertical } = {
+            ...options,
+            rotation: (_a = options.rotation) !== null && _a !== void 0 ? _a : this.rotation,
+            drawWidth: (_b = options.drawWidth) !== null && _b !== void 0 ? _b : this.drawWidth,
+            drawHeight: (_c = options.drawHeight) !== null && _c !== void 0 ? _c : this.drawHeight,
+            flipHorizontal: (_d = options.flipHorizontal) !== null && _d !== void 0 ? _d : this.flipHorizontal,
+            flipVertical: (_e = options.flipVertical) !== null && _e !== void 0 ? _e : this.flipVertical,
+            anchor: (_f = options.anchor) !== null && _f !== void 0 ? _f : this.anchor,
+            offset: (_g = options.offset) !== null && _g !== void 0 ? _g : this.offset,
+            opacity: ((_h = options.opacity) !== null && _h !== void 0 ? _h : 1) * ((_j = this.opacity) !== null && _j !== void 0 ? _j : 1)
+        };
         const xpoint = drawWidth * anchor.x + offset.x + x;
         const ypoint = drawHeight * anchor.y + offset.y + y;
         ctx.save();
@@ -27088,15 +27502,6 @@ function canPlayFile(file) {
 }
 
 ;// CONCATENATED MODULE: ./Resources/Sound/Sound.ts
-var Sound_awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 
 
 
@@ -27187,30 +27592,26 @@ class Sound extends Class {
     isLoaded() {
         return !!this.data;
     }
-    load() {
-        return Sound_awaiter(this, void 0, void 0, function* () {
-            if (this.data) {
-                return this.data;
-            }
-            const arraybuffer = yield this._resource.load();
-            const audiobuffer = yield this.decodeAudio(arraybuffer.slice(0));
-            this._duration = typeof audiobuffer === 'object' ? audiobuffer.duration : undefined;
-            this.emit('processed', new NativeSoundProcessedEvent(this, audiobuffer));
-            return this.data = audiobuffer;
-        });
+    async load() {
+        if (this.data) {
+            return this.data;
+        }
+        const arraybuffer = await this._resource.load();
+        const audiobuffer = await this.decodeAudio(arraybuffer.slice(0));
+        this._duration = typeof audiobuffer === 'object' ? audiobuffer.duration : undefined;
+        this.emit('processed', new NativeSoundProcessedEvent(this, audiobuffer));
+        return this.data = audiobuffer;
     }
-    decodeAudio(data) {
-        return Sound_awaiter(this, void 0, void 0, function* () {
-            try {
-                return yield this._audioContext.decodeAudioData(data.slice(0));
-            }
-            catch (e) {
-                this.logger.error('Unable to decode ' +
-                    ' this browser may not fully support this format, or the file may be corrupt, ' +
-                    'if this is an mp3 try removing id3 tags and album art from the file.');
-                return yield Promise.reject();
-            }
-        });
+    async decodeAudio(data) {
+        try {
+            return await this._audioContext.decodeAudioData(data.slice(0));
+        }
+        catch (e) {
+            this.logger.error('Unable to decode ' +
+                ' this browser may not fully support this format, or the file may be corrupt, ' +
+                'if this is an mp3 try removing id3 tags and album art from the file.');
+            return await Promise.reject();
+        }
     }
     wireEngine(engine) {
         if (engine) {
@@ -27302,38 +27703,34 @@ class Sound extends Class {
     getTrackId(track) {
         return this._tracks.indexOf(track);
     }
-    _resumePlayback() {
-        return Sound_awaiter(this, void 0, void 0, function* () {
-            if (this._isPaused) {
-                const resumed = [];
-                // ensure we resume *current* tracks (if paused)
-                for (const track of this._tracks) {
-                    resumed.push(track.play());
-                }
-                this._isPaused = false;
-                this.emit('resume', new NativeSoundEvent(this));
-                this.logger.debug('Resuming paused instances for sound', this.path, this._tracks);
-                // resolve when resumed tracks are done
-                yield Promise.all(resumed);
+    async _resumePlayback() {
+        if (this._isPaused) {
+            const resumed = [];
+            // ensure we resume *current* tracks (if paused)
+            for (const track of this._tracks) {
+                resumed.push(track.play());
             }
-            return true;
-        });
+            this._isPaused = false;
+            this.emit('resume', new NativeSoundEvent(this));
+            this.logger.debug('Resuming paused instances for sound', this.path, this._tracks);
+            // resolve when resumed tracks are done
+            await Promise.all(resumed);
+        }
+        return true;
     }
     /**
      * Starts playback, returns a promise that resolves when playback is complete
      */
-    _startPlayback() {
-        return Sound_awaiter(this, void 0, void 0, function* () {
-            const track = yield this._getTrackInstance(this.data);
-            const complete = yield track.play(() => {
-                this.emit('playbackstart', new NativeSoundEvent(this, track));
-                this.logger.debug('Playing new instance for sound', this.path);
-            });
-            // when done, remove track
-            this.emit('playbackend', new NativeSoundEvent(this, track));
-            this._tracks.splice(this.getTrackId(track), 1);
-            return complete;
+    async _startPlayback() {
+        const track = await this._getTrackInstance(this.data);
+        const complete = await track.play(() => {
+            this.emit('playbackstart', new NativeSoundEvent(this, track));
+            this.logger.debug('Playing new instance for sound', this.path);
         });
+        // when done, remove track
+        this.emit('playbackend', new NativeSoundEvent(this, track));
+        this._tracks.splice(this.getTrackId(track), 1);
+        return complete;
     }
     _getTrackInstance(data) {
         const newTrack = new WebAudioInstance(data);
@@ -27351,15 +27748,6 @@ class Sound extends Class {
 
 
 ;// CONCATENATED MODULE: ./Resources/Gif.ts
-var Gif_awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 
 
 
@@ -27393,16 +27781,14 @@ class Gif {
     /**
      * Begins loading the texture and returns a promise to be resolved on completion
      */
-    load() {
-        return Gif_awaiter(this, void 0, void 0, function* () {
-            const arraybuffer = yield this._resource.load();
-            this._stream = new Stream(arraybuffer);
-            this._gif = new ParseGif(this._stream, this._transparentColor);
-            const images = this._gif.images.map(i => new ImageSource(i.src, false));
-            // Load all textures
-            yield Promise.all(images.map(t => t.load()));
-            return this.data = this._textures = images;
-        });
+    async load() {
+        const arraybuffer = await this._resource.load();
+        this._stream = new Stream(arraybuffer);
+        this._gif = new ParseGif(this._stream, this._transparentColor);
+        const images = this._gif.images.map(i => new ImageSource(i.src, false));
+        // Load all textures
+        await Promise.all(images.map(t => t.load()));
+        return this.data = this._textures = images;
     }
     isLoaded() {
         return !!this.data;
@@ -27886,7 +28272,11 @@ class Polygon_Polygon extends Raster {
         return vec(minX, minY);
     }
     clone() {
-        return new Polygon_Polygon(Object.assign(Object.assign({ points: this.points.map((p) => p.clone()) }, this.cloneGraphicOptions()), this.cloneRasterOptions()));
+        return new Polygon_Polygon({
+            points: this.points.map((p) => p.clone()),
+            ...this.cloneGraphicOptions(),
+            ...this.cloneRasterOptions()
+        });
     }
     execute(ctx) {
         if (this.points && this.points.length) {
@@ -28446,7 +28836,7 @@ Promises_Promise = Promise_1 = Promises_decorate([
  * The current Excalibur version string
  * @description `process.env.__EX_VERSION` gets replaced by Webpack on build
  */
-const EX_VERSION = "0.26.0-alpha.310+5f94c2f";
+const EX_VERSION = "0.26.0-alpha.311+c19e8da";
 
 polyfill();
 // This file is used as the bundle entry point and exports everything
@@ -28508,6 +28898,9 @@ polyfill();
 
 
 
+
+
+
 // ex.Deprecated
 
 // import * as deprecated from './Deprecated';