Rift Survivors 設計書

Appearance

画面遷移 ​

全体遷移図 ​

遷移条件一覧 ​

遷移元遷移先トリガー条件
LoadingPortalCutin自動URLに ?portal=true が存在
LoadingCharCreate自動localStorage にセーブデータなし
LoadingLobby自動localStorage にセーブデータあり
PortalCutinLobby自動/スキップ演出完了 or 画面タップ
CharCreateLobbyユーザー操作名前入力・カラー選択完了
LobbyDungeonユーザー操作ミッションポータルに接近 → ミッション選択
LobbyExternalRedirectユーザー操作Vibeverseポータルに接近 → 確認
DungeonResult自動ミッションクリア or HP=0
ResultLobbyユーザー操作「ロビーに戻る」ボタン

画面遷移トランジション ​

各画面遷移にはシンセウェーブテーマのトランジションエフェクトを適用する。

トランジションパターン ​

パターン用途演出所要時間
リフトオープンロビー → ダンジョン画面中央から裂け目が開き、次画面が覗く0.8s
グリッチフェード汎用遷移グリッチエフェクト + フェードアウト/イン0.5s
スキャンラインリザルト → ロビーCRTスキャンライン風のワイプ0.6s
カットインポータル経由時ペルソナ風フルカットイン2.5s

リフトオープン トランジション詳細 ​

Ratchet & Clank の次元リフトにインスパイアされたエフェクト:

時間軸: 0s ────────── 0.3s ────────── 0.6s ────────── 0.8s
        │               │               │               │
        │  現画面に      │  裂け目が      │  裂け目から    │
        │  亀裂ライン    │  広がる        │  次画面が溢れ  │
        │  が走る        │  (紫の光)      │  出して切替    │
  1. 0.0s - 0.3s: 画面にグリッチノイズが走り、中央に紫色の亀裂ラインが出現
  2. 0.3s - 0.6s: 亀裂が上下に裂けて広がる。裂け目の縁はネオンピンクに発光。裂け目の中には次画面がプレビューされる
  3. 0.6s - 0.8s: 裂け目が画面全体に広がり、次画面に完全に切り替わる。最後にブルームエフェクトのフラッシュ
css
/* リフトトランジションのCSS概要 */
.rift-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.rift-crack {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #a855f7 48%,
    #ff2d75 50%,
    #a855f7 52%,
    transparent 100%
  );
  clip-path: polygon(/* 亀裂形状 */);
  animation: rift-open 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes rift-open {
  0% { transform: scaleY(0); filter: brightness(1); }
  30% { transform: scaleY(0.01); filter: brightness(3); }
  100% { transform: scaleY(1); filter: brightness(1); }
}

モバイル時の遷移注意点 ​

  • カットイン演出はタップでスキップ可能
  • 遷移中のユーザー入力は全てブロック
  • 遷移エフェクトが重い場合、モバイルでは prefers-reduced-motion を検出して簡略化