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

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot

AnonyViet by AnonyViet
30/03/2020
in Code
5

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

  1. Thiết kế giao diện Menu
  2. CODE Menu Game 

Tiếp nối series lập trình game với godot trong bài này mình sẽ hướng dẫn các bạn tạo UI cho game của mình nhé. User Interface (UI) là bộ mặt của Game, khi chơi game bạn cần phải có giao diện để thấy được các nhân vật, khung cảnh của game. Hôm nay chúng ta sẽ thiết lập UI, cụ thê là Tạo MENU cho game bằng Godot Engine.

Thiết kế giao diện Menu

Các bạn tạo sence mới cho mình

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

[Godot RPG] #3: Tấn Công & Object 122

[Godot RPG] #3: Tấn Công & Object

20/08/2020
[Godot RPG] #2: Nhân vật 123

[Godot RPG] #2: Nhân vật

16/08/2020 - Updated on 20/08/2020
[Godot Engine] Export sang Windows, Linux, MacOS, Android 124

[Godot Engine] Export sang Windows, Linux, MacOS, Android

16/08/2020
sửa lỗi click menu chuột phải chậm

Cách khắc mục lỗi menu chuột phải bị chậm trên Windows

13/08/2020 - Updated on 03/09/2020

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 63

Chọn User Interface > Đổi tên thành TitleMenu hoặc gì đó mà bạn muốn

Tìm cho mình VboxContainer

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 64

Ở đây Vboxcontainer là Node mà nó sẽ chứa các node cho ui của bạn

Để ý phần Margin bên setting

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 65

Bây giờ các bạn phải setup cho nó vừa màn hình bằng các chỉnh phần margin hoặc là kéo nó ra để chỉnh cũng được :v.

Và dưới đây là khi mình setup xong

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 66

Tiếp tìm cho mình TextureRect và đổi thành Logo

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 67

Ở đây chúng ta sẽ cho logo của mình vào. Nếu bạn không có logo thì có thể vào web dưới đây để tạo

Link: http://www.webestools.com/web20-title-generator-logo-title-maker-online-web20-effect-reflect-free-photoshop.html

Và đây là khi mình đã tạo xong nha

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 68

Các bạn nhấn Download the Image để tải về

Sau đó add vào thư mục game

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 69

Rồi tiếp theo các bạn kéo logo vào texture của Node Logo

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 70

Nó khá lệnh ở phần stretch Node chọn : Keep Centered

Nó sẽ ra giữa

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 71

Và tạo cho mình thêm 1 node là HboxContainer và đổi tên là TrungTam

Xem thêm:  [Lập trình Game] Bài 5: Lập trình chuyển động nhân vật

Và cái node này sẽ chứa những button của bạn

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 72

Tìm SizeFlags và chọn  Expend  cho cả 2 cái là Hoz và Ver ở phần  settings HboxContainer

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 73

Tạo thêm 1 VboxContainer ở TrungTam và Click Expand cho cả 2 cái là Hoz và Ver

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 74

Tiếp đến là button

Tạo cho mình Node Button dưới VboxContainer

Và tạo Node Label dưới Node Button(Tro Choi Moi)

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 75

Để ý sẽ thấy phần đen đen ở dưới Logo

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 76

Ở Button(Tro Choi Moi) Click chọn Flat nó sẽ mất

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 77

Và Tiếp theo chúng ta sẽ add Custom Font cho nó

Label > Custom Fonts > Click chọn Font > Rồi Nhấn Vào Empty > chọn Dynamic Font

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 78

Sau đó nhấn vào Dynamic Font

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 79

Ở Font Data > Empty > Load > chọn font của bạn

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 80

Link Download ở dưới cuối bài

Ở phần Settings chỉnh lại size cho vừa

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 81

Tiếp đến chúng ta sẽ lưu font lại để sau này nếu cần sẽ lấy ra sài cho tiện

Click chuột phải vào dynamic font > save

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 82

Save lại dưới dạng .tres

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 83

Và tiếp theo chúng ta sẽ tạo effect nó à trước tiên hãy ghi text vào:

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 84

Phần Custom Constans > click 2 cái shadow trên và dưới

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 85

Nhấn Font Color Shadow > edit màu

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 86

Và chúng ta sẽ được như này.Các bạn cũng có thể edit màu lại

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 87

Phần layout > chọn full rect

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 88

Và bây giờ chúng ta sẽ nhân đôi button để tạo thêm cho dễ

Save as sence cho mình.Save ở đâu cũng được.Mà mình khuyên nên làm folder cho nó dễ chứ trước đây khi mới học mình làm project, làm không biết lưu folder toàn vứt 1 đống ở đó đến lúc tìm như mò kim đáy bể =))

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 89

Mở Sence vừa lưu lên

Chọn sence > new Inherited Sence

Xem thêm:  Tổng quan về giao diện và cách thức hoạt động trên Godot Engine

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 90

Rồi nhấn vào Tro Choi Moi rồi nhấn open

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 91

Nó sẽ cho bạn 1 bản sence copy

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 92

Đổi tên lại thành TiepTuc

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 93

Rồi làm thêm cái bản sao Thoát Game Nữa

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 94

Rồi lại thêm cái Cài Đặt Nữa

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 95

Instance sence mới

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 96

Add 3 cái vừa tạo

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 97

Làm xong nó như này:

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 98

À mình quên chỉnh lại cho mấy bạn :vv

Vô 4 cái sence vừa tạo tìm Rect > Min Size > đổi như ảnh và khi làm 1 cái nó sẽ áp dụng cho cả 4 cái

Nếu có cái nào mà min size không thay đổi gì thì các bạn vô đổi

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 99

Trò chơi mới đã đổi

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 100

Tiếp đến là 3 cái kia. Làm cả 3 cái > Rect > min size > nhấn cái hình tròn rs

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 101

Done

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 102

Add cho mình Center Container dưới nodeTrungtam nhé node Center này sẽ là node dùng để up ảnh bên cạnh 4 nút kìa

Và cũng expand cho nó

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 103

Rồi add texture rect vào sau đó đưa logo của bạn vào

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 104

Tạo 1 cái label  ở VBoxContainer

Label Fill và Expand ở vertical

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 105

Tạo dynamic font mới vì ở đây chúng ta sẽ tạo kích cỡ chữ khác

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 106

Tạo như vừa nãy thôi

Chỉnh size cho vừa mắt bạn

Click chọn 2 ô: use mipmaps và use filter

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 107

Tiếp đến add background vào

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 108

Và chúng ta đã được 1 Menu

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 109

Menu này gần hoàn chỉnh nhé phần Tiếp Tục – Cài đặt sẽ được hướng dẫn trong 4-8 bài nữa

Trò chơi mới + thoát game sẽ được Code ngay sau đây

CODE Menu Game 

Tạo cho mình 1 script ở tro choi moi

Rồi  code như dưới

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 110

Đoạn code trên giúp bạn có thể bỏ sence muốn trỏ đến vào button

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 111

Bạn có thể bỏ sence vào như ảnh trên

Và tiếp đến

Chúng ta sẽ connect nó

Xem thêm:  Share mã nguồn C# Tool Troll Blue Wonder

Nhấn vào Node > Pressed() > connect

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 112

Bạn connect bằng node nào thì chọn node đó

Ở đây mình connect bằng Tro choi moi nên mình sẽ connect tới tro choi moi

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 113

Cái này là truyền tín hiệu cho node

Connect pressed() nghĩa là khi nhấn vào cái nút trò chơi mới thì nó sẽ truyền tín hiệu về Node để nhận dữ liệu rồi sau đó thực hiện các hành động của bạn.

Đây là sau khi connect nó sẽ cho chúng ta 1 hàm

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 114

Code như sau:

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 115

Get_tree().change_sence() là 1 câu lệnh giúp bạn thay đổi sence

Change_sence() có 2 kiểu:

1 là kiểu ở trên ảnh khai báo biến bosencevao nghĩa là bạn có thể bỏ sence vào đó rồi sau đó get_tree().change_sence(bosencevao) là nó sẽ trỏ tới sence mà bạn bỏ vào

2 là get_tree().change_sence(“địa chỉ của sence”)

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 116

Và tiếp theo chúng ta sẽ tạo script cho 3 cái còn lại và cũng connect như trên và code như trên riêng cái thoatgame thì không cần code

Làm tương tự 3 cái Tro choi moi – tiep tuc- cai dat nhé

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 117

Còn ở thoat game thì làm như sau

Cũng connect lại

Và code như sau

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 118

Get_treE().quit() nghĩa là khi nhấn vào nó sẽ quit game luôn

Và tiếp theo bỏ sence vào là xong thôi

Note:Riêng Cài Đặt và Tiếp Tục Không Bỏ Sence Vào nhé phần đó mình sẽ hướng dẫn sau

Mình sẽ bỏ sence world vào

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 119

Tiếp theo đến phần set main sence khi F5 nó sẽ chạy cái sence mà đã set

Project > Project Settings > Run > Main Sence > Nhấn Vô Icon Thư mục

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 120

Chọn cái menu screen mà chúng ta đã làm nãy giờ

[Lập Trình Game] Bài 9: Tạo MENU cho Game khi lập trình bằng Godot 121

Và nhấn F5 nó sẽ chạy sence của bạn

Và thế là xong rồi :3. Hẹn gặp lại trong bài tiếp theo hehe

Deathgm!

Tags: GodotGODOT ENGINElập trình gamemenutạo menuthiết kế gamethiết kế menu
Previous Post

[Lập Trình Game] Hiển thị FPS cho game bằng Godot Engine

Next Post

Hướng dẫn dùng Zphisher để tạo trang Web Phishing tự động

AnonyViet

AnonyViet

Kiến thức như một ngọn lửa, càng chia sẽ nó sẽ càng bùng cháy!

Related Posts

môi trường ảo python windows
Code

Cách thiết lập môi trường ảo Python trên Windows 10

17/01/2021
Các kiểu dữ liệu cơ bản trong Python 125
Code

Các kiểu dữ liệu cơ bản trong Python

12/01/2021
Top 5 Ngôn Ngữ Lập Trình Hacker Mũ Trắng Nên Học
Code

Top 5 Ngôn Ngữ Lập Trình Hacker Mũ Trắng Nên Học

27/11/2020 - Updated on 30/11/2020
Xoá các File trùng lặp bằng Python
Code

Viết chương trình Xoá các File trùng lặp bằng Python

22/10/2020
viet ung dung chat bang python
Code

Cách viết ứng dụng chat đơn giản bằng Python

15/10/2020 - Updated on 16/10/2020
ứng dụng tra số điện thoại thuộc Quốc gia nào
Code

Viết ứng dụng tra số điện thoại thuộc Quốc gia nào bằng Python

11/10/2020 - Updated on 13/10/2020
Next Post
Zphisher để tạo trang Web Phishing

Hướng dẫn dùng Zphisher để tạo trang Web Phishing tự động

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.

5 Comments
oldest
newest most voted
Inline Feedbacks
View all comments
tom | <span class="wpdiscuz-comment-count">1 comments</span>
tom | 1 comments
8 months ago

Link Download ở đâu vậy bạn

0
Reply
AnonyViet | <span class="wpdiscuz-comment-count">1521 comments</span>
Author
AnonyViet | 1521 comments
8 months ago
Reply to  tom

bạn cần download cái gì?

0
Reply
Nguyễn Lâm Anh | <span class="wpdiscuz-comment-count">2 comments</span>
Nguyễn Lâm Anh | 2 comments
8 months ago
Reply to  AnonyViet

Anh ơi, link download font ở đâu vậy

0
Reply
rainbowLOL123 | <span class="wpdiscuz-comment-count">2 comments</span>
rainbowLOL123 | 2 comments
8 months ago
Reply to  AnonyViet

a ơi em cần link fonttttttttttttttttttttttt

0
Reply
rainbowLOL123 | <span class="wpdiscuz-comment-count">2 comments</span>
rainbowLOL123 | 2 comments
8 months ago

e ko thấy link đâu hetessttt anh ơi
nó ở đâu vựi

0
Reply

Liên hệ Quảng Cáo

Lien he AnonyViet

Đối tác

Fshare

Các bài mới

ghép ảnh áo dài tết

Cách ghép mặt vào ảnh áo dài Tết không cần Photoshop

17/01/2021
Các ứng dụng bảo vệ quyền riêng tư tốt nhất cho Android và iOS 126

Các ứng dụng bảo vệ quyền riêng tư tốt nhất cho Android và iOS

17/01/2021
môi trường ảo python windows

Cách thiết lập môi trường ảo Python trên Windows 10

17/01/2021
setup Absorber keylogger

Cách dùng Absorber Keylogger bí mật ghi lại thao tác bàn phím

15/01/2021
leaked db password MOSINT

MOSINT – Tool Truy vết địa chỉ Email để tìm thông tin cá nhân của bất kỳ ai

14/01/2021

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 kết

Game B52 |  Tải game đổi thưởng online | Chơi game bài hot 2020 | Chơi game bài đổi thưởng online | Gam Víp | 88vin link

Liên hệ đặt Ads: [email protected]

Liên hệ

Email: anonyviet.com[@]gmail.com

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

Bài viết mới

  • Cách ghép mặt vào ảnh áo dài Tết không cần Photoshop
  • Các ứng dụng bảo vệ quyền riêng tư tốt nhất cho Android và iOS
  • Cách thiết lập môi trường ảo Python trên Windows 10
  • Cách dùng Absorber Keylogger bí mật ghi lại thao tác bàn phím
  • MOSINT – Tool Truy vết địa chỉ Email để tìm thông tin cá nhân của bất kỳ ai
  • Cách kiểm tra tin nhắn Signal đã an toàn và riêng tư chưa?
  • Giới thiệu về AnonyViet
  • Liên hệ Quảng cáo
  • Privacy & Policy
  • Contact

© 2019 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ.

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

© 2019 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ.

wpDiscuz