สร้างแถบคะแนน

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

โดยใช้ไฟล์ .rbxl ของ Gold Rush เป็นตัวอย่าง บทช่วยสอนนี้จะแสดงวิธีการสร้างแถบคะแนนที่ติดตามจำนวนทองคำที่ผู้เล่นเก็บ รวมถึงแนวทางในการ:

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

สร้างกรอบ

เพื่อแสดงองค์ประกอบ UI บนหน้าจอของผู้เล่นทุกคน คุณสามารถสร้างวัตถุ ScreenGui ในบริการ StarterGui วัตถุ ScreenGui เป็นตัวถังหลักสำหรับ UI บนหน้าจอ และบริการ StarterGui จะคัดลอกเนื้อหาของมันไปยังถัง PlayerGui ของแต่ละผู้เล่นเมื่อพวกเขาเข้ามาในประสบการณ์

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

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

เพื่อสร้างกรอบภายในไฟล์สถานที่ตัวอย่าง Gold Rush:

1. สร้างวัตถุ ScreenGui เพื่อเก็บ UI ที่อยู่บนหน้าจอของคุณ

   1. ในหน้าต่าง Explorer ชี้ไปที่ StarterGui และคลิกที่ไอคอน ⊕ เมนูบริบทจะปรากฏ
   2. แทรก ScreenGui

2. สร้างตัวถังสำหรับองค์ประกอบ UI ของแถบคะแนนทั้งหมด

   1. แทรก Frame ลงในวัตถุ ScreenGui

      

   2. เลือก Frame ใหม่ จากนั้นในหน้าต่าง Properties,

      1. ตั้งค่า AnchorPoint เป็น 0.5, 0 เพื่อกำหนดจุดกำเนิดของกรอบที่กลางด้านบนของตัวมันเอง (50% จากซ้ายไปขวาของกรอบ และ 0% จากบนไปล่างของกรอบ)
      2. ตั้งค่า BackgroundColor เป็น 0.6 เพื่อทำให้พื้นหลังของกรอบเป็นสีดำ
      3. ตั้งค่า BackgroundTransparency เป็น 0.6 เพื่อทำให้พื้นหลังของกรอบโปร่งแสงบางส่วน
      4. ตั้งค่า Position เป็น {0.5, 0},{0.01, 0} เพื่อกำหนดกรอบใกล้กลางด้านบนของหน้าจอ (50% จากซ้ายไปขวาของหน้าจอ และ 1% จากบนไปล่างของหน้าจอ)
      5. ตั้งค่า Size เป็น {0.25, 0},{0.08, 0} เพื่อให้กรอบครอบคลุมพื้นที่กว้างส่วนกลางของหน้าจอเพื่อดึงความสนใจของผู้เล่น (25% แนวนอน และ 8% แนวตั้ง)
      6. ตั้งค่า Name เป็น ScoreBarFrame.

      

3. เพิ่มข้อกำหนดให้กับกรอบเพื่อให้เนื้อหาของมันอ่านได้เสมอในขนาดหน้าจอที่เล็ก

   1. แทรกวัตถุ UISizeConstraint ลงใน ScoreBarFrame
   2. เลือกข้อกำหนดใหม่ จากนั้นในหน้าต่าง Properties ตั้งค่า MinSize เป็น 0, 40 เพื่อให้แน่ใจว่ากรอบจะไม่หดตัวลงต่ำกว่า 40 พิกเซลในแนวตั้ง

4. เพิ่มวัตถุเลย์เอาต์ในกรอบเพื่อให้เนื้อหาของมันจัดเรียงจากซ้ายไปขวาและจัดแนวกลางในขอบเขตของกรอบ

   1. แทรกวัตถุ UIListLayout ลงใน ScoreBarFrame
   2. เลือกวัตถุเลย์เอาต์ใหม่ จากนั้นในหน้าต่าง Properties,

      1. ตั้งค่า FillDirection เป็น Horizontal
      2. ตั้งค่า VerticalAlignment เป็น Center

เพิ่มไอคอน

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

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

เพื่อสร้างไอคอนมงกุฎทองคำภายในไฟล์สถานที่ตัวอย่าง Gold Rush:

1. แทรกวัตถุ ImageLabel ลงใน ScoreBarFrame

   1. ในหน้าต่าง Explorer ชี้ไปที่ ScoreBarFrame และคลิกที่ไอคอน ⊕ เมนูบริบทจะปรากฏ

   2. แทรก ImageLabel

      

2. เลือกป้ายชื่อใหม่ จากนั้นในหน้าต่าง Properties,

   1. ตั้งค่า Image เป็น rbxassetid://5673786644 เพื่อทำให้ไอคอนเป็นมงกุฎ

   2. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายชื่อโปร่งใสโดยสิ้นเชิง

   3. ตั้งค่า LayoutOrder เป็น 1 เพื่อให้แน่ใจว่าไอคอนจะยังคงเป็น GuiObject แรกในกรอบจากซ้ายไปขวาเมื่อคุณแทรกข้อความในส่วนถัดไปของบทช่วยสอน

   4. ตั้งค่า Size เป็น {1.25,0},{1,0} เพื่อขยายพื้นที่ป้ายชื่อออกไปเกินความกว้างเต็มของกรอบ

   5. ตั้งค่า SizeConstraint เป็น RelativeYY เพื่อรักษาสัดส่วนของไอคอนด้วยการปรับขนาดป้ายชื่อเข้ากับความสูงของกรอบพ่อแม่

      

แทรกข้อความคะแนน

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

ตัวอย่างเช่น ตัวอย่างใช้ข้อความขนาดใหญ่บนพื้นหลังสีที่ตัดกันเพื่อให้มันไม่กล blending กับเสียงรบกวนของพื้นหลัง นี่เป็นสิ่งสำคัญโดยเฉพาะอย่างยิ่งในเรื่องการเข้าถึง เพราะมันทำให้แน่ใจว่าข้อความยังคงอ่านได้เมื่อผู้เล่นเคลื่อนที่ผ่านพื้นที่ 3D ซึ่งอาจรวมถึงวัตถุที่มีสีเดียวกับข้อความ

เพื่อสร้างข้อความคะแนนภายในไฟล์สถานที่ตัวอย่าง Gold Rush:

1. แทรกวัตถุ TextLabel ลงใน ScoreBarFrame

   1. ในหน้าต่าง Explorer ชี้ไปที่ ScoreBarFrame และคลิกที่ไอคอน ⊕ เมนูบริบทจะปรากฏ

   2. แทรก TextLabel

      

2. เลือกป้ายชื่อใหม่ จากนั้นในหน้าต่าง Properties,

   1. ตั้งค่า BackgroundTransparency เป็น 1 เพื่อทำให้พื้นหลังของป้ายชื่อโปร่งใสโดยสิ้นเชิง

   2. ตั้งค่า Size เป็น {1,0},{1,0} เพื่อขยายป้ายชื่อให้เต็มกรอบ (100% แนวนอนและ 100% แนวตั้งของกรอบพ่อแม่) ป้ายชื่อจะยื่นออกไปนอกขอบเขตของกรอบเพราะมันถูกเบี่ยงออกจากไอคอน

   3. ตั้งค่า SizeConstraint เป็น RelativeYY เพื่อให้แน่ใจว่าขนาดของป้ายชื่อปรับขนาดตามความสูงของกรอบพ่อแม่ และรักษาสัดส่วนของไอคอน ขั้นตอนนี้ยังทำให้ป้ายชื่อเป็นสี่เหลี่ยมจัตุรัสและทำให้มันอยู่ภายในขอบเขตของกรอบ

   4. ตั้งค่า Font เป็น GothamSSm เพื่อให้เข้ากับความสวยงามของสภาพแวดล้อม

   5. ตั้งค่า Text เป็น 0 เพื่อเริ่มคะแนนจากศูนย์

   6. ตั้งค่า TextColor3 เป็น 255, 200, 100 เพื่อทำให้ข้อความเข้มเป็นสีทอง

   7. ตั้งค่า TextSize เป็น 30 เพื่อทำให้ข้อความใหญ่ขึ้นบนหน้าจอ

   8. ตั้งค่า TextXAlignment เป็น Left เพื่อให้แน่ใจว่าข้อความคะแนนยังคงชิดซ้ายใกล้กับไอคอนมงกุฎไม่ว่าสกอร์ของผู้เล่นจะเป็น 0, 1,000 หรือ 1,000,000

      

ทดสอบการออกแบบ

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

ตัวอย่างเช่น หากคุณไม่ทดสอบ UI ของคุณบนขนาดหน้าจอที่หลากหลาย ผู้เล่นที่มีหน้าจอขนาดใหญ่ قدไม่สามารถอ่านข้อความของคุณหรือเข้าใจไอคอนของคุณได้ และผู้เล่นที่มีหน้าจอขนาดเล็กก็อาจไม่สามารถมองเห็นพื้นที่ 3D ได้เพราะองค์ประกอบ UI ของคุณ占ที่มากเกินไปบนหน้าจอ

เพื่อเลียนแบบ UI ของคุณบนขนาดหน้าจอที่หลากหลาย:

1. จากเมนู Test ของ Studio ให้เปิด Device Emulator

2. ในเมนูแบบเลื่อนลงความละเอียดให้เลือก Actual Resolution นี่จะช่วยให้คุณเห็นความละเอียดที่แท้จริงขององค์ประกอบ UI ของคุณบนอุปกรณ์ที่คุณกำลังเลียนแบบ

   

3. ในเมนูแบบเลื่อนลงอุปกรณ์ให้เลือกอย่างน้อยหนึ่งอุปกรณ์ในส่วน Phone, Tablet, Desktop, และ Console