การสร้างคอมโพเนนต์เมนูเกม 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 มิติ

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

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

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

@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 อินเทอร์เฟซของ Challenge จะจัดการปุ่มลูกศรให้กับเรา โค้ดด้านล่างบอก ไลบรารีเพื่อดักจับโฟกัสภายใน .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() และใช้ค่าแบบเดลต้าเป็นรูปแบบพร็อพเพอร์ตี้ที่กำหนดเอง I หารด้วย 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 ในผู้ใช้ สไตล์ชีตของ Agent ซึ่งหมายความว่า HTML ของเมนูเกมจะต้องเปลี่ยนเพื่อรองรับ ดีไซน์ที่ต้องการได้ด้วย การเปลี่ยนรายการปุ่มเป็นรายการลิงก์จะเป็นการเปิดใช้ตรรกะ เพื่อเปลี่ยนทิศทางเมนู เนื่องจากองค์ประกอบ <a> ไม่มีเบราว์เซอร์ รูปแบบ !important ที่ระบุ

บทสรุป

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

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

รีมิกซ์ในชุมชน

ยังไม่มีอะไรให้ดูที่นี่!