diff --git a/src/components/UI.ts b/src/components/UI.ts index 075fa28..045bf41 100644 --- a/src/components/UI.ts +++ b/src/components/UI.ts @@ -21,7 +21,13 @@ export class UI extends Phaser.GameObjects.Container { this.background.setScale(panelHeight / this.background.height); this.panel.add(this.background); - this.text = this.scene.createText(-50, 0, 60, "#FFFFFF", "Score: 123"); + this.text = this.scene.addText({ + x: -50, + y: 0, + size: 60, + color: "#FFFFFF", + text: "Score: 123", + }); this.text.setStroke("black", 4); this.text.setOrigin(0, 0.5); this.panel.add(this.text); diff --git a/src/scenes/BaseScene.ts b/src/scenes/BaseScene.ts index 7d89877..d1cf7c4 100644 --- a/src/scenes/BaseScene.ts +++ b/src/scenes/BaseScene.ts @@ -1,3 +1,14 @@ +export interface TextStyle { + fontFamily?: string; + x?: number; + y?: number; + size?: number; + weight?: number; + color?: string; + alpha?: number; + text?: string; +} + export class BaseScene extends Phaser.Scene { protected flashRect: Phaser.GameObjects.Rectangle | null; protected cameraShakeValue: number; @@ -56,19 +67,24 @@ export class BaseScene extends Phaser.Scene { } // Creates Phaser text object - createText( - x: number = 0, - y: number = 0, - size: number = 20, - color: string = "#FFF", - text: string = "" - ): Phaser.GameObjects.Text { + addText({ + fontFamily = "Lato", + x = 0, + y = 0, + size = 12, + weight = 500, + color = "#FFFFFF", + alpha = 1.0, + text = "", + }: TextStyle): Phaser.GameObjects.Text { return this.add .text(x, y, text, { - fontFamily: "Game Font", + fontFamily, fontSize: Math.max(size, 1) + "px", + fontStyle: weight.toString(), color: color, }) + .setAlpha(alpha) .setPadding(2); } diff --git a/src/scenes/PreloadScene.ts b/src/scenes/PreloadScene.ts index 4d95f76..63a454c 100644 --- a/src/scenes/PreloadScene.ts +++ b/src/scenes/PreloadScene.ts @@ -36,14 +36,20 @@ export class PreloadScene extends BaseScene { let bar = this.add.rectangle(x, y, 1, 8, 0xdddddd).setOrigin(0, 0.5); // Loading text - this.createText(x, y, 30, "#DDDDDD", "Loading...").setOrigin(0, 1.5); - this.createText( - this.W, - this.H, - 30, - "#DDDDDD", - `${title} ${version}` - ).setOrigin(1, 1); + this.addText({ + x, + y, + size: 30, + color: "#DDDDDD", + text: "Loading...", + }).setOrigin(0, 1.5); + this.addText({ + x: this.W, + y: this.H, + size: 30, + color: "#DDDDDD", + text: `${title} ${version}`, + }).setOrigin(1, 1); // Listener this.load.on("progress", (progress: number) => { diff --git a/src/scenes/TitleScene.ts b/src/scenes/TitleScene.ts index e70a1ae..74593ad 100644 --- a/src/scenes/TitleScene.ts +++ b/src/scenes/TitleScene.ts @@ -59,39 +59,51 @@ export class TitleScene extends BaseScene { this.foreground.y += 1000; this.character.y += 1000; - this.title = this.createText( - 0.25 * this.W, - 0.7 * this.H, - 160, - "#000", - "Game Title" - ); + this.title = this.addText({ + x: 0.25 * this.W, + y: 0.7 * this.H, + size: 160, + color: "#000", + text: "Game Title", + }); this.title.setOrigin(0.5); this.title.setStroke("#FFF", 8); this.title.setPadding(2); this.title.setVisible(false); this.title.setAlpha(0); - this.subtitle = this.createText( - 0.25 * this.W, - 0.87 * this.H, - 120, - "#000", - "Tap to start" - ); + this.subtitle = this.addText({ + x: 0.25 * this.W, + y: 0.87 * this.H, + size: 120, + color: "#000", + text: "Tap to start", + }); this.subtitle.setOrigin(0.5); this.subtitle.setStroke("#FFF", 3); this.subtitle.setPadding(2); this.subtitle.setVisible(false); this.subtitle.setAlpha(0); - this.tap = this.createText(this.CX, this.CY, 140, "#000", "Tap to focus"); + this.tap = this.addText({ + x: this.CX, + y: this.CY, + size: 140, + color: "#000", + text: "Tap to focus", + }); this.tap.setOrigin(0.5); this.tap.setAlpha(-1); this.tap.setStroke("#FFF", 4); this.tap.setPadding(2); - this.version = this.createText(this.W, this.H, 40, "#000", version); + this.version = this.addText({ + x: this.W, + y: this.H, + size: 40, + color: "#000", + text: version, + }); this.version.setOrigin(1, 1); this.version.setAlpha(-1); this.version.setStroke("#FFF", 4); @@ -101,25 +113,25 @@ export class TitleScene extends BaseScene { this.credits.setVisible(false); this.credits.setAlpha(0); - let credits1 = this.createText( - 0.65 * this.W, - 0, - 40, - "#c2185b", - creditsLeft - ); + let credits1 = this.addText({ + x: 0.65 * this.W, + y: 0, + size: 40, + color: "#c2185b", + text: creditsLeft, + }); credits1.setStroke("#FFF", 10); credits1.setPadding(2); credits1.setLineSpacing(0); this.credits.add(credits1); - let credits2 = this.createText( - 0.85 * this.W, - 0, - 40, - "#c2185b", - creditsRight - ); + let credits2 = this.addText({ + x: 0.85 * this.W, + y: 0, + size: 40, + color: "#c2185b", + text: creditsRight, + }); credits2.setStroke("#FFF", 10); credits2.setPadding(2); credits2.setLineSpacing(0);