wip: adding code from examples

Signed-off-by: Scott Westover <[email protected]>
devshareacademy · Feb 13, 2024 · 9792a7b · 9792a7b
1 parent 8941178
commit 9792a7b
Show file tree

Hide file tree

Showing 26 changed files with 229,527 additions and 0 deletions.
diff --git a/phaser-3/3.70/draggable-demo/.vscode/extensions.json b/phaser-3/3.70/draggable-demo/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode", "ritwickdey.LiveServer"]
+}
diff --git a/phaser-3/3.70/draggable-demo/.vscode/settings.json b/phaser-3/3.70/draggable-demo/.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": ["anims"]
+}
diff --git a/phaser-3/3.70/draggable-demo/README.md b/phaser-3/3.70/draggable-demo/README.md
@@ -0,0 +1,17 @@
+# Phaser 3 - Animation Completion Event Demo
+
+![demo](docs/example.gif)
+
+A quick demo of how you can use the built in events of Phaser 3 to know when an animation is completed, that way you can use that event to perform some additional game logic.
+
+For a detailed walkthrough, checkout my video on YouTube here:
+
+[<img src="https://i.ytimg.com/vi/W-INH27SjKc/hqdefault.jpg">](https://youtu.be/W-INH27SjKc "Phaser 3 Mastery: How to Listen and React to Animation Completion Events")
+
+Link to live demo:
+
+[Animation Completion Event Demo](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/animation-completion-events/index.html)
+
+## Credit
+
+The spritesheet that was used in this demo were created by [Essssam](https://essssam.itch.io/rocky-roads).
diff --git a/phaser-3/3.70/draggable-demo/assets/starfighter/background.png b/phaser-3/3.70/draggable-demo/assets/starfighter/background.png
diff --git a/phaser-3/3.70/draggable-demo/assets/starfighter/big-a.png b/phaser-3/3.70/draggable-demo/assets/starfighter/big-a.png
diff --git a/phaser-3/3.70/draggable-demo/assets/starfighter/public-license.txt b/phaser-3/3.70/draggable-demo/assets/starfighter/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.70/draggable-demo/assets/starfighter/ship-a1.png b/phaser-3/3.70/draggable-demo/assets/starfighter/ship-a1.png
diff --git a/phaser-3/3.70/draggable-demo/docs/example.gif b/phaser-3/3.70/draggable-demo/docs/example.gif
diff --git a/phaser-3/3.70/draggable-demo/index.html b/phaser-3/3.70/draggable-demo/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Phaser 3 - Draggable Objects Demo</title>
+    <style>
+      html,
+      body,
+      .container {
+        margin: 0px;
+        height: 100vh;
+        width: 100vw;
+        overflow: hidden;
+        background: #d7d7d7;
+      }
+    </style>
+    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
+  </head>
+  <body>
+    <div class="container" id="game-container"></div>
+    <script type="module" src="src/main.js"></script>
+  </body>
+</html>
diff --git a/phaser-3/3.70/draggable-demo/jsconfig.json b/phaser-3/3.70/draggable-demo/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "es6",
+    "target": "es2017",
+    "checkJs": true
+  }
+}
diff --git a/phaser-3/3.70/draggable-demo/src/lib/phaser.js b/phaser-3/3.70/draggable-demo/src/lib/phaser.js
@@ -0,0 +1 @@
+export default window.Phaser;
diff --git a/phaser-3/3.70/draggable-demo/src/main.js b/phaser-3/3.70/draggable-demo/src/main.js
@@ -0,0 +1,73 @@
+import Phaser from './lib/phaser.js';
+
+const ASSETS = {
+  BACKGROUND: { key: 'BACKGROUND', path: 'background.png' },
+  SHIP: { key: 'SHIP', path: 'ship-a1.png' },
+  ROCK: { key: 'ROCK', path: 'big-a.png' },
+};
+
+export class Game extends Phaser.Scene {
+  constructor() {
+    super({ key: 'Game' });
+  }
+
+  preload() {
+    this.load.setPath('assets/starfighter');
+    Object.values(ASSETS).forEach((asset) => {
+      this.load.image(asset.key, asset.path);
+    });
+  }
+
+  create() {
+    this.add
+      .image(
+        this.scale.width / 2,
+        this.scale.height / 2,
+        ASSETS.BACKGROUND.key,
+        0
+      )
+      .setAngle(-90)
+      .setAlpha(0.7)
+      .setScale(2.5);
+    const ship = this.add
+      .image(this.scale.width / 2, this.scale.height - 200, ASSETS.SHIP.key, 0)
+      .setScale(3);
+    ship.setInteractive({
+      draggable: true,
+    });
+    ship.on('drag', (pointer, dragX, dragY) => {
+      console.log(pointer);
+      console.log(dragX, dragY);
+      ship.setPosition(dragX, dragY);
+    });
+
+    const rock = this.add
+      .image(this.scale.width / 2, 150, ASSETS.ROCK.key, 0)
+      .setScale(3);
+
+    rock.setInteractive({
+      draggable: true,
+    });
+
+    rock.on('drag', (pointer, x, y) => {
+      rock.x = x;
+      rock.y = y;
+    });
+  }
+}
+
+const gameConfig = {
+  type: Phaser.CANVAS,
+  pixelArt: true,
+  scale: {
+    parent: 'game-container',
+    width: window.innerWidth, //1080,
+    height: window.innerHeight, //1920,
+    autoCenter: Phaser.Scale.CENTER_BOTH,
+    mode: Phaser.Scale.RESIZE,
+  },
+  backgroundColor: '#000000',
+  scene: [Game],
+};
+
+const game = new Phaser.Game(gameConfig);