Rift Survivors 設計書

Appearance

Art-3: プレイヤーキャラクターデザイン ​

方向性 ​

FF7ワールドマップ風のローポリデフォルメキャラ

Final Fantasy VII (1997) のワールドマップで歩き回るクラウドたちの造形をベースに、Minecraft Dungeonsのボクセル感を加えた形。

基本プロポーション ​

3頭身デフォルメ（FF7ワールドマップキャラと同等）

     ┌───┐
     │ 頭 │       ← 全身の1/3（大きめ）
     │ ◎◎│
     └───┘
    ┌──────┐
    │ 胴体 │     ← 全身の1/3
    │      │
    └──────┘
    ┌─┐┌─┐
    │脚││脚│    ← 全身の1/3（短め）
    └─┘└─┘

ビジュアルリファレンス（SVG） ​

35%30%35%

詳細なコンセプトアートは Art-Concept 参照。

パーツ高さ比ボクセル数目安
頭部全身の35%~60
胴体全身の30%~50
腕 × 2全身の30%（長さ）~30
脚 × 2全身の35%（長さ）~40
合計—~180ボクセル

総ポリゴン数目標: 150〜250 ポリゴン

パーツ詳細 ​

頭部 ​

  • 形状: やや縦長の箱型（FF7風）
  • 顔: 小さなテクスチャ（32x32）で目・口のみ描画
  • 髪/ヘルメット: 頭の上部にジオメトリで表現
  • 表情パーツ: カットイン時に差し替え可能（通常/怒り/笑顔/集中）
 ┌───┐
 │   │ ← 髪/ヘルメット部（色変更可）
 │▓▓▓│
 │◎ ◎│ ← 目（テクスチャ、ネオン発光）
 │ ─ │ ← 口（テクスチャ）
 └───┘

胴体 ​

  • 形状: シンプルな直方体
  • 装備で見た目が変化（武器カテゴリによる）
  • ネオンライン装飾（発光パーツ、カラーカスタマイズ対象）

腕・脚 ​

  • 形状: 短い四角柱（関節なし、固定長）
  • アニメーションは全体の回転・位置で表現（スキンメッシュ不使用）
  • 攻撃時は腕が大きく回転してインパクト演出

カスタマイズシステム ​

Vibeverse ポータル color パラメータ対応 ​

プレイヤーの**メインカラー（胴体色）**をポータル受信時に動的変更。

ポータル値メインカラーネオン発光部
red#ff3366#ff88aa
cyan (default)#00ffff#88ffff
green#33ff66#88ffaa
yellow#ffcc00#ffee88
purple#aa33ff#cc88ff
HEX値直接指定色自動で明度+20%の色

装備カスタマイズ ​

ロビーで装備を変更すると見た目に反映される。

装備スロット統一

装備スロットは 武器1枠のみ（v1）。既存ドキュメント間の不整合を解消するため、 本作品の装備モデルを「武器1枠」に統一する。

  • gameplay/equipment.md の「武器1枠のみ」に準拠
  • ui/lobby.md の Shield/Armor/Ring/Amulet 表示は今後の整理対象（本設計書の方針に合わせる）

装備による見た目変化は武器モデル + レアリティ発光の2要素のみ。 頭/胴のカラーバリエーションは Vibeverse color パラメータと永続カスタマイズで制御。

スロット変化箇所備考
武器（1枠）手持ち武器モデル + レアリティ発光エフェクト4カテゴリ別に4種類のモデル
メインカラー胴体ベースカラーVibeverseポータル color 反映 / ロビーで変更可

武器カテゴリ別の見た目 ​

カテゴリ手持ちモデル攻撃モーション
ソード短剣〜大剣横振り/縦振り
スピア長柄の突き刺し武器突き/回転
スタッフ杖（先端に光る宝石）振り下ろし/遠隔魔法
ガン小型〜大型銃射撃（弾エフェクト）

レアリティ別の視覚効果 ​

レアリティ装備の見た目エフェクト
Common灰色ベースなし
Rare青いネオンライン薄いグロウ
Epic紫のネオンライン + 流動パターン中程度のグロウ + パーティクル
Legendary金色のネオン + 粒子放出強いグロウ + 常時パーティクル

アニメーション（概要） ​

詳細は Art-7: アニメーション仕様 参照。

状態表現方法フレーム数目安
アイドル上下に軽く揺れる2〜4フレーム
歩行手足を交互に回転4〜8フレーム
ダッシュ歩行より速く、軽く傾斜4〜6フレーム
攻撃武器の回転・突き出し3〜6フレーム
被弾後ろにのけぞる + 赤フラッシュ2〜3フレーム
死亡前のめりに倒れる + フェードアウト4〜6フレーム

PS1時代らしい"カクカク感"を意図的に残す。各フレームが独立した姿勢。

カットイン用立ち絵 ​

ポータル進入時のペルソナ風カットインで使用する立ち絵方針。

要素仕様
表示方式ゲーム内3Dモデルをそのまま大きく表示
アングル斜めから見下ろし（カメラ角度とは別の専用カメラ）
ポーズダイナミックな構え（武器を構える、片手を差し伸べる等）
演出背景にシンセウェーブグラデーション + スキャンライン
テキストキャラ名・ステータス（色/速度/HP）をタイプライター風表示

2D立ち絵は作らない（3Dモデルを流用することで工数削減）

Three.js 実装方針 ​

モデル構造 ​

typescript
class PlayerCharacter extends THREE.Object3D {
  head: THREE.Mesh;       // 頭
  body: THREE.Mesh;       // 胴体
  armL: THREE.Mesh;       // 左腕
  armR: THREE.Mesh;       // 右腕
  legL: THREE.Mesh;       // 左脚
  legR: THREE.Mesh;       // 右脚
  weapon: THREE.Mesh;     // 武器（付け替え可能）

  // 各パーツは個別に回転・位置変更可能
  // スキンメッシュ不使用（PS1風のカクカク感）
}

アニメーション実装 ​

typescript
// 手続き的アニメーション（骨なし）
update(dt: number) {
  // 歩行: sinカーブで手足を揺らす
  const walkCycle = Math.sin(this.time * 6);
  this.armL.rotation.x = walkCycle * 0.5;
  this.armR.rotation.x = -walkCycle * 0.5;
  this.legL.rotation.x = -walkCycle * 0.4;
  this.legR.rotation.x = walkCycle * 0.4;
}

軽量化テクニック ​

テクニック効果
BufferGeometry 頂点カラー使用テクスチャ削減
MeshLambertMaterial（シェーダ軽量）モバイル対応
パーツごとに Mesh 分離カスタマイズ時に部分差し替え
共通ジオメトリを .clone() で使い回しメモリ節約
顔テクスチャのみ 32x32 で個別表情差分対応

初期生成コード例 ​

typescript
// 直方体ジオメトリを使ったFF7風キャラ
const head = new THREE.Mesh(
  new THREE.BoxGeometry(0.7, 0.8, 0.6),
  new THREE.MeshLambertMaterial({ vertexColors: true })
);
const body = new THREE.Mesh(
  new THREE.BoxGeometry(0.6, 0.7, 0.4),
  new THREE.MeshLambertMaterial({ color: playerColor })
);
// ... 腕・脚も同様
// 各パーツを階層に配置してObject3Dで束ねる

初回プレイヤー（ポータル未経由）の見た目 ​

項目初期値
メインカラーCyan #00ffff
頭装備なし（素の頭部）
武器ソード（ベーシック）
名前Drifter or ユーザー入力名

初回のキャラ作成画面では 名前入力 と カラー選択（5色から1つ） のみ。 以降はロビーで装備やカラーを変更可能。

参考リファレンス ​

参考元要素
FF7 ワールドマップキャラ3頭身デフォルメ、ローポリ造形
Minecraft Dungeonsボクセル感、俯瞰カメラの映え
Tunic キツネキャラシンプルなローポリ動物キャラ
Riverbondデフォルメ×ボクセルの好例

禁則事項 ​

  • ❌ スキンメッシュ（手足が曲線的に曲がる）
  • ❌ 高解像度テクスチャ（256x256超）
  • ❌ リアルプロポーション（6〜8頭身）
  • ❌ 精細な顔表現（目・鼻・口を細かく描かない）
  • ❌ 複雑な髪の毛表現（ジオメトリで抽象化）