Merge pull request #27 from devshareacademy/phaser-custom-fonts-native

Phaser custom fonts native
devshareacademy · Nov 15, 2024 · 4af1714 · 4af1714
2 parents a57b105 + 2b948f7
commit 4af1714
Show file tree

Hide file tree

Showing 11 changed files with 118,571 additions and 0 deletions.
diff --git a/phaser-3/3.87/custom-fonts/.vscode/extensions.json b/phaser-3/3.87/custom-fonts/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode", "ritwickdey.LiveServer"]
+}
diff --git a/phaser-3/3.87/custom-fonts/.vscode/settings.json b/phaser-3/3.87/custom-fonts/.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": ["Kenney"]
+}
diff --git a/phaser-3/3.87/custom-fonts/README.md b/phaser-3/3.87/custom-fonts/README.md
@@ -0,0 +1,17 @@
+# Phaser 3 - Custom Fonts With Native Phaser
+
+![demo](docs/example.png)
+
+A quick demo of how you can easily use custom fonts in Phaser 3 by using the new `FontFile` Loader! This new loader is available in Phaser `3.87.0`, and it has support for `TTF/OTF` out of the box, so you no longer need to use a 3rd party font loader.
+
+For a detailed walkthrough, checkout my video on YouTube here:
+
+Coming soon...
+
+Link to live demo:
+
+[Custom Fonts](https://devshareacademy.github.io/code-examples-from-my-video-content/phaser-3/native-custom-fonts/index.html)
+
+## Credit
+
+The custom fonts that were used in this demo were created by [Kenney](https://www.kenney.nl/assets/kenney-fonts) and [CodeMan38](https://fonts.google.com/?query=CodeMan38).
diff --git a/phaser-3/3.87/custom-fonts/assets/fonts/Kenney-Future-Narrow.ttf b/phaser-3/3.87/custom-fonts/assets/fonts/Kenney-Future-Narrow.ttf
diff --git a/phaser-3/3.87/custom-fonts/assets/fonts/License.txt b/phaser-3/3.87/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/3.87/custom-fonts/docs/example.png b/phaser-3/3.87/custom-fonts/docs/example.png
diff --git a/phaser-3/3.87/custom-fonts/index.html b/phaser-3/3.87/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/3.87/custom-fonts/jsconfig.json b/phaser-3/3.87/custom-fonts/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "es6",
+    "target": "es6",
+    "checkJs": true
+  }
+}
diff --git a/phaser-3/3.87/custom-fonts/src/lib/phaser.js b/phaser-3/3.87/custom-fonts/src/lib/phaser.js
@@ -0,0 +1 @@
+export default window.Phaser;
diff --git a/phaser-3/3.87/custom-fonts/src/main.js b/phaser-3/3.87/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);
diff --git a/phaser-3/3.87/custom-fonts/src/types/phaser.d.ts b/phaser-3/3.87/custom-fonts/src/types/phaser.d.ts