建立 3D 遊戲選單元件

概略說明如何建立回應式、可自動調整且無障礙的 3D 遊戲選單。

Adam Argyle

在這篇文章中，我想分享 3D 遊戲選單元件的建構方式。試試 demo」。

示範

如果您喜歡看影片，請參考這篇文章的 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 漸層 深色主題則使用深灰色的錐體漸層。如要進一步瞭解 可以使用圓錐漸層達成，請參閱 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 從資料列到資料欄，並確保每個項目的大小都是 將 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 動畫只會在 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;
}

清單在 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 開發人員工具元素面板的螢幕截圖，其中顯示 ::before 和 ::after 元素

這些元素對於 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 樣式。

結論

現在你知道我如何做到了，現在應該是怎麼新增加速計 🙂? 因此，若要讓手機旋轉選單嗎？我們能否改善 沒有動態效果？

讓我們來體驗多元的方法，瞭解透過網路建立內容的所有方式。 建立示範、將 Twitter 推文連結，我們就會為您新增 前往下方的社群重混專區！

社群重混作品

這裡還沒有任何資訊！