Ở trong phần này thì là phần rẽ nhánh tức là nó sẽ không liên quan lắm tới phần làm game chính nhưng mình nghĩ sẽ vẫn có những bạn cần tới nó.
| Tham gia kênh Telegram của AnonyViet 👉 Link 👈 |
Thì trong phần này mình sẽ chỉ bạn thêm các nút di chuyển vào cho bạn nào định xuất game ra mobile.
Art
Đâu tiên sẽ là phần art, bạn tải về cho mình ở link sau nha: Onscreen controls (8 styles)
![[Tạo 2D Platformer Game với Godot] Phần rẽ nhánh 1: Thêm nút di chuyển](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-19-56.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 23")
Bạn tạo thêm cho mình 1 folder mới tên GUI trong thư mục Assets.
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 20](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-24-06.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 24"){kind=small}
Trong thư mục GUI tạo thêm 1 thư mục Buttons ( đây là nơi chứa các nút ).
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 21](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-24-24.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 25")
Sau đó mở file zip vừa tải vô Sprites.
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 22](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-24-35.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 26")
Vô ShadedDark.
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 23](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-25-22.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 27")
Copy cho mình ảnh 24,25,26 và cho và cho vào thư mục Buttons.
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 24](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-25-44.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 28")
Như trên là được nha.
Nút
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 25](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-29-09.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 29")
Tiếp theo đó, bạn qua scene của Player và thêm cho mình 1 node mới đó là TouchScreenButton ( đây là nút chạm màn hình chuyên dùng cho các game mobile).
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 26](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-30-31.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 30")
Sau đó mình tạo thêm 3 node TouchScreenButton và rename nó lần lượt là Quatrai, Quaphai và Nhay. Mỗi cái tên đều mang nghĩa của nó.
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 27](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-33-01.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 31")
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 28](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-33-45.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 32")
Ở đây mình chọn nút qua trái sau đó mình kéo hình ảnh vào Normal để nó hiện ra nút. Ở cái Normal là hình ảnh khi đang bình thường, còn cái Pressed là hình ảnh khi bạn nhấn vào.
Bạn có thể làm cho nó chi tiết hơn bằng cách khi nhấn vào nút thì cái ảnh sẽ tối hoặc sáng hơn để cho người dùng biết họ đã nhấn vào.
Còn Action chính là hành động giống như trên code là Input.is_action_pressed(“ui_left”) hay gì đó vậy nhưng ở đây bạn chỉ cần điền vào rồi bấm là nó tự động. Và nếu như trên code bạn có sử dụng những action trên thì khi nhấn vào nó sẽ chạy action đó trên code.
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 29](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-37-55.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 33")
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 30](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-37-02.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 34")
Mình chỉnh cho 2 cái còn lại.
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 31](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-39-11.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 35")
À các bạn thêm cho mình 1 node mới là CanvasLayer
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 32](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-39-45.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 36")
Sau đó mình sẽ rename là GUI và bỏ 3 node kia ở trong.
Lý do mình làm vậy là vì khi bạn bỏ 3 node kia ở ngoài thì nó giống như các node khác sẽ di chuyển như bình thường còn nếu bở trong CanvasLayer thì nó sẽ chỉ hiện thị trong phần giao diện người dùng.
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 33](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-41-17.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 37")
Của mình nó đã hiện, nhưng bạn chắc chắn khi bấm vào nó sẽ không hoạt động trừ khi chạy test game trên mobile
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 34](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-42-08.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 38")
Do đó, bạn vào Project -> Project Settings -> Tìm Pointing.
![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 35](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-42-17.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 39")
Rồi tick vào cái trên ảnh để có thể nhấn được.![[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 36](https://anonyviet.com/wp-content/uploads/2021/11/12-11-2021-10-43-51.png "[Tạo 2D Platformer Game với Godot] Phần 8.1: Thêm nút di chuyển 40")
Sau đó chạy game và tận hưởng.
Bạn cũng nên chỉnh lại nút di chuyển sao cho nó vừa mắt nhé.
Tổng Kết
Vậy trong phần này mình đã chỉ bạn cách thêm nút di chuyển vào trong Game.
Câu hỏi thường gặp
Tôi cần tải xuống những gì để thêm nút di chuyển?
Bạn cần tải xuống bộ ảnh nút điều khiển từ liên kết được cung cấp trong bài viết: Onscreen controls (8 styles). Sau đó, bạn chỉ cần sử dụng các ảnh 24, 25, và 26.
Làm thế nào để nút di chuyển hoạt động trên thiết bị di động?
Sau khi thêm nút TouchScreenButton vào scene và gán ảnh, bạn cần vào Project -> Project Settings -> Input -> Pointing và tích chọn “Emulate Touchscreen”. Điều này sẽ cho phép các nút hoạt động chính xác trên màn hình cảm ứng.
Tôi cần đặt các nút TouchScreenButton ở đâu trong cây thư mục Godot?
Đặt các nút TouchScreenButton bên trong một node CanvasLayer. Điều này đảm bảo các nút sẽ luôn hiển thị trên giao diện người dùng và không bị ảnh hưởng bởi chuyển động của các đối tượng khác trong game.
![[Tạo 2D Platformer Game với Godot] Phần 29: Lưu và load dữ liệu game 39](https://anonyviet.com/wp-content/uploads/2021/11/25-11-2021-04-43-13.png "[Tạo 2D Platformer Game với Godot] Phần 29: Lưu và load dữ liệu game 46")
![[Tạo 2D Platformer Game với Godot] Phần 28: Thêm âm thanh giao diện 40](https://anonyviet.com/wp-content/uploads/2021/11/25-11-2021-01-02-39-350x245.png "[Tạo 2D Platformer Game với Godot] Phần 28: Thêm âm thanh giao diện 47")
![[Tạo 2D Platformer Game với Godot] Phần 27: Mở khoá level 41](https://anonyviet.com/wp-content/uploads/2021/11/24-11-2021-12-17-23.png "[Tạo 2D Platformer Game với Godot] Phần 27: Mở khoá level 48")
![[Tạo 2D Platformer Game với Godot] Phần 25: Tạo Menu khi hết Level 43](https://anonyviet.com/wp-content/uploads/2021/11/23-11-2021-11-13-02.png "[Tạo 2D Platformer Game với Godot] Phần 25: Tạo Menu khi hết Level 50")
