วิธีการทำให้จอขยาย/ย่อให้ตรงกับ Aspect Ratio ที่เราต้องการ by

31
Jan
0

หลังจากเมื่อสองเดือนก่อนได้เขียนบล็อคเรื่อง Anchor แบบที่ทำให้ชิดขอบจอไปแล้ว [ที่นี่ http://blog.levelup.in.th/2014/11/30/ngui-anchor-tutorial/] ตอนนี้ถ้าเราอยากให้ Aspect Ratio มันคงที่ล่ะ? บางส่วนในเกมของเราอยากให้ถูกจำกัดอยู่ในขนาด Aspect Ratio เดิม อาจจะมีเหตุผลทางส่วนต่างๆในจอไม่เหมาะกับการถูกขยายได้ หรือภาพหลังฉากจำกัดไว้ที่ขนาดนี้ การ Lock Aspect Ratio จึงจำเป็น ซึ่งถ้าเราไม่ใส่โค้ดใดๆ ตัวเกมมันก็จะอยู่ตรงกลางจอ ถ้าใช้จอที่ขนาดใหญ่กว่าก็จะมีขอบสีดำที่ไม่มีอะไรทุกด้าน วันนี้เลยจะมาบอกวิธีทำให้ตัวเกมขยายมาชิดขอบจอจนเหลือขอบดำแค่ ซ้ายขวา หรือไม่ก็ บนล่างเท่านั้น ซึ่งมีทางเดียวคือเราต้องปรับ Anchor ในตอน Runtime ครับ

[โค้ดตัวอย่าง]

• ให้เราสร้างสคริปใหม่ขึ้นมาแล้วแปะไว้กับ UIWidget ตัวนอกสุดที่เราจะทำการ Lock Aspect Ratio

• ในสคริปจะมี Class ที่มีไส้ในแบบนี้ครับ

public float fixedAspectRatio; //เป็น Aspect Ratio ที่เราต้องการ ถูกเซ็ทมาจาก Inspector
void Update(){
float aspect = 1f * Screen.width / Screen.height; //Aspect Ratio ปัจจุบันของหน้าจอ
if (aspect > fixedAspectRatio ) //ถ้าเรโชปัจจุบันมากกว่าที่เราต้องการ (3:4 > 2:3) สั่งให้ UIWidget ของเรายึดตามแนวตั้งเป็นหลัก
this.gameObject.GetComponent().keepAspectRatio = UIWidget.AspectRatioSource.BasedOnHeight;
else //หรือถ้าเรโชปัจจุบันมากกว่าที่เราต้องการ (9:16 < 2:3) สั่งให้ UIWidget ของเรายึดตามแนวนอนเป็นหลัก
this.gameObject.GetComponent().keepAspectRatio = UIWidget.AspectRatioSource.BasedOnWidth;
this.gameObject.GetComponent().aspectRatio = fixedAspectRatio; //แล้วก็จัดการใส่ Aspect Ratio ใหม่เข้าไปเลย
}

เท่านี้ก็เรียบร้อยแล้วครับ!!

จอขนาด 2:3 ปกติ

จอขนาด 9:16 (ส่วนสูงเกิน 2:3)

จอขนาด 3:4 (กว้างเกินขนาด 2:3)

[NGUI] สอนการใช้ Anchor by

30
Nov
0

จากในช่วงแรกที่ค้นคว้าการทำให้ UI ใน Unity ชิดขอบจอไม่ว่าจะจอ Mobile ผู้ใช้จะมีสัดส่วนต่างๆกัน เราเลยได้รู้วิธีใช้ Anchor ใน NGUI เวอร์ชั่นนี้กันครับ

Anchors type จะมี 2 แบบ Unified และ Advanced

  • แบบ Unified จะอ้างอิงจาก GameObject ตัวเดียวกัน

Anchor แบบ Unified

  • แบบ Advanced จะอ้างอิงจาก GameObject หลายๆตัวได้

Anchor แบบ Advanced

Anchors จะเลือกช่วงที่จะอัพเดท UI ที่จะชิดได้มีสามช่วงคือ

  • OnEnable อัพเดทเมื่อ Enable
  • OnUpdate อัพเดททุกเฟรม
  • OnStart อัพเดทเมื่อเริ่มใช้

Execute ได้ 3 ช่วง OnEnable OnUpdate OnStart

ส่วนที่ใช้อ้างอิงในแต่ละด้านจะมีทั้งหมด 4 แบบ ซ้าย/กลาง/ขวา/ปรับเป็น% ข้อสุดท้ายคือเลือก ณ ตำแหน่งปัจจุบัน ระบบจะคำนวนเป็นแบบ % มาให้เลย (ถ้าของ Top/Bottom ก็จะเปลี่ยน ซ้าย/ขวา เป็น บน/ล่าง)

เลือกส่วนที่จะอ้างอิงชิดด้านใดได้ 4 แบบ

นอกจากชิดแล้วยัง + Unit เพิ่มเอาได้

ข้อควรระวัง : ถ้าเกิดมีการบังคับเปลี่ยน Aspect ของ GameObject นั้นๆ ควรจะใช้ Anchor ในตัวมันและลูกๆเป็นแบบ % ให้หมด เพราะแบบ Unit เมื่อมีการเปลี่ยนค่าอาจจะผิดเพี้ยนได้

แบบ Left/Right/Top/Bottom ถ้า 0 ชิดด้านนั้นๆ ถ้า + ก็เพิ่มระยะห่างจากขอบ แบบ Custom ทำการเลื่อน % ที่เว้นจากระยะขอบได้เลย

เท่านี้ก็จะชิดทุกด้านได้ตามที่เราต้องการแล้วล่ะครับ

ตัวอย่างผลลัพธ์แบบจอ 3:2

ตัวอย่างผลลัพธ์แบบ 16:9

ตัวอย่างผลลัพธ์แบบ 3:4