วิธีทำให้ปุ่มกดไม่ได้โดยที่ไม่เปลี่ยน Sprite เป็น Disabled by

29
Sep
0

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

จากรูปด้านบน ปกติแล้วปุ่ม 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

31
Jul
0

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

27
Jun
0

หากต้องการ UI เป็นรูปลักษณะนี้

เราต้องใช้การ Mask เพื่อให้แสดงรูปที่เราต้องการในพื้นที่ของดาวเท่านั้น

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

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

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

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

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

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

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

[NGUI] สอนการใช้ Anchor by

30
Nov
0

จากในช่วงแรกที่ค้นคว้าการทำให้ 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

31
Mar
0

วันนึงขณะผมนั่งเล่น 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 อยู่ด้านขวา

กู้เงิน | เศรษฐกิจพอเพียง | สินเชื่อบุคคล | สมัครบัตรกดเงินสด | สินเชื่อ | เงินกู้ด่วน | ยืมเงินทรูมูฟ | เงินด่วนนอกระบบ