การสร้างคอมโพเนนต์เมนูเกม 3 มิติ

ภาพรวมพื้นฐานเกี่ยวกับวิธีสร้างเมนูเกม 3 มิติที่ปรับเปลี่ยนได้ ปรับให้เหมาะสม และเข้าถึงได้

Adam Argyle

ในโพสต์นี้ เราต้องการแชร์แนวคิดเกี่ยวกับวิธีสร้างคอมโพเนนต์เมนูเกม 3 มิติ ลองใช้เดโม

หากต้องการดูวิดีโอ โปรดดูโพสต์เวอร์ชัน YouTube ที่นี่

ภาพรวม

วิดีโอเกมมักจะนำเสนอเมนูที่สร้างสรรค์และแปลกใหม่แก่ผู้ใช้ ภาพเคลื่อนไหวและในพื้นที่ 3 มิติ เทคนิคนี้ได้รับความนิยมในเกม 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. การวางองค์ประกอบในพื้นที่ 3 มิติ

ภาพรวมของพร็อพเพอร์ตี้ที่กำหนดเอง

พร็อพเพอร์ตี้ที่กำหนดเองช่วยขจัดความกำกวมเกี่ยวกับค่าต่างๆ ได้โดยการตั้งชื่อที่มีความหมายให้กับค่าที่ดูสุ่ม หลีกเลี่ยงการใช้โค้ดซ้ำ และแชร์ค่ากับรายการย่อย

ด้านล่างนี้คือ Media Query ที่บันทึกเป็นตัวแปร CSS หรือที่เรียกว่า custom media ซึ่งจะเป็นแบบส่วนกลางและจะใช้กับตัวเลือกต่างๆ เพื่อให้โค้ดกระชับและอ่านง่าย คอมโพเนนต์เมนูเกมใช้ค่ากำหนดการเคลื่อนไหว รูปแบบสีของระบบ และความสามารถแบบช่วงสีของจอแสดงผล

@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);
  }
}

การเปิดใช้มุมมอง 3 มิติ

หากต้องการให้องค์ประกอบแสดงในพื้นที่ 3 มิติของหน้าเว็บ คุณต้องเริ่มต้นวิวพอร์ตที่มีมุมมอง เราเลือกที่จะใส่มุมมองในองค์ประกอบ body ใช้หน่วยการแสดงผลเพื่อสร้างสไตล์ที่ชอบ

body {
  perspective: 40vw;
}

นี่เป็นประเภทของผลกระทบที่มุมมองอาจมี

จัดรูปแบบรายการปุ่ม <ul>

องค์ประกอบนี้มีหน้าที่รับผิดชอบในเลย์เอาต์มาโครรายการปุ่มโดยรวม รวมถึงเป็นการ์ดแบบอินเทอร์แอกทีฟและแบบ 3 มิติที่ลอยอยู่ มาดูวิธีกัน

เลย์เอาต์กลุ่มปุ่ม

Flexbox สามารถจัดการเลย์เอาต์ของคอนเทนเนอร์ได้ เปลี่ยนทิศทางเริ่มต้นของ Flex จากแถวเป็นคอลัมน์ด้วย flex-direction และตรวจสอบว่าแต่ละรายการมีขนาดเท่ากับเนื้อหาโดยเปลี่ยนจาก stretch เป็น start สำหรับ align-items

.threeD-button-set {
  /* remove <ul> margins */
  margin: 0;

  /* vertical rag-right layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5vh;
}

ถัดไป ให้สร้างคอนเทนเนอร์เป็นบริบทพื้นที่ 3 มิติ และตั้งค่าฟังก์ชัน 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 ในการเปลี่ยนรูปแบบ การเปลี่ยนภาพนี้จะเกิดขึ้นเมื่อเมาส์โต้ตอบกับการ์ด ซึ่งช่วยให้การเปลี่ยนภาพเพื่อหมุนเป็นไปอย่างราบรื่น ภาพเคลื่อนไหวเป็นภาพเคลื่อนไหวที่เคลื่อนไหวอย่างต่อเนื่องซึ่งแสดงให้เห็นพื้นที่ 3 มิติที่การ์ดอยู่ภายใน แม้ว่าเมาส์จะไม่สามารถหรือไม่ได้โต้ตอบกับคอมโพเนนต์ก็ตาม

@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;
}

องค์ประกอบเทียมของปุ่ม

เส้นขอบของปุ่มไม่ใช่เส้นขอบแบบดั้งเดิม แต่เป็นองค์ประกอบจำลองที่มีเส้นขอบในตำแหน่งสัมบูรณ์

องค์ประกอบเหล่านี้มีความสำคัญอย่างยิ่งในการแสดงมุมมอง 3 มิติที่ตั้งไว้ องค์ประกอบเทียมรายการใดรายการหนึ่งเหล่านี้จะถูกผลักออกจากปุ่ม และรายการหนึ่งจะถูกดึงเข้าไปใกล้ผู้ใช้มากขึ้น คุณจะเห็นเอฟเฟ็กต์ได้อย่างชัดเจน ที่ปุ่มด้านบนและด้านล่าง

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

รูปแบบการเปลี่ยนรูปแบบ 3 มิติ

ด้านล่าง 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 ควรพร้อมรับการเปลี่ยนแปลงและตั้งค่าการเปลี่ยนผ่านสําหรับพร็อพเพอร์ตี้ 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 }
    }
  }
}

มุมมอง 3 มิติยังดูดีอยู่สำหรับค่ากำหนดการเคลื่อนไหว reduced องค์ประกอบด้านบนและด้านล่างจะแสดงเอฟเฟกต์แบบเนียนๆ

การเพิ่มประสิทธิภาพเล็กๆ น้อยๆ ด้วย 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 ของเมาส์และแสดงผลค่าที่ใช้หมุนการ์ดได้ ฟังก์ชันต่อไปนี้จะใช้ตำแหน่งของเมาส์เพื่อแยกแยะว่ากล่องด้านใดด้านหนึ่งอยู่ภายในกล่อง และระบุว่าแต่ละด้านมีมากแค่ไหน ระบบจะแสดงผลค่า delta จากฟังก์ชัน

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`)
  })
}

คำแปลและเส้นทาง

พบปัญหา 1 ข้อเมื่อทดสอบเมนูเกมในโหมดการเขียนและภาษาอื่นๆ

องค์ประกอบ <button> มีรูปแบบ !important สำหรับ writing-mode ในสไตล์ชีต User Agent ซึ่งหมายความว่า HTML ของเมนูเกมต้องเปลี่ยนไปเพื่อให้รองรับการออกแบบที่ต้องการ การเปลี่ยนรายการปุ่มเป็นรายการลิงก์จะช่วยให้คุณสมบัติเชิงตรรกะเปลี่ยนทิศทางของเมนูได้ เนื่องจากองค์ประกอบ <a> ไม่มีสไตล์ !important ที่ได้จากเบราว์เซอร์

บทสรุป

ตอนนี้คุณทราบวิธีที่เราทำแล้ว คุณจะทำอย่างไร 🙂 คุณสามารถเพิ่มการโต้ตอบกับเครื่องวัดความเร่งในเมนูได้ไหม เพื่อให้การพลิกโทรศัพท์ทำให้เมนูหมุนได้ เราช่วยปรับปรุงประสบการณ์การใช้งานโหมดไม่มีการเคลื่อนไหวได้ไหม

มาเพิ่มความหลากหลายให้แนวทางของเราและเรียนรู้วิธีทั้งหมดในการสร้างเนื้อหาบนเว็บกัน สร้างเดโม แล้วทวีตลิงก์มาหาเรา เราจะเพิ่มลงในส่วนรีมิกซ์ของชุมชนด้านล่าง

รีมิกซ์ของชุมชน

ยังไม่มีข้อมูลให้ดู