การพัฒนาข้ามแพลตฟอร์ม

Roblox มักจะเป็น ข้ามแพลตฟอร์ม เนื่องจากผู้เล่นสามารถค้นหาและเข้าร่วมเกมบนโทรศัพท์หรือแท็บเล็ตของพวกเขา และจากนั้นกลับมาเล่นต่อจากที่พวกเขาหยุดไว้บน PC หรือคอนโซลของพวกเขา เพื่อสนับสนุนชุดแพลตฟอร์มที่กำลังขยายตัว คุณควรสร้างอินเทอร์เฟซผู้ใช้ที่ปรับให้เข้ากับประเภทการใช้งาน (สัมผัส, จอยสติ๊ก, เมาส์/แป้นพิมพ์), ขนาดหน้าจอ และการวางแนวของอุปกรณ์ คู่มือนี้ คู่มือ การออกแบบที่ปรับได้ และแหล่งข้อมูลที่เชื่อมโยงสามารถช่วยให้คุณออกแบบเกมข้ามแพลตฟอร์มที่แท้จริง ซึ่งเข้ากันได้ เข้าถึงได้ และสนุกสนานใน ทุก แพลตฟอร์ม

การป้อนข้อมูล

เกมที่ออกแบบมาอย่างพิถีพิถันควรสนับสนุนประเภทการป้อนข้อมูลหลักทั้งหมด รวมถึงเมาส์และแป้นพิมพ์, การสัมผัส และจอยสติ๊ก

การกระทำข้ามแพลตฟอร์ม

เพื่อทำให้การป้อนข้อมูลข้ามแพลตฟอร์มเป็นเรื่องง่าย Roblox มี ระบบการกระทำการป้อนข้อมูล เพื่อกำหนด การกระทำ เช่น "กระโดด," "วิ่ง," หรือ "ยิง" และตั้งค่าการ ผูก สำหรับการป้อนข้อมูลฮาร์ดแวร์หลายๆ แบบเพื่อขับเคลื่อนการกระทำนั้น คุณไม่จำเป็นต้องคิดเกี่ยวกับรายละเอียดทางเทคนิคทั้งหมดของการป้อนข้อมูลฮาร์ดแวร์และเมื่อใดที่ต้องฟังการกระตุ้นการป้อนข้อมูลโดยเฉพาะ; คุณเพียงแค่กำหนดว่าการป้อนข้อมูลใดทำการกระทำใด.

การตรวจจับประเภทการป้อนข้อมูล

ในการพัฒนาข้ามแพลตฟอร์ม สิ่งสำคัญคือต้องกำหนดและตอบสนองต่อประเภทการป้อนข้อมูลหลักที่ผู้เล่นกำลังใช้ ซึ่งปกติจะเป็นการทำให้แน่ใจว่า UI เช่น ปุ่มและเมนูบนหน้าจอทำงานได้อย่างสวยงามและรองรับการโต้ตอบในอุปกรณ์ต่างๆ

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

คำแนะนำช่วยเหลือ

ตาม ประเภทการป้อนข้อมูลหลัก แนะนำให้คุณรวม คำแนะนำ UI ช่วยเหลือ ทุกครั้งที่ทำได้ สำหรับตัวอย่างเมื่อเลือกเครื่องมือเพื่อสวมใส่ ให้แสดงคำแนะนำที่เฉพาะเจาะจงสำหรับการป้อนข้อมูล เช่น 1–5 เมื่อผู้เล่นกำลังใช้แป้นพิมพ์ หรือคำแนะนำเกี่ยวกับจอยสติ๊กเมื่อผู้เล่นกำลังใช้จอยสติ๊ก

เมธอด GetImageForKeyCode() และ GetStringForKeyCode() มีประโยชน์ในการรวบรวมรูปภาพหรือสตริงเฉพาะแพลตฟอร์มที่จะใช้ในคำแนะนำ UI เช่น ตัวอย่างต่อไปนี้:

รหัสคีย์	รูปภาพ Xbox	รูปภาพ PlayStation	สตริง
Enum.KeyCode.ButtonA			ButtonA
Enum.KeyCode.ButtonX			ButtonX
Enum.KeyCode.One	n/a	n/a	1
Enum.KeyCode.Five	n/a	n/a	5

อินเทอร์เฟซผู้ใช้

อินเทอร์เฟซผู้ที่ออกแบบมาเป็นอย่างดีนั้นสำคัญสำหรับผู้เล่นในทุกแพลตฟอร์มในการโต้ตอบกับเกมของคุณ

ตำแหน่งและขนาด

ทุกองค์ประกอบ UI ควร ถูกวางตำแหน่ง และ มีขนาด อย่างเหมาะสมเพื่อให้แน่ใจว่าสามารถมองเห็นได้และมีการโต้ตอบในรูปแบบต่าง ๆ ขนาดหน้าจอ การจัดตำแหน่งองค์ประกอบ UI โดย Scale เป็นวิธีการที่ใช้งานทั่วไปเนื่องจากมันอิงจาก เปอร์เซ็นต์ ของขอบเขต X และ Y ของหน้าจอ ไม่ใช่ค่าพิกเซล (พิกเซลสามารถแตกต่างกันอย่างไม่แน่นอนทั้งจำนวนและความหนาแน่นในอุปกรณ์ต่างๆ) คุณยังสามารถใช้ AnchorPoint ขององค์ประกอบเพื่อตั้งจุดเริ่มต้นทางตำแหน่งของมัน สำหรับตัวอย่าง คอนเทนเนอร์ UI ที่ถือเคาท์ไข่มุก/เหรียญในภาพต่อไปนี้ถูกวางตำแหน่งที่ระดับ X สเกลที่ 1 (ขวา) และระดับ Y สเกลที่ 0 (ด้านบน) โดยมีจุดยึดที่มุมขวาบน

Scale ยังแนะนำสำหรับ การขนาด องค์ประกอบ UI เช่นการทำให้คอนเทนเนอร์ UI ขยายกว้าง 75% ในทุกหน้าจอ อย่างไรก็ตาม 75% จะสร้างขนาดใหญ่บนทีวี 4K สำหรับนักเล่นเกมคอนโซล ดังนั้นจึงแนะนำให้คุณสำรวจ การปรับขนาดหน้าจอ เป็นวิธีในการปรับเลย์เอาต์ UI ข้ามมุมมองที่แตกต่างกัน

การปรับขนาดหน้าจอ

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

เพื่อให้การปรับเปลี่ยนมีความเป็นธรรมชาติมากขึ้น คุณสามารถใช้ UI Style Editor เพื่อกำหนดค่า Style Queries สำหรับทั้งค่า ViewportDisplaySize และ PreferredInput การใช้ตัวเลือกโครงสร้างพื้นฐานเช่น @ViewportDisplaySizeSmall หรือ @PreferredInputTouch จะช่วยให้ UI ของคุณสามารถสลับสัญลักษณ์สำหรับขนาดตัวอักษร ขนาดคอนเทนเนอร์ และการวัดอื่น ๆ ได้เมื่อสภาพแวดล้อมของอุปกรณ์ผู้เล่นหรือวิธีการป้อนข้อมูลหลักเปลี่ยนแปลง

คอนเทนเนอร์เลย์เอาต์

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

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

การเข้าถึง

แม้ว่าองค์ประกอบ UI จะ มีขนาดถูกต้อง ข้ามขนาดหน้าจอของอุปกรณ์ทั้งหมด เกมทั้งหมดควรมีมาตรฐานการเข้าถึงที่เหมาะสมสำหรับผู้เล่นที่มีมุมมองบกพร่องหรือมีปัญหาสี ความใหญ่ของข้อความอาจมีผลต่อความสามารถในการอ่านของ UI ที่อิงจากข้อความ ดังนั้นคุณจึงควรรวม ข้อจำกัดขนาดตัวอักษร เพื่อให้แน่ใจว่าข้อความไม่กลายเป็นข้อความที่มองไม่เห็น (เล็กเกินไป) หรือมองเห็นได้มากเกินไปบนหน้าจอที่ใหญ่ขึ้นเช่นทีวี 4K

สำหรับเคล็ดลับเพิ่มเติมเกี่ยวกับการเข้าถึง โปรดดู ที่นี่.

เคล็ดลับและเทคนิคสุดท้าย

ขณะที่คุณทำงานไปสู่เกมข้ามแพลตฟอร์มที่สมบูรณ์ ให้พิจารณาเคล็ดลับและเทคนิคต่อไปนี้:

• การจำลองอุปกรณ์เป็นสิ่งสำคัญในการออกแบบเกมที่เหมาะสมใน Roblox ใช้ Device Emulator และ Controller Emulator ที่สร้างไว้เพื่อจำลองอุปกรณ์ต่างๆ และจอยสติ๊กโดยตรงใน Studio
• ไลน์ UI styling ของ Roblox คล้ายกับ CSS ช่วยให้คุณประกาศและใช้การปรับเปลี่ยนในระดับโลกสำหรับคุณสมบัติของ UI instance ได้อย่างง่ายดาย ร่วมกับ Style Editor ที่รวมอยู่ คุณสามารถตั้งค่าอินเทอร์เฟซผู้ใช้ที่สมบูรณ์และปรับเปลี่ยนได้ง่าย
• เมื่อเกมของคุณมีความสามารถข้ามแพลตฟอร์มอย่างมีประสิทธิภาพแล้ว ให้สำรวจฟีเจอร์พื้นฐานอย่างการตอบสนองในการสัมผัสใน มือถือ และ จอยสติ๊ก, การสัมผัส เช่น TouchSwipe และ TouchPinch, หรือฟังก์ชัน Accelerometer และ Gyroscope บนอุปกรณ์ AccelerometerEnabled และ GyroscopeEnabled