excalibur 0.25.2 → 0.25.3

package/build/dist/Engine.js

@@ -0,0 +1,985 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+import { EX_VERSION } from './';
+import { Flags, Legacy } from './Flags';
+import { polyfill } from './Polyfill';
+polyfill();
+import { Screen, DisplayMode, Resolution } from './Screen';
+import { Loader } from './Loader';
+import { Detector } from './Util/Detector';
+import { VisibleEvent, HiddenEvent, GameStartEvent, GameStopEvent, PreUpdateEvent, PostUpdateEvent, PreFrameEvent, PostFrameEvent, DeactivateEvent, ActivateEvent, PreDrawEvent, PostDrawEvent, InitializeEvent } from './Events';
+import { Logger, LogLevel } from './Util/Log';
+import { Color } from './Color';
+import { Scene } from './Scene';
+import { Entity } from './EntityComponentSystem/Entity';
+import { Debug } from './Debug/Debug';
+import { Class } from './Class';
+import * as Input from './Input/Index';
+import { BrowserEvents } from './Util/Browser';
+import { obsolete } from './Util/Decorators';
+import { ExcaliburGraphicsContext2DCanvas, ExcaliburGraphicsContextWebGL, TextureLoader } from './Graphics';
+import { PointerEventReceiver } from './Input/PointerEventReceiver';
+import { FpsSampler } from './Util/Fps';
+import { StandardClock } from './Util/Clock';
+import { ImageFiltering } from './Graphics/Filtering';
+import { GraphicsDiagnostics } from './Graphics/GraphicsDiagnostics';
+/**
+ * Enum representing the different mousewheel event bubble prevention
+ */
+export var ScrollPreventionMode;
+(function (ScrollPreventionMode) {
+    /**
+     * Do not prevent any page scrolling
+     */
+    ScrollPreventionMode[ScrollPreventionMode["None"] = 0] = "None";
+    /**
+     * Prevent page scroll if mouse is over the game canvas
+     */
+    ScrollPreventionMode[ScrollPreventionMode["Canvas"] = 1] = "Canvas";
+    /**
+     * Prevent all page scrolling via mouse wheel
+     */
+    ScrollPreventionMode[ScrollPreventionMode["All"] = 2] = "All";
+})(ScrollPreventionMode || (ScrollPreventionMode = {}));
+/**
+ * The Excalibur Engine
+ *
+ * The [[Engine]] is the main driver for a game. It is responsible for
+ * starting/stopping the game, maintaining state, transmitting events,
+ * loading resources, and managing the scene.
+ */
+export class Engine extends Class {
+    /**
+     * Creates a new game using the given [[EngineOptions]]. By default, if no options are provided,
+     * the game will be rendered full screen (taking up all available browser window space).
+     * You can customize the game rendering through [[EngineOptions]].
+     *
+     * Example:
+     *
+     * ```js
+     * var game = new ex.Engine({
+     *   width: 0, // the width of the canvas
+     *   height: 0, // the height of the canvas
+     *   enableCanvasTransparency: true, // the transparencySection of the canvas
+     *   canvasElementId: '', // the DOM canvas element ID, if you are providing your own
+     *   displayMode: ex.DisplayMode.FullScreen, // the display mode
+     *   pointerScope: ex.Input.PointerScope.Document, // the scope of capturing pointer (mouse/touch) events
+     *   backgroundColor: ex.Color.fromHex('#2185d0') // background color of the engine
+     * });
+     *
+     * // call game.start, which is a Promise
+     * game.start().then(function () {
+     *   // ready, set, go!
+     * });
+     * ```
+     */
+    constructor(options) {
+        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 consistently, 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;
+        /**
+         * Contains all the scenes currently registered with Excalibur
+         */
+        this.scenes = {};
+        /**
+         * @hidden
+         * @deprecated will be removed in v0.26.0
+         */
+        this._animations = [];
+        this._suppressPlayButton = false;
+        /**
+         * Indicates whether audio should be paused when the game is no longer visible.
+         */
+        this.pauseAudioWhenHidden = true;
+        /**
+         * Indicates whether the engine should draw with debug information
+         */
+        this._isDebug = false;
+        /**
+         * No longer used
+         * @deprecated will be removed in v0.26.0
+         */
+        this.debugColor = new Color(255, 255, 255);
+        /**
+         * Sets the Transparency for the engine.
+         */
+        this.enableCanvasTransparency = true;
+        /**
+         * The action to take when a fatal exception is thrown
+         */
+        this.onFatalException = (e) => {
+            Logger.getInstance().fatal(e);
+        };
+        this._timescale = 1.0;
+        this._isInitialized = false;
+        this._deferredGoTo = null;
+        this._loadingComplete = false;
+        this._isReady = false;
+        this._isReadyPromise = new Promise(resolve => {
+            this._isReadyResolve = resolve;
+        });
+        this._screenShotRequests = [];
+        options = { ...Engine._DEFAULT_ENGINE_OPTIONS, ...options };
+        Flags.freeze();
+        // Initialize browser events facade
+        this.browser = new BrowserEvents(window, document);
+        // Check compatibility
+        const detector = new Detector();
+        if (!options.suppressMinimumBrowserFeatureDetection && !(this._compatible = detector.test())) {
+            const message = document.createElement('div');
+            message.innerText = 'Sorry, your browser does not support all the features needed for Excalibur';
+            document.body.appendChild(message);
+            detector.failedTests.forEach(function (test) {
+                const testMessage = document.createElement('div');
+                testMessage.innerText = 'Browser feature missing ' + test;
+                document.body.appendChild(testMessage);
+            });
+            if (options.canvasElementId) {
+                const canvas = document.getElementById(options.canvasElementId);
+                if (canvas) {
+                    canvas.parentElement.removeChild(canvas);
+                }
+            }
+            return;
+        }
+        else {
+            this._compatible = true;
+        }
+        // Use native console API for color fun
+        // eslint-disable-next-line no-console
+        if (console.log && !options.suppressConsoleBootMessage) {
+            // eslint-disable-next-line no-console
+            console.log(`%cPowered by Excalibur.js (v${EX_VERSION})`, 'background: #176BAA; color: white; border-radius: 5px; padding: 15px; font-size: 1.5em; line-height: 80px;');
+            // eslint-disable-next-line no-console
+            console.log('\n\
+      /| ________________\n\
+O|===|* >________________>\n\
+      \\|');
+            // eslint-disable-next-line no-console
+            console.log('Visit', 'http://excaliburjs.com', 'for more information');
+        }
+        // Suppress play button
+        if (options.suppressPlayButton) {
+            this._suppressPlayButton = true;
+        }
+        this._logger = Logger.getInstance();
+        // If debug is enabled, let's log browser features to the console.
+        if (this._logger.defaultLevel === LogLevel.Debug) {
+            detector.logBrowserFeatures();
+        }
+        this._logger.debug('Building engine...');
+        this.canvasElementId = options.canvasElementId;
+        if (options.canvasElementId) {
+            this._logger.debug('Using Canvas element specified: ' + options.canvasElementId);
+            this.canvas = document.getElementById(options.canvasElementId);
+        }
+        else if (options.canvasElement) {
+            this._logger.debug('Using Canvas element specified:', options.canvasElement);
+            this.canvas = options.canvasElement;
+        }
+        else {
+            this._logger.debug('Using generated canvas element');
+            this.canvas = document.createElement('canvas');
+        }
+        let displayMode = (_a = options.displayMode) !== null && _a !== void 0 ? _a : DisplayMode.Fixed;
+        if ((options.width && options.height) || options.viewport) {
+            if (options.displayMode === undefined) {
+                displayMode = DisplayMode.Fixed;
+            }
+            this._logger.debug('Engine viewport is size ' + options.width + ' x ' + options.height);
+        }
+        else if (!options.displayMode) {
+            this._logger.debug('Engine viewport is fit');
+            displayMode = DisplayMode.FitScreen;
+        }
+        if (Flags.isEnabled(Legacy.Canvas)) {
+            const ex2dCtx = new ExcaliburGraphicsContext2DCanvas({
+                canvasElement: this.canvas,
+                enableTransparency: this.enableCanvasTransparency,
+                smoothing: options.antialiasing,
+                backgroundColor: options.backgroundColor,
+                snapToPixel: options.snapToPixel
+            });
+            this.graphicsContext = ex2dCtx;
+            this.ctx = ex2dCtx.__ctx;
+        }
+        else {
+            const exWebglCtx = new ExcaliburGraphicsContextWebGL({
+                canvasElement: this.canvas,
+                enableTransparency: this.enableCanvasTransparency,
+                smoothing: options.antialiasing,
+                backgroundColor: options.backgroundColor,
+                snapToPixel: options.snapToPixel
+            });
+            this.graphicsContext = exWebglCtx;
+            this.ctx = exWebglCtx.__ctx;
+        }
+        this.screen = new Screen({
+            canvas: this.canvas,
+            context: this.graphicsContext,
+            antialiasing: (_b = options.antialiasing) !== null && _b !== void 0 ? _b : true,
+            browser: this.browser,
+            viewport: (_c = options.viewport) !== null && _c !== void 0 ? _c : (options.width && options.height ? { width: options.width, height: options.height } : Resolution.SVGA),
+            resolution: options.resolution,
+            displayMode,
+            position: options.position,
+            pixelRatio: options.suppressHiDPIScaling ? 1 : null
+        });
+        TextureLoader.filtering = options.antialiasing ? ImageFiltering.Blended : ImageFiltering.Pixel;
+        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._loader.wireEngine(this);
+        this.debug = new Debug(this);
+        this._initialize(options);
+        this.rootScene = this.currentScene = new Scene();
+        this.addScene('root', this.rootScene);
+        window.___EXCALIBUR_DEVTOOL = this;
+    }
+    /**
+     * The width of the game canvas in pixels (physical width component of the
+     * resolution of the canvas element)
+     */
+    get canvasWidth() {
+        return this.screen.canvasWidth;
+    }
+    /**
+     * Returns half width of the game canvas in pixels (half physical width component)
+     */
+    get halfCanvasWidth() {
+        return this.screen.halfCanvasWidth;
+    }
+    /**
+     * The height of the game canvas in pixels, (physical height component of
+     * the resolution of the canvas element)
+     */
+    get canvasHeight() {
+        return this.screen.canvasHeight;
+    }
+    /**
+     * Returns half height of the game canvas in pixels (half physical height component)
+     */
+    get halfCanvasHeight() {
+        return this.screen.halfCanvasHeight;
+    }
+    /**
+     * Returns the width of the engine's visible drawing surface in pixels including zoom and device pixel ratio.
+     */
+    get drawWidth() {
+        return this.screen.drawWidth;
+    }
+    /**
+     * Returns half the width of the engine's visible drawing surface in pixels including zoom and device pixel ratio.
+     */
+    get halfDrawWidth() {
+        return this.screen.halfDrawWidth;
+    }
+    /**
+     * Returns the height of the engine's visible drawing surface in pixels including zoom and device pixel ratio.
+     */
+    get drawHeight() {
+        return this.screen.drawHeight;
+    }
+    /**
+     * Returns half the height of the engine's visible drawing surface in pixels including zoom and device pixel ratio.
+     */
+    get halfDrawHeight() {
+        return this.screen.halfDrawHeight;
+    }
+    /**
+     * Returns whether excalibur detects the current screen to be HiDPI
+     */
+    get isHiDpi() {
+        return this.screen.isHiDpi;
+    }
+    /**
+     * Access [[stats]] that holds frame statistics.
+     */
+    get stats() {
+        return this.debug.stats;
+    }
+    /**
+     * Indicates whether the engine is set to fullscreen or not
+     */
+    get isFullscreen() {
+        return this.screen.isFullScreen;
+    }
+    /**
+     * Indicates the current [[DisplayMode]] of the engine.
+     */
+    get displayMode() {
+        return this.screen.displayMode;
+    }
+    /**
+     * Returns the calculated pixel ration for use in rendering
+     */
+    get pixelRatio() {
+        return this.screen.pixelRatio;
+    }
+    get isDebug() {
+        return this._isDebug;
+    }
+    /**
+     * Hints the graphics context to truncate fractional world space coordinates
+     */
+    get snapToPixel() {
+        return this.graphicsContext.snapToPixel;
+    }
+    ;
+    set snapToPixel(shouldSnapToPixel) {
+        this.graphicsContext.snapToPixel = shouldSnapToPixel;
+    }
+    ;
+    on(eventName, handler) {
+        super.on(eventName, handler);
+    }
+    once(eventName, handler) {
+        super.once(eventName, handler);
+    }
+    off(eventName, handler) {
+        super.off(eventName, handler);
+    }
+    /**
+     * Returns a BoundingBox of the top left corner of the screen
+     * and the bottom right corner of the screen.
+     */
+    getWorldBounds() {
+        return this.screen.getWorldBounds();
+    }
+    /**
+     * Gets the current engine timescale factor (default is 1.0 which is 1:1 time)
+     */
+    get timescale() {
+        return this._timescale;
+    }
+    /**
+     * Sets the current engine timescale factor. Useful for creating slow-motion effects or fast-forward effects
+     * when using time-based movement.
+     */
+    set timescale(value) {
+        if (value <= 0) {
+            Logger.getInstance().error('Cannot set engine.timescale to a value of 0 or less than 0.');
+            return;
+        }
+        this._timescale = value;
+    }
+    /**
+     * Plays a sprite animation on the screen at the specified `x` and `y`
+     * (in game coordinates, not screen pixels). These animations play
+     * independent of actors, and will be cleaned up internally as soon
+     * as they are complete. Note animations that loop will never be
+     * cleaned up.
+     *
+     * @param animation  Animation to play
+     * @param x          x game coordinate to play the animation
+     * @param y          y game coordinate to play the animation
+     * @deprecated
+     */
+    playAnimation(animation, x, y) {
+        this._animations.push(new AnimationNode(animation, x, y));
+    }
+    /**
+     * Adds a [[TileMap]] to the [[currentScene]], once this is done the TileMap
+     * will be drawn and updated.
+     */
+    addTileMap(tileMap) {
+        this.currentScene.addTileMap(tileMap);
+    }
+    /**
+     * Removes a [[TileMap]] from the [[currentScene]], it will no longer be drawn or updated.
+     */
+    removeTileMap(tileMap) {
+        this.currentScene.removeTileMap(tileMap);
+    }
+    /**
+     * Adds a [[Timer]] to the [[currentScene]].
+     * @param timer  The timer to add to the [[currentScene]].
+     */
+    addTimer(timer) {
+        return this.currentScene.addTimer(timer);
+    }
+    /**
+     * Removes a [[Timer]] from the [[currentScene]].
+     * @param timer  The timer to remove to the [[currentScene]].
+     */
+    removeTimer(timer) {
+        return this.currentScene.removeTimer(timer);
+    }
+    /**
+     * Adds a [[Scene]] to the engine, think of scenes in Excalibur as you
+     * would levels or menus.
+     *
+     * @param key  The name of the scene, must be unique
+     * @param scene The scene to add to the engine
+     */
+    addScene(key, scene) {
+        if (this.scenes[key]) {
+            this._logger.warn('Scene', key, 'already exists overwriting');
+        }
+        this.scenes[key] = scene;
+    }
+    /**
+     * @internal
+     */
+    removeScene(entity) {
+        if (entity instanceof Scene) {
+            // remove scene
+            for (const key in this.scenes) {
+                if (this.scenes.hasOwnProperty(key)) {
+                    if (this.scenes[key] === entity) {
+                        delete this.scenes[key];
+                    }
+                }
+            }
+        }
+        if (typeof entity === 'string') {
+            // remove scene
+            delete this.scenes[entity];
+        }
+    }
+    add(entity) {
+        if (arguments.length === 2) {
+            this.addScene(arguments[0], arguments[1]);
+            return;
+        }
+        if (this._deferredGoTo && this.scenes[this._deferredGoTo]) {
+            this.scenes[this._deferredGoTo].add(entity);
+        }
+        else {
+            this.currentScene.add(entity);
+        }
+    }
+    remove(entity) {
+        if (entity instanceof Entity) {
+            this.currentScene.remove(entity);
+        }
+        if (entity instanceof Scene) {
+            this.removeScene(entity);
+        }
+        if (typeof entity === 'string') {
+            this.removeScene(entity);
+        }
+    }
+    /**
+     * Changes the currently updating and drawing scene to a different,
+     * named scene. Calls the [[Scene]] lifecycle events.
+     * @param key  The key of the scene to transition to.
+     */
+    goToScene(key) {
+        // if not yet initialized defer goToScene
+        if (!this.isInitialized) {
+            this._deferredGoTo = key;
+            return;
+        }
+        if (this.scenes[key]) {
+            const oldScene = this.currentScene;
+            const newScene = this.scenes[key];
+            this._logger.debug('Going to scene:', key);
+            // only deactivate when initialized
+            if (this.currentScene.isInitialized) {
+                this.currentScene._deactivate.apply(this.currentScene, [oldScene, newScene]);
+                this.currentScene.eventDispatcher.emit('deactivate', new DeactivateEvent(newScene, this.currentScene));
+            }
+            // set current scene to new one
+            this.currentScene = newScene;
+            this.screen.setCurrentCamera(newScene.camera);
+            // initialize the current scene if has not been already
+            this.currentScene._initialize(this);
+            this.currentScene._activate.apply(this.currentScene, [oldScene, newScene]);
+            this.currentScene.eventDispatcher.emit('activate', new ActivateEvent(oldScene, this.currentScene));
+        }
+        else {
+            this._logger.error('Scene', key, 'does not exist!');
+        }
+    }
+    /**
+     * Transforms the current x, y from screen coordinates to world coordinates
+     * @param point  Screen coordinate to convert
+     */
+    screenToWorldCoordinates(point) {
+        return this.screen.screenToWorldCoordinates(point);
+    }
+    /**
+     * Transforms a world coordinate, to a screen coordinate
+     * @param point  World coordinate to convert
+     */
+    worldToScreenCoordinates(point) {
+        return this.screen.worldToScreenCoordinates(point);
+    }
+    /**
+     * Initializes the internal canvas, rendering context, display mode, and native event listeners
+     */
+    _initialize(options) {
+        this.pageScrollPreventionMode = options.scrollPreventionMode;
+        // initialize inputs
+        const pointerTarget = options && options.pointerScope === Input.PointerScope.Document ? document : this.canvas;
+        this.input = {
+            keyboard: new Input.Keyboard(),
+            pointers: new PointerEventReceiver(pointerTarget, this),
+            gamepads: new Input.Gamepads()
+        };
+        this.input.keyboard.init();
+        this.input.pointers.init();
+        this.input.gamepads.init();
+        // Issue #385 make use of the visibility api
+        // https://developer.mozilla.org/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API
+        let hidden, visibilityChange;
+        if (typeof document.hidden !== 'undefined') {
+            // Opera 12.10 and Firefox 18 and later support
+            hidden = 'hidden';
+            visibilityChange = 'visibilitychange';
+        }
+        else if ('msHidden' in document) {
+            hidden = 'msHidden';
+            visibilityChange = 'msvisibilitychange';
+        }
+        else if ('webkitHidden' in document) {
+            hidden = 'webkitHidden';
+            visibilityChange = 'webkitvisibilitychange';
+        }
+        this.browser.document.on(visibilityChange, () => {
+            if (document[hidden]) {
+                this.eventDispatcher.emit('hidden', new HiddenEvent(this));
+                this._logger.debug('Window hidden');
+            }
+            else {
+                this.eventDispatcher.emit('visible', new VisibleEvent(this));
+                this._logger.debug('Window visible');
+            }
+        });
+        if (!this.canvasElementId && !options.canvasElement) {
+            document.body.appendChild(this.canvas);
+        }
+    }
+    onInitialize(_engine) {
+        // Override me
+    }
+    /**
+     * If supported by the browser, this will set the antialiasing flag on the
+     * canvas. Set this to `false` if you want a 'jagged' pixel art look to your
+     * image resources.
+     * @param isSmooth  Set smoothing to true or false
+     */
+    setAntialiasing(isSmooth) {
+        this.screen.antialiasing = isSmooth;
+    }
+    /**
+     * Return the current smoothing status of the canvas
+     */
+    getAntialiasing() {
+        return this.screen.antialiasing;
+    }
+    /**
+     * Gets whether the actor is Initialized
+     */
+    get isInitialized() {
+        return this._isInitialized;
+    }
+    _overrideInitialize(engine) {
+        if (!this.isInitialized) {
+            this.onInitialize(engine);
+            super.emit('initialize', new InitializeEvent(engine, this));
+            this._isInitialized = true;
+            if (this._deferredGoTo) {
+                this.goToScene(this._deferredGoTo);
+            }
+            else {
+                this.goToScene('root');
+            }
+        }
+    }
+    /**
+     * Updates the entire state of the game
+     * @param delta  Number of milliseconds elapsed since the last update.
+     */
+    _update(delta) {
+        if (!this.ready) {
+            // suspend updates until loading is finished
+            this._loader.update(this, delta);
+            // Update input listeners
+            this.input.keyboard.update();
+            this.input.gamepads.update();
+            return;
+        }
+        // Publish preupdate events
+        this._preupdate(delta);
+        // process engine level events
+        this.currentScene.update(this, delta);
+        // update animations
+        // TODO remove
+        this._animations = this._animations.filter(function (a) {
+            return !a.animation.isDone();
+        });
+        // Update input listeners
+        this.input.keyboard.update();
+        this.input.gamepads.update();
+        // Publish update event
+        this._postupdate(delta);
+    }
+    /**
+     * @internal
+     */
+    _preupdate(delta) {
+        this.emit('preupdate', new PreUpdateEvent(this, delta, this));
+        this.onPreUpdate(this, delta);
+    }
+    onPreUpdate(_engine, _delta) {
+        // Override me
+    }
+    /**
+     * @internal
+     */
+    _postupdate(delta) {
+        this.emit('postupdate', new PostUpdateEvent(this, delta, this));
+        this.onPostUpdate(this, delta);
+    }
+    onPostUpdate(_engine, _delta) {
+        // Override me
+    }
+    /**
+     * Draws the entire game
+     * @param delta  Number of milliseconds elapsed since the last draw.
+     */
+    _draw(delta) {
+        const ctx = this.ctx;
+        this.graphicsContext.beginDrawLifecycle();
+        this.graphicsContext.clear();
+        this._predraw(ctx, delta);
+        // Drawing nothing else while loading
+        if (!this._isReady) {
+            this._loader.canvas.draw(this.graphicsContext, 0, 0);
+            this.graphicsContext.flush();
+            return;
+        }
+        // TODO move to graphics systems?
+        this.graphicsContext.backgroundColor = this.backgroundColor;
+        this.currentScene.draw(this.ctx, delta);
+        // todo needs to be a better way of doing this
+        let a = 0;
+        const len = this._animations.length;
+        for (a; a < len; a++) {
+            this._animations[a].animation.draw(ctx, this._animations[a].x, this._animations[a].y);
+        }
+        // Draw debug information
+        // TODO don't access ctx directly
+        if (this.isDebug) {
+            this.ctx.font = 'Consolas';
+            this.ctx.fillStyle = this.debugColor.toString();
+            const keys = this.input.keyboard.getKeys();
+            for (let j = 0; j < keys.length; j++) {
+                this.ctx.fillText(keys[j].toString() + ' : ' + (Input.Keys[keys[j]] ? Input.Keys[keys[j]] : 'Not Mapped'), 100, 10 * j + 10);
+            }
+            this.ctx.fillText('FPS:' + this.stats.currFrame.fps.toFixed(2).toString(), 10, 10);
+        }
+        this._postdraw(ctx, delta);
+        // Flush any pending drawings
+        this.graphicsContext.flush();
+        this.graphicsContext.endDrawLifecycle();
+        this._checkForScreenShots();
+    }
+    /**
+     * @internal
+     */
+    _predraw(_ctx, delta) {
+        this.emit('predraw', new PreDrawEvent(_ctx, delta, this));
+        this.onPreDraw(_ctx, delta);
+    }
+    onPreDraw(_ctx, _delta) {
+        // Override me
+    }
+    /**
+     * @internal
+     */
+    _postdraw(_ctx, delta) {
+        this.emit('postdraw', new PostDrawEvent(_ctx, delta, this));
+        this.onPostDraw(_ctx, delta);
+    }
+    onPostDraw(_ctx, _delta) {
+        // Override me
+    }
+    /**
+     * Enable or disable Excalibur debugging functionality.
+     * @param toggle a value that debug drawing will be changed to
+     */
+    showDebug(toggle) {
+        this._isDebug = toggle;
+    }
+    /**
+     * Toggle Excalibur debugging functionality.
+     */
+    toggleDebug() {
+        this._isDebug = !this._isDebug;
+        return this._isDebug;
+    }
+    /**
+     * Returns true when loading is totally complete and the player has clicked start
+     */
+    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
+     */
+    async start(loader) {
+        if (!this._compatible) {
+            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._loader = loader;
+            this._loader.suppressPlayButton = this._suppressPlayButton || this._loader.suppressPlayButton;
+            this._loader.wireEngine(this);
+        }
+        // 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._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;
+        GraphicsDiagnostics.clear();
+        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.stats.currFrame.graphics.drawnImages = GraphicsDiagnostics.DrawnImagesCount;
+        this.stats.currFrame.graphics.drawCalls = GraphicsDiagnostics.DrawCallCount;
+        this.emit('postframe', new PostFrameEvent(this, this.stats.currFrame));
+        this.stats.prevFrame.reset(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 = 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
+                // into focus
+                if (elapsed > 200) {
+                    elapsed = 1;
+                }
+                const delta = elapsed * game.timescale;
+                // reset frame stats (reuse existing instances)
+                const frameId = game.stats.prevFrame.id + 1;
+                game.stats.currFrame.reset();
+                game.stats.currFrame.id = frameId;
+                game.stats.currFrame.delta = delta;
+                game.stats.currFrame.fps = fpsSampler.fps;
+                const beforeUpdate = nowFn();
+                game._update(delta);
+                const afterUpdate = nowFn();
+                game._draw(delta);
+                const afterDraw = nowFn();
+                game.stats.currFrame.duration.update = afterUpdate - beforeUpdate;
+                game.stats.currFrame.duration.draw = afterDraw - afterUpdate;
+                // if fps interval is not a multiple
+                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) {
+                window.cancelAnimationFrame(game._requestId);
+                game.stop();
+                game.onFatalException(e);
+            }
+        };
+    }
+    /**
+     * Stops Excalibur's main loop, useful for pausing the game.
+     */
+    stop() {
+        if (this.clock.isRunning()) {
+            this.emit('stop', new GameStopEvent(this));
+            this.browser.pause();
+            this.clock.stop();
+            this._logger.debug('Game stopped');
+        }
+    }
+    /**
+     * Returns the Engine's Running status, Useful for checking whether engine is running or paused.
+     * @deprecated will be removed in v0.26.0, use isRunning()
+     */
+    isPaused() {
+        return !this.clock.isRunning();
+    }
+    /**
+     * Returns the Engine's running status, Useful for checking whether engine is running or paused.
+     */
+    isRunning() {
+        return this.clock.isRunning();
+    }
+    /**
+     * Takes a screen shot of the current viewport and returns it as an
+     * HTML Image Element.
+     * @param preserveHiDPIResolution in the case of HiDPI return the full scaled backing image, by default false
+     */
+    screenshot(preserveHiDPIResolution = false) {
+        const screenShotPromise = new Promise((resolve) => {
+            this._screenShotRequests.push({ preserveHiDPIResolution, resolve });
+        });
+        return screenShotPromise;
+    }
+    _checkForScreenShots() {
+        // We must grab the draw buffer before we yield to the browser
+        // the draw buffer is cleared after compositing
+        // the reason for the asynchrony is setting `preserveDrawingBuffer: true`
+        // forces the browser to copy buffers which can have a mass perf impact on mobile
+        for (const request of this._screenShotRequests) {
+            const finalWidth = request.preserveHiDPIResolution ? this.canvas.width : this.screen.resolution.width;
+            const finalHeight = request.preserveHiDPIResolution ? this.canvas.height : this.screen.resolution.height;
+            const screenshot = document.createElement('canvas');
+            screenshot.width = finalWidth;
+            screenshot.height = finalHeight;
+            const ctx = screenshot.getContext('2d');
+            ctx.drawImage(this.canvas, 0, 0, finalWidth, finalHeight);
+            const result = new Image();
+            const raw = screenshot.toDataURL('image/png');
+            result.src = raw;
+            request.resolve(result);
+        }
+        // Reset state
+        this._screenShotRequests.length = 0;
+    }
+    /**
+     * Another option available to you to load resources into the game.
+     * Immediately after calling this the game will pause and the loading screen
+     * will appear.
+     * @param loader  Some [[Loadable]] such as a [[Loader]] collection, [[Sound]], or [[Texture]].
+     */
+    async load(loader) {
+        try {
+            await loader.load();
+        }
+        catch (_a) {
+            await Promise.resolve();
+        }
+    }
+}
+/**
+ * Default [[EngineOptions]]
+ */
+Engine._DEFAULT_ENGINE_OPTIONS = {
+    width: 0,
+    height: 0,
+    enableCanvasTransparency: true,
+    canvasElementId: '',
+    canvasElement: undefined,
+    snapToPixel: false,
+    pointerScope: Input.PointerScope.Canvas,
+    suppressConsoleBootMessage: null,
+    suppressMinimumBrowserFeatureDetection: null,
+    suppressHiDPIScaling: null,
+    suppressPlayButton: null,
+    scrollPreventionMode: ScrollPreventionMode.Canvas,
+    backgroundColor: Color.fromHex('#2185d0') // Excalibur blue
+};
+__decorate([
+    obsolete({ message: 'Will be removed in excalibur v0.26.0', alternateMethod: 'Use Actor.graphics' })
+], Engine.prototype, "playAnimation", null);
+/**
+ * @internal
+ * @deprecated
+ */
+let AnimationNode = class AnimationNode {
+    constructor(animation, x, y) {
+        this.animation = animation;
+        this.x = x;
+        this.y = y;
+    }
+};
+AnimationNode = __decorate([
+    obsolete({ message: 'Will be removed in excalibur v0.26.0' })
+], AnimationNode);
+//# sourceMappingURL=Engine.js.map