はじめに
今回も前回に引き続きUIの改良です。
「ゲーム1セット終了 → セット間サマリー（今回実装する部分） → 次のセットへ」という流れを視覚的に分かりやすくするため、画面上部のヘッダーやオーバーレイを作成していきます。
前回：カードのフロップアニメーションの実装
ゲームUIのアニメーション作成その１【CFW P2P心理戦ゲーム開発記】 #15
1.サマリーオーバーレイ 実装イメージと表示フロー
表示のフローとしては以下のようなものを実装することにしました。現状はヘッダーのデザインの納得がいっていないので、フェーズ２までとフェーズ４を実装してあります。
- フェーズ1（遮断と表示）： セットが終わった瞬間（SET_END）、ゲーム盤面が少し暗くなり、中央に「BATCH EVALUATION（バッチ処理評価）」というダイアログが浮かび上がる。そこには、セット前のスコア（例：
1P [0] - [0] 2P）が表示されている。 - フェーズ2（スロット・アップデートアニメーション）： 勝者の数字がガチャン！と上にスライド（スロットのように回転）して、新しい数字（例：
[1]）に切り替わる。この時、勝者のテキストが少しハイライトされる。 - フェーズ3（データのアップリンク / 吸収）： 更新された数字から「光のパーティクル」または「データパケット（小さな四角）」が分離し、画面上部のHUD（
score1pBox）に向かってシュッと飛んでいく。HUDに衝突した瞬間に、HUD側の数字も更新されてチカッと光る。 - フェーズ4 オーバーレイをフェードアウトし、待機後のボタンを押せるようにする（今は確実な同期のためにボタンで移行しているが煩雑なようなら自動で移行するようにする）
実装したセット終了時のサマリ
セット終了時に表示するサマリオーバーレイ
ヘッダーの改良
スコア表示をする上部ヘッダー。タイマーもここに表示予定
セット獲得数はそれぞれ長方形のライトのようなもので保持するように設計しました。トークン数（隠したカード数は0埋めの２桁数字で表示します。
タイマーインジケーター
タイマーは簡易的に、バーの縮小で表示するように実装してみました。P2Pの通信で完全一致させたいなら相互保持オブジェクトで管理すればよいですが、それは通信数を無駄に増やすことになるので、タイムスタンプを送信し相互でレンダリングする手法をとっています。
実装したタイマーバー
ホバーツールtip
アイテムの説明などをカーソルのホバーやスマホなら長押しなどで説明を出すようにします。
// 追加要素はこれだけで、中身をjsでいじることにします
<div id="sys-tooltip">
<div class="tooltip-title" id="tooltip-title">ITEM_NAME</div>
<div class="tooltip-desc" id="tooltip-desc">ITEM_DESCRIPTION</div>
</div>アイテム欄の上でPCなら一定時間(0.4 s)乗っているとアイテムの情報表示をさせるようにしました。
アイテム説明 ホバー
まとめ
今回は、セット終了時のオーバーレイと、タイマーバーおよびアイテムの説明のホバーを実装してみました。これにより、状態の確認が以前よりわかりやすくなったはず(？)です。
関連記事
【第９回】ゲームデザインとアイテム実装
ゲームルールを考える：ハイアンドローモックアップ【CFW P2P心理戦ゲーム開発記】 #9
【第13回】ゲームルールの策定v1
Logic High and Low v1ルール策定とゲーム本体実装【CFW P2P心理戦ゲーム開発記】 #13
【第14回】ゲームUIのコンセプト決定
コンセプトとゲームUIに着手【CFW P2P心理戦ゲーム開発記】 #14
次回予告
現状では、アイテムの動作やアイテムの説明などをjsにべた書きしています。しかしこのままだとアイテムを追加するたびにif-elseが増え、管理も煩雑になってしまいます。そこで次回はアイテムの動作および表示テキストをjsonなどの外部ファイル（データ）に分割し、アイテムのデータ駆動型処理に移行します。次回の実装で、今回実装したホバーテキストをパースすることができ、説明文などの調整なども容易になる予定です。
次回 アイテムのデータ駆動型への移行
関連記事は、2026年6月27日に公開予定 (あと46分)
ここまで読んでいただきありがとうございます。
では、次の記事で。 lumenHero
