added demo for phaser 3 drag events

Signed-off-by: Scott Westover <[email protected]>
devshareacademy · Jan 15, 2024 · 2e3ddc1 · 2e3ddc1
1 parent 3cbb439
commit 2e3ddc1
Show file tree

Hide file tree

Showing 10 changed files with 114,770 additions and 0 deletions.
diff --git a/phaser-3/3.60/drag-game-objects/.vscode/extensions.json b/phaser-3/3.60/drag-game-objects/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode", "ritwickdey.LiveServer"]
+}
diff --git a/phaser-3/3.60/drag-game-objects/.vscode/settings.json b/phaser-3/3.60/drag-game-objects/.vscode/settings.json
@@ -0,0 +1,12 @@
+{
+  "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": [],
+  "prettier.printWidth": 120
+}
diff --git a/phaser-3/3.60/drag-game-objects/README.md b/phaser-3/3.60/drag-game-objects/README.md
@@ -0,0 +1,13 @@
+# Phaser 3 - Draggable Game Objects Demo
+
+![demo](docs/example.gif)
+
+A quick demo of how you can use the built in touch events of Phaser 3 to allow you to drag game objects in your Phaser 3 Scene.
+
+For a detailed walkthrough, checkout my video on YouTube here:
+
+Coming soon...
+
+Link to live demo:
+
+[Draggable Game Objects Demo](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/drag-game-objects/index.html)
diff --git a/phaser-3/3.60/drag-game-objects/docs/example.gif b/phaser-3/3.60/drag-game-objects/docs/example.gif
diff --git a/phaser-3/3.60/drag-game-objects/index.html b/phaser-3/3.60/drag-game-objects/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Phaser 3 - Drag Game Objects Demo</title>
+    <style>
+      html,
+      body {
+        margin: 0px;
+      }
+    </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.60/drag-game-objects/jsconfig.json b/phaser-3/3.60/drag-game-objects/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "es6",
+    "target": "es6",
+    "checkJs": true
+  }
+}
diff --git a/phaser-3/3.60/drag-game-objects/src/draggable.js b/phaser-3/3.60/drag-game-objects/src/draggable.js
@@ -0,0 +1,68 @@
+import Phaser from './lib/phaser.js';
+
+/**
+ * Uses the Phaser 3 built in drag events to allow a game object to be moved around a Phaser 3 Scene instance.
+ * The method will listen for the GameObject Destroy event and cleanup the various event listeners that
+ * were registered.
+ * @param {Phaser.GameObjects.Image | Phaser.GameObjects.Rectangle} gameObject
+ * @param {boolean} [enableLogs=false] enables logging for the various drag event callbacks. If the gameObject.name field
+ *                                     is populated, this will be included in the log line.
+ */
+export function makeDraggable(gameObject, enableLogs = false) {
+  gameObject.setInteractive();
+
+  /**
+   * @param {string} message
+   * @returns {void}
+   */
+  function log(message) {
+    if (enableLogs) {
+      console.debug(message);
+    }
+  }
+
+  /**
+   * @param {Phaser.Input.Pointer} pointer
+   * @returns {void}
+   */
+  function onDrag(pointer) {
+    log(`[makeDraggable:onDrag] invoked for game object: ${gameObject.name}`);
+    gameObject.x = pointer.x;
+    gameObject.y = pointer.y;
+  }
+
+  /**
+   * @returns {void}
+   */
+  function stopDrag() {
+    log(`[makeDraggable:stopDrag] invoked for game object: ${gameObject.name}`);
+    gameObject.on(Phaser.Input.Events.POINTER_DOWN, startDrag);
+    gameObject.off(Phaser.Input.Events.POINTER_MOVE, onDrag);
+    gameObject.off(Phaser.Input.Events.POINTER_UP, stopDrag);
+    gameObject.x = Math.round(gameObject.x);
+    gameObject.y = Math.round(gameObject.y);
+  }
+
+  /**
+   * @returns {void}
+   */
+  function startDrag() {
+    log(`[makeDraggable:startDrag] invoked for game object: ${gameObject.name}`);
+    gameObject.off(Phaser.Input.Events.POINTER_DOWN, startDrag);
+    gameObject.on(Phaser.Input.Events.POINTER_MOVE, onDrag);
+    gameObject.on(Phaser.Input.Events.POINTER_UP, stopDrag);
+  }
+
+  /**
+   * @returns {void}
+   */
+  function destroy() {
+    log(`[makeDraggable:destroy] invoked for game object: ${gameObject.name}`);
+    gameObject.off(Phaser.Input.Events.POINTER_DOWN, startDrag);
+    gameObject.off(Phaser.Input.Events.POINTER_MOVE, onDrag);
+    gameObject.off(Phaser.Input.Events.POINTER_UP, stopDrag);
+  }
+
+  gameObject.on(Phaser.Input.Events.POINTER_DOWN, startDrag);
+  gameObject.once(Phaser.GameObjects.Events.DESTROY, destroy);
+}
diff --git a/phaser-3/3.60/drag-game-objects/src/lib/phaser.js b/phaser-3/3.60/drag-game-objects/src/lib/phaser.js
@@ -0,0 +1 @@
+export default window.Phaser;
diff --git a/phaser-3/3.60/drag-game-objects/src/main.js b/phaser-3/3.60/drag-game-objects/src/main.js
@@ -0,0 +1,38 @@
+import { makeDraggable } from './draggable.js';
+import Phaser from './lib/phaser.js';
+
+class GameScene extends Phaser.Scene {
+  constructor() {
+    super(GameScene.name);
+  }
+
+  create() {
+    const rectangle = this.add.rectangle(this.scale.width / 2, this.scale.height / 2, 100, 100, 0xffff00);
+    makeDraggable(rectangle);
+    this.add
+      .text(this.scale.width / 2, 550, 'try dragging the rectangle around the scene', {
+        align: 'center',
+        fontSize: '22px',
+        wordWrap: {
+          width: this.scale.width - 50,
+        },
+      })
+      .setOrigin(0.5);
+  }
+}
+
+const gameConfig = {
+  type: Phaser.CANVAS,
+  pixelArt: true,
+  scale: {
+    parent: 'game-container',
+    width: 800,
+    height: 600,
+    autoCenter: Phaser.Scale.CENTER_BOTH,
+    mode: Phaser.Scale.FIT,
+  },
+  backgroundColor: '#5c5b5b',
+  scene: [GameScene],
+};
+
+const game = new Phaser.Game(gameConfig);