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

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

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

Tìm cho mình VboxContainer

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

Để ý phần Margin bên setting

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

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

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

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

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

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

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

Nó sẽ ra giữa

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

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

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

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)

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

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

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

Sau đó nhấn vào Dynamic Font

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

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

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

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

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

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

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

Nhấn Font Color Shadow > edit màu

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

Phần layout > chọn full rect

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ể =))

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

Chọn sence > new Inherited Sence

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

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

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

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

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

Instance sence mới

Add 3 cái vừa tạo

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

À 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

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

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

Done

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ó

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

Tạo 1 cái label  ở VBoxContainer

Label Fill và Expand ở vertical

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

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

Tiếp đến add background vào

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

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

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

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

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

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

Code như sau:

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”)

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é

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

Cũng connect lại

Và code như sau

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

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

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

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

Câu hỏi thường gặp

Tôi có cần cài đặt phần mềm bổ sung nào để tạo menu game với Godot không?

Không, bài hướng dẫn này chỉ sử dụng các công cụ có sẵn trong Godot Engine.

Làm thế nào để điều chỉnh kích thước menu cho phù hợp với màn hình?

Bạn có thể sử dụng thuộc tính Margin của VboxContainer hoặc kéo thả các node để điều chỉnh kích thước menu cho phù hợp.

Tôi có thể sử dụng font chữ khác ngoài font mặc định của Godot không?

Có, bạn có thể tải font chữ riêng và thêm vào trong phần Custom Fonts của Label. Lưu font dưới dạng .tres để sử dụng lại sau này.