3D ゲーム メニュー コンポーネントの作成

レスポンシブで適応性があり、ユーザー補助に対応した 3D ゲーム メニューを作成する方法の基本的な概要。

Adam Argyle

この投稿では、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

ボタンリストのスタイル設定は、大まかに次の手順に分けられます。

  1. カスタム プロパティを設定する。
  2. Flexbox レイアウト。
  3. 装飾的な疑似要素を使用したカスタムボタン。
  4. 要素を 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 空間に配置するには、遠近感のあるビューポートを初期化する必要があります。パースペクティブを 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;
  }
}

rotate-y アニメーションでは、0% と 100% はデフォルトで要素のデフォルト スタイルになるため、中間のキーフレームのみ 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;
}

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;
}

3D パースペクティブのボタンリストのスクリーンショット。今回はスタイル設定されたボタンを使用しています。

ボタンの疑似要素

ボタンの枠線は従来の枠線ではなく、枠線付きの絶対位置疑似要素です。

::before 要素と ::after 要素を持つボタンが表示された Chrome Devtools の [Elements] パネルのスクリーンショット。

これらの要素は、確立された 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 で除算しましたが、もっと良い方法があるかもしれません。最初に、clamp() 関数の中央に --x プロップと --y プロップを配置しました。これにより、マウスの位置によってカードが過度に回転して判読できない位置に移動するのを防ぐことができます。

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 スタイルがないためです。

まとめ

私がどのように作成したかはわかりましたが、あなたならどうしますか？ 🙂? スマートフォンをタイル状に並べることでメニューが回転するように、メニューに加速度計の操作を追加できますか？モーションなしの操作を改善できますか？

アプローチを多様化し、ウェブで構築するすべての方法を学びましょう。デモを作成して、ツイートしてください。リンクを送信していただければ、下のコミュニティ リミックスのセクションに追加します。

コミュニティ リミックス

表示する項目はありません