Unity - เริ่มต้นด้วย UI

ในส่วนนี้เราจะเรียนรู้เกี่ยวกับกระบวนการออกแบบสำหรับส่วนติดต่อผู้ใช้หรือองค์ประกอบ UI ใน Unity ซึ่งรวมถึงการตั้งค่าพื้นฐานและภาพรวมขององค์ประกอบทั่วไปที่มาพร้อมกับ Unity

เวิร์กโฟลว์สำหรับการออกแบบ UI ใน Unity เป็นไปตามเส้นทางที่แตกต่างจากที่เราเคยทำมาเล็กน้อย สำหรับผู้เริ่มต้นองค์ประกอบ UI ไม่ใช่ GameObjects มาตรฐานและไม่สามารถใช้ในลักษณะนี้ได้ องค์ประกอบ UI ได้รับการออกแบบที่แตกต่างกัน ปุ่มเมนูที่ดูถูกต้องในความละเอียด 4: 3 อาจดูยืดหรือบิดเบี้ยวในความละเอียด 16: 9 หากไม่ได้ตั้งค่าอย่างถูกต้อง

องค์ประกอบ UI ใน Unity ไม่ได้ถูกวางลงบนฉากโดยตรง พวกเขามักจะถูกจัดให้เป็นลูกของ GameObject พิเศษที่เรียกว่าCanvas. Canvas เปรียบเสมือน "แผ่นภาพวาด" สำหรับ UI บนฉากซึ่งองค์ประกอบ UI ทั้งหมดจะแสดงผล การสร้างองค์ประกอบ UI จากไฟล์Create เมนูบริบทที่ไม่มี Canvas จะสร้างขึ้นโดยอัตโนมัติ

ตอนนี้ให้เราดู Canvas GameObject เพื่อทราบเกี่ยวกับส่วนประกอบใหม่เพิ่มเติม -

Rect Transform ที่ด้านบนดูเหมือนจะมีคุณสมบัติใหม่มากมายที่ Transform ของ GameObject มาตรฐานไม่มี

เนื่องจากในขณะที่ Transform ของ GameObject ปกติจะอธิบายถึงจินตภาพ point ในอวกาศ 3 มิติก RectTransform กำหนดจินตภาพ rectangle. ซึ่งหมายความว่าเราต้องการคุณสมบัติเพิ่มเติมสำหรับการกำหนดว่าสี่เหลี่ยมผืนผ้าอยู่ตรงไหนขนาดไหนและมีการกำหนดทิศทางอย่างไร

เราสามารถเห็นคุณสมบัติมาตรฐานบางอย่างของสี่เหลี่ยมผืนผ้าเช่นความสูงและความกว้างรวมถึงคุณสมบัติใหม่สองอย่างที่เรียกว่า Anchors. จุดยึดคือจุดที่เอนทิตีอื่นสามารถ "ล็อก" ไว้ใน Canvas ได้ ซึ่งหมายความว่าหากองค์ประกอบ UI (เช่นปุ่ม) ถูกยึดเข้ากับ Canvas ทางด้านขวาการปรับขนาด Canvas จะช่วยให้มั่นใจได้ว่าปุ่มนั้นสัมพันธ์กันเสมอright ของ Canvas

โดยค่าเริ่มต้นคุณจะไม่สามารถแก้ไขรูปร่างของพื้นที่ผ้าใบได้และจะเป็นการเปรียบเทียบ gigantic สี่เหลี่ยมผืนผ้ารอบฉากของคุณ

ถัดไปคือ Canvasส่วนประกอบ นี่คือส่วนประกอบหลักที่มีตัวเลือกสากลสองสามตัวเกี่ยวกับวิธีการวาด UI

ตัวเลือกแรกที่เราเห็นคือ Render Mode. คุณสมบัตินี้กำหนดวิธีการที่ใช้ในการวาด Canvas ลงบนมุมมองของเกม

เรามีสามตัวเลือกในรายการแบบเลื่อนลง ให้เราเรียนรู้เกี่ยวกับตัวเลือกต่างๆในส่วนต่อไปของเรา

พื้นที่หน้าจอ - ภาพซ้อนทับ

โหมดนี้เป็นโหมดมาตรฐานที่สุดสำหรับเมนู HUD และอื่น ๆ มันแสดงผล UI เหนือสิ่งอื่นใดในฉากตรงตามวิธีการจัดเรียงและไม่มีข้อยกเว้น นอกจากนี้ยังปรับขนาด UI ให้ดีเมื่อขนาดหน้าจอหรือหน้าต่างเกมเปลี่ยนไป นี่คือโหมดเรนเดอร์เริ่มต้นใน Canvas

พื้นที่หน้าจอ - กล้อง

พื้นที่หน้าจอ - กล้องจะสร้างระนาบการฉายในจินตนาการระยะห่างที่กำหนดจากกล้องและฉาย UI ทั้งหมดลงบนมัน ซึ่งหมายความว่าลักษณะของ UI ในฉากนั้นขึ้นอยู่กับการตั้งค่าที่กล้องใช้เป็นอย่างมาก ซึ่งรวมถึงมุมมองมุมมองและอื่น ๆ

อวกาศโลก

ในโหมด World Space องค์ประกอบ UI จะทำงานราวกับว่าเป็น GameObjects ปกติที่วางไว้ในโลก อย่างไรก็ตามพวกมันคล้ายกับสไปรต์ดังนั้นโดยทั่วไปแล้วพวกมันจะถูกใช้เป็นส่วนหนึ่งของโลกของเกมแทนที่จะใช้กับผู้เล่นเช่นจอภาพและจอแสดงผลในเกม ด้วยเหตุนี้คุณจึงสามารถปรับเปลี่ยนค่าของ Canvas RectTransform ในโหมดนี้ได้โดยตรง

Canvas Scalerเป็นชุดตัวเลือกที่ช่วยให้คุณปรับขนาดและลักษณะขององค์ประกอบ UI ได้อย่างชัดเจนยิ่งขึ้น ช่วยให้คุณกำหนดวิธีการที่องค์ประกอบ UIresizeเมื่อขนาดของหน้าจอเปลี่ยนไป ตัวอย่างเช่นองค์ประกอบ UI สามารถมีขนาดเท่าเดิมโดยไม่คำนึงถึงอัตราส่วนและขนาดหน้าจอหรือสามารถปรับขนาดตามReference Resolution.

Graphics Raycaster เกี่ยวข้องกับการ raycasting เป็นหลัก (ลิงก์ไปยัง Unity Documentation for Raycasting) องค์ประกอบ UI และทำให้มั่นใจว่าเหตุการณ์ที่ผู้ใช้เริ่มต้นเช่นการคลิกและการลากจะทำงานได้อย่างถูกต้อง