Rift Survivors 設計書

Appearance

ポータル演出仕様 ​

演出コンセプト ​

ポータル演出は「次元の裂け目（Rift）が空間を引き裂いて開く」イメージで統一する。ラチェット&クランクの次元ポータルのような、空間が歪みながら穴が開く表現を Three.js で実現する。

演出タイプ一覧 ​

演出使用場面所要時間
リフトオープンポータル出現・アクティベート時0.5秒
ワープトンネルポータル通過時のトランジション0.8秒
アイドルループポータル待機中の常時演出ループ
脱出ポータル出現ダンジョンクリア時2.0秒
カットインポータル経由入場時2.5秒

リフトオープン演出 ​

概要 ​

ポータルがアクティベートされた瞬間の演出。空間に亀裂が走り、裂け目が広がるエフェクト。

演出フェーズ ​

実装要素 ​

要素技術パラメータ
空間歪みカスタムシェーダー（ポストプロセス）歪み強度: 0 → 0.3 → 0
亀裂ラインTHREE.Line + カスタムジオメトリ幅: 0.02、色: ポータルカラー
裂け目THREE.PlaneGeometry + カスタムシェーダーUV スクロール、ノイズテクスチャ
グロウUnrealBloomPass強度: 0.5 → 2.0 → 1.0
効果音空間が裂ける音（SE）フェードイン 0.1秒

ワープトンネル演出 ​

概要 ​

ポータル通過時のフルスクリーントランジション。プレイヤーがトンネル状の空間を高速移動するエフェクト。

演出フェーズ ​

実装要素 ​

要素技術パラメータ
トンネル空間THREE.TubeGeometry + カスタムシェーダー半径: 5.0、長さ: 50.0
パーティクルストリームTHREE.Points + BufferGeometryパーティクル数: 2000、速度: 50.0/秒
カメラモーションTHREE.PerspectiveCamera 前進アニメーションFOV: 75 → 120（スピード感演出）
クロマティックアベレーションポストプロセス強度: 0 → 0.01 → 0
ホワイトアウトフェードオーバーレイopacity: 0 → 1（0.2秒）

トンネル内の視覚表現 ​

        ╔══════════════════════════╗
        ║  ★  ·  ·  ★   ·  ★  ·  ║
        ║ ·  ★  ·   ·  ★  ·  ★   ║
        ║   ╔═══════════════╗     ║
        ║   ║  ·  ★  ·  ★  ║     ║
        ║   ║   ╔══════╗    ║     ║
        ║   ║   ║ ★· ★ ║    ║     ║  ← 同心円状のトンネル壁
        ║   ║   ╚══════╝    ║     ║     パーティクル（★）が手前に高速移動
        ║   ╚═══════════════╝     ║
        ║ ★  ·  ★  ·  ·  ★  ·  ★ ║
        ╚══════════════════════════╝

アイドルループ演出 ​

概要 ​

ポータルが待機中に常時表示する演出。プレイヤーをポータルへ誘導する視覚的な目印となる。

実装要素 ​

要素技術パラメータ
パーティクル渦巻きTHREE.Points + 回転アニメーションパーティクル数: 500、回転速度: 0.5rad/秒
エネルギーリングTHREE.RingGeometry + グロウシェーダー半径: 1.5、グロウ強度: 0.8
明滅emissiveIntensity のサイン波アニメーション周期: 2秒、振幅: 0.3
ポータルコアTHREE.SphereGeometry + ノイズシェーダー半径: 0.5、ノイズスケール: 3.0
環境ライトTHREE.PointLight色: ポータルカラー、強度: 2.0、範囲: 10.0

パフォーマンス考慮 ​

  • アイドルループは常時描画されるため、負荷を最小限に抑える
  • 画面外のポータルは frustumCulled: true で自動カリング
  • パーティクル数は設定で調整可能（Low: 200、Medium: 500、High: 1000）

脱出ポータル出現演出 ​

概要 ​

ダンジョンのボスを撃破した後に出現する脱出ポータルの演出。ボスエリアの中央で地面が割れ、光が噴出する。

演出フェーズ ​

実装要素 ​

要素技術パラメータ
地割れTHREE.Line + アニメーション幅: 0.05、色: #00ff00
光漏れTHREE.SpotLight + ヒビ位置強度: 0 → 5.0
カメラシェイクカメラ位置のランダムオフセット振幅: 0.1、減衰: 1秒
光柱THREE.CylinderGeometry + グロウシェーダー半径: 1.0、高さ: 0 → 20.0
データ破片THREE.Points + 上昇アニメーションパーティクル数: 300、上昇速度: 3.0/秒

カットイン演出（ポータル経由入場） ​

ポータル経由でゲームにアクセスした際のペルソナ風カットイン演出。詳細は カットイン演出仕様（/ui/cutin）を参照。

ポータル演出との連携 ​

カットインで表示する情報 ​

表示要素データソースデフォルト値
キャラクター名username パラメータDrifter
カラーテーマcolor パラメータ#00ffff
キャッチコピー固定テキスト「次元の漂流者、参上。」

パフォーマンスガイドライン ​

描画負荷目標 ​

項目目標値
常時FPS60fps（デスクトップ）/ 30fps（モバイル）
アイドルループ描画コスト< 0.5ms/フレーム
トランジション演出中< 2ms/フレーム
パーティクル総数（画面内）< 3000

品質設定 ​

設定パーティクル数ブルームシェーダー歪み
Low200OffOff
Medium500On（強度: 0.5）On（強度: 0.15）
High1000On（強度: 1.0）On（強度: 0.3）

モバイル対応 ​

  • THREE.Points のサイズをデバイスピクセル比で調整
  • モバイルでは自動的に Low 設定を適用
  • ワープトンネル演出のパーティクル数を半減
  • ポストプロセスエフェクト（ブルーム、クロマティックアベレーション）を無効化