LevelUp! Studio » responsive design https://blog.levelup.in.th Experience the new world. Fri, 26 May 2017 10:06:07 +0000 th hourly 1 http://wordpress.org/?v=3.8.1 (Unity3d) NGUI 3.6 Anchor กับการทำ UI บนจอหลายขนาด https://blog.levelup.in.th/2014/05/31/ngui-3-6-anchor-%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%97%e0%b8%b3-ui-%e0%b8%9a%e0%b8%99%e0%b8%88%e0%b8%ad%e0%b8%ab%e0%b8%a5%e0%b8%b2%e0%b8%a2%e0%b8%82%e0%b8%99%e0%b8%b2%e0%b8%94/ https://blog.levelup.in.th/2014/05/31/ngui-3-6-anchor-%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%97%e0%b8%b3-ui-%e0%b8%9a%e0%b8%99%e0%b8%88%e0%b8%ad%e0%b8%ab%e0%b8%a5%e0%b8%b2%e0%b8%a2%e0%b8%82%e0%b8%99%e0%b8%b2%e0%b8%94/#comments Sat, 31 May 2014 09:56:17 +0000 http://blog.levelup.in.th/?p=3473 การทำเกมบนมือถือ ปัญหาใหญ่ที่สุดปัญหาหนึ่งคือการทำเกมบนหน้าจอหลายขนาด ซึ่งวันนี้เราจะมาดูว่าการทำ UI ให้รองรับหลายหน้าจอนั้นทำอย่างไรกัน เราจะใช้ NGUI 3.6 ซึ่งมีวางขายใน Asset Store ของ Unity มาช่วยทำงานนี้ (หากใครไม่มีเงิน ก็สามารถใช้ NGUI 2.7 หัวข้อ Free Version ได้ แต่จะต้องทำอีกวิธีซึ่งยากกว่าพอสมควร) ในบทความนี้อ้างอิงจาก Example 1 – Anchor ใน NGUI Example ที่มีติดมากับ package อยู่แล้วนะครับ

1

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

2

จะเห็นว่า 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 อยู่ด้านบนของจอมือถือ

3

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

5

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

4

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

]]>
https://blog.levelup.in.th/2014/05/31/ngui-3-6-anchor-%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%97%e0%b8%b3-ui-%e0%b8%9a%e0%b8%99%e0%b8%88%e0%b8%ad%e0%b8%ab%e0%b8%a5%e0%b8%b2%e0%b8%a2%e0%b8%82%e0%b8%99%e0%b8%b2%e0%b8%94/feed/ 0