旧SEによる日曜プログラミング日記

趣味は作曲、自分で一から作りたがりのユーザIT子会社の旧SE(かつてはプログラマー)によるリハビリのための日曜プログラミング日記です。

Phaser3+typescriptでSRPGを開発してみる #003 はじめての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 };

とりあえずは、1クラス(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.

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

まとめ

これで最低限の準備は整いました。 次は、マップ表示にチャレンジします。 mtmusic34.hatenablog.com

過去の日記

Phaser3+typescriptでSRPGを開発してみる #001 プロローグ - 旧SEによる日曜プログラミング日記

Phaser3+typescriptでSRPGを開発してみる #002 環境設定 - 旧SEによる日曜プログラミング日記