finished geometry mask example

Signed-off-by: Scott Westover <[email protected]>
devshareacademy · Oct 17, 2023 · 6100d46 · 6100d46
1 parent 771635d
commit 6100d46
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 23 deletions.
diff --git a/phaser-3/3.60/geometry-camera-mask/index.html b/phaser-3/3.60/geometry-camera-mask/index.html
@@ -22,7 +22,7 @@
   </head>
   <body>
     <div class="container" id="game-container">
-      <div>Press the Space key to see the transition!</div>
+      <div>Press the Space key to switch between examples</div>
     </div>
     <script type="module" src="src/main.js"></script>
   </body>

diff --git a/phaser-3/3.60/geometry-camera-mask/src/main.js b/phaser-3/3.60/geometry-camera-mask/src/main.js
@@ -1,44 +1,90 @@
 import Phaser from './lib/phaser.js';
 
+const ASSET_KEY = 'BG';
+
 class Scene1 extends Phaser.Scene {
+  /** @type {Phaser.GameObjects.Graphics} */
+  #g;
+
   constructor() {
     super(Scene1.name);
   }
 
+  preload() {
+    this.load.image(ASSET_KEY, '/assets/preview.png');
+  }
+
   create() {
-    this.add.rectangle(100, 100, 600, 400, 0x0000ff, 0.4).setOrigin(0);
+    const { width, height } = this.scale;
+    this.#g = this.add.graphics();
+    this.#g.fillCircle(width / 2, height / 2, 150);
+    const mask = this.#g.createGeometryMask();
+    this.cameras.main.setMask(mask);
+
+    this.add.image(0, 0, ASSET_KEY).setOrigin(0).setScale;
 
     this.input.keyboard.once('keydown-SPACE', () => {
-      this.cameras.main.fadeOut(1000, 0, 0, 0, (camera, progress) => {
-        console.log(progress);
-        if (progress === 1) {
-          this.scene.start(Scene2.name);
-        }
-      });
+      this.scene.start(Scene2.name);
     });
   }
+
+  update() {
+    const p = this.input.activePointer;
+
+    this.#g.clear().fillCircle(p.x, p.y, 150);
+  }
 }
 
 class Scene2 extends Phaser.Scene {
   constructor() {
     super(Scene2.name);
   }
 
+  preload() {
+    this.load.image(ASSET_KEY, '/assets/preview.png');
+  }
+
   create() {
-    this.add.circle(200, 100, 200, 0x00ff00, 0.4).setOrigin(0);
+    const { width, height } = this.scale;
+    const g = this.add.graphics();
+    const rectShape = new Phaser.Geom.Rectangle(0, height / 2, width, 0);
+    g.fillRectShape(rectShape);
+    const mask = g.createGeometryMask();
+    this.cameras.main.setMask(mask);
 
-    this.input.keyboard.once('keydown-SPACE', () => {
-      this.cameras.main.fadeOut(1000, 0, 0, 0);
-    });
+    this.add.image(0, 0, ASSET_KEY).setOrigin(0).setScale;
 
-    this.cameras.main.once(
-      Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE,
-      () => {
-        this.scene.start(Scene1.name);
-      }
-    );
+    this.events.once(Phaser.Scenes.Events.CREATE, () => {
+      this.tweens.add({
+        onUpdate: () => {
+          g.clear().fillRectShape(rectShape);
+        },
+        delay: 400,
+        duration: 1500,
+        height: {
+          ease: Phaser.Math.Easing.Expo.InOut,
+          from: 0,
+          start: 0,
+          to: height,
+        },
+        y: {
+          ease: Phaser.Math.Easing.Expo.InOut,
+          from: height / 2,
+          start: height / 2,
+          to: 0,
+        },
+        targets: rectShape,
+        onComplete: () => {
+          this.sceneTransitionComplete = true;
+          mask.destroy();
+          this.cameras.main.clearMask();
 
-    this.cameras.main.fadeIn(1000, 0, 0, 0);
+          this.input.keyboard.once('keydown-SPACE', () => {
+            this.scene.start(Scene1.name);
+          });
+        },
+      });
+    });
   }
 }
 
@@ -47,11 +93,12 @@ const gameConfig = {
   pixelArt: true,
   scale: {
     parent: 'game-container',
-    width: 800,
-    height: 600,
+    width: 1000,
+    height: 750,
   },
-  backgroundColor: '#5c5b5b',
-  scene: [Scene1, Scene2],
 };
 
 const game = new Phaser.Game(gameConfig);
+game.scene.add(Scene1.name, Scene1);
+game.scene.add(Scene2.name, Scene2);
+game.scene.start(Scene1.name);