created basic template for geometry mask

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

Hide file tree

Showing 10 changed files with 114,758 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 - Simple Scene Transitions</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 see the transition!</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,57 @@
+import Phaser from './lib/phaser.js';
+
+class Scene1 extends Phaser.Scene {
+  constructor() {
+    super(Scene1.name);
+  }
+
+  create() {
+    this.add.rectangle(100, 100, 600, 400, 0x0000ff, 0.4).setOrigin(0);
+
+    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);
+        }
+      });
+    });
+  }
+}
+
+class Scene2 extends Phaser.Scene {
+  constructor() {
+    super(Scene2.name);
+  }
+
+  create() {
+    this.add.circle(200, 100, 200, 0x00ff00, 0.4).setOrigin(0);
+
+    this.input.keyboard.once('keydown-SPACE', () => {
+      this.cameras.main.fadeOut(1000, 0, 0, 0);
+    });
+
+    this.cameras.main.once(
+      Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE,
+      () => {
+        this.scene.start(Scene1.name);
+      }
+    );
+
+    this.cameras.main.fadeIn(1000, 0, 0, 0);
+  }
+}
+
+const gameConfig = {
+  type: Phaser.CANVAS,
+  pixelArt: true,
+  scale: {
+    parent: 'game-container',
+    width: 800,
+    height: 600,
+  },
+  backgroundColor: '#5c5b5b',
+  scene: [Scene1, Scene2],
+};
+
+const game = new Phaser.Game(gameConfig);
diff --git a/phaser-3/3.60/geometry-camera-mask/src/types/phaser.d.ts b/phaser-3/3.60/geometry-camera-mask/src/types/phaser.d.ts