Phaser 3の準備

前回はTypeScriptのプロジェクトを作成しました。プロジェクトの中には既にいくつかのファイルが用意されています。これらはそのままにして中身だけ書き換えていきましょう。

index.html

index.htmlファイルでは、app.jsを読み込むscriptタグの直前にPhaser 3のjsファイルを読み込むscriptタグを追加しましょう。また、h1タグは消してしまって構いません。

<!DOCTYPE html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="//cdn.jsdelivr.net/npm/phaser@3.6.0/dist/phaser.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

TypeScriptビルドの設定

ソリューションエクスプローラーのPropertiesをダブルクリックしてプロパティ画面を開き、「TypeScriptビルド」を選択します。
そして、モジュールシステムを「AMD」にします。
その他の項目は現段階では好みで選択して構わないでしょう。ここではTypeScriptのバージョンを「使用可能な最新バージョンを使う」、保存時のコンパイルをOFFにしています。 f:id:gpnotes:20180502145332p:plain

型定義ファイルの準備

次にPhaser 3の型定義ファイルを準備します。phaser3-docリポジトリに型定義ファイルが用意されています。

github.com

typescriptフォルダの中に入っているphaser.d.tsをプロジェクトに追加します。
追加する場所はどこでもいいのですが、ここではlibフォルダの中に入れておきます。 f:id:gpnotes:20180502143612p:plain

app.ts

app.tsファイルは一旦全て消してしまって、以下のように記述します。

class MyScene extends Phaser.Scene {
    create() {
        this.add.text(100, 100, 'Phaser 3').setFontSize(64).setColor('#ff0');
    }
}

var config: GameConfig = {
    parent: 'content',
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: [MyScene]
}

window.onload = () => {
    new Phaser.Game(config);
}

書き終わったら早速F5キーを押して実行してみましょう。
800x600の黒い画面にPhaser 3と書かれた黄色い文字が表示されると思います。 f:id:gpnotes:20180502150256p:plain