ลองใช้งาน Unity 5 Scroll view UI กันดีกว่า

04

หนึ่งในฟังชั่นก์ใหม่ๆของ Unity ก็คือ UI แบบใหม่นั่นเองครับ ซึ่งการมาของ new UI system เมื่อประมาณเวอชั่น 4.6 ( ขออภัยหากจำผิด ) ก็ได้เปลี่ยนแปลงรูปแบบการทำ UI ไปเลย วันนี้เราจะมาลองดู Scroll view กันดูครับ

Scroll view คือการทำแผงเลื่อนเพื่อใช้โชว์ Content ข้างในโดยกำหนดขอบเขตให้มัน นกตัวอย่างเช่นหน้าต่าง Inventory ของเกมที่เราไมได้โชว์ทั้งหมด แต่ใช้ Scroll view ให้สามารถเลื่อนเพื่อดูได้ว่าเรามีไอเทมอะไรบ้างเป็นต้น มาลองดูตัวอย่างกันครับ

01

จากภาพผมได้ใส่ Scroll view ลงไปใน Scene เรียบร้อยแล้ว โดย Scroll view จะอยู่ในหัวข้อ Create -> UI -> Scroll view ครับ

มาดูส่วนประกอบที่สำคัญของ Scroll view กันครับ

02

View port – ส่วนนี้คือตัวกำหนดว่าเราจะให้หน้าต่างของเรามี Mask แบบไหน โดยค่าเริ่มต้นเป็น Mask แบบสี่เหลี่ยมธรรมดาครับ โดยใน View port จะมีเกมออบเจค Content อยู่ ซึ่งอะไรก็ตามที่เราอยากให้อยู่ภายในหน้าต่าง เราจะต้องลากมาใส่เป็นตัวลูกของ Content ครับ

Content – เป็นออบเจคที่ใช้กำหนดขอบเขตของ Content ที่อยู๋ภายในหน้าต่าง ยิ่งเราตั้งค่า Right กับ Height มากเท่าไหร่ หน้าต่างของเราก็จะสามารถ Scroll เพื่อดู Content ได้มากขึ้นเท่านั้นครับ

Scroll bar horizontal และ Scroll bar vertical – ส่วนนี้ใช้ตั้งค่าแถบเลื่อนครับ ซึ่งก็จะมีทั้งการเปลี่ยนรูปแบบ Bar ด้านหลัง หรือตัว Slider เองก็สามารถเปลี่ยนได้เช่นกันครับ

ออบเจคส่วนหลักๆก็จะมีประมาณนี้ครับ ทีนี้เรามาดูค่าที่เราสามารถตั้งได้ใน Srcroll view ดูบ้างครับ

Content – บอกว่าเราจะใช้เกมออบเจคชิ้นไหนเป็นเนื้อหาด้านใน

Horizontal – สามารถ Scroll ตามแนวขวางได้หรือไม่

Vertical – สามารถ Scroll ตามแนวตั้งได้หรือไม่

Movement type – รูปแบบการ Scroll ว่าจะให้มีการหน่วงนิดๆ หรือเป็นแบบเรียบๆ ซึ่งหากเลือกแบบ Elastic จะสามารถตั้งพารามิเตอร์การหน่วงได้ด้วยครับ

Viewport – กำหนดว่าจะใช้เกมออบเขคชิ้นไหนเป็น View port

Horizontal Scroll bar – ตั้งค่าแถบเลื่อนแนวนอน โดยสามารถกำหนดได้ด้วยว่าจะให้เป็นแบบ Fix หรือเลื่อนตาม Content

Vertical Scroll bar – ตั้งค่าแถบเลื่อนแนวตั้งครับ

มาลองดูตัวอย่างกันครับ

03

จากภาพผมใส่ Image ไปใน Content ครับ ลอง Play ดูจะเห็นว่าเราสามารถ Scroll เพื่อเลื่อนดูภาพส่วนที่เหลือได้ครับ

เป็นยังไงบ้างครับสำหรับทิปการใช้ Scroll view จริงๆแล้ว UI ของ Unity ยังมีอีกหลายส่วนที่น่าสนใจ แล้วผมจะนำทิปที่น่าสนใจมาบอกเพื่อนๆเช่นเคยครับ หวังว่าเพื่อนๆจะชอบและเอาไปใช้ในงานของเพื่อนๆได้นะครับ แล้วพบกันใหม่ทิปต่อไปครับ