ควบคุมขนาด Sprite ใน NGUI หลายๆ ชิ้นได้ง่ายๆ by Tony

เบื่อไหมกับการไล่ปรับขนาด Sprite ทีละชิ้นๆ ให้ได้อัตราส่วนเดียวกัน? มาลองทำ GameObject เปล่าๆ ครอบไว้กันดีกว่า!!
เริ่มจากสร้าง Sprite Object ตามรูปเลย

จากนั้น สร้าง GameObject เปล่าๆ ขึ้นมาตัวหนึ่ง

แล้วลาก Sprite ที่ต้องการจะคอนโทรลตามสัดส่วนลงไปใน GameObject ตัวใหม่เลย

หลายคนอาจสงสัย ว่าทำไมต้องยุ่งยากขนาดนี้ด้วย? แค่จิ้มหลายๆ ตัวแล้วปรับขนาดเอาก็ได้นี่นา?
- ขนาดปรับได้อัตราส่วนก็จริง แต่ Position ไม่ได้ Ratio ตรงตามของเก่า (เช่นตาสองข้างห่างกันเกินไป)
- เป็นระเบียบเรียบร้อยกว่า ควบคุมและดูแลง่ายกว่ามาก
- เวลาที่ใช้  Code ในการเปลี่ยน sprite.spriteName = … นั้น ขนาดของ Sprite จะคืนค่าเดิมทันที ไม่ใช่ค่าที่ปรับไว้แล้ว แต่หากขนาดเป็นขนาดเดิมอยู่แล้วล่ะก็ จะสามารถเปลี่ยนได้โดยไม่ต้องมานั่งเซตขนาดและตำแหน่งใหม่ ทั้งนี้เลยปล่อยขนาด Sprite เท่าเดิม แล้วปรับขนาดของ Object ที่ครอบอยู่แทน

มาทำ Interaction Animation Unity กันเถอะ!! by Tony

คราวนี้เราจะมาทำ Animation ที่ Interaction กับแผงควบคุมอย่าง Keyboard อย่างง่ายๆ กัน โดยคราวนี้เราจะใช้แต่ฟังก์ชั่นของ Unity เองล้วนๆ

ก่อนอื่น เริ่มจากหา Sprite Sheet ที่แจกให้ว่อนกันในเนตก่อนเลย~

เค้าไปเจอ Rockman X มาแหละ หุหุหุ

ต่อไป สร้าง GameObject ขึ้นมาตัวนึง เพื่อที่จะรับหน้าที่เป็น Rockman ของเรา จากนั้นเลือกที่ Sprite Sheet ที่จะใช้ มองหาเมนูทางขวามือที่เขียนว่า Sprite Mode โดยเจ้าตัวนี้แหละ จะเอาไว้เปลี่ยนให้กลายเป็น Sprite ชิ้นเล็กๆ ได้

จากนั้นกดปุ่ม Sprite Editor แถวๆ นั้น เพื่อที่จะเริ่มตัด Sprite กัน โดยที่แบ่งได้ 2 แบ คือ Automatic และแบบ Grid ซึ่ง Rockman ของเรานั้นจะใช้แบบ Automatic เพราะเรียงขนาด Grid ไม่ได้แบบที่ต้องการ ซึ่งผลก็ออกมาดูดีใช้ได้

ทีนี้ มาเริ่มที่ Animation กันเลย!! คลิกที่ตัว GameObject Rockman ของเรา แล้วเปิดหน้าต่าง Animation ขึ้นมา (ถ้าไม่มีให้เปิดจาก Window—->Animation) จากนั้นคลิกตรงปุ่ม Add Curve ตรงด้านซ้าย เพื่อสร้างไฟล์ .anim ที่จะใช้เล่น Animation โดยเราจะใช้ชื่อว่า rockman_idle เป็นตอนที่ยืนเฉยๆ แล้วกะพริบตานั่นเอง จากนั้นลากไปใส่ตำแหน่งตามภาพเลย~

ต่อไปเราจะมาทำ Animation ตอนวิ่งกัน ทำเหมือนขั้นตอนที่แล้ว แต่คราวนี้เราจะถึง Sprite มาทั้งแถบ เพราะแต่ละชิ้นคือ Sprite ในแต่ละ Frame นั่นเอง

เสร็จจาก Animation แล้ว เราจะไปวุ่นวายกับ Animator ซึ่งเป็นตัว Control Animation กัน เริ่มจากสร้างตัวแปรควบคุม state ของ Animation ตัวนี้ก่อนตามรูปเลย หลักการคือ เมื่อ run = 1 Rockman จะวิ่งนั่นเอง

เสร็จแล้วก็คลิกขวาเพื่อลากเส้น Transition ตามภาพ โดยตั้ง Condition เอาไว้ด้วย (run = 1 Rockman วิ่ง/ run = 0 Rockman หยุดและ idle)

เสร็จแล้ว ให้สร้าง Script เอาไว้รับค่าจาก Keyboard ติดเอาไว้ที่ตัว Rockman ได้เลย! โดยโค้ดตามภาพข้างล่าง
(ใช้ GetKeyDown() เพื่อตรวจจับเวลา Hold Right Button เอาไว้ และใช้ GetKey เพื่อ Detect เวลาที่ไม่ได้กด)

เสร็จแล้วลองกด Play แล้วจิ้มปุ่มลูกศรขวามือค้างไว้ดูสิ!! Rockman ก็จะวิ่งได้แล้ว!! เย้!! สามารถประยุกต์ใช้ต่อไปได้เพื่อทำเกมเต็มตัวนะจ๊ะ :3

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

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

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

- Drag Panel

- Grid (Menu)

- Menu

- Grid (Item)

- Item

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

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

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

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

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

บรรทัดาุดท้ายที่วงแดงไว้คือเทคนิคที่ทำห้ 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) ให้อยู่กลางหน้าล่ะ)

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

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

[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 นะฮ้าฟ