[Update] WebFontFile utils

HoangTran0410 · HoangTran0410 · commit da8f41a2e591 · 2021-01-20T12:41:59.000+07:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,7 +25,8 @@
 		"typescript": "^3.8.3"
 	},
 	"dependencies": {
-		"phaser": "^3.50.1"
+		"phaser": "^3.50.1",
+		"webfontloader": "^1.6.28"
 	},
 	"parcelCleanPaths": [
 		"dist"
diff --git a/src/index.html b/src/index.html
@@ -5,6 +5,8 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>LOL2D</title>
+
+	<link rel="stylesheet" href="style.css">
 </head>
 
 <body>
diff --git a/src/main.ts b/src/main.ts
@@ -6,10 +6,18 @@ const config: Phaser.Types.Core.GameConfig = {
     type: Phaser.AUTO,
     width: 800,
     height: 600,
+    render: {
+        pixelArt: true,
+    },
+    scale: {
+        mode: Phaser.Scale.FIT,
+        autoCenter: Phaser.Scale.CENTER_BOTH,
+    },
     physics: {
         default: 'arcade',
         arcade: {
             gravity: { y: 200 },
+            debug: true,
         },
     },
     scene: [HelloWorldScene],
diff --git a/src/scenes/HelloWorldScene.ts b/src/scenes/HelloWorldScene.ts
@@ -1,35 +1,27 @@
 import Phaser from 'phaser'
 
+import WebFontFile from '~/utils/WebFontFile'
+
 export default class HelloWorldScene extends Phaser.Scene {
     constructor() {
         super('hello-world')
     }
 
     preload() {
-        this.load.setBaseURL('http://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')
+        const fonts = new WebFontFile(this.load, 'Roboto Mono')
+        this.load.addFile(fonts)
     }
 
     create() {
-        this.add.image(400, 300, 'sky')
-
-        const particles = this.add.particles('red')
-
-        const emitter = particles.createEmitter({
-            speed: 100,
-            scale: { start: 1, end: 0 },
-            blendMode: 'ADD',
-        })
-
-        const logo = this.physics.add.image(400, 100, 'logo')
-
-        logo.setVelocity(100, 200)
-        logo.setBounce(1, 1)
-        logo.setCollideWorldBounds(true)
-
-        emitter.startFollow(logo)
+        const x = this.scale.width * 0.5
+        const y = this.scale.height * 0.5
+
+        this.add
+            .text(x, y, 'Bầu trời trong xanh thăm thẳm, không một gợn mây!', {
+                fontFamily: 'Roboto Mono',
+                fontSize: '13px',
+                color: '#fff',
+            })
+            .setOrigin(0.5, 0.5)
     }
 }
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,6 @@
+body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: black;
+}
diff --git a/src/utils/WebFontFile.ts b/src/utils/WebFontFile.ts
@@ -0,0 +1,43 @@
+import Phaser from 'phaser'
+
+import WebFontLoader from 'webfontloader'
+
+export default class WebFontFile extends Phaser.Loader.File {
+    private fontNames: string[] = []
+    private service: string = ''
+
+    constructor(
+        loader: Phaser.Loader.LoaderPlugin,
+        fontNames: string | string[],
+        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)
+    }
+}
