added new example

Signed-off-by: Scott Westover <[email protected]>
devshareacademy · Nov 15, 2024 · 02c6e07 · 02c6e07
1 parent 55c1653
commit 02c6e07
Show file tree

Hide file tree

Showing 6 changed files with 118,533 additions and 0 deletions.
diff --git a/phaser-3/native-custom-fonts/assets/fonts/Kenney-Future-Narrow.ttf b/phaser-3/native-custom-fonts/assets/fonts/Kenney-Future-Narrow.ttf
diff --git a/phaser-3/native-custom-fonts/assets/fonts/License.txt b/phaser-3/native-custom-fonts/assets/fonts/License.txt
@@ -0,0 +1,22 @@
+
+
+	Font package (free)
+
+	Created/distributed by Kenney (www.kenney.nl)
+
+			------------------------------
+
+	License: (Creative Commons Zero, CC0)
+	http://creativecommons.org/publicdomain/zero/1.0/
+
+	This content is free to use in personal, educational and commercial projects.
+	Support us by crediting (Kenney or www.kenney.nl), this is not mandatory.
+
+			------------------------------
+
+	Donate:   http://support.kenney.nl
+	Request:  http://request.kenney.nl
+	Patreon:  http://patreon.com/kenney/
+
+	Follow on Twitter for updates:
+	@KenneyNL

diff --git a/phaser-3/native-custom-fonts/index.html b/phaser-3/native-custom-fonts/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Phaser 3 - Custom Fonts With Native Phaser!</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>
+    <script type="module" src="src/main.js"></script>
+  </body>
+</html>
diff --git a/phaser-3/native-custom-fonts/src/lib/phaser.js b/phaser-3/native-custom-fonts/src/lib/phaser.js
@@ -0,0 +1 @@
+export default window.Phaser;
diff --git a/phaser-3/native-custom-fonts/src/main.js b/phaser-3/native-custom-fonts/src/main.js
@@ -0,0 +1,58 @@
+import Phaser from './lib/phaser.js';
+
+class MainScene extends Phaser.Scene {
+  constructor() {
+    super(MainScene.name);
+  }
+
+  preload() {
+    this.load.font(
+      'Kenney-Future-Narrow',
+      'assets/fonts/Kenney-Future-Narrow.ttf',
+      'truetype'
+    );
+    this.load.font(
+      'PressStart2P',
+      'https://raw.githubusercontent.com/google/fonts/refs/heads/main/ofl/pressstart2p/PressStart2P-Regular.ttf',
+      'truetype'
+    );
+  }
+
+  create() {
+    const w = this.scale.width / 2;
+    this.add
+      .text(w, 100, 'Default Font Family', {
+        fontSize: 40,
+        color: '#ffffff',
+      })
+      .setOrigin(0.5);
+    this.add
+      .text(w, 200, 'Press Start 2P', {
+        fontSize: 40,
+        color: '#ffffff',
+        fontFamily: 'PressStart2P',
+      })
+      .setOrigin(0.5);
+    this.add
+      .text(w, 300, 'Kenny Future Narrow', {
+        fontSize: 40,
+        color: '#ffffff',
+        fontFamily: 'Kenney-Future-Narrow',
+      })
+      .setOrigin(0.5);
+  }
+}
+
+const gameConfig = {
+  type: Phaser.CANVAS,
+  pixelArt: true,
+  scale: {
+    parent: 'game-container',
+    width: 800,
+    height: 480,
+  },
+  backgroundColor: '#5c5b5b',
+  scene: [MainScene],
+};
+
+const game = new Phaser.Game(gameConfig);