(Unity3d) NGUI 3.6 Anchor กับการทำ UI บนจอหลายขนาด by heha

การทำเกมบนมือถือ ปัญหาใหญ่ที่สุดปัญหาหนึ่งคือการทำเกมบนหน้าจอหลายขนาด ซึ่งวันนี้เราจะมาดูว่าการทำ UI ให้รองรับหลายหน้าจอนั้นทำอย่างไรกัน เราจะใช้ NGUI 3.6 ซึ่งมีวางขายใน Asset Store ของ Unity มาช่วยทำงานนี้ (หากใครไม่มีเงิน ก็สามารถใช้ NGUI 2.7 หัวข้อ Free Version ได้ แต่จะต้องทำอีกวิธีซึ่งยากกว่าพอสมควร) ในบทความนี้อ้างอิงจาก Example 1 – Anchor ใน NGUI Example ที่มีติดมากับ package อยู่แล้วนะครับ

จากรูปด้านบนเปิด Example 1 มาจะเป็นดังภาพ เลือก Top Right แล้วดูที่ Inspetor จะเห็นค่าที่เซ้ตไว้ดังรูปด้านล่าง

จะเห็นว่า Target เป็น UI Root หมายถึงใช้หน้าจอมือถือ(กรอบใหญ่สุด)เป็นตัวอ้างอิง และมี Left, Right, Bottom, Top อยู่โดยตรงนี้ โดยอธิบายได้ดังนี้

• Left เลือกเป็น Target’s Right + (-180) อันนี้แปลว่าให้ขอบซ้ายของปุ่มเริ่มนับจาก Target’s Right หรือก็คือขอบจอมือถือทางขวาถอยมาทางซ้าย 180 pixel
• Right เลือกเป็น Target’s Right + (0) คือให้ขอบขวาของปุ่มเริ่มที่สุดขอบจอขวาของมือถือพอดี  ทำให้ได้ปุ่มยาว 180 pixel อยู่ทางขวาของจอ
• Bottom เลือกเป็น Target’s Top + (-70) คือให้ขอบล่างของปุ่มเริ่มที่ขอบจอด้านบนของมือถือลดลงมา 70 pixel
• Top เลือกเป็น Target’s Top + (0) คือให้ขอบบนของปุ่มเริ่มที่ขอบจอด้านบนของมือถือพอดี คือชิดขอบจอบน ทำให้ได้ปุ่มสูง 70 pixel อยู่ด้านบนของจอมือถือ

ถัดมาลองคลิกที่ Label ที่อยู่ด้านใน Top Right อีกที แล้วเลือก Anchors เป็น Unified จะเห็นว่า Target เป็น Top Right หมายความว่าการเซ็ต Left, Right, Bottom, Top ของ Label ตัวนี้จะสามารถทำได้เช่นเดียวกับรูปที่แล้ว แต่ใช้การอ้างอิงกับขอบปุ่มแทนที่จะเป็นขอบจอมือถือ ทำให้สามารถกำหนดให้ตัวหนังสือหด-ขยายตามปุ่มได้โดยง่าย

ทีนี้ผมลองแก้ไขปุ่มให้เป็นดังภาพ คือจากจอซ้าย 20 pixel จอขวา 20 pixel และจากตรงกลางอย่างละ 50 pixel ทำให้สุดท้ายผมได้ปุ่มที่มีความยาวยืดตามขนาดหน้าจอ โดยห่างจากขอบ 20 pixel เสมอไม่ว่าจอจะขนาดเท่าใด โดยมีความสูงของปุ่ม 100 pixel ได้ผลเป็นภาพด้านล่าง

เป็นอย่างไรบ้างครับ ง่ายใช่ไหมครับ ไม่ต้องเขียน Code สักบรรทัดก็สามารถทำ Responsive Design ได้ในตัว Unity ตั้งแต่แรก โยนงานให้ฝั่ง Designer จัดการได้เลยโดยที่ลดแรงของ Programmer ไปได้มาก ขอให้สนุกกับการทำ ui ในมือถือด้วย unity นะครับ