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

レスポンシブでアダプティブ、かつアクセスしやすい 3D ゲームメニューを作成する方法の基本概要。

この投稿では、3D ゲームメニュー コンポーネントを構築する方法についての考えを共有します。ぜひ、 demo

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> デモ

動画で視聴したい場合は、この投稿の 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 つのステップに分かれます。

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

ライトモードとダークモードの背景の円錐背景

ライトモードは、cyandeeppink の円錐の色味になります グラデーション ダークモードでは濃い円錐グラデーションになります詳細を確認するには 円錐グラデーションで実行できます。conic.style をご覧ください。

html {
  background: conic-gradient(at -10% 50%, deeppink, cyan);

  @media (--dark) {
    background: conic-gradient(at -10% 50%, #212529, 50%, #495057, #212529);
  }
}
<ph type="x-smartling-placeholder">
</ph>
明るい色と暗い色の設定が切り替わる背景のデモンストレーション。

3D 視点の有効化

要素がウェブページの 3D 空間に存在するようにするには、 視点 初期化する必要があります。body 要素に視点を配置することを選択しました ビューポートの単位を使用して、気に入ったスタイルを作成しました。

body {
  perspective: 40vw;
}

これが、視点が与える影響です。

<ul> ボタンリストのスタイル設定

この要素は、ボタンリスト マクロ全体のレイアウトと インタラクティブな 3D フローティングカードですこれを実現する方法は次のとおりです。

ボタングループのレイアウト

Flexbox はコンテナ レイアウトを管理できます。Flex のデフォルトの方向を変更する flex-direction で行から列への変換を作成し、各アイテムが align-itemsstretch から 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 アニメーションでは、中央のキーフレームのみが 50% に設定されます。これは、 ブラウザのデフォルトの 0%100% が、要素のデフォルト スタイルに設定されます。この は、アニメーションの開始と終了が同じになるように、交互になるアニメーションの省略形です。 なります。無限の交互のアニメーションをわかりやすく表現できます。

@keyframes rotate-y {
  50% {
    transform: rotateY(15deg) rotateX(-6deg);
  }
}

<li> 要素のスタイル設定

各リストアイテム(<li>)には、ボタンとその枠線要素が含まれています。「 display のスタイルが変更されたため、アイテムに ::markerposition スタイル 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 視点のボタンリストのスクリーンショット、今回はスタイル付き
できます。

ボタン疑似要素

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

次のボタンが表示された Chrome DevTools の [Elements] パネルのスクリーンショット
::before 要素と ::after 要素を使用します。

これらの要素は、これまでに作成された 3D の視点を紹介するうえで非常に重要です。 あります。要素の一つがボタンから遠ざけられ もう 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)'
)

次に、マウスの xy の位置を受け取って、 この値を使用してカードを回転させます次の関数はマウスコマンドを使用して 入っているかどうかを判断できます。「 デルタが関数から返されます。

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 スタイル。

まとめ

どうやってやったかわかったなあ ‽ 🙂? 加速度計を追加できる? 移動させるとメニューが回転するの?改善できるか 動きのない体験は?

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

コミュニティ リミックス

ここにはまだ何も表示されません。