プロジェクト

全般

プロフィール

操作
リンクをコピー

機能 #412

完了

機能 #396: ゲーム内常駐ペット育成機能の追加

機能 #406: VRChatアバターの読み込み

Beatoraja側のステートごとにアバターの表示位置を移動させる

機能 #412: Beatoraja側のステートごとにアバターの表示位置を移動させる

いづ さん さんが12日前に追加. 12日前に更新.

ステータス:
完了
優先度:
通常
担当者:
いづ さん
対象バージョン:
1.2.0
開始日:
2026/06/24
期日:
進捗率:

100%

予定工数:

説明

ステートに応じてアバターの位置が変わったほうがいい

  • MUSIC SELECT
  • PLAY
  • RESULT

の3つ？ほかにもあるっけ

エージェント ちゃん さんが12日前に更新 操作
リンクをコピー
 #1

  • ステータス を 未着手 から 実装中 に変更
  • 進捗率 を 0 から 10 に変更

実装に着手しました。

  • ブランチ: feature/412
  • 対応方針: アバターアプリ(obs/avatar/)で状態フィードの phase(select/playing/result)に応じてペットの表示位置を切り替える。select=左下隅 / playing=右端中央 / result=中央やや右・下寄り(曲名とCHART INFOの間)。サイズは全ステート共通で位置のみ移動。

エージェント ちゃん さんが12日前に更新 操作
リンクをコピー
 #2

  • ステータス を 実装中 から 完了 に変更
  • 進捗率 を 10 から 100 に変更

対応が完了しました。

概要

配信画面のステート(phase: select / playing / result)に応じて、アバター(obs/avatar/)の表示位置を画面内で自動的に移動させるようにした。各画面でゲームUI・スキン装飾を隠さない空き領域へアバターを寄せる。

変更点

  • 状態フィードJSONの phase を利用し、#app に data-phase 属性を付与して CSS transform: translate() で位置を切り替え(サイズは全ステート共通・位置のみ移動)。
    • select → 左下隅 / playing → 右端中央 / result → 中央やや右・下寄り(曲名とCHART INFOの間) / 未知・未設定 → 中央
  • AvatarController.applyPhasePosition(phase) を追加。main.js は state.phase が含まれる時だけ適用し、部分state更新では現在位置を維持。
  • 移動は --ease-glide(easeOutQuint 720ms)で滑らかに補間。prefers-reduced-motion 時は200msへ短縮。
  • テスト用フック window.__avatar.getPhase() を追加、README に仕様を追記。
  • 変更ファイル: obs/avatar/src/avatar.js / obs/avatar/src/main.js / obs/avatar/styles.css / obs/avatar/tests/app.spec.js / obs/avatar/README.md(計5件)

テスト

  • .\gradlew.bat test : 未実行(Java非変更のため対象外)
  • npx playwright test(obs/avatar) : 9 passed(既存8 + 新規 phase テスト)

関連 MR

  • !91 (feature/412 → develop)

補足

  • translate 値はスクショから推定した基準値。実解像度・実レイアウトでの最終微調整は styles.css の #app[data-phase=...] で可能。
操作
リンクをコピー

他の形式にエクスポート: PDF Atom