今日ははじめてのPhaser3です。

はじめてのPhaser3

はじめてのPhaser3

フォルダ構成

まずはフォルダ構成と本日作成する最小限のファイル一覧から。

<root>
 |- index.html
 |- src
 |    |- index.ts
 |    |- scene
 |           |- Scenes.ts
 |           |- GameScene.ts
 |- dist
      |- index.js

index.html

まずはhtmlから。ここでは、typescriptをトランスパイルした後のindex.jsを読み込むことだけを記載しています。

index.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>SRPG：Javascript版</title>
   <script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
   <script type="text/javascript" src="./dist/index.js"></script>
</head>
</head>
<body>
    <div id="mainFrame"></div>
</body>
</html>

ポイントは<div id="mainFrame"></div>ですね。後で出てくるconfig定数の中で、このid(mainFrame)を指定します。

index.ts / index.js

index.jsは、index.tsを元にtypesciprtからのトランスパイルした後に出力されるので、index.tsを作成すればOKです。

index.ts

import 'phaser';
import Scenes from "./view/scene/Scenes";

const config: Phaser.Types.Core.GameConfig = {
    // 画面サイズ
    width: 1024,     // 横幅
    height: 768,     // 縦幅
    type: Phaser.AUTO,
    // ゲーム描画先
    parent: 'mainFrame',  // DIVタグ
    scale: {
        mode: Phaser.Scale.NONE,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        parent: 'mainFrame'
    },
    scene: Scenes,
}

// Gameクラスの子クラスを作成
export class SRPGGame extends Phaser.Game {
    constructor(config: Phaser.Types.Core.GameConfig) {
        super(config);
    }
}

// HTMLがロードされた後にインスタンスを生成
window.addEventListener('load', () => {
    const game = new SRPGGame(config);

})

ポイントがいくつかあります。

Scene

import Scenes from "./view/scene/Scenes";

Phaser3のページ切り替え単位は「Scene（シーン）」になります。このSceneを切り替えることによって、画面遷移を表現することがあります

preload、create、update等を指定しているプログラムソースもありますが、これはPhaser.Gameを継承しない場合です。

今回は、Phaser.Sceneを継承したクラスを作って登録することにします。今回は、そのSceneを集めたScenes.tsを作ってみました。

Scenes.ts

import GameScene from './GameScene';

export default [GameScene];
export { GameScene };

とりあえずは、１クラス(GameScene)のみ読み込んでいます。

config定数

const config: Phaser.Types.Core.GameConfig

この定数で初期設定を実施します。

width/height

描画の範囲をピクセルで指定します。

type

type属性は、CANVASで実装するかWebGLかを選ぶもので、AUTOにするとWebGLを優先して使ってくれて、WebGLが使えない時に、自動的にCANVASを使用してくれます。

parent

parent属性はHTMLのどのタグに埋め込むのかをidを記載します。ここではmainFrame（divタグ）にしています。

scale

scale属性はその名の通り、描画領域の拡大・縮小のポリシーを設定するものです。 mode: Phaser.Scale.SCALE, を指定すると、その解像度で作ってくれますが、BrowserのWindows一杯に描いてくれて、Windowを狭めると、中身のPhaser3の画面も縮むような仕様です。

scenes

これがGameで登場するすべてのSceneを設定するところで、上記サンプルでは、ScenesをScenes.tsでexportして、index.tsで読み込んだ変数そのものを設定しています。

GameScene.ts

そして、メインクラスがこのGameScene.tsです。まずは空で作ります（クラス継承だけお忘れなく） GameScene.ts

    export default class GameScene extends Phaser.Scene {
    }

ビルド＆テスト

これでビルドしてみます。

ビルドするnpmコマンドを実行するフォルダですが、rootフォルダになります。 (package.jsonやwebpack.config.js、tsconfig.jsonと同じフォルダ)

$ npm run build

> hatena@1.0.0 build /Users/mt/Programs/nodejs_vscode/hatena
> webpack --mode development

asset index.js 6.99 MiB [emitted] (name: main)
modules by path ./src/view/scene/*.ts 1.3 KiB
  ./src/view/scene/Scenes.ts 229 bytes [built] [code generated]
  ./src/view/scene/GameScene.ts 1.07 KiB [built] [code generated]
./src/index.ts 1.59 KiB [built] [code generated]
./node_modules/phaser/dist/phaser.js 6.52 MiB [built] [code generated]
webpack 5.38.1 compiled successfully in 4177 ms
$

無事、ビルドが通りました。今回はコマンドから実行してみます。

$ npm run dev

> hatena@1.0.0 dev 【ディレクトリパス】/hatena
> webpack --mode development && webpack serve --open 'Google Chrome' --config ./webpack.config.js

asset index.js 6.99 MiB [compared for emit] (name: main)
modules by path ./src/view/scene/*.ts 1.3 KiB
  ./src/view/scene/Scenes.ts 229 bytes [built] [code generated]
  ./src/view/scene/GameScene.ts 1.07 KiB [built] [code generated]
./src/index.ts 1.59 KiB [built] [code generated]
./node_modules/phaser/dist/phaser.js 6.52 MiB [built] [code generated]
webpack 5.38.1 compiled successfully in 3573 ms
｢wds｣: Project is running at http://127.0.0.1:5500/
 ｢wds｣: webpack output is served from /dist/
 ｢wds｣: Content not from webpack is served from /Users/mt/Programs/nodejs_vscode/hatena
 ｢wdm｣: wait until bundle finished: /dist/index.js
 ｢wdm｣: asset index.js 6.99 MiB [emitted] (name: main)
modules by path ./src/view/scene/*.ts 1.3 KiB
  ./src/view/scene/Scenes.ts 229 bytes [built] [code generated]
  ./src/view/scene/GameScene.ts 1.07 KiB [built] [code generated]
./src/index.ts 1.59 KiB [built] [code generated]
./node_modules/phaser/dist/phaser.js 6.52 MiB [built] [code generated]
webpack 5.38.1 compiled successfully in 4083 ms
 ｢wdm｣: Compiled successfully.

実行すると無事、真っ黒い画面が出るかと思います。