Merge pull request #17 from devshareacademy/geometry-mask

Geometry mask phaser 3 demo
devshareacademy · Oct 17, 2023 · 8614ceb · 8614ceb
2 parents 916a147 + f21bd6b
commit 8614ceb
Show file tree

Hide file tree

Showing 10 changed files with 114,804 additions and 0 deletions.
diff --git a/phaser-3/3.60/geometry-camera-mask/.vscode/extensions.json b/phaser-3/3.60/geometry-camera-mask/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode", "ritwickdey.LiveServer"]
+}
diff --git a/phaser-3/3.60/geometry-camera-mask/.vscode/settings.json b/phaser-3/3.60/geometry-camera-mask/.vscode/settings.json
@@ -0,0 +1,11 @@
+{
+  "eslint.format.enable": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "prettier.singleQuote": true,
+  "prettier.semi": true,
+  "editor.formatOnSave": true,
+  "cSpell.words": []
+}
diff --git a/phaser-3/3.60/geometry-camera-mask/README.md b/phaser-3/3.60/geometry-camera-mask/README.md
@@ -0,0 +1,17 @@
+# Phaser 3 - Geometry Camera Mask
+
+![demo](docs/example.gif)
+
+TBD
+
+For a detailed walkthrough, checkout my video on YouTube here:
+
+Coming soon...
+
+Link to live demo:
+
+[Simple Scene Transitions](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/simple-scene-transitions/index.html)
+
+## Credit
+
+The image that was used in this demo was created by [ansimuz](https://ansimuz.itch.io/sunnyland-forest-of-illusion).
diff --git a/phaser-3/3.60/geometry-camera-mask/assets/preview.png b/phaser-3/3.60/geometry-camera-mask/assets/preview.png
diff --git a/phaser-3/3.60/geometry-camera-mask/assets/public-license.txt b/phaser-3/3.60/geometry-camera-mask/assets/public-license.txt
@@ -0,0 +1,23 @@
+Artwork created by Luis Zuno (@ansimuz)
+
+
+LICENSE:
+You may use these assets in personal or commercial projects. You can modify these assets to suit your needs. You can re-distribute the file.
+Credit no required but appreciated it.
+
+____________________
+
+LINKS
+
+Twitter @ansimuz
+
+Support my work at Patreon https://www.patreon.com/ansimuz
+
+Buy my stuff https://ansimuz.itch.io/
+
+Get more Free Assetslike these at: http://www.ansimuz.com
+
+
+____________________
+
+
diff --git a/phaser-3/3.60/geometry-camera-mask/index.html b/phaser-3/3.60/geometry-camera-mask/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Phaser 3 - Geometry Mask Demo</title>
+    <style>
+      html,
+      body,
+      .container {
+        margin: 0px;
+        height: 100vh;
+        width: 100vw;
+        overflow: hidden;
+        background: #d7d7d7;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
+    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
+  </head>
+  <body>
+    <div class="container" id="game-container">
+      <div>Press the Space key to switch between examples</div>
+    </div>
+    <script type="module" src="src/main.js"></script>
+  </body>
+</html>
diff --git a/phaser-3/3.60/geometry-camera-mask/jsconfig.json b/phaser-3/3.60/geometry-camera-mask/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "es6",
+    "target": "es6",
+    "checkJs": true
+  }
+}
diff --git a/phaser-3/3.60/geometry-camera-mask/src/lib/phaser.js b/phaser-3/3.60/geometry-camera-mask/src/lib/phaser.js
@@ -0,0 +1 @@
+export default window.Phaser;
diff --git a/phaser-3/3.60/geometry-camera-mask/src/main.js b/phaser-3/3.60/geometry-camera-mask/src/main.js
@@ -0,0 +1,103 @@
+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() {
+    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.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() {
+    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.add.image(0, 0, ASSET_KEY).setOrigin(0).setScale;
+
+    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: () => {
+          mask.destroy();
+          this.cameras.main.clearMask();
+
+          this.input.keyboard.once('keydown-SPACE', () => {
+            this.scene.start(Scene1.name);
+          });
+        },
+      });
+    });
+  }
+}
+
+const gameConfig = {
+  type: Phaser.CANVAS,
+  pixelArt: true,
+  scale: {
+    parent: 'game-container',
+    width: 1000,
+    height: 750,
+  },
+};
+
+const game = new Phaser.Game(gameConfig);
+game.scene.add(Scene1.name, Scene1);
+game.scene.add(Scene2.name, Scene2);
+game.scene.start(Scene1.name);