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

31
May
0

การทำเกมบนมือถือ ปัญหาใหญ่ที่สุดปัญหาหนึ่งคือการทำเกมบนหน้าจอหลายขนาด ซึ่งวันนี้เราจะมาดูว่าการทำ 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 นะครับ

ทำปุ่มง่ายๆด้วย Image Button [Ngui] by

31
May
0

ไม่ว่าเกมไหนๆก็ต้องมีปุ่มกดใช่ม๊าาา ไอครั้นจะทำปุ่มแบบใช้เครื่องมืออนิเมชั่นใน Unity ก็ดูจะลำบากไป
วันนี้เรามาสอนทุกๆท่านใช้อุปกรณ์ที่ง่ายและแสนสะดวก(?) Ngui 2.7 (อ่านว่าหงุ่ยสินะ)
ชักช้าอยู่ไยเริ่มกันเลยดีกว่าเนอะ
1.เตรียม sprite ของปุ่มที่เราจะทำเป็นไฟล์ .png
1
แล้วก็โยนลงโปรเจ็คซะนะฮะ
2.เปิดหน้าต่างเครื่องมือที่จะใช้ตามนี้
2
3.สร้าง Panel ที่จะให้มันอยู่ซะก่อนด้วย Ui wizard กด Create Your UI
3
ได้ Panel มาก็ลบ main camera ไปเลยฮะ ไม่ได้ใช้
4.ทำเป็นไฟล์ภาพเป็น Atlas ด้วย Atlas maker ตั้งค่า Padding ไว้ซัก 3 กำลังดีแล้วติ๊กเลือกทุกข้อเลย
4
กด create ก็จะได้ ไฟล์ Atlas
5.ได้เวลาสร้างปุ่มแล้วววว เปิด Widget wizard ขึ้นมาโลด เลือก Template เป็น Image Button
5
6.กดเลือก Atlas ที่เราสร้างตะกี้ แล้วก็เลือกรูปแบบของปุ่มโลด normal = ปกติ/ไม่ได้กด ,hover = เม้าส์อยู่เหนือปุ่ม ,pressed = กด ,disabled = กดไม่ได้นะแจ๊ะ
6
7.เสร็จแล้วก็เลือกที่ๆจะให้ปุ่มอยู่ เลือกที่ panel ที่เราสร้างนั่นแล กด add to เล้ยยย
7
8.ได้ปุ่มมาเรียบร้อย ไปดูที่หน้าต่าง Inspector จะเห็นว่าสามารถเปลี่ยน sprite ของปุ่มได้จากตรงนี้ด้วย
8
แค่นี้ก็ได้ปุ่มมาเรียบร้อยฮะ ง่ายมากเลยเนอะ =w=

ทำ Button Sliding Menu อย่างง่ายด้วย NGUI(2.7) by

31
May
0

คราวที่แล้วลองสร้าง Sliding Panel กันไปแล้ว คราวนี้เราจะมาทำ Menu อย่างง่ายที่ขยับได้ด้วยการลากหรือคลิกปุ่มเพื่อสลับหน้ากันฮะ

เทคนิคก็ง่ายๆ แค่ทำเหมือนหน้า Menu แต่ละหน้า เป็น Object ตัวนึงใน Grid และในแต่ละ Menu ก็มี Grid(2) ใส่อยู่ ซึ่ง Grid(2) ก็จะมี Menu Object ที่เราจะใช้ แบบนี้

- Drag Panel

- Grid (Menu)

- Menu

- Grid (Item)

- Item

*GameObject สีดำ / Grid สีฟ้า

7

แล้วเลื่อน Panel โดยการเปลี่ยนค่า Scroll Bar ที่เชือมกับ Drag Panel แล้วจะมีเทคนิคหน่อยที่จะทำให้การขยับดู Smooth ขึ้น

เริ่มเลยดีกว่า ขั้นแรกสร้าง Object ตาม Layout ข้างต้น
1

 

2

 

โดยสร้างปุ่มและ Scroll Bar เพิ่มเอาไว้ตรงไหนก็ได้ ให้เห็นใน Camera เป็นพอ (อย่าลืมกำหนดค่า Scroll Value เป็น 0)
หลังจากวางเสร็จแล้ว ลองเทสดูว่า Drag ได้รึเปล่า? (ตรงนี้ทำเป็น Clipping Panel เอาไว้น่าจะดูง่ายกว่า แล้วแต่ความถนัด)
หลังจากเทสแล้ว ลาก Scroll Bar ไปใส่ใน Drag Panel Script ตามรูปได้เลย

3

 

เสร็จแล้ว เราจะเขียน Script ให้ปุ่มทั้งซ้ายและขวา เพื่อสั่งให้เปลี่ยนค่า Scroll Value ของ Scroll ฺฺBar ตามนี้
4

บรรทัดาุดท้ายที่วงแดงไว้คือเทคนิคที่ทำห้ Smooth ขึ้น โดยการสั่งให้ Script “Center On Child” ใน Grid(Menu) ของเราทำงาน เพื่อใก้มันอยู่ตรงกลาง Child ของ Grid เสมอ ทำได้โดย Add Script เข้าไป แล้ว reference ถึงตัว Grid ที่มี Script  เอาไว้เพื่อเรียกเวลากดปุ่ม

Script นี้เป็นของปุ่มซ้าย ถ้าเป็นปุ่มขวาแทนที่จะ “- vchange” จะเปลี่ยนเป็น “+ vchange” แทน แล้วเช็ค if ว่าค่าไม่เท่ากับ 1 (Scroll เลื่อนมาสุดขวามือแล้ว) จะแยก Script ปุ่มซ้ายวาไว้ก็ได้ หรือเพิ่มตัวแปรของ Script แล้วแยกออพชั่นไว้ให้เลือกก็ได้ตามสะดวก

โดยตัวแปร Public ที่ประกาศไว้ตอนต้น คือตัว Scroll Bar ที่เราจะเปลี่ยนค่า กับค่าที่จะเปลี่ยนนั่นเอง
เสร็จแล้วก็ทำการ Add Script เข้าไปที่ปุ่มทั้งสองได้เลย ลาก Scroll Bar กับใส่ค่าตามรูป

ค่าที่ใส่สามารถหาได้จากเอา 1 มาหารกับจำนวน child ใน Grid ใหญ่ (Grid(Menu))  เพื่อให้ Child ที่จะมาเป็น Center เปลี่ยนเป็นตัวต่อไป แล้วจะเรียก Function “Recenter()” จาก Grid ที่เรา Reference เอาไว้อีกที เพื่อทำให้หน้าใหม่อยู่กลางหน้าพอดี (อย่าลืมขยับตำแหน่งของ Grid(Menu) ให้อยู่กลางหน้าล่ะ)

5

 

แล้วลองเทสต์ดู ก็น่าจะได้คล้ายๆ ในภาพแล้วล่ะ

6

 

ถ้ามีปัญหา ปุ่มกดไม่ได้หรือไม่รับ event ให้ลองเชคระดับใน layer นั้นก่อน(กรณีใช้ NGUI Sprite) หรือลองขยับแกน Z ของปุ่มดู น่าจะช่วยแก้ได้ในระดับนึง
ลองประยุกต์ใช้หลายๆ แบบ ก็จะสามารถทำ Menu  ที่ขยับชั้นนอกตามแกน X และขยับเนื้อในตามแกน Y ได้ด้วย

ไล่ Gradient แบบเข้าหาจุดศูนย์กลาง by

31
May
0

สร้างแถบ Gradient ขึ้นมาซักแถบ ในตัวอย่างจะคละสีให้ดูเมทัลลิคหน่อยนะคะ

สร้างกลมขึ้นมาอีก 1 วง ให้ Gradient แค่ขาว-ดำสองสีเท่านั้น เลือกแบบ Radial ค่ะ

ไปที่ Object >> Expand แล้วกด OK

จะได้แบบรูปข้างล่างนี้

จากนั้นใช้ Direct Selection Tool (ลูกศรสีขาว) จิ้มเส้นสีน้ำเงินข้างในวงกลม

ลบๆๆทิ้งจนสะอาดที่สุดค่ะ

ลากวงกลมมาวางบนแถบสีที่เราทำไว้ตั้งแต่แรก

ไปที่ Object >> Envelope Distort >> Envelope Options

จะมีหน้าต่างขึ้นมา กด OK ตามนี้ค่ะ

 

ไปที่ Object >> Envelope Distort >> Make with Top Object

เสร็จแล้วววว

สามารถนำไปใช้งานต่อได้ :DDD  ถ้าเปลี่ยนค่าแถบสีก็จะได้สีเข้าหาจุดศูนย์กลาง

ตามตัวอย่างนะคะ