วิธีทำให้ปุ่มกดไม่ได้โดยที่ไม่เปลี่ยน Sprite เป็น Disabled by Ziah
Sep0
จากบนลงล่าง กดได้ / กดไม่ได้ / กดไม่ได้
จากรูปด้านบน ปกติแล้วปุ่ม UI Button จะมีอยู่ 3 State คือ Normal / Pressed / Disabled ทีนี้ปุ่มที่โชว์ขณะไม่มีแอคชั่นใดๆก็จะมองเห็นได้อยู่สองแบบคือ Normal กับ Disabled แต่โจทย์คือเราอยากได้แบบที่ 3 คือดูเหมือนปุ่มกดได้ (Normal) แต่ว่าจริงๆแล้วกดไม่ได้ เลยมีวิธีแก้โดยใช้โค๊ดดังนี้ฮะ
Set Sprite ไว้ตามปกติ สีขาว Normal / สีแดง Disabled
if (isLock) //ถ้าล็อค
{
buttonTrans.GetComponent<BoxCollider>().enabled = false; //ปิด BoxCollider
button.enabled = false; //Disable ตัวปุ่มไป โดยจะไม่ใช่ .isEnable ที่จะทำให้ปุ่มนั้นเปลี่ยน state เป็น Disabled
}
else //ถ้าปกติ
{
button.isEnabled = true; //เปลี่ยนกลับเป็น Normal
button.enabled = true; //Enable ตัวปุ่ม
buttonTrans.GetComponent<BoxCollider>().enabled = true; //เปิด BoxCollider
}
ตามโค๊ดด้านบนถ้าเรียง Order ผิดก็จะแสดงผลผิดได้ เพราะแค่ Hover ปุ่มก็จะทำการเช็ค State แล้ว แต่ Order ด้านบนสามารถทำให้ได้ผลลัพธ์ตรงตามความต้องการครับ
สร้าง checkbox และ radio button ใน unity by akara
Jul0
1. สร้าง Widget เปล่าๆขึ้นมาก่อน กำหนดให้ความยาว เพื่อที่ของ Label ที่จะใส่ลงไปด้วย ไม่งั้นเวลาคลิกจะต้องคลิกให้โดนตัวกล่องเท่านั้น
2.Attach Toggle Script
3.ลาก Sprite ที่เป็นตัว check box หรือ radio button
(รูปอะไรก็ได้ที่จะแสดงเมื่อติ๊กช่องนี้) มาใส่ในช่อง Sprite อย่าเอารูปที่เป็น bgของช่อง
มาใส่นะ
4.ถ้าจะทำเป็น Checkbox ในช่อง group ก็ใส่ 0 ไว้ ถ้าเป็น Radio Button ก็ใส่เลขของกลุ่มแต่ละกลุ่มไว้
เท่านี้ก็เสร็จแล้ว
อ่อ อย่าลืม Attach Collider ให้กับ Widget ด้วย ไม่งั้นจะคลิกไม่โดน
หลักการทำ Masking ใน Unity ด้วย Texture Mask by akara
Jun0
หากต้องการ UI เป็นรูปลักษณะนี้
เราต้องใช้การ Mask เพื่อให้แสดงรูปที่เราต้องการในพื้นที่ของดาวเท่านั้น
โดยปกติแล้วเราก็จะทำรูป Mask เป็นแบบนี้
ส่วนนี่ก็เป็น รูปที่เราต้องการแสดงในพื้นที่ดาว
แต่ว่าเมื่อทำด้วยหลักการเดิมใน Unity แล้ว สิ่งที่ได้กลับมาจะหน้าตาแบบนี้
เนื่องจากว่า Mask ใน Unity จะทำงานลักษณะตามในภาพนี้ครับ
ตัว Mask จะเรียงต่อๆกันตามพื้นที่ของรูป
ดังนั้นเราจึงต้องทำรูป Mask ในมีพื้นที่เท่ากับตัวรูปที่เราจะใช้เลย อย่างเช่นแบบนี้(พื้นที่ที่เป็นเส้นประคือทำใสๆไว้)
การทำงานของมันก็จะได้ออกมาแบบที่เราต้องการ
[NGUI] สอนการใช้ Anchor by Ziah
Nov0
จากในช่วงแรกที่ค้นคว้าการทำให้ 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
ตำแหน่งปุ่มควรจะเป็น OK-Cancel หรือ Cancel-OK? by akara
Mar0
วันนึงขณะผมนั่งเล่น research เกมในมือถืออยู่ ผมจะกดใช้งานไอเทมในเกม
เกมมันก็เลยขึ้น popup มาถามผมว่า ตกลงใช้ไอเทมไหม yes/no แล้วผมก็จะกด ok แต่ดันไปกดผิดปุ่มซะงั้น ผมเลยงงๆ เอ๊ะ ตะกี้ตูกดไรไปเนี่ย กดใหม่สิ
คราวนี้ผมอ่านข้อความที่ปุ่มกดดีๆ แล้วจึงบรรจงกดลงไปอีก 1 ครั้ง แน่นอนครับ ผมไม่พลาด แต่มันก็เลยทำให้ผมสงสัยว่า ทำไมตอนแรกผมกดผิดไปได้นะ เลยมานั่งคิดๆดู เห้ย! เกมนี้ปุ่ม ok มันอยู่คนละที่กับอีกเกมที่ผมเล่นตะกี้นี่น่า
ความสงสัยเลยบังเกิด ลองเปิดๆดูทั้ง 2 เกมอีกครั้ง ชัดเลย เกมนึง ok ซ้าย cancel ขวา อีกเกม Ok ขวา cancel ซ้าย … อ้าว แล้วเกมตูละ … แล้ว จริงๆมันควรจะเป็นแบบไหนล่ะ
ผมก็เลยลองไป google ดู เจอกับบทความนี้เข้าให้ http://www.nngroup.com/articles/ok-cancel-or-cancel-ok/เขียนโดยคุณ Jakob Nielsen
สรุปได้ใจความป๋าบอกมาว่า ขึ้นอยู่กับว่ามันอยู่บน platform ไหน ก็ออกแบบตามที่คนใช้ส่วนใหญ่เค้าใช้กัน Windows ก็ OK-Cancel ส่วน Mac ก็ Cancel-OK ถ้าเอ็งจะทำบนเว็บก็ลำบากหน่อย เอาตามที่คนใช้ของเอ็งใช้ละกัน ไปดู Stat ซะ คนใช้วินโดว์เยอะก็ออกแบบแบบ Windows คนใช้ Mac เยอะ ก็ออกแบบแบบ Mac
ตัวอย่างของ Windows
ตัวอย่างของ Mac
ส่วนบนมือถือเท่าที่อ่านในบทความเหมือนจะไม่ได้เขียนไว้ครับ แต่พอลองสังเกตุแล้วส่วนใหญ่ก็จะปุ่ม Ok อยู่ด้านขวานะ ผมเดาว่าน่าจะเพราะมันอยู่ใกล้นิ้วโป้งขวามั้ง
ตัวอย่างของ iOS และ Android
เกม Brave Frontier ปุ่ม OK อยู่ด้านซ้าย เกมนี้แหละที่ผมกดผิด
เกม Chain Chronicel ปุ่ม OK อยู่ด้านขวา
Who are we?
