Game Unity Phần 6 FPT

Bài 6: H th ng UI Unity Gi ng viên: MOB301- L p trình C++ Bài gi ng 1 M C TIÊU  C u trúc Project  A Kh i t o c u hình d án Game 2D  B T o i t ng c b n • Game Object • Sprite • Animation i u n hành ng nhân v t • Prefab • Script i u n máy tr ng thái • Thành ph n v t lý x lý va ch m • H th ng UI • S d ng Particle System • Chuy n i ch i • 10 Sound • 11 Design Pattern Game N i dung  C u trúc Project  A Kh i t o c u hình d án Game 2D  B T o i t ng c b n • Game Object • Sprite • Animation i u n hành ng nhân v t • Prefab • Script i u n máy tr ng thái • Thành ph n v t lý x lý va ch m • H th ng UI • S d ng Particle System • Chuy n i ch i • 10 Sound • 11 Design Pattern Game H th ng UI Unity  Giao di n ng i dùng (User Interface – UI) thành ph n không th thi u i v i b t k game  UI cung c p thông tin tr c quan c n thi t cho ng i ch i, giúp ng i ch i có nhìn toàn di n v kh n ng c a (th i gian, i m, “máu”, ) có chi n thu t thích h p v t qua c th thách game  Vi c thi t k giao di n ng i dùng n gi n s d ng assets có s n (hình nh, font ch , hi u ng, ) s p x p chúng theo m t b c c c Designer thi t k  Các assets có th c tìm th y website, Assets Store c a Unity, ho c Designer, Artist 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 thi t k UI bao g m Canvas, Text, Image, Button, … H th ng UI Unity- Canvas  Canvas có th hi u 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 Canvas, t t c UI ph i c a m t Canvas  Các thành ph n UI khác c kh i t o b t bu c ph i n m m t canvas  Khi kh i t o m t thành ph n UI (Text, Image, ), Unity s t ng t o m t canvas n u ch a t n t i m t canvas Scene  kh i t o m t canvas, 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 c a m t Canvas s c render theo th t t xu ng d i c a s Hierarchy i t ng s c render tr c có th b che khu t b i i t ng phía d i H th ng UI Unity- Canvas Các ch c n ng quan tr ng c a Canvas  Render mode: Có tu ch n hi n th canvas: • Screen Space – Overlay Canvas s c v lên layer cao nh t c a hình n m m i game object khác Canvas v i render mode 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, s c render theo camera N u nh camera c ch nh canvas thành ph n bên 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 s d ng event camera thay render camera Ngoài ch c n ng nh render camera, event camera có thêm ch c n ng b t s ki n, d a th t render, to z, c a i t ng UI H th ng UI Unity- Canvas Các ch c n ng quan tr ng c a Canvas  Render mode:  i v i tùy ch n render theo Screen Space, Unity cung c p tính n ng Pixel Perfect, t ng kh n ng hi n th s c nét kh v t m H th ng UI Unity- Canvas Các ch c n ng quan tr ng c a Canvas  Rect Transform • T ng t nh thành ph n Transform game object khác Rect Transform c s d ng xác nh kích th c, v trí luân chuy n h th ng i u n giao di n ng i dùng • i v i tu ch n render mode Screen Space – Overlay Screen Space – Camera, thành ph n Rect Transform s c khoá l i không th tu ch nh Canvas s i u ch nh thông s m t cách t ng phù h p v i phân gi i hình game H th ng UI Unity - Canvas Các ch c n ng quan tr ng c a Canvas  Graphic Raycast • H tr b t s ki n • Khi nh n c tín hi u (mouse click, touch, ), m t tia nhìn t i v trí t ng tác s c t o B ng cách này, d dàng xác nh c i t ng mà ng i ch i mu n t ng tác, thông qua t a z c a i t ng Canvas 10 H th ng UI 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 có s d ng hàm click button hay không • Tr ng u tiên: m t object, ta có th kéo object vào ây hay có th s d ng picker bên c ch ch n object • Tr ng th 2: function list, ta ch n object cho tr ng u tiên, m t danh sách thành h n c a object s c li t kê ra, v i m i thành ph n s có m t menu ính kèo 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: tham s c a hàm trên, tham s ph i float, int, string, bool or Unity object  M t i u ph i l u ý hàm thích h p ph i Publish, return ki u Void có ho c tham s 35 H th ng UI Unity- Button  Khi click vào button, t t c hành ng c thi t l p s n event On Click s c th c hi n, ó 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 m t game object c a s Hierarchy ho c button ó  Khi ó event s t ng b t c thành ph n c a game object hi n th menu nh hình d i 36 H th ng UI Unity- Button  L u ý: n u c n g i m t hàm script, script ó ph i c g n vào m t game object c a s Hierarchy hàm c n có ph m vi truy c p public  Ngoài ra, hàng lo t event khác cho button c cung c p 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 37 Button 38 H th ng UI Unity- Scroll Rect  Scroll Rect 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 button ho c rich text (m t o n v n b n l n) mà vùng ch a không hi n th ta ph i cu n (scroll) m i th y h t c  Scroll Rect c thi t k làm vi c v i m t cu n scrollbar Nó th ng c s d ng v i m t UI Mask, có th kèm theo ó m t UI Image c s d ng ki m soát hình d ng c a thành ph n UI Mask 39 H th ng UI Unity- Scroll Rect Các thu c tính c a m t thành ph n Scroll Rect:  Content: ây 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 ta s d ng danh sách button, Content ây thành ph n Rect Transform c a object cha ch a UI button  Movement Type: • Unrestricted: Không gi i h n, b n ch n ki u chuy n ng n i dung (các item) có th s v t ph m vi c a Scroll Rect, lúc b n không th y item n a • Elastic: Lo i chuy n ng àn h i, co giãn n i dung s không th v t 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 b n scroll 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 40 H th ng UI 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 n i dung s không c cu n n a mà d ng l i l p t c, thi t l p ch có quán tính ta mu n n i dung ti p t c di chuy n thêm o n theo quán tính ta d ng kéo chu t • Deceleration Rate: T l gi m t c ta ch n ch scroll có quán tính  Horizontal Scrollbar: Tham chi u n m t thành ph n cu n ngang  Vertical Scrollbar: Thanm chi u n m t thành ph n cu n d c 41 H th ng UI Unity- ScrollBar  Khái ni m Scroll Bar:  Thanh i u n Scrollbar cho phép ng i dùng di chuy n m t hình nh hay m t khung nhìn ó mà kích th c n i dung c a l n v t t m khung nhìn, không th xem hoàn  Ví d quen thu c ta th ng th y nh cu n d c trình so n th o v n b n hay cu n ngang lúc xem m t b n … 42 H th ng UI Unity- ScrollBar Các thu c tính c a m t UI Scroll bar:  Interactable: Cho phép s d ng thành ph n hay không, n u b n không tick ch n thành ph n s b disabled  Transition: Xác nh ph n ng tr c quan c a control (th ng thay i màu s c, sprite) t i hành ng c a ng i dùng Các hành ng c a ng i dùng nh nh n chu t, hover chu t…t ng ng v i hành ng s có ph n ng khác ây có ch chuy n ti p • None: Không có ph n ng tr c quan l i hành ng c a ng i dùng • ColorTint: Ch m c nh, cho phép i màu handle t ng ng v i t ng tác ng t ng i dùng • SpriteSwap: Cho phép thay i sprite t ng ng v i t ng tác ng c a ng i dùng • Animation: Cho phép s d ng animation thay i linh ho t t ng ng v i t ng tác ng c a ng i dùng 43 H th ng UI Unity- ScrollBar Các thu c tính c a m t UI Scroll bar:  Navigation: Thu c tính xác nh th t c a control  Handle Rect: h a c s d ng cho x lý tr t, m t ph n c a UI Scrollbar  Direction: H ng mà ó giá tr c a Scrollbar s t ng lên handle c kéo Các tùy ch n Left To Right, Right To Left, Bottom To Top Top To Button  Value: Giá tr ban u c a Scrollbar, kho ng 0.0 n 1.0  Size: Kích th c phân o n c a handle Scrollbar, kho ng 0.0 n 1.0  Number Of Steps: S l ng v trí di chuy n riêng bi t c cho phép c a Scrollbar 44 H th ng UI Unity- ScrollBar S ki n có th b t m t UI Scrollbar:  On Value Changed: c g i b t c giá tr v trí c a Scrollbar thay i, m t k t qu kéo handle Giá tr c truy n cho hàm tr v m t ki u float 45 ScrollBar 46 K t lu n  C u trúc Project  A Kh i t o c u hình d án Game 2D  B T o i t ng c b n • Game Object • Sprite • Animation i u n hành ng nhân v t • Prefab • Script i u n máy tr ng thái • Thành ph n v t lý x lý va ch m • H th ng UI • S d ng Particle System • Chuy n i ch i • 10 Sound • 11 Design Pattern Game 47 Chu n b sau  C u trúc Project  A Kh i t o c u hình d án Game 2D  B T o i t ng c b n • Game Object • Sprite • Animation i u n hành ng nhân v t • Prefab • Script i u n máy tr ng thái • Thành ph n v t lý x lý va ch m • H th ng UI • S d ng Particle System • Chuy n i ch i • 10 Sound • 11 Design Pattern Game 48 THANK YOU! [...]... 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 11 H th ng UI trong Unity- Rect Transform... kim ng h 25 Text, Image 26 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, 27 H th ng UI trong Unity- Button Các thành ph... UI 18 Rect Transform 19 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 nhiên text v n là l a ch n ph bi n h n vì tính n gi n và d thao tác  kh i t o m t text, trong c a s Hierarchy, ta ch n Create UI Text 20 H th ng UI trong Unity- Text  Sau khi kh i t o m t d ng... Menu-GameObject UI Image 22 H th ng UI trong Unity- Image Các thu c tính c a m t UI Image:  Source Image: tham chi u n sprite mà hình nh hi n th  Color: Màu s c, màu này c nhân v i màu s c c a sprite, nh v y nó có th c s d ng làm m d n hay tô màu sprite  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. .. 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) 15 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  16 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... 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: 33 H th ng UI trong Unity- Button X LÝ S B n s Button th KI N KHI CLICK BUTTON th y có m t thành ph n On Click() bên trong Script, nó bao g m m t danh sách các hàm có c g i khi click button 34 H th ng UI trong Unity- Button X  LÝ S KI N... 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 35 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... gian tính b ng giây, chuy n i gi a các tr ng thái 31 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 32 H th ng UI trong Unity- Button BUTTON SCRIPT: • Animation: Cho phép m i s chuy n ti p s... trí, kích th c, góc quay, c a Text • Text: l u tr chu i ký t c n hi n th ra màn hình • Unity h tr m t s ch c n ng tu bi n chu i nh font, ki u ch (th ng, in m, in nghiêng, ), c ch , màu ch , • 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 21 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,... trên button, • 4.Pressed (but not released): Khi click chu t trên button, 30 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 ... UI Unity- Rect Transform th c hi n thi t l p nhanh chóng d dàng Rect Transform bao g m c a s neo Presets  i u có th c truy c p b ng cách nh p vào Nút neo Presets  16 H th ng UI Unity- Rect Transform... cung c p 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 37 Button 38 H th ng UI Unity- Scroll Rect  Scroll Rect m t hình ch nh t mà... thay i màu s c, ch t li u,  kh i t o m t text, c a s Hierarchy, ta ch n Menu-GameObject UI Image 22 H th ng UI Unity- Image Các thu c tính c a m t UI Image:  Source Image: tham chi u n sprite