BUNCHO GAMES

TypeScript + PhaserJS入門

Chapter 2: スプライト表示の基本

📖 この章で学ぶこと

  • PhaserJSでの画像の読み込み方法
  • スプライトの基本的な表示方法
  • 座標系の理解(X軸・Y軸)
  • 背景色の設定方法

🔗 前提知識

この章を始める前に、以下の基本概念を理解していることを前提とします:

📚 変数の基本 - constletの使い方

📚 データ型の基本 - 座標指定で数値を使用します

📚 nullの概念 - 画像オブジェクトの管理で使用します

📚 この章で学ぶこと

PhaserJSの基本

  • • Sceneクラスの構造
  • • preload()、create()、update()の役割
  • • 画像の読み込み方法
  • • スプライトとは何か

実践的なスキル

  • • 画像を画面に表示する方法
  • • 座標系の理解と位置指定
  • • PhaserJSの基本的な開発フロー
  • • ゲーム開発の第一歩

🛠️ プロジェクト準備

Step 1: 画像ファイルの準備

まず、表示したい画像ファイルを用意します。プロジェクトのassetsフォルダに以下の画像を配置してください。

// プロジェクト構造
project/
├── src/
│   ├── main.ts
│   └── scenes/
│       └── SpriteScene.ts
└── assets/
    ├── player.png     // キャラクター画像
    ├── background.jpg // 背景画像(オプション)
    └── logo.png       // ロゴ画像(オプション)

💡 画像について:

画像は自分で用意するか、フリー素材サイトからダウンロードしてください。 PNG形式がおすすめです(透明度対応)。サイズは64×64ピクセルから256×256ピクセル程度が扱いやすいです。

Step 2: シーンファイルの作成

src/scenesフォルダに SpriteScene.tsを作成します。

// src/scenes/SpriteScene.ts
import * as Phaser from 'phaser';

export class SpriteScene extends Phaser.Scene {
    // 表示するスプライトを格納する変数
    private player: Phaser.GameObjects.Image | null = null;
    private logo: Phaser.GameObjects.Image | null = null;

    constructor() {
        super({ key: 'SpriteScene' });
    }

    // 画像ファイルを読み込む
    preload(): void {
        // 各画像ファイルをキーと一緒に読み込み
        this.load.image('player', 'assets/player.png');
        this.load.image('logo', 'assets/logo.png');
    }

    // 画面に画像を表示する
    create(): void {
        // 背景色を設定(薄い青色)
        this.cameras.main.setBackgroundColor('#87CEEB');

        // プレイヤーキャラクターを画面中央に表示
        this.player = this.add.image(400, 300, 'player');

        // ロゴを画面上部に表示
        this.logo = this.add.image(400, 100, 'logo');
    }
}

🔍 コードの解説

  • preload(): ゲーム開始前に画像ファイルを読み込む
  • load.image(): 画像にキー名を付けて読み込み
  • create(): 読み込んだ画像を画面に配置
  • add.image(): 指定座標に画像を表示

🎮 PhaserJSとは何か?

PhaserJSは、HTML5でブラウザゲームを作るためのJavaScriptライブラリです。 複雑なゲーム開発を簡単にしてくれる、とても便利なツールです。

🖼️ スプライトとは?

「スプライト」とは、ゲームに表示される画像のことです。 キャラクター、背景、アイテムなど、画面に見える全ての画像がスプライトです。

キャラクタースプライト: プレイヤーや敵の画像
背景スプライト: 背景の画像
UIスプライト: ボタンやアイコンの画像

🔄 PhaserJSのライフサイクルメソッド

PhaserJSでは、ゲームの実行順序が決まっています。主要な3つのメソッドについて理解しておきましょう:

1 preload() メソッド

役割: ゲーム開始前にアセット(画像、音声など)を読み込む

実行タイミング: シーンが開始される前に一度だけ実行

重要性: ここで読み込まないとcreate()で画像を使用できない

preload(): void {
    this.load.image('key-name', 'path/to/image.png');
    // この段階ではまだ画像は表示されない
}

2 create() メソッド

役割: ゲームオブジェクトの初期配置と設定

実行タイミング: preload()完了後に一度だけ実行

用途: スプライトの配置、UI要素の作成、初期状態の設定

create(): void {
    this.add.image(400, 300, 'key-name');
    // preload()で読み込んだ画像を表示
}

3 update() メソッド(後の章で学習)

役割: 毎フレーム実行される処理(ゲームループ)

実行タイミング: create()実行後、毎フレーム連続実行

用途: キャラクターの移動、当たり判定、タイマー処理など

update(time: number, delta: number): void {
    // 毎フレーム実行される(通常60回/秒)
    // time: ゲーム開始からの経過時間
    // delta: 前フレームからの経過時間
}

💡 実行順序のまとめ

preload() create() update() (毎フレーム繰り返し)

この順序を理解することで、「どこに何のコードを書けばよいか」が明確になります。

💻 実践: スプライト表示の実装

Step 3: メイン設定ファイルの更新

src/main.tsを更新して、新しいシーンを使用します。

// src/main.ts
import * as Phaser from 'phaser';
import { SpriteScene } from './scenes/SpriteScene';

// ゲームの設定
const config: Phaser.Types.Core.GameConfig = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: SpriteScene, // 作成したシーンを指定
    backgroundColor: '#2c3e50'
};

// ゲームを開始
new Phaser.Game(config);

📐 座標系の理解

PhaserJSの座標系は、画面の左上が原点(0, 0)になります。

X軸(横方向)

  • 左端: X = 0
  • 中央: X = 400 (画面幅800の場合)
  • 右端: X = 800

Y軸(縦方向)

  • 上端: Y = 0
  • 中央: Y = 300 (画面高600の場合)
  • 下端: Y = 600

座標の例

// よく使う座標の例
this.add.image(400, 300, 'player'); // 画面中央
this.add.image(100, 100, 'logo');   // 左上付近
this.add.image(700, 500, 'item');   // 右下付近

🎨 スプライト表示のバリエーション

基本的な画像表示に加えて、サイズや角度なども調整できます。

// より詳細なスプライト設定例
create(): void {
    // 背景色を設定
    this.cameras.main.setBackgroundColor('#2c3e50');

    // 通常サイズのプレイヤー(画面中央)
    this.player = this.add.image(400, 300, 'player');

    // 小さいロゴ(左上)
    this.logo = this.add.image(100, 100, 'logo');
    this.logo.setScale(0.5); // 50%のサイズに縮小

    // 大きいアイテム(右下)
    const bigItem = this.add.image(700, 500, 'player');
    bigItem.setScale(1.5); // 150%のサイズに拡大

    // 回転したオブジェクト(左下)
    const rotatedItem = this.add.image(100, 500, 'player');
    rotatedItem.setRotation(0.5); // ラジアンで回転

    // 透明度を変更したオブジェクト(右上)
    const transparentItem = this.add.image(700, 100, 'player');
    transparentItem.setAlpha(0.5); // 50%の透明度
}

🎮 設定メソッドの説明:

  • setScale() - サイズの変更(1.0が標準サイズ)
  • setRotation() - 回転角度の設定(ラジアン単位)
  • setAlpha() - 透明度の設定(0.0〜1.0)
  • setVisible() - 表示/非表示の切り替え

🐛 よくある問題と解決法

❌ 画像が表示されない

  • 画像ファイルのパスが正しいか確認
  • 画像ファイルが存在するか確認
  • load.image()のキー名とadd.image()のキー名が一致しているか確認
  • ブラウザのデベロッパーツール(F12)でエラーをチェック

❌ 画像が画面外に表示される

  • X座標が0〜800の範囲内か確認
  • Y座標が0〜600の範囲内か確認
  • 画像のサイズが大きすぎないか確認

❌ TypeScriptのエラーが出る

  • import文が正しく書かれているか確認
  • 変数の型定義が正しいか確認
  • メソッドの戻り値の型(voidなど)が指定されているか確認

🚀 実行とテスト

コードを作成したら、開発サーバーを起動して動作を確認しましょう。

# ターミナルで実行
npm run dev

✅ 正常に動作している場合:

  • ブラウザに画面が表示される
  • 設定した背景色が表示される
  • 指定した位置に画像が表示される
  • コンソールにエラーが出ていない

🎉 まとめ

この章では、PhaserJSを使った基本的なスプライト表示の方法を学びました。

今回学んだ重要ポイント:

  • PhaserJSのライフサイクル: preload() → create() → update() の実行順序
  • スプライトの概念: ゲームに表示される全ての画像要素
  • 画像の読み込み: preload()で画像を事前読み込み
  • 画像の表示: create()でスプライトを作成・配置
  • 座標系の理解: (0,0)は左上、X軸は右、Y軸は下

📈 達成したこと:

画面に画像を表示するという、ゲーム開発の最も基本的なステップを完了しました。 これでキャラクター、背景、UIなど、あらゆる視覚要素をゲームに表示できるようになりました。

🎯 次のステップ

スプライトの基本的な表示ができるようになったら、次の章に進みましょう: