Bản top-down của Nhân vật nhảy được trong 50 dòng : một nhân vật nhìn từ trên xuống, đi 8 hướng, lướt, va vào tường đá, với dưới 50 dòng code (46 dòng, không tính dòng trống và dòng chú thích). Nó dùng njin::tilemap làm bản đồ, njin::topdown_body làm nhân vật, và njin::topdown_input_map nối phím vào nhân vật.

#include <njin.h>
 
namespace {
using namespace njin;
 
void startup(context &ctx) {
  // 1. Phím: hai axis (ngang, dọc) và một action lướt.
  const axis_handle move_x = axis_define(ctx, "move_x", {{key_left, key_right}, {key_a, key_d}}, {pad_axis_left_x});
  const axis_handle move_y = axis_define(ctx, "move_y", {{key_up, key_down}, {key_w, key_s}}, {pad_axis_left_y});
  const action_handle dash = action_define(ctx, "dash", {key_space, pad_face_down});
 
  entt::registry &reg = world(ctx);
 
  // 2. Bản đồ 20 x 12 ô: sàn cỏ, tường đá bao quanh và một đoạn tường ở giữa.
  tilemap map;
  map.tileset = texture_load(ctx, "assets/tiles.png");
  texture_set_filter(ctx, map.tileset, filter_nearest); // pixel art: không làm mờ
  for (i32 y = 0; y < 12; y++)
    for (i32 x = 0; x < 20; x++)
      tilemap_set(map, x, y, (x == 0 || y == 0 || x == 19 || y == 11) ? 7 : 0);
  for (i32 x = 6; x < 10; x++)
    tilemap_set(map, x, 5, 7);
  tilemap_set_shape(map, 0, tile_none); // cỏ chỉ để nhìn, đi qua được
 
  const entt::entity level = reg.create();
  reg.emplace<transform>(level);
  reg.emplace<tilemap>(level, std::move(map));
  reg.emplace<collider>(level, collider{.shape = collider_tiles}); // đá thành vật cản
 
  // 3. Nhân vật: transform + collider + topdown_body. pos là chân.
  const entt::entity player = reg.create();
  reg.emplace<transform>(player, transform{.pos = {48.0f, 48.0f}});
  reg.emplace<collider>(player, collider{.size = {10.0f, 8.0f}, .offset = {0.0f, -4.0f}});
  reg.emplace<topdown_body>(player, topdown_body{.dash_speed = 230.0f}); // 0 là tắt lướt
  reg.emplace<topdown_input_map>(player, topdown_input_map{move_x, move_y, dash});
 
  // 4. Camera bám nhân vật và không bao giờ lộ ra ngoài bản đồ (320 x 192 pixel).
  const rect bounds{{0.0f, 0.0f}, {320.0f, 192.0f}};
  reg.emplace<camera_follow>(camera_spawn(ctx, 3.0f), camera_follow{.target = player, .bounds = bounds});
}
 
// Chưa có sprite: vẽ nhân vật bằng một hình chữ nhật.
void draw_player(context &ctx) {
  world(ctx).view<transform, collider, topdown_body>().each(
      [&](const transform &tr, const collider &col, const topdown_body &) {
        draw_rect(ctx, rect_from_center(tr.pos + col.offset, col.size), colors::yellow);
      });
}
 
void setup(context &ctx) {
  ecs_register(ctx, phase_startup, startup);
  ecs_register(ctx, phase_render, draw_player);
}
} // namespace
 
int main() {
  context *ctx = create({.title = "Đi bộ", .width = 960, .height = 540, .target_fps = 60});
  mod_register(*ctx, {.name = "game", .setup = setup});
  run(*ctx);
  destroy(ctx);
}

Bấm mũi tên hoặc WASD để đi, Space để lướt. Nhân vật trượt dọc tường đá thay vì dính vào, và camera không bao giờ lộ ra ngoài bản đồ.

Đi chéo, lướt (giữ Space khi đang đi), rồi đi xuống. Hình chữ nhật vàng là nhân vật, camera bám theo

Chuẩn bị

Cần một ảnh tileset gồm các ô 16 x 16 tại assets/tiles.png. Dùng luôn ảnh của game mẫu: src/games/topdown/assets/tiles.png (ô 0 là cỏ, ô 7 là tường đá). Thư mục assets phải nằm cạnh file exe: gọi njin_add_assets(my_game assets) trong CMake (xem Bắt đầu).

Từng bước

1. Phím: hai axis và một action

const njin::axis_handle move_x = njin::axis_define(ctx, "move_x", {{njin::key_left, njin::key_right}, {njin::key_a, njin::key_d}});
const njin::axis_handle move_y = njin::axis_define(ctx, "move_y", {{njin::key_up, njin::key_down}, {njin::key_w, njin::key_s}});
const njin::action_handle dash = njin::action_define(ctx, "dash", {njin::key_space, njin::pad_face_down});

Top-down cần hai axis, ngang và dọc, vì engine không có axis hai chiều. Mỗi axis nhận nhiều cặp phím (mũi tên và WASD cùng chạy) và một trục tay cầm. Xem Nhập liệu.

2. Bản đồ: cỏ để đi, đá để chặn

Vòng for lồng nhau đặt cả bản đồ 20 x 12 ô là cỏ (ô 0), trừ đường viền là đá (ô 7). Ba việc để đá chặn đường còn cỏ thì không:

Gắn njin::collider với shape = collider_tiles lên entity của bản đồ: mọi ô không trống thành vật cản.
njin::tilemap_set_shape() cho ô số 0 hình tile_none: cỏ chỉ để nhìn, đi xuyên qua được.
Ô đá giữ hình mặc định (tile_solid), nên chặn mọi phía.

Cùng một bản đồ phục vụ cả hai việc (vẽ và va chạm) nên không cần một layer riêng cho tường. Đọc thêm ở Tilemap.

3. Nhân vật: njin::topdown_body

Component	Vai trò
njin::transform	Vị trí. pos là chân vì offset của collider là {0, -4}
njin::collider	Hộp va chạm 10 x 8, nhỏ và thấp để nhân vật đi sát tường mà không kẹt
njin::topdown_body	Đi, tăng tốc, giảm tốc, lướt

Engine di chuyển nó trong phase_fixed_update bằng njin::collision_move(). Hai điều đáng biết:

Đi chéo không nhanh hơn: độ dài của hướng đi lớn hơn 1 được đưa về 1, kể cả khi bạn cộng hai axis.
Lướt mặc định tắt. dash_speed = 230.0f bật nó; dash_time và dash_cooldown chỉnh độ dài và thời gian hồi.

njin::topdown_input_map đọc hai axis và action giúp bạn: không cần system nào để xử lý phím.

4. Camera: giới hạn trong bản đồ

njin::camera_follow bám theo target. bounds là vùng thế giới mà khung nhìn không được vượt ra ngoài; ở đây là cả bản đồ, 320 x 192 pixel. Khi nạp bản đồ từ Tiled hoặc LDtk thì lấy thẳng từ njin::level_bounds() (xem Level từ Tiled và LDtk) thay vì tự tính.

Chỉnh cảm giác

njin::topdown_body body{};
body.speed = 78.0f;        // đi chậm hơn
body.accel = 600.0f;       // trượt lâu hơn khi bắt đầu đi
body.decel = 600.0f;       // trượt lâu hơn khi thả phím
body.dash_speed = 230.0f;
body.dash_time = 0.2f;     // lướt dài hơn

accel và decel lớn (mặc định 900 và 1300) là nhân vật dừng và chạy tức thì; nhỏ là cảm giác trơn như đi trên băng.

Bước tiếp theo

Làm game top-down : sắp xếp theo Y (cây che nhân vật), quái đuổi theo bằng A*, kiếm
Tilemap : viết bản đồ bằng chữ thay cho vòng for (njin::tilemap_from_text()), không cần editor
Level từ Tiled và LDtk : hoặc thay đoạn đặt ô bằng một màn vẽ trong Tiled hoặc LDtk
Sprite và animation và Animation và máy trạng thái : thay hình chữ nhật bằng nhân vật có animation
Muốn làm X thì dùng gì : "muốn làm X thì dùng hàm nào"