Vue.js × Phaser × Colyseus で構築した、2人チームによるリアルタイム対戦カードゲームです。
AUTA は、スキルカードや条件カードを駆使して戦う、戦略的な1v1対戦ゲームです。リアルタイム通信と演出同期、データ駆動アセット管理など、実践的な技術課題を統合的に解決することを目的としています。
- 就活やスキル証明に直結する「総合演習的な題材」を求めて選定
- リアルタイム通信／UI演出／状態管理などを1つの題材で統合的に試せる
- チーム開発での責任分担や、設計のすり合わせを経験したかった
| 技術 | 役割 | 選定理由 |
|---|---|---|
| Vue 3 | UI/状態管理 | Composition APIとコンポーネント再利用性の高さ |
| Pinia | 状態管理 | 非同期処理とVueとの親和性／キャッシュ管理 |
| Phaser | 演出/アニメーション | 高い自由度と軽量さ。Canvasベースで柔軟な演出が可能 |
| Colyseus | リアルタイム通信 | Schemaベースで状態同期しやすく、開発効率が高い |
| Vite | フロントビルド | 高速なビルド／HMRで開発効率向上 |
Vue（画面表示・入力）⇄ Pinia（状態管理）
↓
Phaser（演出制御）
↓
Colyseus（通信・同期）
- 状態の一元管理と責務分離（Store / Scene / Logic / Assets）
- データ駆動アセット読み込み（JSONベース）
- イベント駆動設計による状態と演出の分離
1. フロント演出とバックエンドの同期
Colyseus の Schema による即時HP反映と、演出（攻撃アニメ等）との非同期性が課題でした。
→ アニメーション完了フラグをクライアントで管理し、完了後に状態反映を進める「演出キューシステム」を実装。
2. データ駆動によるアセット管理
アセット定義を JSON 管理し、Phaser ローダーを自動化。
→ 非エンジニアでも assets.json のみ編集で画像差し替え可能。
3. UI演出の再利用性
Vue の CustomButton コンポーネントを抽出。Props でホバー/クリック/SE挙動を指定可能にし、全UIに統一感をもたせた。
| 名前 | 役割 | 主な担当 |
|---|---|---|
| Elic0de | フロント全般 | UI設計／状態管理／演出制御／アセット連携 |
| otake1006 | サーバ／ロジック | Colyseusロジック／通信同期／ルーム管理 |
- GitHub / Discord による非同期連携
- Figma モックと Notion による設計共有
- マルチプレイ観戦モードの実装
- スキルやレリックのバランス調整を自動化（Pythonシミュレーション導入予定）
- チュートリアルや音声ガイドで初心者対応を強化
ご不明点や詳細については Issues または DM にてお気軽にお問い合わせください。