建立 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 空間中的元素出現在網頁的 3D 空間中，就必須初始化設有觀點的可視區域。我選擇將視角放在 body 元素上，並使用可視區域單元來建立喜歡的樣式。

body {
  perspective: 40vw;
}

這是可能影響觀點的類型。

設定 <ul> 按鈕清單的樣式

這個元素負責整體按鈕清單巨集版面配置，以及互動式 3D 浮動資訊卡。方法如下：

按鈕群組版面配置

Flexbox 可以管理容器版面配置。使用 flex-direction 將預設彈性方向從資料列變更為資料欄，並確保每個項目都是其內容的大小，方法是針對 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() 函式，確保資訊卡不會在可辨識的旋轉範圍之外旋轉。請注意，取值範圍的中間值是自訂屬性，系統會在之後與滑鼠互動時，透過 JavaScript 設定這些 --x 和 --y 值。

.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 樣式，因此項目不會顯示 ::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;
}

按鈕虛擬元素

按鈕邊框不是傳統的邊框，而是有邊框的絕對位置虛擬元素。

這些元素對於呈現已建立的 3D 視角至關重要。其中一項虛擬元素會由按鈕從按鈕上移除，再從使用者處拉出。在頂端和底部按鈕中，效果最為明顯。

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

就 reduced 動作偏好設定而言，3D 視角仍十分完美。頂部和底部元素會以流暢的方式呈現效果。

使用 JavaScript 進一步強化

這個介面可透過鍵盤、螢幕閱讀器、遊戲搖桿、觸控和滑鼠操作使用，但我們也可以稍微調整 JavaScript，以簡化幾種使用情境。

輔助方向鍵

按 Tab 鍵是瀏覽選單的最佳方式，但我希望方向鍵或搖桿將焦點移至遊戲手把。roving-ux 程式庫通常用於 GUI 驗證介面，可用於處理方向鍵。下方程式碼會指示程式庫將焦點保留在 .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`)
  })
}

翻譯與路線

使用其他編寫模式和語言測試遊戲選單時，會遇到一個問題。

在使用者代理程式樣式表中，<button> 元素的 !important 樣式為 writing-mode。因此，您需要變更遊戲選單 HTML，才能符合想要的設計。由於 <a> 元素沒有瀏覽器提供的 !important 樣式，因此將按鈕清單變更為連結清單，可讓邏輯屬性變更選單方向。

結論

現在你知道怎麼辦到的嗎？‮ 🙂? 能否在選單中加入加速計互動功能，讓手機旋轉選單？沒有動態效果，我們是否可以改善？

讓我們來體驗更多元的方法，並瞭解在網路上建立內容的所有方式。 建立示範、張貼推文 連結，以便我們將其新增至下方的社群重混專區！

社群重混作品

這裡還沒有任何資訊！