📖 この章で学ぶこと
- ✓ PhaserJSでの画像の読み込み方法
- ✓ スプライトの基本的な表示方法
- ✓ 座標系の理解(X軸・Y軸)
- ✓ 背景色の設定方法
📚 この章で学ぶこと
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ライブラリです。 複雑なゲーム開発を簡単にしてくれる、とても便利なツールです。
🖼️ スプライトとは?
「スプライト」とは、ゲームに表示される画像のことです。 キャラクター、背景、アイテムなど、画面に見える全ての画像がスプライトです。
🔄 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: 前フレームからの経過時間 }
💡 実行順序のまとめ
この順序を理解することで、「どこに何のコードを書けばよいか」が明確になります。
💻 実践: スプライト表示の実装
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など、あらゆる視覚要素をゲームに表示できるようになりました。