建立 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 動畫只會在 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，以便在某些情況下使用。

支援方向鍵

使用分頁鍵瀏覽選單是個不錯的方法，但我希望方向板或搖桿能用於在遊戲控制器上移動焦點。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 樣式。

結論

既然您瞭解我的做法，那麼您會如何處理呢？ 🙂? 您能否在選單中加入加速度計互動功能，讓手機平鋪時會旋轉選單呢？我們可以改善無動態內容的使用體驗嗎？

讓我們多方嘗試，瞭解在網路上建構應用程式的所有方式。請製作示範作品，並在推特上傳連結，我會將其加入下方的社群重混曲目錄！

社群重混作品

尚無任何資料可提供！