Chapter 2a: PhaserJS入門・スプライト表示の基本 | TypeScript + PhaserJS チュートリアル

🎮 サンプルビルドの動作確認

実際の動作を見てみよう

この章で作成するサンプルプログラムの動作を確認できます。以下のデモでは、背景画像、プレイヤーキャラクター、敵キャラクターが表示されます。

画面サイズ: 800 × 600 | 背景: 青空 | プレイヤー: 左側 | 敵: 右側

🎮 別ウィンドウで開く

📁 サンプルファイルのダウンロード

サンプルファイルのダウンロード

以下のファイルをダウンロードして、プロジェクト作成手順に従って進めてください。

📦 ソースコード

TypeScriptソースコードとプロジェクト設定ファイル

📥 src_put_sprite.zip をダウンロード

🖼️ アセットファイル

ゲームで使用する画像ファイル

📥 public_put_sprite.zip をダウンロード

注意： ダウンロードしたファイルは、プロジェクト作成手順に従って適切に配置してください。

📁 サンプルファイルの確認

サンプルファイルの確認

以下のリンクから実際のサンプルファイルを確認できます。

🎮 デモアプリケーション

実際に動作するサンプルアプリケーション

🎮 デモを開く

🖼️ アセットファイル

使用されている画像ファイルの確認

🖼️ アセット確認

注意： デモアプリケーションは実際に動作します。アセットファイルは実際に使用されている画像ファイルです。

🛠️ プロジェクト作成手順

ステップ1: テンプレートのクローン

PhaserJSの公式TypeScriptテンプレートをクローンします。

      git clone https://github.com/phaserjs/template-webpack-ts.git put_sprite_demo cd put_sprite_demo
    

ステップ2: 既存ファイルの削除

テンプレートの既存ファイルを削除して、ダウンロードしたファイルに置き換えます。

      # srcフォルダとpublicフォルダを削除 rm -rf src rm -rf public # ダウンロードしたファイルを展開して配置 #
      src_put_sprite.zip の内容を src/ に展開 # public_put_sprite.zip の内容を public/ に展開
    

ステップ3: 依存関係のインストール

VSCodeのターミナルから必要なパッケージをインストールします。

npm install

ステップ4: 開発サーバーの起動

開発サーバーを起動して、ブラウザで動作を確認します。

npm run dev

✅ ブラウザが自動的に開き、800×600の画面に背景、プレイヤー、敵が表示されます！

💻 プログラム解説

Sceneクラスのライフサイクル

PhaserJSでは、ゲームの各画面を Scene（シーン） として管理します。Sceneクラスには以下のライフサイクルメソッドがあります：

preload()

画像や音声などのアセットを事前に読み込みます。ゲーム開始前に一度だけ実行されます。

create()

スプライトやオブジェクトを作成・配置します。preload完了後に実行されます。

update()

ゲームループ中に毎フレーム実行されます。動的な処理を記述します（次章で詳しく解説）。

PutSprite.ts の解説

今回のメインファイルである src/game/scenes/PutSprite.ts を詳しく見ていきましょう。

      import { Scene } from 'phaser'; export class PutSprite extends Scene { constructor () { super('PutSprite'); }
      preload () { // background, player, enemy をプリロード this.load.image('player', 'assets/player.png');
      this.load.image('enemy', 'assets/enemy.png'); this.load.image('background', 'assets/background.png'); } create ()
      { // background, player, enemy 配置 this.add.image(400, 300, 'background'); this.add.image(300, 300, 'player');
      this.add.image(500, 300, 'enemy'); } }
    

preload() メソッドの解説

this.load.image() の引数：

• 第1引数 - ゲーム内での識別キー名
• 第2引数 - ファイルパス（public/からの相対パス）
• 例 - 'player' キーで 'assets/player.png' を読み込み

create() メソッドの解説

this.add.image() の引数：

• 第1引数（x） - X座標位置
• 第2引数（y） - Y座標位置
• 第3引数（key） - preloadで設定したキー名

load.image と add.image について

load.image は画像の読み込み、 add.image はスプライトの作成・配置を行います。

load.image

• 画像ファイルをメモリに読み込み
• キー名で管理
• preload()でのみ使用
• 他のload系メソッドも存在（音声、スプライトシートなど）

add.image

• 読み込んだ画像をスプライトとして作成
• 座標指定で配置
• create()以降で使用
• 他のadd系メソッドも存在（テキスト、図形など）

🖼️ アセット解説

画像ファイルの配置場所

PhaserJSで使用する画像ファイルは、 public/assets/ フォルダに配置します。これはwebpackの設定で決まっています（詳細は後章で解説）。

put_sprite_demo/
├── public/
│   ├── assets/              ← 画像ファイルはここに配置
│   │   ├── player.png       ← プレイヤーキャラクター
│   │   ├── enemy.png        ← 敵キャラクター
│   │   └── background.png   ← 背景画像
│   ├── favicon.png          ← ファビコン
│   └── style.css            ← スタイルシート
├── src/
│   ├── game/
│   │   ├── scenes/
│   │   │   └── PutSprite.ts ← メインのシーンファイル
│   │   └── main.ts          ← ゲーム設定
│   └── main.ts              ← エントリーポイント
└── package.json

player.png

プレイヤーキャラクターの画像。座標(300, 300)に配置されます。

enemy.png

敵キャラクターの画像。座標(500, 300)に配置されます。

background.png

背景画像。座標(400, 300)に配置され、画面全体を覆います。

📝 アセット管理のポイント

ファイル配置のルール

• public/assets/ フォルダに配置
• ファイル名は英数字、ハイフン、アンダースコア
• PNG形式推奨（透明度対応）
• サイズは2の累乗が効率的

コードでの参照方法

• パスは 'assets/ファイル名'
• public/ は含めない
• キー名は自由に設定可能
• 日本語ファイル名は避ける

スプライト表示の基本まとめ

✅ 学習したこと

• プロジェクトの作成手順
• Sceneクラスのライフサイクル
• preload()での画像読み込み
• create()でのスプライト配置
• アセットファイルの管理

重要ポイント

• preload → create の実行順序
• キー名でのアセット管理
• 座標系の理解（左上原点）
• public/assets/ への配置
• webpack設定の理解（後章）

基本的なスプライト表示をマスターしました！これで画像を表示する基礎が身につきました。

次章では、これらの知識を活用して 実際のゲーム を作成していきます！