ภาพรวมพื้นฐานของวิธีสร้างเมนูเกม 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 มิติ
ภาพรวมของพร็อพเพอร์ตี้ที่กำหนดเอง
พร็อพเพอร์ตี้ที่กำหนดเองจะช่วยชี้แจงค่าต่างๆ โดยการตั้งชื่อที่สื่อความหมายให้กับค่าที่มีลักษณะแบบสุ่ม หลีกเลี่ยงการใช้โค้ดซ้ำและการแชร์ค่าระหว่างเด็ก
ด้านล่างนี้คือคำค้นหาสื่อที่บันทึกไว้เป็นตัวแปร CSS หรือที่เรียกว่าสื่อที่กำหนดเอง โค้ดเหล่านี้เป็นแบบสากลและจะใช้ในตัวเลือกที่หลากหลายเพื่อให้โค้ดกระชับและอ่านง่าย คอมโพเนนต์เมนูเกมใช้ค่ากำหนดการเคลื่อนไหว รูปแบบสีของระบบ และความสามารถแบบช่วงสีของจอแสดงผล
@custom-media --motionOK (prefers-reduced-motion: no-preference);
@custom-media --dark (prefers-color-scheme: dark);
@custom-media --HDcolor (dynamic-range: high);
คุณสมบัติที่กำหนดเองต่อไปนี้จะจัดการรูปแบบสีและมีค่าตำแหน่งของเมาส์ค้างไว้เพื่อให้เมนูเกมเป็นแบบอินเทอร์แอกทีฟเมื่อวางเมาส์เหนือ การตั้งชื่อพร็อพเพอร์ตี้ที่กำหนดเองช่วยให้โค้ดอ่านง่ายขึ้นเนื่องจากจะแสดง Use Case สําหรับค่าหรือชื่อที่จำง่ายสําหรับผลลัพธ์ของค่า
.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 มิติของหน้าเว็บ วิวพอร์ตที่มี perspective จะต้องเริ่มต้นการทำงาน ฉันเลือกใส่มุมมองในองค์ประกอบ body และใช้หน่วยวิวพอร์ตเพื่อสร้างรูปแบบที่ฉันชอบ
body {
perspective: 40vw;
}
นี่คือประเภทของผลกระทบที่อาจเกิดขึ้น
การจัดรูปแบบรายการปุ่ม <ul>
องค์ประกอบนี้รับผิดชอบการจัดวางมาโครรายการปุ่มโดยรวม ตลอดจนการเป็นการ์ดแบบลอยแบบอินเทอร์แอกทีฟและ 3 มิติ ซึ่งวิธีการมีดังนี้
เลย์เอาต์กลุ่มปุ่ม
Flexbox จะจัดการเลย์เอาต์คอนเทนเนอร์ได้ เปลี่ยนทิศทางเริ่มต้นของการยืดหยุ่นจากแถวเป็นคอลัมน์ที่มี 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() และใช้ค่าแบบเดลต้าเป็นรูปแบบพร็อพเพอร์ตี้ที่กำหนดเอง ผมจะหารด้วย 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 ที่เบราว์เซอร์มีให้
บทสรุป
ตอนนี้เมื่อคุณรู้แล้วว่าฉันทำได้อย่างไร คุณจะทำยังไงบ้าง ‽ 🙂 คุณจะเพิ่มการโต้ตอบตัวตรวจวัดความเร่งลงในเมนูได้ไหม เพื่อให้ไทล์โทรศัพท์หมุนเมนู เราจะปรับปรุงประสบการณ์ แบบไม่มีการเคลื่อนไหวได้ไหม
มาเพิ่มความหลากหลายให้กับแนวทางของเราและเรียนรู้วิธีทั้งหมดในการสร้างเนื้อหาบนเว็บกัน สร้างการสาธิต ลิงก์ทวีตฉัน แล้วฉันจะเพิ่ม ลงในส่วนรีมิกซ์ของชุมชนด้านล่าง
รีมิกซ์ในชุมชน
ยังไม่มีอะไรให้ดูที่นี่!