対戦相手の存在を表現するUI改修とCSS 3D描画【CFW P2P心理戦ゲーム開発記】 #18

はじめに

対戦相手の動作を画面に反映させることで、現在の無機質すぎる環境から、「対戦ゲームであること」が視覚的に伝わるようにUIを改造していこうと思います。

画像　前回までの実装

前回：アイテム管理のデータ駆動化と音声ID自動生成【CFW P2P心理戦ゲーム開発記】 #17

対戦相手の表示

これまでの実装で、操作するユーザー自身のUIはほぼ完成しました。しかし、対戦ゲームとして作っているにもかかわらず、まるでシステム（CPU）と対戦しているようなUIになってしまっているため、明示的に「人対人」であることを理解できる画面構成にする必要があります。

そこで今回は、よくある手法ですが、自身と対面しているように「相手側のパネル」を画面奥に描画させる方針で実装してみることにしました。今後の拡張として、このUI上で相手がアイテムを使ったり、悩んでいる様子（カーソルの動きなど）を描画できるようになれば、心理戦としてのUX（ユーザーエクスペリエンス）が格段に良くなるはずだと考えています。

今回実装した対戦相手のパネル

CSS 3Dを用いた奥行き（パース）の実装

実装方法としては単純なHTMLとCSSの組み合わせなので詳細なコードは省略しますが、3D空間上に存在しているように調整したかったため、CSSで以下のような設定を行い、対面しているような立体的な描画を実装しました。

// lhl.css
.opponent-panel-back {
    // サイズとか配置は略
    // これで z軸（奥行き方向)に200px移動、40度x軸で回転したように描画できます。
    transform: translate(-50%, -50%) translateZ(-200px) rotateX(-40deg);
}

また、相手が保持しているアイテムの存在が分かるように、手持ちアイテムの上部だけがパネル越しにチラリと見えるようなUIにしてみました。（もしプレイしてみて見づらいようであれば、上部バーの下に簡易表示領域を設け、そこで詳細を確認できるように改良する予定です）

まとめ

パネルのパース（奥行き表現）が少し工夫が必要でしたが、パネルの実装ができたので、相手の表示のイメージを作りやすくなったと思います。ここからの相手のアニメーションなどは今後どのように実装するかほかのアニメーションやUIの実装に合わせて考えていこうと思います。

関連記事
【第９回】ゲームデザインとアイテム実装
ゲームルールを考える：ハイアンドローモックアップ【CFW P2P心理戦ゲーム開発記】 #9
【第14回】ゲームUIのコンセプト決定
コンセプトとゲームUIに着手【CFW P2P心理戦ゲーム開発記】 #14

次回予告

次回は、今まで後回しにしていた「音声（オーディオ）」周りの実装に着手します。

第17回のデータ駆動化でレジストリ（registry）登録したアセットファイルを、SoundMixerクラスを通じて適切なタイミングで呼び出せるよう基盤は整っています。まずは、BGMをDAWで打ち込んで作成するところから始めます。 Webブラウザ特有のユーザーアクション制約（クリック等を起点に音声を許可する仕様）に準拠しつつ、ゲームのUXを損なわないスムーズな音声再生の構成を模索していく予定です。

次回：BGM制作とSoundMixerの実装 #19
関連記事は、2026年6月30日に公開予定 (あと20時間)