(Unity3d) NGUI 3.6 Anchor กับการทำ UI บนจอหลายขนาด by heha
May0
การทำเกมบนมือถือ ปัญหาใหญ่ที่สุดปัญหาหนึ่งคือการทำเกมบนหน้าจอหลายขนาด ซึ่งวันนี้เราจะมาดูว่าการทำ UI ให้รองรับหลายหน้าจอนั้นทำอย่างไรกัน เราจะใช้ NGUI 3.6 ซึ่งมีวางขายใน Asset Store ของ Unity มาช่วยทำงานนี้ (หากใครไม่มีเงิน ก็สามารถใช้ NGUI 2.7 หัวข้อ Free Version ได้ แต่จะต้องทำอีกวิธีซึ่งยากกว่าพอสมควร) ในบทความนี้อ้างอิงจาก Example 1 – Anchor ใน NGUI Example ที่มีติดมากับ package อยู่แล้วนะครับ
จากรูปด้านบนเปิด Example 1 มาจะเป็นดังภาพ เลือก Top Right แล้วดูที่ Inspetor จะเห็นค่าที่เซ้ตไว้ดังรูปด้านล่าง
จะเห็นว่า 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 อยู่ด้านบนของจอมือถือ
ถัดมาลองคลิกที่ Label ที่อยู่ด้านใน Top Right อีกที แล้วเลือก Anchors เป็น Unified จะเห็นว่า Target เป็น Top Right หมายความว่าการเซ็ต Left, Right, Bottom, Top ของ Label ตัวนี้จะสามารถทำได้เช่นเดียวกับรูปที่แล้ว แต่ใช้การอ้างอิงกับขอบปุ่มแทนที่จะเป็นขอบจอมือถือ ทำให้สามารถกำหนดให้ตัวหนังสือหด-ขยายตามปุ่มได้โดยง่าย
ทีนี้ผมลองแก้ไขปุ่มให้เป็นดังภาพ คือจากจอซ้าย 20 pixel จอขวา 20 pixel และจากตรงกลางอย่างละ 50 pixel ทำให้สุดท้ายผมได้ปุ่มที่มีความยาวยืดตามขนาดหน้าจอ โดยห่างจากขอบ 20 pixel เสมอไม่ว่าจอจะขนาดเท่าใด โดยมีความสูงของปุ่ม 100 pixel ได้ผลเป็นภาพด้านล่าง
เป็นอย่างไรบ้างครับ ง่ายใช่ไหมครับ ไม่ต้องเขียน Code สักบรรทัดก็สามารถทำ Responsive Design ได้ในตัว Unity ตั้งแต่แรก โยนงานให้ฝั่ง Designer จัดการได้เลยโดยที่ลดแรงของ Programmer ไปได้มาก ขอให้สนุกกับการทำ ui ในมือถือด้วย unity นะครับ
ทำปุ่มง่ายๆด้วย Image Button [Ngui] by View
May0
ไม่ว่าเกมไหนๆก็ต้องมีปุ่มกดใช่ม๊าาา ไอครั้นจะทำปุ่มแบบใช้เครื่องมืออนิเมชั่นใน Unity ก็ดูจะลำบากไป
วันนี้เรามาสอนทุกๆท่านใช้อุปกรณ์ที่ง่ายและแสนสะดวก(?) Ngui 2.7 (อ่านว่าหงุ่ยสินะ)
ชักช้าอยู่ไยเริ่มกันเลยดีกว่าเนอะ
1.เตรียม sprite ของปุ่มที่เราจะทำเป็นไฟล์ .png
แล้วก็โยนลงโปรเจ็คซะนะฮะ
2.เปิดหน้าต่างเครื่องมือที่จะใช้ตามนี้
3.สร้าง Panel ที่จะให้มันอยู่ซะก่อนด้วย Ui wizard กด Create Your UI
ได้ Panel มาก็ลบ main camera ไปเลยฮะ ไม่ได้ใช้
4.ทำเป็นไฟล์ภาพเป็น Atlas ด้วย Atlas maker ตั้งค่า Padding ไว้ซัก 3 กำลังดีแล้วติ๊กเลือกทุกข้อเลย
กด create ก็จะได้ ไฟล์ Atlas
5.ได้เวลาสร้างปุ่มแล้วววว เปิด Widget wizard ขึ้นมาโลด เลือก Template เป็น Image Button
6.กดเลือก Atlas ที่เราสร้างตะกี้ แล้วก็เลือกรูปแบบของปุ่มโลด normal = ปกติ/ไม่ได้กด ,hover = เม้าส์อยู่เหนือปุ่ม ,pressed = กด ,disabled = กดไม่ได้นะแจ๊ะ
7.เสร็จแล้วก็เลือกที่ๆจะให้ปุ่มอยู่ เลือกที่ panel ที่เราสร้างนั่นแล กด add to เล้ยยย
8.ได้ปุ่มมาเรียบร้อย ไปดูที่หน้าต่าง Inspector จะเห็นว่าสามารถเปลี่ยน sprite ของปุ่มได้จากตรงนี้ด้วย
แค่นี้ก็ได้ปุ่มมาเรียบร้อยฮะ ง่ายมากเลยเนอะ =w=
ทำ Button Sliding Menu อย่างง่ายด้วย NGUI(2.7) by Tony
May0
คราวที่แล้วลองสร้าง 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 ได้ด้วย
ไล่ Gradient แบบเข้าหาจุดศูนย์กลาง by TAMA
May0
สร้างแถบ Gradient ขึ้นมาซักแถบ ในตัวอย่างจะคละสีให้ดูเมทัลลิคหน่อยนะคะ
สร้างกลมขึ้นมาอีก 1 วง ให้ Gradient แค่ขาว-ดำสองสีเท่านั้น เลือกแบบ Radial ค่ะ
ไปที่ Object >> Expand แล้วกด OK
จะได้แบบรูปข้างล่างนี้
จากนั้นใช้ Direct Selection Tool (ลูกศรสีขาว) จิ้มเส้นสีน้ำเงินข้างในวงกลม
ลบๆๆทิ้งจนสะอาดที่สุดค่ะ
ลากวงกลมมาวางบนแถบสีที่เราทำไว้ตั้งแต่แรก
ไปที่ Object >> Envelope Distort >> Envelope Options
จะมีหน้าต่างขึ้นมา กด OK ตามนี้ค่ะ
ไปที่ Object >> Envelope Distort >> Make with Top Object
เสร็จแล้วววว
สามารถนำไปใช้งานต่อได้ :DDD ถ้าเปลี่ยนค่าแถบสีก็จะได้สีเข้าหาจุดศูนย์กลาง
ตามตัวอย่างนะคะ
ทำโลโก้ทุกครั้ง ทำมาหลายๆแบบและใส่ตัวเลขกำกับเถอะ by akara
May0
ทุกๆครั้งที่คุณต้องออกแบบโลโก้ ลองทำแบบนี้ดูสิครับ
ก่อนที่จะเอาให้เจ้านายตรวจ หรือลูกค้าApprove หรือเพื่อนร่วมทีมดูว่าโอเคไหม ลองทำโลโก้ขึ้นมาอีกซัก 1-2 แบบ อาจจะไม่ต้องแก้เยอะก็ได้ แค่แก้ในจุดที่คุณไม่มั่นใจว่ามันดีแล้วหรือยัง จุดที่คุณชอบในงานอยู่แล้ว อาจจะไม่ต้องแก้ก็ได้
ออกแบบเพิ่มเสร็จแล้ว เซฟให้เป็นไฟล์รูปเดียวกัน แล้วใส่ตัวเลขกำกับไว้ด้วยนะว่า อันไหนแบบที่1 อันไหนแบบที่2 จากนั้นจึงค่อยเอาให้คนเหล่านั้นดู
ข้อดี(สำหรับฝั่งผู้ตรวจ) คอมเม้นท์งานง่ายขึ้น ได้เห็นตัวเลือกหลายๆแบบ
ข้อดี(สำหรับฝั่ง designer) งานจบลงเร็วกว่าเดิมมาก บางทีไม่ต้องแก้เลยลูกค้าเลือกจากแบบที่ทำมาแล้ว บางครั้งมีแก้บ้างแต่ก็ไม่มาก โดยส่วนใหญ่คอมเม้นท์มักจะเป็น เอาสีแบบที่(1)นะ แต่ตัวหนังสือเป็นแบบที่(2) อย่างเช่น ตอนที่ออกแบบโลโก้ของเกม CYBERMON
สรุป โลโก้ไฟนอลคืออันนี้ครับ
คือแค่เอาสีพื้นหลังจากแบบที่ 5 แล้วเปลี่ยนสีตัวอักษรเป็นสีของพื้นหลังแบบที่ 1,3 เท่านั้นนเอง
ตัวอย่างงานออกแบบโลโก้ที่ใช้วิธีเดียวกัน
โลโก้ที่ทำให้ลูกค้า
โลโก้ที่ออกแบบตอนจะก่อตั้งบริษัทครั้งแรก(Levelup Studio!)
โลโก้ Levelup Plus ที่ออกแบบชุดแรก