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