Tiếp theo trong series lập trình game bằng Godot mình sẽ hướng dẫn các bạn về tilemap và tileset và sử dụng nó thay cho bề mặt di chuyển. Vậy Tilemap và Tileset là gì?
| Tham gia kênh Telegram của AnonyViet 👉 Link 👈 |
- Tilemap: tilemap là một mạng lưới các gạch được sử dụng để tạo ra map (bản đồ) cho game. Hoặc nói chung là Tilemap dùng để thiết kế level của bạn hoặc có thể hiểu là thiết kế sence của bạn như ngôi nhà, bẫy, mây…
- Tilesets: là thư viện của tilemap. Nếu bạn không hiểu thì có thể hiểu như sau. Tileset là nguồn cung cấp gạch cho tilemap của bạn.
Dưới đây là hình ảnh về tilemap & tileset:
Bạn có thể tải asset mà Anonyviet đã cung cấp ở đây hoặc là xài bản tự tạo hoặc tải trên mạng về đều được nhé.
(Backup)
Cách tạo Tilemap và Tilesets
Đầu tiên các bạn tải asset về và đưa nó vào thư mục lưu project:
Sau đó các bạn tạo cho mình 1 sence mới bằng cách nhấn vào dấu cộng bên cạnh tab World
Và tạo cho mình một node, 2D hoặc Node đen đều được, không được sài User hay 3D. À và đừng có lưu lại nhé
Mở phần tileset ra và quăng nó vô sence.
Zoom lên nếu các bạn thấy ảnh mờ thì làm như sau:
Nhấn vô tab import bên cạnh sence
Chọn 2D pixel rồi nhấn Reimport là xong
Tiếp theo nhán vô sence góc trái màn hình, xuống phần Convert to và chọn tileset:
Các bạn lưu cho mình ở đâu cũng được nhưng nhớ đặt tên thì phải có .tres đằng sau nhé
Đóng sence vừa làm xong đi.
Ở World tạo Node mới tên là Tilemap
Sau đó kéo phần Tile set vừa mới làm xong vào Chỗ bên phải của Tilemap (như hình bên dưới)
Và được
Tiếp đến các bạn nhấn vào Tile set 
nhấn vào cái khoanh đỏ ý nhé, cái chỗ mới kéo tileset vô đó.
Rồi chọn cái có hình bằng cách nhấn vào nó
Và các bạn sẽ thấy 1 tileset ngay trước mắt
Và cái pixel nó đang là 32 nên hơi to giờ mình sẽ chỉnh xuống 16×16 bằng cách sau:
Nhấn vô cái ô màu vàng nói chung là bên trong cái ô màu vàng bấm khi nào hiện ra tab tileseteditor là được.
Nhìn vào bên phải, Chỉnh Step x 32, y 32 > x 16, y 16
Và bạn có thể thấy tileset nó rất vừa với ô
Các bạn nhấn vô New Atlas và khoanh vùng như ảnh
Cái đó dùng để tạo 1 nhóm tileset
Và chúng ta tiếp tục tạo đến khi hết nhé, khoanh vùng xong thì nhấn New Altas để làm cái mới.
Và mình đã xong rồi nhé:
Nhấn vào Tilemap
Để ý nó hiện ra tile set mà chúng ta vừa khoanh
Nhưng bạn có thể thấy 1 vài cái không có ảnh.
Thiết kế Tilemap hoàn chỉnh
Để đổi ảnh các bạn làm như sau:
Vô lại phần cũ chọn 1 Atlas
Chọn mục Icon
Và nhấn bất kì vô trong khung đó, nó có thẻ được dùng để phân loại tileset
Tuy nhiên khi làm xong nhưng mà tileset của bạn vẫn chưa có Collsion nên bây giờ phải tạo nhé.
Chọn Collsion
Chọn 1 ô rồi nhấn cái hình vuông màu xanh ở trên, gần cái thùng rác và bên cạnh cái mũi tên
Được như này
Rồi sau đó nhấn sang ô khác
Và tiếp tục làm cho đến khi xong nhé
Đối với mấy ô có hình chéo ngang ô vuông thì làm như sau
Chọn cái bên cạnh ô vuông
Nhấp chuột chọn 2 góc như hình, nếu bạn cố bấm hướng khác để tròn như ảnh sẽ không được
Để làm tròn thì làm như sau:
Tắt cái như ảnh
Và làm
Các bạn nhấp chuột kết nối các điểm lại là được nhé
Giờ thì hoàn thành nó nhé
Mình đã xong rồi nhé:
Giờ thì việc tiếp theo là thiết kế level
Nhấn tile map để về
Xóa Node wall đi
Chỉnh pixel lại thành 16
Khi các bạn thử đặt tilesets xuống sẽ thấy nó tỉ lệ nghịch với sence đúng không nào
Vậy làm sao để sửa đơn giải chỉ là chỉnh lại kích cỡ của tileset bằng cách nhấn vô Ô Cell ở tab bên phải
Đổi 64×64 thành 16×16 = với kích cỡ chúng ta đã tạo.
Nhiệm vụ tiếp theo của bạn là thiết kế nó:
Nhìn khá được không tệ lắm
Vậy là xong phần tạo bản đồ trong game bằng tilemap và tileset. Trong tập tiếp theo mình sẽ hướng dẫn các bạn tạo nhân vật nhé ^^. Bye
DeathGM!
Câu hỏi thường gặp
Tilemap và Tileset khác nhau như thế nào?
Tilemap là mạng lưới các gạch dùng để tạo bản đồ game. Tileset là thư viện chứa các “gạch” cung cấp cho Tilemap.
Tôi cần làm gì nếu ảnh Tileset hiển thị mờ?
Trong tab Import, chọn “2D pixel” và nhấn “Reimport” để cập nhật chất lượng hình ảnh.
Làm thế nào để thay đổi kích thước Tile trong Tileset?
Nhấn vào ô màu vàng trong TileSet Editor để mở cửa sổ chỉnh sửa, sau đó thay đổi kích thước Tile (ví dụ: 16×16).
Ra phần 4 sớm nha a
em làm nhưng không có wall thì nó đứng kiểu gì thế anh
nó đứng nhờ conllsion của tileset