基本介紹如何建構回應式、自動調整且無障礙的 3D 遊戲選單。
在這篇文章中,我想分享一些建構 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
設定按鈕清單樣式可分為下列高階步驟:
- 設定自訂屬性。
- Flexbox 版面配置。
- 含有裝飾虛擬元素的自訂按鈕。
- 將元素放入 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
將彈性的預設方向從資料列變更為資料欄,同時針對 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;
}
設定 <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 }
}
}
}
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 來填充差異值,減少扭曲結果,或許是更好的方法。如果您一開始記得,我們將 --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 推文連結,我就能將這項工具新增至下方的「社群重混」部分!
社群重混作品
這裡還沒有內容!