• Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
AnonyViet
  • Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
No Result
View All Result
  • Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
No Result
View All Result
AnonyViet
No Result
View All Result

[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles

DeathGM by DeathGM
24/11/2021
in Godot
Reading Time: 5 mins read
A A
1

Mục lục bài viết

  1. Styles
  2. Tổng kết

Trong phần này, mình sẽ hướng dẫn bạn cách để thiết kế UI cho game mà thay vì sử dụng các UI khác trên mạng. Mình sẽ chỉ bạn cách sử dụng trực tiếp trong Godot.

Styles

Đối với các phiên bản từ 3.3 trở xuống thì nó được gọi là Custom Styles ở bên ô Inspector của 1 node nào đó thuộc node Control.

Các bài viết liên quan

Có nên dùng Unity để lập trình game không? 103

Có nên dùng Unity để lập trình game không?

07/04/2022
godot lap trinh game

Có nên học Godot Engine để lập trình Game không?

15/03/2022 - Updated on 17/03/2022
hoc lap trinh game de khong

Học lập trình Game dễ không? Tiềm năng của ngành lập trình game?

09/03/2022
Có nên dùng Game Maker Studio để làm Game trong năm không? 104

Có nên dùng Game Maker Studio để làm Game trong năm không?

03/03/2022

Còn ở Godot phiên bản 3.4 trở lên thì nó nằm ở Theme Overrides -> Styles.

Và tất nhiên cái việc thiết kế các node Control này sẽ có hai cách:

+ Một là bạn sẽ sử dụng Theme và khi sử dụng Theme bạn chỉnh ở node gốc thì các node con cũng sẽ được chỉnh theo.

+ Hai là bạn sẽ chỉnh styles riêng của node.

[Tạo 2D Platformer Game với Godot] Phần 17: Thiết kế UI với Custom Styles

Ở đây, mình sẽ chọn node NutBatDau để design.
[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 79

Bên bảng Inspector của node NutBatDau chọn Theme Overrides -> Styles.

Bạn sẽ thấy có 5 dòng:

  • Hover: Kiểu dáng của node khi con chuột di chuyển vào node.
  • Pressed: kiểu dáng khi nhấn vào node.
  • Focus: tương tự với pressed nhưng mà khi nó focused
  • Disabled: kiểu dáng khi bạn đang tắt node này.
  • Normal: kiểu dáng khi ở trạng thái bình thường không làm gì cả.

[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 80

Mình sẽ design cá Normal đầu tiên.

Bạn nhấn vào [empty] -> New StyleBoxFlat

[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 81 [Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 82

Sau đó các ban sẽ thấy cái Button đã chuyển sang màu xám và 1 tab các dòng mới xuất hiện bên dưới Normal.

[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 83 [Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 84 [Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 85

Mình sẽ đổi Bg Color thành màu xanh lá cây và id Color ở đây mình có là 41d822.

[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 86

Tiếp theo mình sẽ vào Conner Radius để chỉnh bán kính góc.

Bạn chỉnh lên cao thì cái góc nó sẽ cài tròn lại nhé.

[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 87[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 88

Đây là sau khi mình chnhr Corner Radius lên 8.

Nhưng cái Button khá là nhỏ và chữ nó sát hết node rồi nên không đẹp lắm.

[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 89

 

[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 90[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 91[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 92Do đó, mình sẽ qua phần rect và chỉnh lại ở min size sao cho hợp lí.

Nhớ là chỉnh ở min size chứ không phải ở size đâu nhé, nếu chỉnh ở size khi chạy game nó vẫn reset về size cũ đấy.

[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 93

Tiếp đến, mình sẽ thêm những chi tiết bên ngoài = cách bạt Blend ở Border và chỉnh lại màu cho hợp lí. Ở đây màu của mình là: 385831.

[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 94

Sau khi chỉnh xong Border thì vô Border width chỉnh từ 1 cho tới 3 để nó xuất hiên border nhé.

[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 95

Sau đó mình thêm 1 chút shadow.

[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 96 [Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 97 [Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 98

Tiếp đó mình sẽ làm với pressed nhưng thay vì phải làm lại từ đầu thì mình sẽ copy nó và dán lại.

[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 99

Sau đó bạn nhấn vô mũi tên ở pressed và chọn make unique nhé.

Nếu không nhấn make unique thì khi bạn chỉnh sửa Styles ở Normal thì Pressed cũng bị thay đổi theo.

[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 100

Mình sẽ chỉnh lại bg color của pressed sáng hơn 1 tý để người dùng biết rằng họ đã nhấn vào rồi.

Màu color của mình : 34fc0b.

[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 101

Tiếp đó, bạn làm tương tự với Hover.[Tạo 2D Platformer Game với Godot] Phần 19: Thiết kế UI với Custom Styles 102

Mình sẽ có kết quả cuối.

Tổng kết

Vậy là mình đã hướng dẫn bạn cách thiết ké UI với Godot và trong phần tiếp theo sẽ chỉ bạn các tạo custom font.

 

Tags: Godotlập trình gamethết kế game
Previous Post

Cách chuyển PowerPoint sang Google Slides

Next Post

Top mật khẩu được sử dụng nhiều nhất năm 2021

DeathGM

DeathGM

Related Posts

godot lap trinh game
Godot

Có nên học Godot Engine để lập trình Game không?

15/03/2022 - Updated on 17/03/2022
[Tạo 2D Platformer Game với Godot] Phần 29: Lưu và load dữ liệu game 105
Godot

[Tạo 2D Platformer Game với Godot] Phần 29: Lưu và load dữ liệu game

09/12/2021
[Tạo 2D Platformer Game với Godot] Phần 28: Thêm âm thanh giao diện 106
Godot

[Tạo 2D Platformer Game với Godot] Phần 28: Thêm âm thanh giao diện

08/12/2021
[Tạo 2D Platformer Game với Godot] Phần 27: Mở khoá level 107
Godot

[Tạo 2D Platformer Game với Godot] Phần 27: Mở khoá level

07/12/2021
[Tạo 2D Platformer Game với Godot] Phần 26: Thêm điểm số khi hết game 108
Godot

[Tạo 2D Platformer Game với Godot] Phần 26: Thêm điểm số khi hết game

30/11/2021
[Tạo 2D Platformer Game với Godot] Phần 25: Tạo Menu khi hết Level 109
Godot

[Tạo 2D Platformer Game với Godot] Phần 25: Tạo Menu khi hết Level

29/11/2021
Next Post
top password su dung nhieu nhat

Top mật khẩu được sử dụng nhiều nhất năm 2021

guest
guest

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

1 Comment
oldest
newest
Inline Feedbacks
View all comments
Robert Cell
Robert Cell
5 months ago

series quá hay ad , mong ad ra thêm các phần mới !

Reply
wpdiscuz   wpDiscuz

Liên hệ Quảng Cáo

Lien he AnonyViet

Đối tác —

Fshare

Các bài mới

5 Website giúp bạn tìm chủ tài khoản Email là ai 110

5 Website giúp bạn tìm chủ tài khoản Email là ai

24/05/2022
godeal24

Giá bản quyền Windows 10 chỉ 5.71$, miễn phí nâng cấp lên Windows 11

23/05/2022
Cách thiết lập Shadowsocks với Outline để tạo Proxy cho riêng bạn 111

Cách thiết lập Shadowsocks với Outline để tạo Proxy cho riêng bạn

23/05/2022
coupon dmca

Cách bảo vệ bản quyền Website với DMCA – Coupon nâng cấp Pro giảm 50%

23/05/2022
hosting azdigi

Đánh giá gói Turbo Business Hosting của AZDIGI

22/05/2022

Ads

Giới thiệu

AnonyViet

AnonyViet

Nơi chia sẻ những kiến thức mà bạn chưa từng được học trên ghế nhà trường!

Chúng tôi sẵn sàng đón những ý kiến đóng góp, cũng như bài viết của các bạn gửi đến AnonyViet.

Hãy cùng AnonyViet xây dựng một cộng đồng CNTT lớn mạnh nhất!

Giới thiệu

AnonyViet là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. AnonyViet cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.

Liên hệ

Email: anonyviet.com[@]gmail.com

1409 Hill Street #01-01A
Old Hill Street Police Station
Singapore 179369

 

Bản quyền: DMCA.com Protection Status

Bài viết mới

  • 5 Website giúp bạn tìm chủ tài khoản Email là ai
  • Giá bản quyền Windows 10 chỉ 5.71$, miễn phí nâng cấp lên Windows 11
  • Cách thiết lập Shadowsocks với Outline để tạo Proxy cho riêng bạn
  • Cách bảo vệ bản quyền Website với DMCA – Coupon nâng cấp Pro giảm 50%
  • Đánh giá gói Turbo Business Hosting của AZDIGI
  • 5 vụ lừa đảo nguy hiểm nhất trên không gian mạng

©2022 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ. Google iwin888 Bing tải game iwin Github tải iwin apk Github tải win456 Youtube ku fun wikipedia 88vin reddit twin 567LIVE MMLive SP666 92lottery sun86 stackoverflow

No Result
View All Result
  • Tin tức
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • Kali Linux / Parrot
    • SQL Injection
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10/11
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • Tin học văn phòng
  • Kiến thức
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC

©2022 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ. Google iwin888 Bing tải game iwin Github tải iwin apk Github tải win456 Youtube ku fun wikipedia 88vin reddit twin 567LIVE MMLive SP666 92lottery sun86 stackoverflow

wpDiscuz
pixel