fix: [#1431] Dispatch the hidePlayButton on the Button Event to prevent that keep on the screen on some situations [#1431]

CHANGELOG.md

@@ -10,14 +10,18 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 -
 ### Added
 
+- `withEngine` utils support an aditional options parameter to override the Engine default options.
+- Story to show a play / pause implementation. 
 - `ex.Animation` now support `totalDuration` that will calculate automatically each frame duration based on how many frames have.
 -
 ### Changed
 
 - Internal Actions implementation converted to ECS system and component, this is a backwards compatible change with v0.25.0
   - `ex.ActionsSystem` and `ex.ActionsComponent` now wrap the existing `ex.ActionContext`
   - Actions can be shared with all entities now!
-  - Revert VSCode Workbench Colors
+- Dispatch the `hidePlayButton` on the Button Event to prevent that keep on the screen on some situations [#1431].
+- Revert VSCode Workbench Colors
+-
 ### Deprecated
 
 - Actions `asPromise()` renamed to `toPromise()`

src/engine/Loader.ts

@@ -242,6 +242,7 @@ export class Loader extends Class implements Loadable<Loadable<any>[]> {
    */
   public showPlayButton(): Promise<void> {
     if (this.suppressPlayButton) {
+      this.hidePlayButton();
       return Promise.resolve();
     } else {
       this._playButtonShown = true;
@@ -255,6 +256,8 @@ export class Loader extends Class implements Loadable<Loadable<any>[]> {
         const startButtonHandler = (e: Event) => {
           // We want to stop propogation to keep bubbling to the engine pointer handlers
           e.stopPropagation();
+          // Hide Button after click
+          this.hidePlayButton();
           resolve();
         };
         this._playButton.addEventListener('click', startButtonHandler);
@@ -312,7 +315,6 @@ export class Loader extends Class implements Loadable<Loadable<any>[]> {
     // See: https://github.com/excaliburjs/Excalibur/issues/262
     // See: https://github.com/excaliburjs/Excalibur/issues/1031
     await WebAudio.unlock();
-    this.hidePlayButton();
 
     return (this.data = this._resourceList);
   }

src/stories/Engine.stories.ts

@@ -0,0 +1,47 @@
+import { Actor, Color, Loader } from '../engine';
+import { Font, ImageSource, Text } from '../engine/Graphics';
+import { withEngine } from './utils';
+
+import heartTexture from './assets/heart.png';
+
+export default {
+  title: 'Engine'
+};
+
+export const playButton: Story = withEngine(
+  async (game) => {
+    const heartTx = new ImageSource(heartTexture);
+    const loader = new Loader([heartTx]);
+    await game.start(loader);
+    game.setAntialiasing(false);
+    game.currentScene.camera.pos.setTo(game.halfDrawWidth, game.halfDrawHeight);
+    game.currentScene.camera.zoom = 4;
+    const heart = new Actor({
+      x: game.currentScene.camera.x,
+      y: game.currentScene.camera.y,
+      width: 50,
+      height: 50
+    });
+    heart.on('pointerdown', async (_evnt: ex.Input.PointerEvent) => {
+      if (!game.isPaused()) {
+        game.stop();
+        await loader.showPlayButton();
+        game.start();
+      }
+    });
+    heart.actions.repeatForever((actions) => {
+      actions.scaleBy(2, 2, 2).scaleBy(-2, -2, 2);
+    });
+    const text = new Text({
+      text: 'Pause',
+      color: Color.White,
+      font: new Font({ size: 4 })
+    });
+    heart.graphics.add(heartTx.toSprite());
+    heart.graphics.add(text);
+    game.add(heart);
+  },
+  {
+    suppressPlayButton: false
+  }
+);

src/stories/utils.ts

@@ -1,4 +1,4 @@
-import { DisplayMode, Engine, Input, Logger } from '../engine';
+import { DisplayMode, Engine, EngineOptions, Input, Logger } from '../engine';
 
 interface HTMLCanvasElement {
   gameRef?: Engine;
@@ -34,8 +34,9 @@ const onDomMutated: MutationCallback = (records) => {
 /**
  * Helper to generate Storybook game engine instance
  * @param storyFn The storybook fn to pass the engine to
+ * @param options Engine options to override the default behavior of the engine on storybook (see EngineOptions)
  */
-export const withEngine = (storyFn: (game: Engine, args?: Record<string, any>) => void) => {
+export const withEngine = (storyFn: (game: Engine, args?: Record<string, any>) => void, options?: EngineOptions) => {
   if (!observer) {
     observer = new MutationObserver(onDomMutated);
     observer.observe(document.getElementById('root'), { childList: true, subtree: true });
@@ -47,7 +48,8 @@ export const withEngine = (storyFn: (game: Engine, args?: Record<string, any>) =
       canvasElement: canvas,
       displayMode: DisplayMode.FitScreen,
       suppressPlayButton: true,
-      pointerScope: Input.PointerScope.Canvas
+      pointerScope: Input.PointerScope.Canvas,
+      ...options
     });
 
     Logger.getInstance().info('Press \'d\' for debug mode');