构建 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 DevTools“Elements”面板的屏幕截图，其中显示了一个包含 ::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 键浏览菜单是很好的方式，但我希望在游戏手柄上使用方向键或摇杆来移动焦点。通常用于 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> 元素在用户代理样式表中具有 writing-mode 的 !important 样式。这意味着，游戏菜单 HTML 需要更改，以适应所需的设计。将按钮列表更改为链接列表后，逻辑属性便可更改菜单方向，因为 <a> 元素没有浏览器提供的 !important 样式。

总结

现在，您已经知道我是如何实现的，您会怎么做？您能否为菜单添加加速度计互动，以便在手机横屏时旋转菜单？我们能否改进无动作体验？

让我们多元化我们的方法，了解在 Web 上构建的所有方式。 制作一个演示版，在推特上向我发送链接，我会将其添加到下方的社区混剪部分！

社区混剪作品

此处尚无可显示的内容！