Game Unity Phần 6 FPT

H th ng UI trong Unity- Canvas... H th ng UI trong Unity- Rect Transform  Global and Local space trên thanh công c... • 2.Normal: Button tr ng thái bình th ng, • 3.Highlighted: Khi kéo

Bài 6: H th ng UI trong Unity

MOB301- L p trình C++

Gi ng viên:

v t qua c các th thách trong game

 Vi c thi t k giao di n ng i dùng n gi n là s d ng các assets có s n (hình nh, font ch , các hi u ng, ) và s p x p chúng theo m t b c c c Designer thi t k

 Các assets này có th c tìm th y trên các website, Assets Store c a Unity, ho c do chính các Designer, Artist trong d

án thi t k (th ng g p nh ng d án l n ho c v a)

 Các thành ph n c b n trong thi t k UI bao g m Canvas, Text, Image, Button, …

H th ng UI trong Unity- Canvas

 Canvas có th hi u là m t vùng riêng cho phép ch a ng

thành ph n giao di n ng i dùng (UI) Là m t game object

có m t component là Canvas, và t t c các UI ph i là con c a

m t Canvas

 Các thành ph n UI khác khi c kh i t o b t bu c ph i n m trong m t canvas

 Khi kh i t o m t thành ph n UI (Text, Image, ), Unity s t

ng t o ra m t canvas n u ch a t n t i m t canvas nào trong Scene

 kh i t o m t canvas, trong c a s Hierarchy, ta ch n

Create UI Canvas Các i t ng UI khác c ng c

kh i t o t ng t

 Các i t ng con c a m t Canvas s c render theo th

t t trên xu ng d i trong c a s Hierarchy i t ng nào trên s c render tr c và có th b che khu t b i i

t ng phía d i

H th ng UI trong Unity- Canvas

Các ch c n ng quan tr ng c a Canvas

 R ender mode: Có 3 tu ch n hi n th canvas:

• Screen Space – Overlay Canvas s c v lên layer cao nh t

c a màn hình và n m trên m i game object khác Canvas v i render mode này hoàn toàn không ph thu c vào camera

• Screen Space – Camera i v i mode này, ta c n ch nh m t camera cho canvas, nó s c render theo camera N u nh không có camera c ch nh thì canvas và các thành ph n bên trong s không c render

• World Space V i tu ch n này, i t ng canvas s c xem

nh m t game object thông th ng Tu ch n này s d ng event camera thay vì render camera Ngoài các ch c n ng nh render camera, event camera còn có thêm ch c n ng b t s ki n,

d a trên th t render, to z, c a các i t ng UI

H th ng UI trong Unity- Canvas

H th ng UI trong Unity- Canvas

• i v i các tu ch n render mode Screen Space – Overlay

và Screen Space – Camera, thành ph n Rect Transform s

c khoá l i và không th tu ch nh Canvas s i u ch nh các thông s m t cách t ng phù h p v i phân

gi i màn hình game

H th ng UI trong Unity - Canvas

Canvas

H th ng UI trong Unity- Rect Transform

Rect Transform:

 Rect Transform là m t thành ph n m i mà c dùng thay th cho thành ph n Transform trên t t c các UI m i mà Unity b sung phiên b n 4.6

 Thành ph n Transform c a m t game object trong Unity có 3

y u t là position – c n ch nh kích th c, rotation – i u

ch nh xoay và scale dùng c n ch nh t l c a m t i

t ng trong Scene

H th ng UI trong Unity- Rect Transform

 Position cho th y kho ng cách b ng pixel t các i m

anchor n pivot, d c theo tr c X và Y, Z là kho ng cách d c

tr c Z local (chi u sâu) và th ng c giá tr 0 Width

và Height cho bi t kích th c c a UI theo pixel

 Rotation: thì xoay object, th ng thì trong 2D mình ch s

d ng xoay tr c Z

 Scale, b n ph i hi u c s khác nhau gi scale và size Size thay i kích th c c a nó, không nh h ng n UI object bên trong, còn scale s canh ch nh l i t l c a object và t t

c các thành ph n con Mình th y resize m t y u t UI thì t t

h n là scale nó Scale th ng c s d ng cho các hi u ng

ng hay các m c ích c bi t khác

H th ng UI trong Unity- Rect Transform

Rect Transform:

 Rect Transform th hi n m t hình ch nh t c xác nh b i chi u r ng và chi u cao liên quan n m t i m tâm c a nó (g i là

pivot)

 Pivot là i m tr c a object, thông th ng m c nh s là tâm

c a object, n u b n xoay UI thì nó s xoay quanh i m tâm

 Anchor( i m neo): m t Rect Transform có th c anchored t i

i t ng cha c a nó,n u cha c a nó c ng có m t thành ph n Rect Transform

 Anchor cho phép chúng ta di chuy n ho c kéo dài UI d a trên

postion và size c a thành ph n Rect Transform c a UI cha C n

ph i chú ý r ng t t c các UI sau cùng c ng ph i tr thành là m t con c a m t Canvas

 Theo m t cách nào ó thì UI con s c neo vào UI cha d a vào thành ph n Rect Transform, t t c UI u có Rect Transform

H th ng UI trong Unity- Rect Transform

 Anchor: Trong scene, neo c nh n bi t b i b n hình tam giác

nh , mà theo m c nh, c nhóm l i v i nhau trung tâm c a thành ph n rect transform UI cha

 C th v Anchor:

• Rect transform có th c neo vào parent object n u parent oject c ng có m t thành ph n Rect Transform

• Trong scene view: neo c i di n b i b n hình tam giác nh ,

m i tam giác i di n cho m t neo Và m i neo k t h p v i m t góc c a rect transform t ng ng (ch p hình)

• Neo có th c di chuy n b ng cách kéo th trên Gizmo tam giác, Nh p trung tâm c a m t nhóm các hình tam giác s di chuy n các hình tam giác nh là m t nhóm Nh p vào hình tam

cá nhân s di chuy n m t neo u t i m t th i i m

 Neo có m t m i quan h c nh v i rect transform c a nó, nó ang c neo Neo có m i quan h linh ho t v i Rect Transform

c a object cha, mà h ang neo u

H th ng UI trong Unity- Rect Transform

• V trí c a neo cân i v i i t ng cha là m t s ph n

tr m kích th c c a i t ng cha d c theo tr c X và Y, (ch p hình Anchor)

H th ng UI trong Unity- Rect Transform

 th c hi n các thi t l p nhanh chóng và d dàng Rect Transform bao g m c a s neo Presets

 i u này có th c truy c p b ng cách nh p vào Nút neo Presets

H th ng UI trong Unity- Rect Transform

 Trong Scene, thao tác v i m t UI, cách t t nh t là s d ng Rect Tool, v i phím t t là Shift + T

 V i Rect tool c ch n có th di chuy n, thay i kích

th c và xoay b t k UI nào b ng cách gi chu t và kéo, Gi phím Shift s bu c các UI thay i kích th c t ng ng

 Kéo chu t g n b t k góc nào c a hình ch nh t xoay

H th ng UI trong Unity- Rect Transform

 Global and Local space trên thanh công c )

 Khi ch nh s a m t UI trên local space, hình ch nh t và x lý

ph i s p th ng hàng, (ph v a ) v i UI

 Còn trong global space, hình ch nh t và x lý ph i c

s p th ng hàng v i t ng th (hay t ng th thôi) trên toàn

c u, và hình ch nh t cho th y gi i h n c a UI

i u này phát hi n rõ nh t khi chúng ta xoay m t UI

18

Rect

Transform

H th ng UI trong Unity- Text

 UI Text c s d ng hi n th các

thông tin trên màn hình nh Score,

Lives, Times,

 M t s game s d ng các texture riêng

hi n th thông tin thay cho text, tuy

H th ng UI trong Unity- Text

 Sau khi kh i t o m t i t ng Text, c a s Inspector có

• Tu ch n Best Fit s t ng i u ch nh kích th c font

ch phù h p v i kích th c c quy nh trong Rect Transform

H th ng UI trong Unity- Image

 UI Image c s d ng r t ph bi n, nh thi t k background, các button, title,

 Cách s d ng r t n gi n, chúng ta ch n hình nh và kéo th vào khung Source Image Ngoài ra còn có m t s

tu ch n thay i màu s c, ch t li u,

 kh i t o m t text, trong c a s Hierarchy, ta ch n Menu-GameObject UI Image

H th ng UI trong Unity- Image

 Material: V t li u, m c nh thì hình nh không c n m t

v t li u, thu c tính này c s d ng khi b n mu n thêm

m t thu c tính shader ( bóng) cho hình nh Unity cung c p m t s shaders có th c s d ng v i UI System

H th ng UI trong Unity- Image

Các thu c tính c a m t UI Image:

 Image Type: Hình nh c s d ng nh th nào

• Simple: có ngh a là sprite s ch kéo dài phù h p v i

kích th c c a Rect Transform

• The Preserve Aspect: ây ch n gi n có ngh a là hình

nh s c l n nh t có th trong gi i h n c a Rect Transform và luôn gi úng m t t l ban u

• Set Native Size: Ph c h i kích th c Rect Transform nh

kích th c g c c a sprite t nh ngu n

• Sliced: có ngh a là hình nh s c hi n th b ng cách

s d ng ph ng pháp 9 lát c t

H th ng UI trong Unity- Image

 Các thu c tính c a m t UI Image:

• Tiled: Hi n th úng ph n hình nh theo kích th c

Rect Transform, a ch offset c tính t góc d i bên trái c a Rect

• Fill: Lo i này cho phép b n hi n th m t ph n hình nh

c xác nh b i thu c tính Fill Amount Và thêm m t

Text, Image

H th ng UI trong Unity- Button

 UI Button là m t thành ph n quan tr ng, giúp ng i

ch i t ng tác v i game

 Nh n input t ng i dùng và b t m t s ki n (Hover,

Press, Release)

 Gi ng nh UI khác – m t button ph i là m t thành ph n con c a canvas

 M t s button quen thu c có th th y trong nhi u game

là Play, Pause, Resume, Replay,

H th ng UI trong Unity- Button

Các thành ph n chính trong m t Object UI Button

 Rect Transform: m t thành ph n mà object UI nào c ng

có, b n có th xem l i ph n tr c

 Image script: ph n tr c mình ã nói rõ v UI Image,

các b n có th xem l i ph n tr c

 Text: Khi chúng ta t o m t Button, m t thành ph n con

là Text c t ng t o ra, chúng ta có th s d ng hay xóa n u th y không c n thi t

 Button script: thành ph n chính làm nên m t UI Button

H th ng UI trong Unity- Button

BUTTON SCRIPT:

 Interactable: M t bi n bool, xác nh s chuy n ti p

(transition) c a button, n u Interactable là False, button s

tr ng thái Disabled, m c nh thì button tr ng thái Normal v i Interactable c ch n

 Transition mode: Có 4 tùy ch n v s chuy n ti p c a

m t button, và m i chuy n ti p ta có m t s luân chuy n khác nhau gi a các tr ng thái c a button

• None: Không có s chuy n ti p, lúc nào button c ng

tr ng thái normal, ta s khó phân bi t khi có s tác ng vào button (khi ng i dùng hover, press, )

H th ng UI trong Unity- Button

BUTTON SCRIPT:

• ColorTint: Giá tr m c nh khi button c t o ra

• 1.Target graphic: là thành ph n hình nh c nhu m màu (t m hi u c tô màu khi có tác ng t ng i dùng), b n có th th y r ng khi ta t o m t button, image này s c t ng t o theo

• 2.Normal: Button tr ng thái bình th ng,

• 3.Highlighted: Khi kéo rê chu t trên button,

• 4.Pressed (but not released): Khi click chu t trên button,

H th ng UI trong Unity- Button

BUTTON SCRIPT:

• ColorTint:

• 5.Disabled: Không thao tác c button này

 Normal Color, Highlighted Color, Pressed Color, Disable Color s nh ngh a cách nhu m màu nh th nào t i button v i tr ng thái t ng ng

• 6.Color Multiplier: i u ch nh sáng màu s c hay alpha màu v i giá tr t 1 – 5, s thay i v i t ng

tr ng thái t ng ng

• 7.Fade Duration: là kho ng th i gian tính b ng giây, chuy n i gi a các tr ng thái

H th ng UI trong Unity- Button

BUTTON SCRIPT:

• SpriteSwap: S d ng sprite khác cho m i tr ng thái

• Ttarget graphic: gi ng nh trên colorTint

• Highlighted Sprite, Pressed Sprite, Disable Sprite tham chi u t i nh ng sprite s hi n th t ng ng

v i m i tr ng thái

H th ng UI trong Unity- Button

th c thêm vào th công nh ng Unity ã h tr ta

t ng generate ra thành ph n này, ta có th i u

ch nh theo ý mình nh ng mình th y i u này là không

c n thi t

 Navigation:

H th ng UI trong Unity- Button

X LÝ S KI N KHI CLICK BUTTON

 B n s th y có m t thành ph n On Click() bên trong Button Script, nó bao g m m t danh sách các hàm có

th c g i khi click button

H th ng UI trong Unity- Button

X LÝ S KI N KHI CLICK BUTTON

 thêm m t hàm vào list, click “+” icon, checkbox xác

nh là có s d ng hàm này khi click trên button hay không

• Tr ng u tiên: là m t object, ta có th kéo các object vào

ây hay có th s d ng picker bên c ch ch n các object

• Tr ng th 2: là function list, khi ta ch n object cho tr ng

u tiên, m t danh sách các thành h n c a object này s

c li t kê ra, và v i m i thành ph n s có m t menu ính kèo các hàm mà script c a thành ph n ó có, ch n hàm mà

ta mu n

• Tr ng cu i cùng: là tham s c a hàm trên, tham s ph i là

float, int, string, bool or là Unity object

 M t i u ph i l u ý hàm thích h p ph i là Publish, return ki u Void và có 1 ho c không có tham s

H th ng UI trong Unity- Button

 Khi click vào button, t t c các hành ng c thi t l p s n trong event On Click s c th c hi n, do ó ta có th th c

hi n ng th i nhi u hành ng tùy theo nhu c u

 Các i t ng c thêm vào có th là m t game object trong c a s Hierarchy ho c chính button ó

 Khi ó event s t ng b t c các thành ph n c a game object và hi n th trong menu nh trong hình d i

H th ng UI trong Unity- Button

 L u ý: n u c n g i m t hàm trong script, script ó ph i c

g n vào m t game object trong c a s Hierarchy và hàm này

c n có ph m vi truy c p là public

 Ngoài ra, còn hàng lo t event khác cho button c cung

c p trong thành ph n Event Trigger (Add Component -> Event -> Event Trigger) Cách s d ng t ng t nh v i event On Click

Button

H th ng UI trong Unity- Scroll Rect

 Scroll Rect là m t hình ch nh t mà có th c cu n theo chi u ngang hay theo chi u d c

 Scroll Rect th ng c s d ng di chuy n cu n m t hình nh l n ho c panel c a m t UI element, ch ng h n nh

m t danh sách các button ho c rich text (m t o n v n b n

l n) mà vùng ch a nó không hi n th ta ph i cu n (scroll) thì m i th y h t c

 Scroll Rect c thi t k làm vi c v i m t thanh cu n scrollbar Nó th ng c s d ng v i m t UI Mask, và có

th kèm theo ó là m t UI Image c s d ng ki m soát hình d ng c a thành ph n UI Mask

H th ng UI trong Unity- Scroll Rect

Các thu c tính c a m t thành ph n Scroll Rect:

 Content: ây là m t tham chi u n thành ph n Rect Transform

c a object UI c cu n, ví d nh m t hình nh l n, hay khi ta

s d ng danh sách các button, thì Content ây là thành ph n Rect Transform c a object cha ch a các UI button

 Movement Type:

• Unrestricted: Không gi i h n, khi b n ch n ki u chuy n ng

này thì n i dung (các item) có th s v t ra ngoài ph m vi c a Scroll Rect, lúc này b n không th y item n a

• Elastic: Lo i chuy n ng àn h i, co giãn các n i dung s

không th v t ra ngoài ph m vi c a Scroll Rect Khi ch n

Elastic, n i dung (các item) s có tình àn h i tr l i khi b n

scroll nó t n c ch Scroll Rect

• Elasticity: co giãn

• Clamped: B n s không th scroll t trái sang ph i n u item

u tiên ã hi n , hay ng c l i, b n khôgn th scroll t ph i qua trái n u item cu i ã hi n th

H th ng UI trong Unity- Scroll Rect

Các thu c tính c a m t thành ph n Scroll Rect:

 Horizontal: Cho phép cu n ngang

 Vertical: Cho phép cu n d c

 Inertia: Quán tính, n u không ch n có quán tính thì n i

dung s không c cu n n a mà d ng l i ngay l p t c, thi t l p ch có quán tính khi ta mu n n i dung ti p t c

di chuy n thêm 1 o n theo quán tính khi ta d ng kéo chu t

• Deceleration Rate: T l gi m t c khi ta ch n ch