前回（14回）は、ゲームプレイ画面の大まかなデザインを決定し３ｄ風の奥行きを持たせて、実装してみました。
今回はゲームUIのアニメーションを作っていきます。音声に関しては、後からすぐに組み込めるように「スタブ（Stub：中身が空の仮のクラス）」として準備しておき、具体的な再生ロジックは後日実装する方針で進めます。
1. スタブ オーディオクラス
今回のゲームはWebブラウザ上で遊べる形にするため、ブラウザ特有の「音声再生規則」に則る必要があります。
あとから場当たり的に修正するのは非常に大変なので、あらかじめメインのオーディオ制御クラスを作り、一元管理する設計にしておくことにしました。
// js/audio/mixer.js の例
export const AudioMixer = {
// 将来的にボリューム設定やWeb Audio APIのコンテキストを保持する
isMuted: false,
playSE: (soundId) => {
if (AudioMixer.isMuted) return;
// 今はコンソールに出すだけ。後でここに再生ロジックを書く。
console.log(`[AudioStub] Play SE: ${soundId}`);
},
playBGM: (bgmId) => {
console.log(`[AudioStub] Crossfade to BGM: ${bgmId}`);
}
};補足：ブラウザの自動再生ポリシー（Autoplay Policy）について
現在のGoogle ChromeやSafariなどのモダンブラウザでは、ユーザーにとって意図しない音声が突然鳴るのを防ぐため、「ユーザーが画面を操作（クリックやタップなど）するまで、音声を含むメディアの自動再生をブロックする」という厳格な仕様が標準化されています。これが導入され始めた当時は、多くのWebゲームやサイトが対応に追われ大騒ぎになりました。そのため、ゲーム開始時のクリックなどをトリガーにして音声の再生許可（AudioContextのロック解除）を得る設計が必須となります。
2.アニメーションの追加
2.1カードのフロップ
めくる動作の調整をします。この部分の実装自体は、前回完了していたので、音声のフックなどを追加しました。
:root{
--gray-light:#f5f5f5;
--gray-medium:#cccccc;
--gray-dark:#333333;
--radius-system:12px;
}
/* =========================================================
カードのcss設定
========================================================= */
.card {
background: var(--gray-light);
color: var(--gray-dark);
border: 1px solid var(--gray-medium);
border-radius: var(--radius-system);
font-family: monospace;
font-size: 42px;
font-weight: bold;
width: 105px;
height: 125px;
line-height: 125px;
margin: 0 auto 5px auto;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.06);
backface-visibility: hidden;
transform-style: preserve-3d;
}
.card-flipper { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; backface-visibility: hidden; }
.is-flipped { transform: rotateY(180deg); }2.2. dropoutポッドのフロップ
旧voidポッドです、今回のコンセプトが近未来アノテーションタスクに使われている人間というものに決まったのでそれに合わせて名称を dropoutとすることにしました。ここには、deck10枚中からランダムに３枚抜き出されて山札から除外されたカードが入ります。 voidscan（名称は変える予定）というアイテムでこのdropout（旧void）のカードを確認することができるように、フロップアニメーションを付けました。
作成中のゲームui フロップの実装
2.3 獲得ポッドのアニメーション
現状はリスト風にスタックしているだけですが、これだと少し味気ないので、手元左側にスタックしていくようにしていくようにしました。
獲得ポッドにたまったカードを左下にスタックしていくようにアニメーション
スタックしていくので、voidscan(旧称）と併用することで、山札にある数字を確実に知ることができるようになります。
現状では獲得ポッドへのスタックだけですが、セット終了時のオーバーレイなどが完成したらそのデザインに合わせてアニメーションを追加予定です。どちらが獲得するか確定したら（バーストするかfoldしたとき）はポッドからポイント（上側の欄）へとカードがポイントに変換されているようなアニメーションを追加しようとおもいます。
まとめ
今回は、カードの移動などに関するアニメーションを追加してみました。フロップをどの程度共有化するかや、アニメーションのプレ読み込みなどをするなどいろいろ工夫出来て面白かったです。
関連記事
【第９回】ゲームデザインとアイテム実装
ゲームルールを考える：ハイアンドローモックアップ【CFW P2P心理戦ゲーム開発記】 #9
【第13回】ゲームルールの策定v1
Logic High and Low v1ルール策定とゲーム本体実装【CFW P2P心理戦ゲーム開発記】 #13
【第14回】ゲームUIのコンセプト決定
コンセプトとゲームUIに着手【CFW P2P心理戦ゲーム開発記】 #14
次回予告
次回はセット終了時に「セット数比較」が出る画面を追加します。今どちらが勝ったのかを直感的に提示しつつ、カードの数字を覚えるなどの「認識負荷」を一旦クリアするための、セット完了オーバーレイを実装していく予定です。
次回 セット完了オーバレイ実装
ゲームUIのアニメーション作成その２-サマリーオーバーレイ【CFW P2P心理戦ゲーム開発記】 #16
ここまで読んでいただきありがとうございます。
では、次の記事で。 lumenHero
