[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu

Trong phần này, mình sẽ hướng dẫn bạn cách để thêm background vào cho menu. Và trong phần tiếp mình sẽ hướng dẫn bạn tạo Level Map hay hiểu nôm na là cái map mà bạn có thể chọn level để chơi và sau đó sẽ là tạo pause menu.

Art

Bạn có thể tải xuống theo link này: Cartoon Forest 2D Backgrounds | OpenGameArt.org

Hoặc: Winter Holiday 2D Backgrounds | OpenGameArt.org

Nếu không thì bạn có thể sử dụng Background khác nếu thấy không hơp với cái menu của bạn nhé.

Sau khi tải xong mình bỏ vào 1 thư mục mới tên là Background ở trong Assets -> GUI.

Thêm Background

Bạn tìm cho mình node Texture Rect.

Sau đó add nó vào Menu.

Và khi bạn thêm và như hình là nó sẽ sai bởi vì nếu bạn để Texture Rect xuống bên dưới thì nó sẽ hiển thị lên đầu và che đi phần Khung.

Do đó, bạn sẽ cần phải để nó lên trên đầu.

Nếu bạn chưa hiểu thì nó là như sau: Node nào xếp trên cùng trong 1 Tree thì sẽ bị hiển thị đè bởi các node bên dưới nói cho dễ hiểu là bạn tưởng tượng có 3 lớp trên cùng – giữa – dưới, node Texture Rect ở trên cùng trong node tree bằng với lớp cuối cùng và Khung là lớp giữa.

Sau đó, mình rename nó lại là background.

Bạn sẽ thấy ảnh nó quá to so với kích thước của màn hình.

Để chỉnh cho vừa thì bạn nhấn vào background

Layout chọn full rect.

Xong sau đó nhấn vào Expand ở bên dưới Texture của node Background.

Expand là 1 tính năng của Control Node nó sẽ tự động làm vừa hình ảnh so với size ở trong Rect -> Min size.

Đây là kết quả mình có sau khi chạy game.

Mình không giỏi thiết kế lắm cho nên nhiều cái nhìn nó sẽ không hợp màu nên bạn thông cảm cho mình.

Tổng Kết

Vậy trong phần này mình đã chỉ bạn cách để có thể add backgroun vô cho menu. Mà thực ra viêc này cũng rất dễ dễ chứ không khá dễ hay khó gì cả.

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

Tôi có thể sử dụng hình ảnh background nào cho menu?

Bạn có thể sử dụng các hình ảnh background được cung cấp trong bài viết từ OpenGameArt.org hoặc bất kỳ hình ảnh nào khác phù hợp với thiết kế menu của bạn.

Làm thế nào để đặt hình ảnh background lên trên các phần tử khác trong menu?

Đảm bảo node TextureRect chứa hình ảnh background được đặt ở vị trí cao hơn (trên) các node khác trong cây Node của Godot. Điều này sẽ khiến nó hiển thị ở trên cùng.

Nếu hình ảnh background quá lớn hoặc quá nhỏ, tôi nên làm gì?

Chọn thuộc tính “Layout” thành “Full Rect” cho node TextureRect và kích hoạt tùy chọn “Expand” trong phần Texture. Điều này sẽ tự động điều chỉnh kích thước hình ảnh cho phù hợp với kích thước của menu.