[NGUI]การทำ Drag Panel ใน Unity3D (2D) by Tony

ถ้าลองคิดถึงการทำ Scroll Panel หรือ DragPanel ใน Unity แล้ว คงไม่พ้นการวาง Code ครั้งยิ่งใหญ่เป็นแน่

ครั้งนี้เราเลยจะหาเครื่องทุ่นแรงซะหน่อย นั่นก็คือ!! NGUI Package( โดย Tesharen Extertainment)
เริ่มจากการสร้าง Project Unity ขึ้นมาโปรเจคนึง (อย่าลืมเปลี่ยนตรง Setup Default เป็น 2D ด้วยนะ) จากนั้นทำการ Import NGUI Package ที่จะใช้ลงมาใน Assets (ตัวที่ใช้ในตัวอย่างเป็น ver.2.7 “ฟรี” )

จากนั้นลบตัว Main Camera ตัวเก่าทิ้ง (ใน Panel ที่จะสร้างจะมีให้อยู่แล้ว) แล้ว Add Panel ตามเมนูด้านบน (NGUI -> Create a Panel)

แล้วจะได้หน้าตาแบบนี้ (สังเกตว่าจะมี Script ของ NGUI แนบมาให้ใน Component แล้ว)

จากนั้นเราจะทำการ Add Grid เข้าไปใน Panel
โดย Grid ที่ว่านี้จะทำหน้าที่คล้ายๆ ตัวจัด GameObject ใน Grid นั้นๆ ให้เป็นระเบียบ
เริ่มจากการ Add GameObject เปล่าๆ เข้าไปใน Panel แล้วใส่ Script ของ NGUI เข้าไป
(Add Component -> NGUI -> Interaction -> Grid)

สังเกตที่บริเวณ Script ของ Grid ตรงบริเวณ Max Per Line คือจำนวณ Object ต่อแถว (0 คือไม่จำกัด)
เสร็จแล้วจึงกด Reposition Now เพื่อจัดหน้าใหม่อีกครั้ง
ต่อไปเราจะทำการ Add Object เข้าไปใน Grid เพื่อเป็น Drag Content ของเรา
ตัวอย่างนี้จะ Add Sprite เข้าไปผ่านทางหน้า Widget Wizard ของ NGUI (ที่เมนูด้านบน, NGUI -> Open Widget Wizard )
**NGUI จะใช้ Sprite ผ่านทาง Atlas(Prefab ที่เก็บ Sprite) ไม่ได้ใช้ Sprite Renderer ของ Unity
จึงจำเป็นต้องทำ Sprite ให้เป็น Atlas ก่อนโดยใช้ Atlas Maker Tool ของ NGUI (NGUI -> Open the Atlas Maker)

จากนั้นทำการ Add Collider เข้าไปที่ Sprite แต่ละตัว เพื่อเป็นตัวตรวจจับการคลิก/ทัช
**สามารถใช้ NGUI Tool ตรงเมนูด้านบนได้  แล้วขอบ Collider จะตรงกับขอบรูป โดยทำการ Add ได้ทีละ Object เท่านั้น (ถ้ามีเป็นสิบก็ทำใจคลิกแอดไปทีละอันล่ะ)
แล้วกลับมาที่ Object ที่ชื่อว่า Panel ของเรา เพื่อที่จะ Add Script Draggable Panel ลงไป (Add Component – > NGUI -> Interaction -> Draggable Panel)

สังเกตตรงแถบ Scale, ตรงนี้จะกำหนดแกนที่เราจะ Slide (แนวนอน : x=1,y=0/แนวตั้ง : x=0,y=1)
จากนั้น Add Script ที่ชื่อว่า Drag Panel Contetn ลงไปใน Object ใน Grid ของเรา เพื่อเป็นตัว Detect Collidor ที่จะใช้ Response ต่อการ Drag

สังเกตตรง Draggable Panel ในช่อง Script Drag Panel Content ดีๆ ว่าต้องเป็น Panel เดียวกันกับที่มี Script Draggable Panel
จากนั้นลองกด Play เพื่อทดลอง
ถ้าคิดว่าแค่นี้ยังไม่สะใจ จะทำ Panel ซ้อน Panel ก็ได้
ถ้าข้องใจสามารถดูตัวอย่างได้ที่ Folder Example -> Scene ของ NGUI ชื่อ Scroll View นะฮ้าฟ