Rockman Mario Specs

Rockman Mario Specs

Rockman プロジェクト仕様書 #

1. 概要 #

本プロジェクトは、Vue 3、TypeScript、Phaser 3 を使用したアクションゲーム（ロックマン風）の開発プロジェクトである。 主な目的は、ゲーム開発を通じてソフトウェアデザインパターン（特に多態性、Factory、Strategy、Singletonなど）の実践的な理解を深めることにある。

2. システム要件 #

開発環境 #

  • Node.js: v20.19.0 以上 (または v22.12.0 以上)
  • npm: パッケージ管理に使用
  • 推奨IDE: VS Code + Volar 拡張機能

実行環境 #

  • ブラウザ: モダンブラウザ（Chrome, Edge, Firefox, Safariなど）

3. アーキテクチャ #

技術スタック #

  • フロントエンドフレームワーク: Vue 3 (Composition API)
  • ビルドツール: Vite
  • 言語: TypeScript
  • ゲームエンジン: Phaser 3
  • 状態管理: XState (一部キャラクターの状態管理に使用)

デザインパターン #

本プロジェクトでは以下のパターンを採用し、柔軟で拡張性の高い設計を実現している。

Factory パターン #

オブジェクトの生成ロジックをカプセル化し、呼び出し側が具体的なクラスを知らなくてもインスタンスを取得できるようにしている。

  • StageFactory: 各ステージ（Stage1_1, Stage1_2など）の生成を行う。
  • CharacterFactory: プレイヤー、敵キャラクター、弾、エフェクトなどの生成を行う。
  • ControllerFactory: 設定に基づき、入力デバイスに応じたコントローラ（Keyboard, Gamepadなど）の生成を行う。

Template Method パターン #

親クラスで処理の枠組み（テンプレート）を定義し、子クラスで具体的な内容を実装する継承構造である。

  • シーン構成:
    • BaseStageScene: マップのロード、物理演算の初期化、敵のスポーン管理、プレイヤー配置などの共通ロジックを実装。
    • Stage1_1 等: 具体的なマップデータ（JSONキー）、タイルセット画像、プレイヤーの開始座標、固有の敵構成などを定義するだけでステージとして機能する。

Strategy パターン（ステートマシン） #

振る舞いを「状態（State）」として分離し、実行時に動的に切り替える仕組みである。本プロジェクトではキャラクターとステージ進行の両方に適用されている。

  • 構造:

    • Context: 現在の状態を保持し、処理を委譲する（PlayerCharacter, BaseStageScene）。
    • State Interface: enter, update, exit メソッドを定義。
    • Concrete States: 具体的な振る舞いを実装。

  • 適用箇所:

    1. キャラクターの状態管理:
      • PlayerCharacter: Idle, Move, Jump, Spawn, Damage 状態を管理。
      • 敵キャラクター (BigMario, Wanwan 等): それぞれ固有の状態を管理。
    2. ステージ進行の管理 (BaseStageScene 内):
      • IntroState: ステージ開始時の演出（黒幕フェードイン・アウト、タイトル表示）。
      • SpawnState: プレイヤーの登場演出と操作ロック。
      • PlayState: 通常のゲームプレイ（入力受付、敵スポーン）。
      • DeathState: プレイヤー死亡時の演出（爆発、ゲームオーバー表示）。

Singleton パターン #

  • GameConfig: ゲーム全体で共有される設定（プレイヤー速度、初期ステージ等）を管理する。アプリ全体で同一のインスタンスを参照し、一貫した設定情報を提供する。

4. ゲーム仕様 #

4.1 ゲームループとシーン #

ゲームは以下のシーンで構成されている。

  1. MainScene: ゲーム起動時のエントリーポイント。初期化やデバッグ画面への誘導を行う。
  2. DebugScene: デバッグ用メニュー。ステージ選択やコントローラ切り替えが可能である。
  3. StageScenes: 実際のゲームプレイ画面 (Stage1_1, Stage1_2, Stage3_1)。
    • BaseStageScene を継承し、共通のゲームループを持つ。
    • ステージごとの固有データ（マップ、敵配置）のみをサブクラスで定義する。

4.2 キャラクター #

多様なキャラクターが実装されており、それぞれ固有のステートマシンを持つ。

  • PlayerCharacter (Rockman):
    • 操作可能な主人公キャラクター。
    • PlayerState インターフェースを実装した各クラスにより、待機、移動、ジャンプ、出現演出、ダメージ等の挙動が制御されている。
  • Enemies:
    • Enemy1, Enemy2: 基本的な敵キャラクター。
    • BigMario: Strategyパターンのデモ用に実装された巨大キャラクター。
    • Wanwan: Compositeパターンのデモ用に実装された連結キャラクター。
    • Gradius, Fire, Dragon 等、多彩な敵が存在する。

4.3 操作方法 (コントローラ) #

複数の入力方式をサポートし、game-config.json で切り替え可能である。

  • KeyboardController:
    • 矢印キー: 上下左右移動
    • Zキー: Bボタン（攻撃/ダッシュ等）
    • Xキー: Aボタン（ジャンプ/決定）
  • Controller1:
    • 画面上の仮想デジタルパッド、またはシンプルなキー入力。
  • HoriPad:
    • アナログスティック入力に対応したコントローラ。

5. 設定システム #

ゲームの挙動は public/game-config.json によって制御される。 ビルド後もこのファイルを編集することで、再ビルドなしに設定を変更可能である。

設定項目 # 

{
  "playerSpeed": 160,          // プレイヤーの移動速度
  "stageKey": "stage1_1",      // 初期ロードステージ
  "player1Controller": "Controller1", // 使用するコントローラクラス名
  "debugPrint": true           // デバッグログ出力の有効化
}

6. ディレクトリ構造の概要 #

  • src/game/: ゲームロジックの中核
    • characters/: キャラクタークラスとステート定義。各キャラクターディレクトリ内に states/ サブディレクトリを持ち、Strategyパターンを構成している。
    • controllers/: 入力コントローラの実装。
    • factories/: 各種オブジェクト生成ファクトリ。
    • scenes/: Phaserシーン定義。ステージ関連は scenes/stages/ に配置され、ステージ進行用の states/ もここに含まれる。
    • utils/: ユーティリティクラス（DebugLoggerなど）。

7. クラス図 (Mermaid) #

システム全体の可読性を高めるため、機能単位に分割したクラス図を以下に示す。

7.1 全体アーキテクチャ概要 #

ゲームの主要な構成要素（シーン、ファクトリ、キャラクター基底、設定）のハイレベルな関係図である。

classDiagram
    %% Utilities
    class GameConfig {
        +getInstance()
        +data: GameConfigData
    }
    class DebugLogger

    %% Scenes
    class BaseScene { <<abstract>> }
    class BaseStageScene { <<abstract>> }
    class MainScene
    class DebugScene

    BaseScene <|-- MainScene
    BaseScene <|-- DebugScene
    BaseScene <|-- BaseStageScene

    %% Factories
    class StageFactory { +create() }
    class CharacterFactory { +create() }
    class ControllerFactory { +create() }

    %% Characters
    class BaseCharacter { <<abstract>> }
    class PlayerCharacter

    %% Relationships
    MainScene ..> GameConfig : uses
    DebugScene ..> StageFactory : uses
    DebugScene ..> ControllerFactory : uses
    BaseStageScene ..> CharacterFactory : uses
    BaseStageScene --> PlayerCharacter : has
    
    CharacterFactory ..> PlayerCharacter : creates
    CharacterFactory ..> ControllerFactory : uses

7.2 シーンとステージの構造 (Template Method & State Pattern) #

ステージの継承構造（Template Method）と、ステージ進行管理（State）の詳細図である。

classDiagram
    %% Template Method Pattern
    class BaseScene { <<abstract>> }
    class BaseStageScene {
        <<abstract>>
        +player: PlayerCharacter
        +currentState: StageState
        +spawnEnemies()
        +changeState(name)
    }
    class Stage1_1
    class Stage1_2
    class Stage3_1

    BaseScene <|-- BaseStageScene
    BaseStageScene <|-- Stage1_1
    BaseStageScene <|-- Stage1_2
    BaseStageScene <|-- Stage3_1

    %% Stage State Pattern
    class StageState {
        <<abstract>>
        +enter()
        +update()
        +exit()
    }
    class IntroState
    class SpawnState
    class PlayState
    class DeathState

    BaseStageScene --> StageState : manages
    StageState <|-- IntroState
    StageState <|-- SpawnState
    StageState <|-- PlayState
    StageState <|-- DeathState

7.3 プレイヤーキャラクターの構造 (Strategy Pattern) #

プレイヤーキャラクターの状態遷移管理の詳細図である。

classDiagram
    class BaseCharacter { <<abstract>> }
    class PlayerCharacter {
        +changeState(name)
        +states: Map
    }

    class PlayerState {
        <<interface>>
        +enter()
        +update()
        +exit()
    }
    class PlayerIdleState
    class PlayerMoveState
    class PlayerJumpState
    class PlayerSpawnState
    class PlayerDamageState

    BaseCharacter <|-- PlayerCharacter
    PlayerCharacter --> PlayerState : manages / current
    PlayerState <|.. PlayerIdleState
    PlayerState <|.. PlayerMoveState
    PlayerState <|.. PlayerJumpState
    PlayerState <|.. PlayerSpawnState
    PlayerState <|.. PlayerDamageState

7.4 敵キャラクターの構造 (Strategy Pattern) #

複雑な挙動を持つ敵キャラクターの状態遷移管理の詳細図である。

classDiagram
    class BaseCharacter { <<abstract>> }
    class CompositeCharacter { <<abstract>> }
    
    %% BigMario
    class BigMarioCharacter
    class BMC_CharacterState { <<interface>> }
    class BMC_IdleState
    class BMC_MovingState
    
    BaseCharacter <|-- BigMarioCharacter
    BigMarioCharacter --> BMC_CharacterState : manages
    BMC_CharacterState <|.. BMC_IdleState
    BMC_CharacterState <|.. BMC_MovingState

    %% Wanwan
    class WanwanCharacter
    class Wanwan_CharacterState { <<interface>> }
    class Wanwan_FallingState
    class Wanwan_HoppingState
    class Wanwan_LeapingState
    class Wanwan_StunnedState

    CompositeCharacter <|-- WanwanCharacter
    WanwanCharacter --> Wanwan_CharacterState : manages
    Wanwan_CharacterState <|.. Wanwan_FallingState
    Wanwan_CharacterState <|.. Wanwan_HoppingState
    Wanwan_CharacterState <|.. Wanwan_LeapingState
    Wanwan_CharacterState <|.. Wanwan_StunnedState

    %% Dragon & Fire & Helmet
    class DragonCharacter
    class FireCharacter
    class HelmetCharacter
    
    CompositeCharacter <|-- DragonCharacter
    BaseCharacter <|-- FireCharacter
    BaseCharacter <|-- HelmetCharacter

7.5 ファクトリとコントローラ #

入力システムの階層構造と、オブジェクト生成の責務を示す図である。

classDiagram
    %% Factories
    class ControllerFactory {
        +create(type): BaseController
    }
    class CharacterFactory {
        +createPlayer(): PlayerCharacter
        +createEnemy(): BaseCharacter
    }

    %% Controllers
    class BaseController {
        <<interface>>
        +input: any
        +update()
    }
    class KeyboardController
    class Controller1
    class HoriPad

    ControllerFactory ..> BaseController : creates
    BaseController <|.. KeyboardController
    BaseController <|.. Controller1
    BaseController <|.. HoriPad

    CharacterFactory ..> ControllerFactory : uses