ビジュアルモック一覧

設計書と並行して、ゲームの全体像をイメージするための動作モック集。全モックはブラウザでそのまま動作する（Cloudflare Pages 静的配信）。

サンドボックス（プレイアブル）

実際にWASDで歩き回って体験できる本格的な動作モック。Vite + Three.jsの本番コードベース上に構築。

🎮 別サイトでフルスクリーンプレイ

👉 https://rift-survivors-mock.pages.dev

機能:

WASDキャラ移動（FF7風3頭身ローポリ）
トップダウン55度カメラ追従
ロビー⇄ダンジョンポータル遷移（Mission portal）
Vibeverseポータル（外部リダイレクト）
Revengeポータル（プレースホルダ）
Minecraft Dungeons風ボクセル環境（InstancedMesh最適化）
UnrealBloomPass ネオン発光

キャラクターアニメーションプレビュー

FF7風ローポリキャラの全11種アニメーションを切替して確認できる単体デモ。

🎬 別タブで開く

👉 character-preview

確認できるアニメーション: アイドル / 歩き / ダッシュ / 攻撃1〜4 / スキル発動 / 被弾 / 回避 / 死亡

カラーバリエーション: 5色切替（cyan / red / green / yellow / purple）

参考: Art-3 キャラクターデザイン / Art-7 アニメーション仕様

環境プレビュー

ロビーとダンジョン4テーマの環境ビジュアルを切替表示。カメラが自動オービット。

🌃 別タブで開く

👉 environment-preview

確認できるシーン:

Lobby（ハブ空間 + 3ポータル）
Data Grid（青緑回路ダンジョン）
Neon Arcade（ピンク/紫アーケード）
Glitch Core（パープル/黒崩壊空間）
Void Rift（白/青虚空）

参考: Art-5 環境デザイン / Art-2 カラースクリプト

コンセプトアート

SVGで描いたゲーム全体のビジュアルイメージ。設計書中の各所に埋め込み済み。

🎨 別ページで見る

👉 Art-Concept コンセプトアート

収録イラスト:

メインカバー（プレイヤーが敵スウォームに囲まれる俯瞰シーン）
ロビー3ポータル（Mission/Vibeverse/Revenge）
ペルソナ風カットイン
ダンジョン4テーマミニアート
ボス3体シルエット（弱点ヒント付き）

参考: Art コンセプトアート

モック構成図

Cloudflare Pages
├── rift-survivors-docs.pages.dev (このサイト = 設計書 + モック)
│   ├── /art/* — Art設計書（コンセプトアート埋め込み済）
│   ├── /mocks/character-preview/ — Mock-2
│   └── /mocks/environment-preview/ — Mock-3
└── rift-survivors-mock.pages.dev — Mock-1 サンドボックス（フルスクリーン）

Mock	関連設計書
サンドボックス	Art-1 スタイルガイド / Art-3 キャラクター / Art-5 環境
キャラアニメ	Art-3 キャラクター / Art-7 アニメーション
環境プレビュー	Art-5 環境 / Art-2 カラースクリプト
コンセプトアート	Art-1 スタイルガイド

ビジュアルモック一覧 ​

サンドボックス（プレイアブル） ​

キャラクターアニメーションプレビュー ​

環境プレビュー ​

コンセプトアート ​

モック構成図 ​