[Lập trình Game] Bài 3: Tilemap và Tileset để tạo Map Game

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ì?

• 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é.

Link Download

(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).