Attempt to use webfont

2024-02-08 22:06:58 -05:00 · 2024-02-08 22:06:58 -05:00 · db091ccc02
commit db091ccc02
parent 2b430d0469
1 changed files with 56 additions and 10 deletions
--- a/index.html
+++ b/index.html
@ -2,31 +2,77 @@
 <html>
 <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser-arcade-physics.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
 </head>
 <body>
    <script>
+    export default class WebFontFile extends Phaser.Loader.File
+    {
+        /**
+         * @param {Phaser.Loader.LoaderPlugin} loader
+         * @param {string | string[]} fontNames
+         * @param {string} [service]
+         */
+        constructor(loader, fontNames, service = 'google')
+        {
+            super(loader, {
+                type: 'webfont',
+                key: fontNames.toString()
+            })
+
+            this.fontNames = Array.isArray(fontNames) ? fontNames : [fontNames]
+            this.service = service
+        }
+
+        load()
+        {
+            const config = {
+                active: () => {
+                    this.loader.nextFile(this, true)
+                }
+            }
+
+            switch (this.service)
+            {
+                case 'google':
+                    config['google'] = {
+                        families: this.fontNames
+                    }
+                    break
+
+                default:
+                    throw new Error('Unsupported font service')
+            }
+            
+            WebFontLoader.load(config)
+        }
+    }
    class Example extends Phaser.Scene
    {
+        constructor()
+        {
+            super('Bungee')
+        }
+
        preload ()
        {
-            this.load.setBaseURL('https://labs.phaser.io');
-
-            this.load.image('sky', 'assets/skies/space3.png');
-            this.load.image('logo', 'assets/sprites/phaser3-logo.png');
-            this.load.image('red', 'assets/particles/red.png');
+            this.load.setBaseURL('https://exevirus.github.io/Keyboard-Kingdom');
+            this.load.addFile(new WebFontFile(this.load, 'Bungee'))
+            this.load.image('red', 'keyboard.png');
        }

        create ()
        {
-            this.add.image(400, 300, 'sky');
-
-            const particles = this.add.particles(0, 0, 'red', {
+            const particles = this.add.particles(0, 0, 'key', {
                speed: 100,
-                scale: { start: 1, end: 0 },
+                scale: { start: 0.1, end: 0 },
                blendMode: 'ADD'
            });

-            const logo = this.physics.add.image(400, 100, 'logo');
+            const logo = this.add.text(400, 300, 'Hello World!', {
+			    fontFamily: '"Press Start 2P"',
+			    fontSize: '50px'
+		    })

            logo.setVelocity(100, 200);
            logo.setBounce(1, 1);