Có hai cách thiết kế phần mềm. Cách thứ nhất là làm cho nó thật đơn giản để rõ ràng, không có chỗ nào thiếu sót. Cách thứ hai là làm cho nó thật phức tạp để không có chỗ thiếu sót nào rõ ràng. C.A.R. Hoare
STDIO Bài viết nằm trong loạt bài viết chương trình Tự Học Cocos2d-x 3.x của Stdio.vn. Trong bài viết này sẽ giới thiệu khái niệm, các thành phần, cách tạo một bản đồ với phần mềm Titled và sử dụng bản đồ vào project trò chơi.
Nội dung bài viết

Giới thiệu

Nếu bạn đã chơi nhiều thể loại game như nhập vai, phiêu lưu,...Bạn chắc hẳn sẽ thấy nhiều Maps trong game. Maps trong hầu hết các game 2D hiện nay là loại Tile Map, nó cực kì hiệu quả và dễ dàng trong việc thiết kế và phức tạp những cảnh trong game. Trong bài hôm nay tôi cùng các bạn sẽ tìm hiểu Tile Map là gì và làm thế nào để sử dụng nó trong Cocos2d-x.

Tiền đề bài viết

Bài viết nằm trong những loạt bài viết của chương trình Tự Học Cocos2d-x 3.x.x được tài trợ bởi STDIO.

Đối tượng hướng đến

Bài viết này tôi hướng đến những lập trình viên mới bắt đầu tìm hiểu và học tập làm game 2D bằng Cocos2d-x.

Tile map là gì?

Đây là một Tile Map 20x15.

ss_1

Tile Map được tạo từ nhiều Tile. Tile là những nơi chứa những hình ảnh dùng để tạo nên Tile Map được gọi là Tileset. Cũng có thể hiểu Tileset là một Sprite trong một Sprite Sheet.

ss_2

Ưu điểm

Việc sử dụng Tileset để vẽ một Map làm cho kích thước của tập tin giảm, dễ nâng cấp và sửa chữa. Công việc thiết kế map là một công việc tốn thời gian nhưng nhờ nó có thể tiết kiệm và dễ dàng trong việc thiết kế.

Các thành phần trong một tile map

  • Orientation: Có hai loại Tile Map là isometric orthogonal.
  • Map Zise: Số lượng Tile trong Map.
  • Tile zise: Kích thước của một Tileset.
  • ID tilset/ GID: Đây là vị trí của của Tileset trong Sprite Sheet duy nhất. Được tính từ trái qua phải là từ trên xuống dưới. Đối với mỗi Tile, bạn cần phải có cách nào đó để liên kết nó với một Tileset và một địa điểm cụ thể về Tileset đó.
  • Tọa độ Map. 

 ss_9

Thiết kế và sử dụng

Quá trình thiết kế và sử dụng Tile để tạo Maps được hoạt động theo các bước sau.

  1. Chọn kích thước Maps và kích thước của Tile.
  2. Thêm Tilesets từ Tprite Sheet.
  3. Đặt Tilesets lên Map.
  4. Thêm một số đối tượng bổ sung cho một cái gì đó khác.
  5. Lưu Map thành một file format TMX.
  6. Dùng các file format TMX này trong trò chơi của bạn.

Tạo một bản đồ với ứng dụng Tiled

Làm sao để bạn có thể tạo ra môt Tile Map? Hiện nay có nhiều công cụ có thể làm được điều này. Tiled là một công cụ phổ biến, có được tích cự phát triển và có một cộng đồng người dùng lớn. Cocos2d-x hỗ trợ map được tạo từ Tiled Map Editor và lưu ở định dạng TMX

Bạn có thể download tại http://www.mapeditor.org . Cài đặt nó như các phần mềm thông thường khác.

Sau khi chạy chạy Tiled, bạn hãy chọn File/New và thiết lập các giá trị của Map.

ss_3

Tiếp đến bạn cần thêm Titlset để vẽ map của bạn. Chọn trên Map ở thanh Menu, sau đó chọn New Tileset.

ss_4

Sau khi thiết lập xong cho Titleset bạn chọn OK bạn sẽ được màn hình như ở dưới.

ss_5Dưới đây là sản phẩm của tôi sau khi thiết kế.

ss_6Sau khi bạn thiết kế xong Map của bạn. Bạn chọn save ss_7.Ở đây bạn sẽ được một file format .tmx.

Chú ý:

  • Trong Resources trong dự án của bạn. Bạn lưu cả file format và file sprite sheet chứa các titelset để có thể sử dụng trong Cocos2d-x.
  • Map được tạo bởi nhiều Tile Layer, tùy vào logic game của bạn mà sử dụng những Tile Layer sao cho hợp lý. Ví dụ trên đây tôi chỉ dùng 1 Tile Layer. Bạn cũng có thể dùng nhiều Tile Layer để tạo một Map nhìn tương đương.

Khởi tạo một TMX Map

// reading in a tiled map.
 auto map = TMXTiledMap::create("TileMap.tmx"); 
​addChild(map, 0, 99); // with a tag of '99'

Get-Add-Delete-Modify một Title

Để lấy được một Tile(Sprite) trong Map.

// www.stdio.vn
// Get title.
auto layer = map->layerNamed("Tile Layer 1");
auto tile = layer->tileAt(Vec2(1.0f, 1.0f));

Lấy một GID trong Map tại tọa độ (1,1).

// Get GID.
unsigned int gid = layer->tileGIDAt(Vec2(1.0f, 1.0f));

Xóa một tile trong Map tại tọa độ (5,5).

// Xóa một tile
layer->removeTileAt(Vec2(5.0f, 5.0f));

Thay một tile trong Map bằng một GID mới bằng 1 tại tọa độ (1,1).

layer->setTileGID(1, Vec2(1.0f, 1.0f));

Vòng lặp của một layer.

// www.stdio.vn
Size s = layer->getLayerSize();
for (int x = 0; x < s.width; ++x)
{
    // logic game
    for (int y = 0; y < s.height; ++y)
    {
        // logic game
    }
}

Tổng kết

Trong bài viết này, tôi đã giới thiệu về Tilemap trong Cocos2d-x 3.x.x.

Mọi thắc mắc bạn có thể bình luận tại bài viết hoặc liên hệ với Trương Đạt.

Tham khảo

http://www.cocos2d-x.org

Bạn cần hỗ trợ các dự án kết nối không dây?

Quí doanh nghiệp, cá nhân cần hỗ trợ, hợp tác các dự án IoT, kết nối không dây. Vui lòng liên hệ, hoặc gọi trực tiếp 0942.111912.

  • TỪ KHÓA
  • Arduino
  • ESP32
  • ESP8266
  • Wifi
  • Bluetooth
  • Zigbee
  • Raspberry Pi
THẢO LUẬN
ĐÓNG