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é.
![[Tạo 2D Platformer Game với Godot] Phần 20: Thêm Background cho Menu](https://anonyviet.com/wp-content/uploads/2021/11/21-11-2021-11-32-55.png "[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 14")
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
![[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 10](https://anonyviet.com/wp-content/uploads/2021/11/21-11-2021-11-38-01.png "[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 15")
Bạn tìm cho mình node Texture Rect.![[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 11](https://anonyviet.com/wp-content/uploads/2021/11/21-11-2021-11-38-27.png "[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 16")
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.
![[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 12](https://anonyviet.com/wp-content/uploads/2021/11/21-11-2021-11-39-53.png "[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 17")
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.
![[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 13](https://anonyviet.com/wp-content/uploads/2021/11/21-11-2021-11-41-55.png "[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 18")
Sau đó, mình rename nó lại là background.
![[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 14](https://anonyviet.com/wp-content/uploads/2021/11/21-11-2021-11-42-52.png "[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 19")
Bạn sẽ thấy ảnh nó quá to so với kích thước của màn hình.
![[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 15](https://anonyviet.com/wp-content/uploads/2021/11/21-11-2021-11-43-32.png "[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 20")
Để chỉnh cho vừa thì bạn nhấn vào background
![[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 16](https://anonyviet.com/wp-content/uploads/2021/11/21-11-2021-11-43-43.png "[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 21")
Layout chọn full rect.
![[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 17](https://anonyviet.com/wp-content/uploads/2021/11/21-11-2021-11-44-21.png "[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 22")
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.
![[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 18](https://anonyviet.com/wp-content/uploads/2021/11/21-11-2021-11-46-34-min.png "[Tạo 2D Platformer Game với Godot] Phần 21: Thêm Background cho Menu 23")
Đâ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.
