จากบนลงล่าง กดได้ / กดไม่ได้ / กดไม่ได้

จากรูปด้านบน ปกติแล้วปุ่ม 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 ด้านบนสามารถทำให้ได้ผลลัพธ์ตรงตามความต้องการครับ

2.Attach Toggle Script

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

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

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

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

โดยปกติแล้วเราก็จะทำรูป Mask เป็นแบบนี้

ส่วนนี่ก็เป็น รูปที่เราต้องการแสดงในพื้นที่ดาว

แต่ว่าเมื่อทำด้วยหลักการเดิมใน Unity แล้ว สิ่งที่ได้กลับมาจะหน้าตาแบบนี้

เนื่องจากว่า Mask ใน Unity จะทำงานลักษณะตามในภาพนี้ครับ

ตัว Mask จะเรียงต่อๆกันตามพื้นที่ของรูป

ดังนั้นเราจึงต้องทำรูป Mask ในมีพื้นที่เท่ากับตัวรูปที่เราจะใช้เลย อย่างเช่นแบบนี้(พื้นที่ที่เป็นเส้นประคือทำใสๆไว้)

การทำงานของมันก็จะได้ออกมาแบบที่เราต้องการ

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

คราวนี้ผมอ่านข้อความที่ปุ่มกดดีๆ แล้วจึงบรรจงกดลงไปอีก 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 อยู่ด้านขวา