• 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

[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
Reading Time: 11 mins read
A A
6

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

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

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? 122

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

03/03/2022

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

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 63

Ở đâ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 64

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 65

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 66

Ở đâ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 67

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 68

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 69

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 70

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

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 71

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 72

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 73

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 74

Để ý 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 75

Ở 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 76

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 77

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 78

Ở 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 79

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 80

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 81

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 82

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 83

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 84

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 85

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 86

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 87

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 88

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

Chọn sence > new Inherited Sence

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

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 90

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 91

Đổ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 92

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 93

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 94

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 95

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 96

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 97

À 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 98

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 99

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 100

Done

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

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 102

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 103

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 104

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 105

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 106

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 107

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 108

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 109

Đ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 110

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

Và tiếp đến

Chúng ta sẽ connect nó

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 111

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 112

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 113

Code như sau:

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

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 115

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 116

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 117

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 118

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 119

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 120

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

Top ngôn ngữ lập trình Backend được dùng nhiều nhất 123
Code

Top ngôn ngữ lập trình Backend được dùng nhiều nhất

05/07/2022
Tìm hiểu Kiến trúc ứng dụng web - Web App Architecture 124
Code

Tìm hiểu Kiến trúc ứng dụng web – Web App Architecture

03/07/2022 - Updated on 04/07/2022
Cách ẩn Code HTML không cho người khác View Source 125
Code

Cách ẩn Code HTML không cho người khác View Source

29/06/2022
Cùng tìm hiểu API, REST API và RESTful API là gì? 126
Code

Cùng tìm hiểu API, REST API và RESTful API là gì?

24/06/2022
Windows PowerShell cho nguoi moi
Code

Cách tạo và chạy File PowerShell trên Windows 10 cho người mới bắt đầu

12/06/2022
Cách đóng gói code Python 127
Code

Cách đóng gói code Python

25/04/2022
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.

6 Comments
oldest
newest
Inline Feedbacks
View all comments
tom
tom
2 years ago

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

Reply
AnonyViet
Author
AnonyViet
2 years ago
Reply to  tom

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

Reply
Nguyễn Lâm Anh
Nguyễn Lâm Anh
2 years ago
Reply to  AnonyViet

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

Reply
rainbowLOL123
rainbowLOL123
2 years ago
Reply to  AnonyViet

a ơi em cần link fonttttttttttttttttttttttt

Reply
rainbowLOL123
rainbowLOL123
2 years ago

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

Reply
Nammistic
Nammistic
1 year ago

Anh ơi em muốn đổi vị trí cái button thì làm như nào hả anh?

Reply
wpdiscuz   wpDiscuz

Liên hệ Quảng Cáo

Lien he AnonyViet

Đối tác —

Fshare

Các bài mới

Các công cụ Pháp y số - Forensics dành cho An ninh mạng 128

Các công cụ Pháp y số – Forensics dành cho An ninh mạng

07/07/2022
13 trang web giúp tìm thông tin người khác trên Internet 129

13 trang web giúp tìm thông tin người khác trên Internet

06/07/2022
Top ngôn ngữ lập trình Backend được dùng nhiều nhất 130

Top ngôn ngữ lập trình Backend được dùng nhiều nhất

05/07/2022
nhan 200k kbank vietnam

Cách nhận ngay 200.000đ của KBank – Ngân hàng KASIKORNBANK

04/07/2022
anonymous tan cong nga

Anonymous lại tiếp tục tấn công Nga sau khi Killnet tấn công NATO

04/07/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

  • Các công cụ Pháp y số – Forensics dành cho An ninh mạng
  • 13 trang web giúp tìm thông tin người khác trên Internet
  • Top ngôn ngữ lập trình Backend được dùng nhiều nhất
  • Lô Xiên là gì? Hướng dẫn chi tiết cách tính tiền lô xiên 2, 3, 4 và xiên quay tại nhà cái AE888 ?
  • Cách nhận ngay 200.000đ của KBank – Ngân hàng KASIKORNBANK
  • Anonymous lại tiếp tục tấn công Nga sau khi Killnet tấn công NATO

©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 92lottery sun86 stackoverflow tool tài xỉu 68 club 68 game bài iwinclub.link 68 game bài

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 92lottery sun86 stackoverflow tool tài xỉu 68 club 68 game bài iwinclub.link 68 game bài

wpDiscuz
pixel