Art-1: アートスタイルガイド
ビジュアルイメージ（コンセプトアート）
完成イメージの簡易ビジュアル。詳細は Art-Concept: コンセプトアート を参照。
コンセプト
「FF7ローポリキャラ × Minecraft Dungeonsマップ × シンセウェーブ」
キャラクターはFF7のワールドマップキャラのようなPS1ローポリデフォルメ造形。 マップ・環境はMinecraft Dungeonsのようなボクセル（ブロック基調）世界。 そこにシンセウェーブのネオンカラーとグリッチエフェクトが乗る。 レトロな懐かしさと、最新UXの爽快感が融合した体験。
世界観の二層構造
重要: キャラと環境でスタイルを分ける
キャラクター（プレイヤー/敵） と 環境（マップ/ロビー/ダンジョン） は 別系統のビジュアル言語で構成する。
| 層 | スタイル | 参考 | 備考 |
|---|---|---|---|
| キャラクター層 | FF7ローポリデフォルメ | FF7 ワールドマップ | 3頭身、関節なし、フラットシェーディング |
| 環境層 | Minecraft Dungeons風ボクセル | Minecraft Dungeons | ブロック基調、タイル組み立て、InstancedMesh多用 |
統一要素（両層で共通）:
- フラットシェーディング
- ネオンカラーアクセント
- ローポリゴン（軽量優先）
- カメラはトップダウン斜め（Minecraft Dungeons寄り）
参考作品
| 要素 | 参考 | リンク（出典） |
|---|---|---|
| キャラ造形 | Final Fantasy VII (1997) ワールドマップキャラ | FF Wiki |
| マップ・環境ボクセル | Minecraft Dungeons | 公式サイト |
| カメラ・物量 | Minecraft Dungeons | 公式サイト |
| ローポリ美学 | Tunic | 公式サイト |
| サイバーパンクネオン | Hyper Light Drifter | 公式サイト |
| 物量アクション | Vampire Survivors | Steam |
視覚的ルール
ジオメトリスタイル
キャラクター層（FF7ローポリ）:
- 3頭身デフォルメ、パーツは箱型で組み立て
- スキンメッシュ不使用、手続き的アニメーション
- 頂点カラー中心、顔のみ小テクスチャ
環境層（Minecraft Dungeonsボクセル）:
- 1x1x1 のブロック（キューブ）を基本単位としたタイル構成
- 壁・床・柱・プロップは全てブロックの組み合わせ
InstancedMeshでブロックを大量配置（DrawCall節約）- ブロック単位の破壊表現も可能
ポリゴン数指針（Vibe Jam 2026 の軽量要件を満たす）:
| オブジェクト | 目標ポリゴン数 | 備考 |
|---|---|---|
| プレイヤーキャラ | 150〜250 | FF7ワールドマップキャラ程度 |
| 通常敵 | 50〜150 | 大量出現のため最小限 |
| エリート敵 | 200〜400 | |
| ボス | 500〜1,000 | 画面映え重視 |
| ロビーオブジェクト | ブロック単位 | InstancedMeshで1DrawCall |
| ダンジョン部屋 | 1部屋あたり200〜500ブロック | 同じブロックを複製 |
シェーディング
フラットシェーディング + 頂点カラー/テクスチャ混合
- Three.js: MeshBasicMaterial + vertexColors or MeshLambertMaterial (軽量)
- 陰影: フラット（面ごとに色が固定）で PS1 風の"カクカク感"を演出
- 環境光: シーン全体を薄く照らす（色はシーン依存）
- ポイントライト: ネオン看板・武器光・攻撃エフェクトに限定テクスチャ戦略（軽量化）
軽量化の核: テクスチャアトラス + 頂点カラー
低ポリゴンの強みを活かすため、テクスチャは最小限に抑える。
| アセット種別 | テクスチャ手法 | サイズ目安 |
|---|---|---|
| キャラ・敵 | 頂点カラー中心 + 顔/目のみ小テクスチャ | 32x32 〜 64x64 |
| 環境タイル | 1枚のテクスチャアトラス（全テーマ統合） | 256x256 〜 512x512 |
| エフェクト | 手続き的生成（パーティクル＋グラデーション） | テクスチャ不要 |
| UI | SVG/CSS（テクスチャ外で対応） | — |
合計テクスチャサイズ目標: 500KB 以下（初回ロード2MB制約内）
色彩原則
ダークベース × ネオンアクセント
背景トーン: #1a0b2e 〜 #2d1b4e（深紫）
プレイヤー: 明るいネオン色（シアン/ピンク/黄/緑/紫）
敵: 属性別のネオン色（ネオン=ピンク / データ=シアン / グリッチ=赤）
アクセント: 純白のグロウ、黒い輪郭線詳細は Art-2: カラースクリプト を参照。
カメラ設計
トップダウン斜め（Minecraft Dungeons寄り）
| パラメータ | 値 | 備考 |
|---|---|---|
| 角度 | 水平から 55度下向き | 真俯瞰すぎず、キャラの表情が少し見える |
| 距離 | キャラから 15〜18 units | 画面に20〜30体収まる |
| カメラタイプ | PerspectiveCamera（FOV 50） | 遠近感を少し出してレトロ感を強化 |
| 追従方式 | プレイヤーを中心に滑らかに追従 | damping 0.1 |
| 回転 | なし（固定角度） | 実装単純、プレイヤーの方向感覚保持 |
📷 カメラ（55度下向き、追従）
╲
╲
╲
┌─────▽─────┐
│ │
│ プレイヤー │ ← 画面中央を追従
│ ★ │
│ │
│ ← 敵 → │ ← 20-30体が画面内に見える
└───────────┘Three.js実装メモ
PerspectiveCameraを使用（Orthographicではない。レトロ感のため遠近を少し残す）- カメラは親Object3Dに乗せてプレイヤー位置を追従させる
- 回転はしないため
camera.rotationは初期化後に固定
ムード & トーン
基本トーン: ダーク × ポップ
- 重苦しくない: ダーク背景だが、ネオンカラーで華やか
- 懐かしい: PS1時代のローポリ感が郷愁を誘う
- 爽快: 大量の敵がAoEでパァッと弾け飛ぶ気持ちよさ
- サイバー: ネオン、グリッチ、データストリームで未来感
シーン別ムード
| シーン | ムード | キーワード |
|---|---|---|
| ロビー | 落ち着き・安心 | 夕暮れ、スタジオジブリ風の和らぎ |
| 通常ダンジョン | 活気・爽快 | ネオン街の繁華街、アーケード |
| ボス戦 | 緊張・高揚 | 赤色警告、画面揺れ、暗雲 |
| カットイン | スタイリッシュ | 鋭角スプリット、タイポグラフィ |
| 脱出ポータル | 解放・達成 | シアンの光、浮遊感 |
パフォーマンス制約
Vibe Jam 2026 要件「ロード画面なし、重いDLなし、即プレイ」に準拠。
ロードサイズ予算（初回ロード 2MB 以下の内訳）
| カテゴリ | 予算 | 備考 |
|---|---|---|
| Three.js コア | ~600KB (gzip) | モジュラーインポート、examples最小限 |
| ポストプロセス | ~150KB | UnrealBloomPass のみv1、他は v2+ |
| ゲームロジック | ~300KB | Vite tree-shaking |
| テクスチャ（初回） | ~300KB | 顔・アトラス・UIのみ |
| フォント/UI | ~100KB | システムフォント優先、カスタムは最小 |
| マージン | ~550KB | 予備 |
| 合計 | < 2MB | gzip 圧縮後 |
遅延ロード戦略
初回2MB達成の鍵: コアだけ先に、残りは後から
| ロードタイミング | 内容 |
|---|---|
| 初回（ロビー表示前） | Three.js、ロビー基本ジオメトリ、プレイヤーモデル、UIコア |
| ロビー表示後（バックグラウンド） | ダンジョンタイルアトラス、敵モデル、音声 |
| ダンジョン突入時 | 該当テーマの環境テクスチャ、カットイン演出アセット |
| ボス出現時 | ボスモデル・専用エフェクト |
ポストプロセス方針
v1 は以下を採用。他は v2 以降に段階導入。
| エフェクト | v1 | v2+ | 備考 |
|---|---|---|---|
| UnrealBloomPass | ✅ | — | ネオン発光の核。必須 |
| ChromaticAberration | デスクトップのみ | ✅ | モバイルは無効（軽量化） |
| FilmPass（ノイズ・スキャンライン） | ❌ | ✅ | v1では不採用（予算外） |
ランタイム性能目標
| 項目 | 目標値 | 実装方針 |
|---|---|---|
| 初回ロードサイズ | < 2MB | 上記予算 + 遅延ロード |
| 描画DrawCall | < 100 | InstancedMesh、マテリアル統合 |
| FPS (PC) | 60 | |
| FPS (モバイル) | 30+ | LOD、パーティクル削減、ChromaticAberration無効 |
| 同時敵数 | 30〜50体 | InstancedMesh、オブジェクトプール |
| ポリゴン総数 | < 100k（画面内） | LOD、frustum culling |
v1 スコープの制限
v1 では実装しない（v2以降）
モバイル 30fps 維持のため、v1では以下を除外:
- ブロック単位の破壊表現（演出として一部のみ残す: ボス戦のアリーナ崩壊など）
- FilmPass（ノイズ・スキャンライン）
- 動的ライティングの多用（ポイントライトは最大 4つ）
実装方針サマリー（Three.js）
typescript
// 基本セットアップ
- PerspectiveCamera (FOV 50, 55度下向き, 15-18 units離れ)
- Scene背景: 深紫グラデーション
- 環境光: AmbientLight (色はシーン依存, 強度0.5)
- ポイントライト: ネオン発光部に配置（PointLight, 減衰強め）
// ジオメトリ
- キャラ・敵: BufferGeometry + フラットシェーディング + 頂点カラー
- 環境: InstancedMesh でタイル複製
- エフェクト: Points + BufferGeometry でパーティクル
// マテリアル
- MeshLambertMaterial (軽量、影響ライティング少)
- MeshBasicMaterial (ネオン発光部、ライティング無視)
- 頂点カラーベース、テクスチャは必要最小限
// ポストプロセス
- EffectComposer + UnrealBloomPass (ネオン発光強調)
- ChromaticAberration (軽いPS1グリッチ感)
- FilmPass (ノイズ/スキャンラインは任意)デザイン禁則事項
以下は世界観を壊すため避ける:
- ❌ 写実的なテクスチャ（PBRマテリアル等）
- ❌ 滑らかなスキンメッシュアニメーション（手足が曲線的に曲がる）
- ❌ ダーク一辺倒の陰鬱な配色
- ❌ リアルな血・グロ表現
- ❌ 複雑なUIパネル（シンプルなネオンフレームで統一）
次のステップ
- Art-2: カラースクリプト でシーン別カラーパレットを確定
- Art-3: キャラクターデザイン でプレイヤーキャラを詳細化
- Art-4: 敵・ボスデザイン で敵のビジュアル仕様
- Art-5: 環境デザイン でダンジョン各テーマの詳細
- Art-6: エフェクト・VFX で全エフェクト仕様
- Art-7: アニメーション で全アニメーション仕様