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