main.ts

import { Game, ScaleManager } from "phaser-ce";
import Player from "./player";

declare class WebFont {
    public static load(options: object): void;
}

window.onload = () => {
    WebFont.load({
        active: () => {
            const game = new Game(800, 600, Phaser.AUTO, "phaser-example", { create, render });

            let text;

            function create() {
                game.scale.scaleMode = ScaleManager.SHOW_ALL;
                game.scale.pageAlignHorizontally = true;
                game.scale.pageAlignVertically = true;

                // const bar = game.add.graphics();
                const bar = game.add.graphics(0, 100);
                bar.beginFill(0x000000, 0.2);
                bar.drawRect(0, 100, 800, 100);

                const style = { font: "32px SongTi", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };

                //  The Text is positioned at 0, 100
                text = game.add.text(0, 0, "中文 2.6 text bounds", style);

                //  We'll set the bounds to be from x0, y100 and be 800px wide by 100px high
                text.setTextBounds(0, 100, 800, 100);

            }

            function render() {
                // game.debug.geom(text.textBounds);
            }
        },
        custom: {
            families: ["SongTi"],
            urls: ["assets/fonts/font.css"],
        },
    });
};