Roblox เป็น ข้ามแพลตฟอร์ม โดยธรรมชาติ เนื่องจากผู้เล่นสามารถค้นหาและเข้าร่วมเกมบนโทรศัพท์หรือแท็บเล็ตของพวกเขา จากนั้นสามารถดำเนินการต่อจากจุดที่พวกเขาหยุดไว้บน PC หรือคอนโซลของพวกเขา เพื่อสนับสนุนชุดแพลตฟอร์มที่กำลังขยายตัว คุณควรสร้างส่วนติดต่อผู้ใช้ที่ปรับให้เข้ากับประเภทการป้อนข้อมูล (สัมผัส, จอยสติ๊ก, เมาส์/คีย์บอร์ด), ขนาดหน้าจอ และการจัดแนวของอุปกรณ์ได้อย่างราบรื่น คู่มือนี้ คู่มือ การออกแบบที่ปรับได้ และแหล่งข้อมูลที่เชื่อมโยงสามารถช่วยให้คุณออกแบบเกมข้ามแพลตฟอร์มที่แท้จริงซึ่งเข้ากันได้ เข้าถึงได้ และสนุกสนานใน ทุก แพลตฟอร์ม
เพื่อสำรวจเกมที่สร้างไว้ล่วงหน้าซึ่งแสดงแนวคิดการออกแบบข้ามแพลตฟอร์มต่อไปนี้ โปรดตรวจสอบ Interactivity Showcase.
การป้อนข้อมูล
เกมที่ออกแบบมาอย่างรอบคอบควรสนับสนุนประเภทการป้อนข้อมูลหลักทั้งหมด รวมถึงเมาส์และคีย์บอร์ด, สัมผัส, และจอยสติ๊ก
การกระทำข้ามแพลตฟอร์ม
สนับสนุนประเภทการป้อนข้อมูลหลักทั้งหมด (เมาส์/คีย์บอร์ด, สัมผัส, และจอยสติ๊ก) โดยใช้ Input Action System.
เพื่อทำให้การป้อนข้อมูลข้ามแพลตฟอร์มง่ายขึ้น Roblox จึงมี Input Action System เพื่อกำหนด การกระทำ เช่น "กระโดด," "วิ่ง," หรือ "ยิง" และตั้งค่า การผูก สำหรับการป้อนข้อมูลฮาร์ดแวร์หลายประเภทเพื่อขับเคลื่อนการกระทำเหล่านั้น คุณไม่จำเป็นต้องคิดเกี่ยวกับแง่มุมทางเทคนิคทั้งหมดของการป้อนข้อมูลฮาร์ดแวร์และเมื่อใดที่จะฟังการกระตุ้นการป้อนข้อมูลเฉพาะ คุณเพียงแค่กำหนดว่าการป้อนข้อมูลใดทำการกระทำใด
การตรวจจับประเภทการป้อนข้อมูล
ตรวจสอบให้แน่ใจว่าองค์ประกอบ UI ตอบสนองและปรับให้เข้ากับประเภทการป้อนข้อมูล หลัก ของผู้เล่นตามที่ระบุใน การตรวจจับประเภทการป้อนข้อมูล นอกจากนี้ยังควรพิจารณา คำแนะนำช่วยเหลือ เพื่อช่วยให้ผู้เล่นเข้าใจการเปลี่ยนแปลงการป้อนข้อมูลเฉพาะ
ในการพัฒนาข้ามแพลตฟอร์ม สิ่งสำคัญคือคุณต้องกำหนดและตอบสนองต่อประเภทการป้อนข้อมูลหลักที่ผู้เล่นกำลังใช้ โดยปกติจะต้องแน่ใจว่า องค์ประกอบ UI เช่น ปุ่มและเมนูบนหน้าจอทำงานได้อย่างราบรื่นและสนับสนุนการโต้ตอบข้ามอุปกรณ์
ตัวอย่างเช่น อุปกรณ์ที่รองรับการสัมผัสจะถือว่าการสัมผัสเป็นการป้อนข้อมูล เริ่มต้น และปุ่มสัมผัสอาจปรากฏขึ้นสำหรับการกระทำ แต่ผู้เล่นอาจเลือกเชื่อมต่อจอยสติ๊กบลูทูธ ในกรณีนี้ การสัมผัสยังคงเป็นการป้อนข้อมูลที่ถูกต้อง แต่คุณสามารถถือว่าผู้เล่นต้องการเปลี่ยนไปใช้จอยสติ๊กที่เชื่อมต่อเป็นประเภทการป้อนข้อมูล หลัก และอาจใช้การสัมผัสเป็นการป้อนข้อมูลสำรองสำหรับ UI บนหน้าจอ
หากคุณใช้ Input Action System คุณสมบัติ PreferredBinding จะเสริมการตรวจจับการป้อนข้อมูลหลัก: เช่นเดียวกับที่ PreferredInput รายงานประเภทการป้อนข้อมูลหลักปัจจุบันของผู้เล่น PreferredBinding จะรายงาน InputBinding เฉพาะที่ตรงกับอุปกรณ์ปัจจุบันของผู้เล่น ทั้งสองจะอัปเดตโดยอัตโนมัติเมื่อผู้เล่นเปลี่ยนอุปกรณ์ ดังนั้นคุณสามารถขับเคลื่อน UI ที่รับรู้ถึงอุปกรณ์โดยไม่ต้องเขียนตรรกะการเปลี่ยนอุปกรณ์เอง
คำแนะนำช่วยเหลือ
ตาม ประเภทการป้อนข้อมูลหลัก แนะนำให้คุณรวม คำแนะนำ UI ช่วยเหลือ ทุกครั้งที่ทำได้ ตัวอย่างเช่น เมื่อเลือกเครื่องมือเพื่อจัดเตรียม ให้แสดงคำแนะนำเฉพาะการป้อนข้อมูล เช่น 1–5 เมื่อผู้เล่นใช้คีย์บอร์ด หรือคำแนะนำการกระตุ้นของจอยสติ๊กเมื่อผู้เล่นใช้จอยสติ๊ก
สำหรับคำแนะนำช่วยเหลือที่ไม่มีโค้ดซึ่งอัปเดตโดยอัตโนมัติเมื่อผู้เล่นเปลี่ยนอุปกรณ์ ให้ใช้ InputActionLabel และชี้ไปที่ InputAction ใด ๆ เพื่อแสดงการป้อนข้อมูลที่ถูกต้องต่อแพลตฟอร์ม ดู การแสดงการผูก สำหรับรายละเอียดทั้งหมด
สำหรับการควบคุมที่ละเอียดมากขึ้น หรือหากคุณต้องการปรับแต่งการแสดงคำแนะนำเกินกว่าที่ InputActionLabel เสนอ คุณสามารถใช้วิธีการ UserInputService ด้านล่างเพื่อรวบรวมภาพและข้อความเฉพาะแพลตฟอร์มด้วยตนเอง:
วิธีการ 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 ของ Roblox.
องค์ประกอบ UI ทั้งหมดควร จัดตำแหน่ง และ ขนาด อย่างเหมาะสมเพื่อให้แน่ใจว่ามีความชัดเจนและสามารถโต้ตอบได้ในหลายขนาดหน้าจอ การจัดตำแหน่งองค์ประกอบ UI โดยใช้ Scale เป็นวิธีการทั่วไปเนื่องจากมันอิงจาก เปอร์เซ็นต์ ของขอบเขต X และ Y ของหน้าจอ ไม่ใช่ค่าพิกเซล (พิกเซลสามารถแตกต่างกันไปตามจำนวนและความหนาแน่นในอุปกรณ์ต่าง ๆ) คุณยังสามารถใช้ AnchorPoint ขององค์ประกอบเพื่อกำหนดจุดเริ่มต้นของตำแหน่งได้ ตัวอย่างเช่น คอนเทนเนอร์ UI ที่ถือเคาน์เตอร์อัญมณี/เหรียญในภาพด้านล่างถูกจัดตำแหน่งที่สเกล X ของ 1 (ขวา) และสเกล Y ของ 0 (ด้านบน) โดยมีจุดยึดที่มุมขวาบน
Scale ยังแนะนำสำหรับ ขนาด ขององค์ประกอบ UI เช่นการทำให้คอนเทนเนอร์ UI มีความกว้าง 75% บนทุกหน้าจอ อย่างไรก็ตาม 75% จะทำให้มีขนาดใหญ่บนทีวี 4K สำหรับผู้เล่นคอนโซล ดังนั้นจึงแนะนำให้คุณสำรวจ การปรับขนาดหน้าจอ เป็นวิธีในการปรับเลย์เอาต์ UI ข้ามมุมมองที่แตกต่างกัน
การปรับขนาดหน้าจอ
ปรับ UI ให้เข้ากับขนาดการแสดงผลที่แตกต่างกันโดยการตรวจสอบและฟังการเปลี่ยนแปลงขนาดการแสดงผลของมุมมอง
ด้วยขนาดหน้าจอที่หลากหลายที่สามารถเข้าถึงได้ในแพลตฟอร์ม Roblox การพยายามคาดเดาขนาดหน้าจอโดยพิกเซลมักจะนำไปสู่การตีความที่ผิดพลาด เพื่อช่วยในการกำหนดขนาดหน้าจอของผู้เล่นเพื่อปรับขนาด/ตำแหน่งขององค์ประกอบ UI Roblox มีคุณสมบัติ ViewportDisplaySize ที่อ่านได้เท่านั้น ซึ่งแสดงถึงขนาดการเรนเดอร์ที่จัดประเภทภายในของมุมมอง
| ViewportDisplaySize | สรุป |
|---|---|
| Small | อุปกรณ์แท็บเล็ต/มือถือ/พกพาส่วนใหญ่ |
| Medium | แล็ปท็อปและจอภาพส่วนใหญ่ |
| Large | ทีวีหรือขนาดใหญ่กว่าที่ส่วนใหญ่ |
สำหรับการปรับแต่งที่เป็นธรรมชาติยิ่งขึ้น คุณสามารถใช้ Style Editor ของ UI เพื่อกำหนด Style Queries สำหรับทั้งค่า ViewportDisplaySize และ PreferredInput การใช้ตัวเลือกภายในเช่น @ViewportDisplaySizeSmall หรือ @PreferredInputTouch จะช่วยให้ UI ของคุณสามารถสลับโทเค็นสำหรับขนาดข้อความ ขนาดคอนเทนเนอร์ และการวัดอื่น ๆ โดยอัตโนมัติเมื่อสภาพแวดล้อมของอุปกรณ์ของผู้เล่นหรือวิธีการป้อนข้อมูลหลักเปลี่ยนแปลง
คอนเทนเนอร์เลย์เอาต์
ใช้เลย์เอาต์เพื่อจัดระเบียบองค์ประกอบ UI แต่ละรายการและตรวจสอบให้แน่ใจว่าคอนเทนเนอร์ปรับตัวได้ตามองค์ประกอบลูกภายใน
เพื่อให้ง่ายต่อการจัดระเบียบ UI คุณควรใช้ คอมโพเนนต์เลย์เอาต์ เพื่อจัดระเบียบเด็ก เมื่อใช้ คอนเทนเนอร์เลย์เอาต์ ให้แน่ใจว่าเด็กอ่านได้ เข้าถึงได้ และไม่ยุ่งเหยิง คอมโพเนนต์เลย์เอาต์ทั่วไปคือ UIListLayout ซึ่งจัดตำแหน่ง GuiObjects ที่เป็นพี่น้องในแถวหรือคอลัมน์และปรับตามนั้นเมื่อคุณเพิ่มหรือลบวัตถุพี่น้อง
คุณยังควรพิจารณาการกระจายและการจัดตำแหน่งสัมพัทธ์ขององค์ประกอบภายในคอนเทนเนอร์เลย์เอาต์เพื่อประสบการณ์ผู้ใช้ที่ดีที่สุด การรวม flex เข้ากับเลย์เอาต์รายการเป็นวิธีที่มีประสิทธิภาพในการ เติม/กระจายอย่างเท่าเทียมกัน หรือ จัดเรียง/ยืด รายการข้ามบรรทัดของพวกเขา หรือ ยืดรายการเฉพาะ ข้ามพื้นที่ที่เปลี่ยนแปลงได้
การเข้าถึง
ตรวจสอบให้แน่ใจว่าข้อความทั้งหมดอ่านได้ในทุกหน้าจอ นอกจากนี้ยังต้องแน่ใจว่าทุก UI มี ความแตกต่างที่เพียงพอ และ ไม่มีอะไรที่พึ่งพาเฉพาะสี เพื่อแยกแยะการกระทำหรือผลลัพธ์
แม้ว่าองค์ประกอบ UI จะ มีขนาดที่เหมาะสม ข้ามขนาดหน้าจอของอุปกรณ์ทั้งหมด เกมโดยรวมควรเป็นไปตาม มาตรฐานการเข้าถึง สำหรับผู้เล่นที่มีปัญหาทางสายตาหรือการมองเห็นสีผิดปกติ ขนาดข้อความสามารถมีผลกระทบอย่างมากต่อความชัดเจนของ UI ที่อิงตามข้อความ ดังนั้นคุณควรรวม ข้อจำกัดขนาดข้อความ เพื่อให้แน่ใจว่าข้อความไม่กลายเป็นอ่านไม่ออก (เล็กเกินไป) หรือมีขนาดใหญ่เกินไปในหน้าจอขนาดใหญ่เช่นทีวี 4K
สำหรับเคล็ดลับเพิ่มเติมเกี่ยวกับการเข้าถึง โปรดดู แนวทางการเข้าถึง.
เคล็ดลับและกลเม็ดสุดท้าย
เมื่อคุณทำงานเพื่อสร้างเกมข้ามแพลตฟอร์มอย่างเต็มที่ ให้พิจารณาเคล็ดลับและกลเม็ดต่อไปนี้:
- การจำลองอุปกรณ์เป็นสิ่งสำคัญในการออกแบบเกมที่เหมาะสมใน Roblox ใช้ Device Emulator และ Controller Emulator ที่มีอยู่ในตัวเพื่อจำลองอุปกรณ์และจอยสติ๊กต่าง ๆ โดยตรงใน Studio
- ท่อ การจัดสไตล์ UI ของ Roblox ซึ่งคล้ายกับ CSS ช่วยให้คุณประกาศและใช้การปรับเปลี่ยนทั่วทั้งคุณสมบัติของอินสแตนซ์ UI ได้อย่างทั่วถึง พร้อมกับ Style Editor ที่รวมอยู่ คุณสามารถตั้งค่าระบบส่วนติดต่อผู้ใช้ที่สมบูรณ์และง่ายต่อการปรับเปลี่ยน
- เมื่อเกมของคุณมีความข้ามแพลตฟอร์มอย่างมีประสิทธิภาพแล้ว ให้สำรวจฟีเจอร์พื้นเมืองเช่นการตอบสนองทางสัมผัสบน มือถือ และ จอยสติ๊ก, ท่าทางสัมผัสเช่น TouchSwipe และ TouchPinch, หรือฟังก์ชัน accelerometer และ gyroscope บนอุปกรณ์ AccelerometerEnabled และ GyroscopeEnabled