สร้าง checkbox และ radio button ใน unity by

31
Jul
0

1. สร้าง Widget เปล่าๆขึ้นมาก่อน กำหนดให้ความยาว เพื่อที่ของ Label ที่จะใส่ลงไปด้วย ไม่งั้นเวลาคลิกจะต้องคลิกให้โดนตัวกล่องเท่านั้น

2.Attach Toggle Script

3.ลาก Sprite ที่เป็นตัว check box หรือ radio button (รูปอะไรก็ได้ที่จะแสดงเมื่อติ๊กช่องนี้) มาใส่ในช่อง Sprite อย่าเอารูปที่เป็น bgของช่อง มาใส่นะ

4.ถ้าจะทำเป็น Checkbox ในช่อง group ก็ใส่ 0 ไว้ ถ้าเป็น Radio Button ก็ใส่เลขของกลุ่มแต่ละกลุ่มไว้

เท่านี้ก็เสร็จแล้ว

อ่อ อย่าลืม Attach Collider ให้กับ Widget ด้วย ไม่งั้นจะคลิกไม่โดน

[Unity3D][NGUI][ParticleSystem] ใช้ ParticleSystem ร่วมกับ NGUI ใน Unity3D by

30
May
0

เมื่อเราใช้ ParticleSystem ร่วมกับ NGUI ใน Unity3D แล้วก็จะเจอปัญหา Particle ที่เรา Instantiate ขึ้้นมา มันตันไปอยู่ข้างหลัง UI หรือของต่างๆที่เป็น NGUI นะสิ จะปรับ z ก็ไม่ได้ เพราะว่า NGUI นั้นไม่สน z จะปรับ depth ก็ไม่ได้เพราะ Particle ไม่มี depth เอ้า แล้วจะทำยังไงละทีนี้ วิธีแก้ก็มีหลายอย่างมากมาย แต่วันนี้จะมานำเสนอ 2 วิธีนะครับ

วิธีแรกคือ ปรับ Sorting Order ของ Panel ที่เป็น Parent ของ Particle เป็น -1 ครับ ตามรูปเลย
11
พอเราปรับเป็น -1 แล้ว Particle ที่เคยอยู่ข้างหลังสุด ก็กลับมาอยู่หน้าสุดทันทีเลย 55 แต่ๆๆๆๆ วิธีนี้มีข้อเสียใหญ่หลวงๆๆอยู่ด้วยนั่นก็คือ มันจะกลับข้างหลัง-หน้า ทุกอย่างที่อยู่ใน Panel นั้นๆ หมดเลย เหอะๆ (กำ แล้วมาแนะนำทำไมฟะ) ถ้าของใน Panel นั้นไม่มีการเรียงลำดับ depth ซับซ้อนก็ให้ลองวิธีนี้ดูก่อนไงครับ มันปรับนิดเดียวเอง ถ้าปรับแล้ว มันมั่วมากๆๆๆ ก็ค่อยไปลองวิธีถุัดไปละกันเนอะ

วิธีที่สองคือ ให้เพิ่ม Layer เข้าไปอีกชั้นนึงตามรูป
12
พอกดแล้วจะขึ้นตามนี้ ก็พิมชื่อ Layer เข้าไป เช่น “Particle” ตามรูป
13
ต่อไปก็ให้ไปเปลี่ยน Layer ของ Particle ของเราให้เป็น Layer ใหม่ที่เราพึ่งตั้งเมือกี้ ตามรูป
14
ถ้ากดเปลี่ยน Layer แล้ว Unity มันถามว่าจะให้เปลี่ยนลูกๆเป็น Layer เดียวกันด้วยไหมก็ให้ตอบไปว่า “ใช่เสะ” ครับ

และถ้าเรา Instantiate Particle ที่มี Layer สูงกว่า Layer UI ของ NGUI แล้ว Particle นั้นก็จะถูก Render มาอยู่ข้างบนครับบบบบ

[Unity3D][NGUI] ScrollView && Grid by

30
May
0

ใครทีใช้ Unity3D ร่วมกับ NGUI ก็คงจะเคยเจอปัญหาเรื่องของ ScrollView และ Grid กันมาบ้าง วันนี้ผมมาเสนอวิธีแก้ปัญหา ScrollView และ Grid ที่ผมเคยเจอครับ

ปัญหาแรกคือ เมื่อ เราสร้างลูกของ Grid แบบ Run Time แล้วสั่ง Grid.Reposition(); และตามด้วยคำสั่ง ScrollView.ResetPosition(); เราก็จะเห็นว่าลูกของ Grid ที่เราพึ่งสร้างนั้นค่อยๆเลือนไปประจำตำแหน่งของมัน

ปัญหาที่สองคือ ถ้าเราสร้างลูกของ Grid มาจำนวนน้อย หรือมีจำนวนไม่มากพอที่จะทำให้ Grid นั้นล้นออกนอก ScrollView แล้วมันก็จะทำให้ ลูกของ Grid นั้นไปอยู่ตรงกลาง ScrollView ดังรูป
1

ปัญหาที่สามคือ เมื่อเราทำ Application หรือ Game ในหลายๆขนาดหน้าจอ ถ้าเราอยากให้ Grid ของเราอยู่ชิดข้างบนเสมอล่ะ ทำยังไงดี ก็ Grid มันไม่มี Anchor นี่นา

วิธีแก้ก็ทำตามนี้เลยครับ
ถ้าเป็น Grid แบบนี้
4
ให้ Set ค่า ScrollView ตามนี้ครับ
2
และ Set ค่า Grid ตามนี้ ซึ่งเราต้อง Add Component UIWidget ให้ Grid ด้วยมันจะได้มี Anchor ให้เราใช้ไงครับ
3

แต่ถ้าเป็น Grid แบบนี้
5
ก็ให้ Set ScrollView ตามนี้ครับ
6
และ Grid ตามนี้
7

ให้สังเกต ScrollView ตรง Content Origin นะครับ
และให้สังเกต Grid ตรง Pivot, Smooth Tween และ ขนาดของ UIWidget นะครับ

วิธีการทำให้จอขยาย/ย่อให้ตรงกับ 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

กู้เงิน | เศรษฐกิจพอเพียง | สินเชื่อบุคคล | สมัครบัตรกดเงินสด | สินเชื่อ | เงินกู้ด่วน | ยืมเงินทรูมูฟ | เงินด่วนนอกระบบ