レスポンシブでアダプティブ、かつアクセスしやすい 3D ゲームメニューを作成する方法の基本概要。
この投稿では、3D ゲームメニュー コンポーネントを構築する方法についての考えを共有します。デモを試す。
動画で視聴したい場合は、この投稿の YouTube バージョンをご利用ください。
概要
ビデオゲームでは多くの場合、アニメーションや 3D 空間でクリエイティブでユニークなメニューをユーザーに表示します。新しい AR/VR ゲームでは、メニューが宇宙に浮かんでいるように見せることが一般的です。本日は、この効果の基本を再現しますが、アダプティブ カラーパターンの要素と、動きの軽減を好むユーザー向けに配慮を加えています。
HTML
ゲームメニューはボタンのリストです。これを HTML で表すのにおすすめの方法は次のとおりです。
<ul class="threeD-button-set">
<li><button>New Game</button></li>
<li><button>Continue</button></li>
<li><button>Online</button></li>
<li><button>Settings</button></li>
<li><button>Quit</button></li>
</ul>
ボタンのリストはスクリーン リーダー技術に適切に通知され、JavaScript や CSS がなくても機能します。
CSS
ボタンリストのスタイル設定は、大まかに次の 3 つのステップに分かれます。
- カスタム プロパティの設定。
- Flexbox レイアウト。
- 装飾的な疑似要素を含むカスタムボタン。
- 3D 空間に要素を配置する。
カスタム プロパティの概要
カスタム プロパティを使用すると、ランダムな値に意味のある名前を付けることで、値のあいまいさを排除できます。これにより、コードが繰り返されることや、子間で値を共有することを避けられます。
以下は、CSS 変数として保存されているメディアクエリ（カスタム メディアとも呼ばれます）です。これらはグローバルなものであり、コードを簡潔で読みやすい状態に保つためにさまざまなセレクタで使用されます。ゲームメニュー コンポーネントは、ディスプレイのモーション設定、システム カラーパターン、色範囲機能を使用します。
@custom-media --motionOK (prefers-reduced-motion: no-preference);
@custom-media --dark (prefers-color-scheme: dark);
@custom-media --HDcolor (dynamic-range: high);
次のカスタム プロパティは、カラーパターンを管理し、マウス位置の値を保持して、ゲームメニューをインタラクティブにマウスオーバーできるようにします。カスタム プロパティに名前を付けると、値のユースケースや値の結果のわかりやすい名前が明らかになるため、コードの読みやすさが向上します。
.threeD-button-set {
--y:;
--x:;
--distance: 1px;
--theme: hsl(180 100% 50%);
--theme-bg: hsl(180 100% 50% / 25%);
--theme-bg-hover: hsl(180 100% 50% / 40%);
--theme-text: white;
--theme-shadow: hsl(180 100% 10% / 25%);
--_max-rotateY: 10deg;
--_max-rotateX: 15deg;
--_btn-bg: var(--theme-bg);
--_btn-bg-hover: var(--theme-bg-hover);
--_btn-text: var(--theme-text);
--_btn-text-shadow: var(--theme-shadow);
--_bounce-ease: cubic-bezier(.5, 1.75, .75, 1.25);
@media (--dark) {
--theme: hsl(255 53% 50%);
--theme-bg: hsl(255 53% 71% / 25%);
--theme-bg-hover: hsl(255 53% 50% / 40%);
--theme-shadow: hsl(255 53% 10% / 25%);
}
@media (--HDcolor) {
@supports (color: color(display-p3 0 0 0)) {
--theme: color(display-p3 .4 0 .9);
}
}
}
ライトモードとダークモードの背景の円錐背景
ライトモードでは cyan から deeppink への鮮やかな円錐グラデーションになり、ダークモードでは暗い薄い円錐グラデーションになります。円錐グラデーションでできることについて詳しくは、conic.style をご覧ください。
html {
background: conic-gradient(at -10% 50%, deeppink, cyan);
@media (--dark) {
background: conic-gradient(at -10% 50%, #212529, 50%, #495057, #212529);
}
}
3D 視点の有効化
ウェブページの 3D 空間に要素が存在するようにするには、Perspective を使用するビューポートを初期化する必要があります。body 要素に視点を設定し、ビューポートの単位を使用して好みのスタイルを作成しました。
body {
perspective: 40vw;
}
これが、視点が与える影響です。
<ul> ボタンリストのスタイル設定
この要素は、ボタンリスト マクロ全体のレイアウトを担うとともに、インタラクティブな 3D フローティング カードにもなります。これを実現する方法は次のとおりです。
ボタングループのレイアウト
Flexbox はコンテナ レイアウトを管理できます。flex-direction を使用して Flex のデフォルトの方向を行から列に変更し、align-items の stretch から start に変更して、各項目がコンテンツのサイズになるようにします。
.threeD-button-set {
/* remove <ul> margins */
margin: 0;
/* vertical rag-right layout */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2.5vh;
}
次に、コンテナを 3D 空間コンテキストとして確立し、カードが読み取り可能な回転を超えて回転しないように CSS clamp() 関数を設定します。なお、クランプの中央値はカスタム プロパティです。これらの --x と --y の値は、後でマウス操作したときに JavaScript から設定されます。
.threeD-button-set {
…
/* create 3D space context */
transform-style: preserve-3d;
/* clamped menu rotation to not be too extreme */
transform:
rotateY(
clamp(
calc(var(--_max-rotateY) * -1),
var(--y),
var(--_max-rotateY)
)
)
rotateX(
clamp(
calc(var(--_max-rotateX) * -1),
var(--x),
var(--_max-rotateX)
)
)
;
}
次に、アクセスしたユーザーの動きに問題がない場合、will-change を使用して、このアイテムの変換が常に変更されるというヒントをブラウザに追加します。さらに、変換に transition を設定して補間を有効にします。この遷移は、マウスがカードを操作したときに発生し、回転の変化へのスムーズな遷移を可能にします。このアニメーションは、マウスがコンポーネントを操作できない場合や操作していない場合でも、常に動作しているアニメーションで、カードが配置されている 3D 空間を示します。
@media (--motionOK) {
.threeD-button-set {
/* browser hint so it can be prepared and optimized */
will-change: transform;
/* transition transform style changes and run an infinite animation */
transition: transform .1s ease;
animation: rotate-y 5s ease-in-out infinite;
}
}
ブラウザはデフォルトで 0% と 100% を要素のデフォルト スタイルに設定するため、rotate-y アニメーションは中央のキーフレームを 50% のみに設定します。これは、アニメーションの開始と終了を同じ位置で切り替える、アニメーションの省略形です。無限の交互のアニメーションをわかりやすく表現できます。
@keyframes rotate-y {
50% {
transform: rotateY(15deg) rotateX(-6deg);
}
}
<li> 要素のスタイル設定
各リストアイテム（<li>）には、ボタンとその枠線要素が含まれています。display スタイルが変更され、アイテムに ::marker が表示されなくなります。position スタイルは relative に設定されているため、次のボタン疑似要素は、ボタンが消費する全領域内に配置できます。
.threeD-button-set > li {
/* change display type from list-item */
display: inline-flex;
/* create context for button pseudos */
position: relative;
/* create 3D space context */
transform-style: preserve-3d;
}
<button> 要素のスタイル設定
ボタンのスタイル設定は大変な作業になりがちで、考慮すべき状態やインタラクションの種類が数多くあります。これらのボタンは、擬似要素、アニメーション、操作のバランスをとるため、すぐに複雑になります。
最初の <button> スタイル
以下は、他の状態をサポートする基本的なスタイルです。
.threeD-button-set button {
/* strip out default button styles */
appearance: none;
outline: none;
border: none;
/* bring in brand styles via props */
background-color: var(--_btn-bg);
color: var(--_btn-text);
text-shadow: 0 1px 1px var(--_btn-text-shadow);
/* large text rounded corner and padded*/
font-size: 5vmin;
font-family: Audiowide;
padding-block: .75ch;
padding-inline: 2ch;
border-radius: 5px 20px;
}
ボタン疑似要素
ボタンの枠線は従来の枠線ではなく、枠線付きの絶対位置疑似要素です。
![::before 要素と ::after 要素を含むボタンが表示された Chrome DevTools の [Elements] パネルのスクリーンショット。](https://web.developers.google.cn/static/articles/building/a-3d-game-menu-component/image/screenshot-chrome-devtoo-efa405c57c182.png?authuser=3&hl=ja)
これらの要素は、確立された 3D 視点を示すうえで非常に重要です。疑似要素の 1 つはボタンから遠ざけられ、もう 1 つはユーザーの近くに配置されます。この影響を最も顕著に表しているのは上下のボタンです。
.threeD-button button {
…
&::after,
&::before {
/* create empty element */
content: '';
opacity: .8;
/* cover the parent (button) */
position: absolute;
inset: 0;
/* style the element for border accents */
border: 1px solid var(--theme);
border-radius: 5px 20px;
}
/* exceptions for one of the pseudo elements */
/* this will be pushed back (3x) and have a thicker border */
&::before {
border-width: 3px;
/* in dark mode, it glows! */
@media (--dark) {
box-shadow:
0 0 25px var(--theme),
inset 0 0 25px var(--theme);
}
}
}
3D 変換スタイル
以下の transform-style は preserve-3d に設定されているため、子は z 軸で間隔を空けることができます。transform は --distance カスタム プロパティに設定されます。このプロパティは、カーソルを合わせてフォーカスすると増加します。
.threeD-button-set button {
…
transform: translateZ(var(--distance));
transform-style: preserve-3d;
&::after {
/* pull forward in Z space with a 3x multiplier */
transform: translateZ(calc(var(--distance) / 3));
}
&::before {
/* push back in Z space with a 3x multiplier */
transform: translateZ(calc(var(--distance) / 3 * -1));
}
}
条件付きアニメーション スタイル
ユーザーが動きに問題がなければ、このボタンにより、変換プロパティを変更する準備ができていることがブラウザに通知され、transform プロパティと background-color プロパティに遷移が設定されます。持続時間の違いに注意してください。
.threeD-button-set button {
…
@media (--motionOK) {
will-change: transform;
transition:
transform .2s ease,
background-color .5s ease
;
&::before,
&::after {
transition: transform .1s ease-out;
}
&::after { transition-duration: .5s }
&::before { transition-duration: .3s }
}
}
マウスオーバー操作とフォーカス操作のスタイル
インタラクション アニメーションの目的は、フラット表示ボタンを構成するレイヤを分散させることです。これを行うには、--distance 変数を最初は 1px に設定します。次のコード例に示すセレクタは、フォーカス インジケーターを表示するデバイスによってボタンがホバーまたはフォーカスされていて、アクティブになっていないかどうかを確認します。そのような場合は、CSS を適用して次の処理を行います。
- マウスオーバーの背景色を適用します。
- 距離を長くする。
- 弾むイーズ効果を追加します。
- 疑似要素遷移をずらす。
.threeD-button-set button {
…
&:is(:hover, :focus-visible):not(:active) {
/* subtle distance plus bg color change on hover/focus */
--distance: 15px;
background-color: var(--_btn-bg-hover);
/* if motion is OK, setup transitions and increase distance */
@media (--motionOK) {
--distance: 3vmax;
transition-timing-function: var(--_bounce-ease);
transition-duration: .4s;
&::after { transition-duration: .5s }
&::before { transition-duration: .3s }
}
}
}
3D 視点は、reduced のモーション設定でも非常に魅力的でした。上下の要素は、効果を控えめに表現しています。
JavaScript による小さな機能強化
このインターフェースはキーボード、スクリーン リーダー、ゲームパッド、タップ、マウスに対応していますが、JavaScript を軽く追加していくつかのシナリオを改善することもできます。
対応する矢印キー
Tab キーはメニューを操作するのには便利ですが、ゲームパッドでは十字キーまたはジョイスティックでフォーカスを移動できると想定します。GUI チャレンジ インターフェースによく使用される roving-ux ライブラリは、矢印キーを処理します。次のコードは、.threeD-button-set 内でフォーカスをトラップし、フォーカスをボタンの子に転送するようにライブラリに指示しています。
import {rovingIndex} from 'roving-ux'
rovingIndex({
element: document.querySelector('.threeD-button-set'),
target: 'button',
})
マウスの視差操作
マウスをトラッキングしてメニューを傾ける機能は、マウスの代わりに仮想ポインタを使用できる AR および VR ビデオゲーム インターフェースを模倣することを目的としています。要素がポインタを高度に認識している場合、これは楽しいものです。
これは小さな追加機能であるため、ユーザーのモーション設定のクエリの背後にインタラクションを配置します。また、設定の一環として、querySelector を使用してボタンリスト コンポーネントをメモリに格納し、要素の境界を menuRect にキャッシュします。この境界を使用して、マウスの位置に基づいてカードに適用される回転オフセットを決定します。
const menu = document.querySelector('.threeD-button-set')
const menuRect = menu.getBoundingClientRect()
const { matches:motionOK } = window.matchMedia(
'(prefers-reduced-motion: no-preference)'
)
次に、マウスの x 位置と y 位置を受け取り、カードの回転に使用できる値を返す関数が必要です。次の関数では、マウスの位置を使用して、ボックスのどの面にどのくらい収まるかを判断します。デルタは関数から返されます。
const getAngles = (clientX, clientY) => {
const { x, y, width, height } = menuRect
const dx = clientX - (x + 0.5 * width)
const dy = clientY - (y + 0.5 * height)
return {dx,dy}
}
最後に、マウスの動きを監視して位置を getAngles() 関数に渡し、デルタ値をカスタム プロパティ スタイルとして使用します。20 で割ることでデルタが埋められて
ぎこちなくなってしまいますが
もっと良い方法があるかもしれませんすでに説明したとおり、--x プロパティと --y プロパティを clamp() 関数の中央に配置することで、マウスの位置によってカードが過度に回転して判読不能な位置になるのを防ぎます。
if (motionOK) {
window.addEventListener('mousemove', ({target, clientX, clientY}) => {
const {dx,dy} = getAngles(clientX, clientY)
menu.attributeStyleMap.set('--x', `${dy / 20}deg`)
menu.attributeStyleMap.set('--y', `${dx / 20}deg`)
})
}
翻訳とルート
他のライティング モードや言語でゲームメニューをテストする際に、1 つの問題がありました。
<button> 要素の writing-mode には、ユーザー エージェント スタイルシートで !important スタイルが設定されています。つまり、目的のデザインに合わせてゲームメニューの HTML を変更する必要がありました。<a> 要素にはブラウザが提供する !important スタイルがないため、ボタンリストをリンクのリストに変更すると、論理プロパティでメニューの方向を変更できるようになります。
おわりに
操作方法をご理解いただけたと思いますが、いかがでしょうか？ ‽ 🙂? メニューに加速度計の操作を追加して、スマートフォンをタイル表示するとメニューが回転するようにできますか？動きのないエクスペリエンスを改善できますか？
手法を多様化して、ウェブで構築するすべての方法を学びましょう。 デモを作成し、ツイートしてリンクをツイートしてください。以下のコミュニティ リミックスのセクションに追加いたします。
コミュニティ リミックス
ここにはまだ何も表示されません。