Sinh bản đồ tự động

Thay vì vẽ từng ô, bạn mô tả cách bản đồ được tạo ra: nhiễu cho hình dáng, vài luật cho vẻ tự nhiên, hoặc Wave Function Collapse (WFC) cho các mảnh ghép khớp nhau. Mỗi lần đổi seed là một bản đồ mới, và cùng seed luôn cho cùng một bản đồ.

Ví dụ top-down chạy thật: mỗi lần bấm R là một hòn đảo mới, đã bo góc bờ và mỏm đá. Camera được kéo ra xa để thấy cả bản đồ

Ví dụ platformer chạy thật: mỗi lần bấm R là một màn mới, có hố, hang, bục, dốc và góc bo tròn

Ba bước

Mọi thứ đều đi qua một lưới tạm, njin::tile_grid, chỉ là dữ liệu nên không cần cửa sổ hay njin::context:

Bước	Việc	Hàm
1. Sinh	Ra hình dáng thô	njin::generate_topdown(), njin::generate_platformer(), njin::wfc_generate() hoặc tự dùng njin::noise_2d()
2. Luật	Làm cho tự nhiên: bỏ chấm lẻ, thêm viền, rải hoa	njin::grid_majority(), njin::grid_border(), njin::grid_scatter()...
3. Bo góc	Đổi ô "trên giấy" thành ô có góc tròn	njin::grid_autotile()
Xong	Đưa vào bản đồ để vẽ và va chạm	njin::tilemap_from_grid()

Hai ví dụ đầy đủ dưới đây đi qua cả ba bước: một cho top-down, một cho platformer. Cả hai chạy trong thư mục game mẫu tương ứng (chúng cần assets/terrain.png, xem Bo góc tự nhiên: autotile). R là màn mới.

#include <njin.h>
 
namespace {
using namespace njin;
 
// Trong lưới, địa hình chỉ là ba loại (và hoa) "trên giấy". Tileset terrain.png của game mẫu top-down có hai bộ 47 ô bo
// góc (cỏ viền cát ở ô 0..46; đá ở 47..93), rồi 94..97 nước (động) và 98 hoa.
constexpr i32 water = 0, grass = 1, rock = 2, flowers = 3;
constexpr i32 land_set = 0, rock_set = 47, water_tile = 94, flower_tile = 98;
 
entt::entity ground = entt::null, props = entt::null, sea = entt::null, player = entt::null;
u32 seed = 1;
 
// Lưới có ô `keep` thành `tile`, ô khác thành trống.
tile_grid select(const tile_grid &g, i32 keep, i32 tile) {
  tile_grid out = tile_grid_make(g.width, g.height, -1);
  for (usize i = 0; i < g.cells.size(); i++)
    if (g.cells[i] == keep)
      out.cells[i] = tile;
  return out;
}
 
void build(context &ctx) {
  // 1. Tham số: độ cao từ nhiễu, chia vùng theo độ cao (tính theo phần trăm của bản đồ).
  topdown_gen_desc d;
  d.width = 64;
  d.height = 48;
  d.height_noise = {.seed = seed, .frequency = 0.06f, .octaves = 5, .warp = 6.0f};
  d.biomes = {{water, 0.32f}, {grass, 0.85f}, {rock, 1.0f}};
  d.island = 0.7f;               // nước bao quanh
  d.walkable = {grass};          // mọi chỗ đi được liền một khối
  d.blocked_tile = rock;
  topdown_gen_result r = generate_topdown(d);
 
  // 2. Luật thêm: hoa rải trên cỏ.
  grid_scatter(r.grid, grass, flowers, 0.06f, seed, 2);
 
  // 3. Tách thành ba lớp. Lớp mặt đất là mọi thứ không phải nước; lớp trên có đá và hoa. Mỗi lớp được bo góc
  //    riêng, nên đường bờ tròn và lớp nước phía dưới lộ ra ở góc.
  tile_grid land = tile_grid_make(r.grid.width, r.grid.height, -1);
  for (usize i = 0; i < land.cells.size(); i++)
    if (r.grid.cells[i] != water)
      land.cells[i] = grass;
  grid_autotile(land, {{.tiles = {grass}, .base = land_set, .outside = 0}});
 
  tile_grid top = select(r.grid, rock, rock);
  grid_autotile(top, {{.tiles = {rock}, .base = rock_set, .outside = 0}});
  for (usize i = 0; i < top.cells.size(); i++)
    if (r.grid.cells[i] == flowers)
      top.cells[i] = flower_tile;
 
  entt::registry &reg = world(ctx);
  for (const auto &[e, grid] : {std::pair{ground, &land}, std::pair{props, &top}}) {
    tilemap &map = reg.get<tilemap>(e);
    tilemap_clear(map);
    tilemap_from_grid(map, *grid);
  }
  tilemap &map = reg.get<tilemap>(sea);
  tilemap_clear(map);
  tilemap_from_grid(map, tile_grid_make(r.grid.width, r.grid.height, water_tile));
 
  const rect cell = tilemap_cell_rect(map, {0.0f, 0.0f}, r.spawn.x, r.spawn.y);
  reg.get<transform>(player).pos = {cell.pos.x + 8.0f, cell.pos.y + 12.0f};
}
 
// Một thực thể tilemap dùng chung tileset, vẽ ở lớp `layer`; `collide` bật va chạm với ô đặc.
entt::entity make_layer(context &ctx, const tilemap &shared, i32 layer, bool collide) {
  entt::registry &reg = world(ctx);
  const entt::entity e = reg.create();
  reg.emplace<transform>(e);
  tilemap &map = reg.emplace<tilemap>(e, shared);
  map.layer = layer;
  if (collide)
    reg.emplace<collider>(e, collider{.shape = collider_tiles});
  return e;
}
 
void startup(context &ctx) {
  entt::registry &reg = world(ctx);
  tilemap map;
  map.tileset = texture_load(ctx, "assets/terrain.png");
  texture_set_filter(ctx, map.tileset, filter_nearest);
  tilemap_animate(map, water_tile, {94, 95, 96, 97}, 0.25f);
  tilemap_set_shape(map, flower_tile, tile_none);
  for (i32 i = 0; i < 47; i++)
    tilemap_set_shape(map, land_set + i, tile_none); // đất đi xuyên qua được; chỉ đá cản
  // Ba lớp vẽ chồng lên nhau: nước ở dưới, rồi đất, rồi đá và hoa.
  sea = make_layer(ctx, map, 0, false);
  ground = make_layer(ctx, map, 1, false);
  props = make_layer(ctx, map, 2, true);
 
  player = reg.create();
  reg.emplace<transform>(player);
  reg.emplace<collider>(player, collider{.size = {10.0f, 8.0f}, .offset = {0.0f, -4.0f}});
  reg.emplace<topdown_body>(player);
  reg.emplace<topdown_input_map>(
      player, topdown_input_map{axis_define(ctx, "x", {{key_left, key_right}, {key_a, key_d}}),
                                axis_define(ctx, "y", {{key_up, key_down}, {key_w, key_s}})});
  reg.emplace<camera_follow>(camera_spawn(ctx, 3.0f),
                             camera_follow{.target = player, .bounds = {{0.0f, 0.0f}, {64 * 16.0f, 48 * 16.0f}}});
  build(ctx);
}
 
void update(context &ctx) {
  if (key_pressed(ctx, key_r)) { // R: bản đồ mới
    seed++;
    build(ctx);
  }
}
 
void draw_player(context &ctx) {
  const transform &tr = world(ctx).get<transform>(player);
  draw_rect(ctx, rect_from_center(tr.pos - vec2{0.0f, 4.0f}, {10.0f, 8.0f}), colors::yellow);
}
 
void setup(context &ctx) {
  ecs_register(ctx, phase_startup, startup);
  ecs_register(ctx, phase_update, update);
  ecs_register(ctx, phase_render, draw_player);
}
} // namespace
 
int main() {
  context *ctx = create({.title = "Sinh bản đồ top-down", .width = 960, .height = 540, .target_fps = 60});
  mod_register(*ctx, {.name = "game", .setup = setup});
  run(*ctx);
  destroy(ctx);
}

#include <njin.h>
 
namespace {
using namespace njin;
 
// Trong lưới, mặt đất chỉ là ba loại "trên giấy": cỏ, đất, đá. Tileset terrain.png của game mẫu có hai bộ 47 ô
// bo góc (đất phủ cỏ ở ô 0..46, đá ở 47..93), rồi 94 bục một chiều, 95 bụi, 96 hoa.
constexpr i32 grass = 0, dirt = 1, stone = 2;
constexpr i32 ground_set = 0, stone_set = 47, plank = 94, bush = 95, flower = 96;
 
entt::entity level = entt::null, player = entt::null;
u32 seed = 1;
 
void build(context &ctx) {
  // 1. Tham số. max_step và platform_height giữ ở 2 và 3 ô: nhân vật mặc định nhảy cao gần 3 ô.
  platformer_gen_desc d;
  d.width = 160;
  d.height = 30;
  d.surface_noise.seed = seed;
  d.cave_noise.seed = seed + 100;
  d.surface_tile = grass;
  d.dirt_tile = dirt;
  d.deep_tile = stone;
  d.caves = 0.2f;
  d.pit_chance = 0.06f;
  d.platform_chance = 0.05f;
  d.platform_tile = plank;
  platformer_gen_result r = generate_platformer(d);
 
  // 2. Luật thêm: bụi và hoa mọc trên mặt cỏ (ô trống ngay trên cỏ), cách nhau ít nhất 3 ô.
  auto on_grass = [](const tile_grid &g, i32 x, i32 y) { return g.get(x, y) == -1 && g.get(x, y + 1) == grass; };
  grid_scatter(r.grid, bush, 0.15f, seed, on_grass, 3);
  grid_scatter(r.grid, flower, 0.2f, seed + 1, on_grass, 2);
 
  // 3. Bo góc: cỏ và đất là một địa hình, đá nối liền với nó. Ngoài lưới coi như đất chạy tiếp, trừ phía trên.
  const u8 outside = side_all & ~side_up;
  grid_autotile(r.grid, {{.tiles = {grass, dirt}, .joins = {stone}, .base = ground_set, .outside = outside},
                         {.tiles = {stone}, .joins = {grass, dirt}, .base = stone_set, .outside = outside}});
 
  entt::registry &reg = world(ctx);
  tilemap &map = reg.get<tilemap>(level);
  tilemap_clear(map);
  tilemap_from_grid(map, r.grid);
 
  const rect cell = tilemap_cell_rect(map, {0.0f, 0.0f}, r.spawn.x, r.spawn.y);
  reg.get<transform>(player).pos = {cell.pos.x + 8.0f, cell.pos.y + 16.0f}; // chân ở đáy ô
  reg.get<platformer_body>(player).velocity = {};
}
 
void startup(context &ctx) {
  entt::registry &reg = world(ctx);
  tilemap map;
  map.tileset = texture_load(ctx, "assets/terrain.png");
  texture_set_filter(ctx, map.tileset, filter_nearest);
  tilemap_set_shape(map, plank, tile_one_way);
  tilemap_set_shape(map, bush, tile_none);
  tilemap_set_shape(map, flower, tile_none);
  level = reg.create();
  reg.emplace<transform>(level);
  reg.emplace<tilemap>(level, std::move(map));
  reg.emplace<collider>(level, collider{.shape = collider_tiles});
 
  player = reg.create();
  reg.emplace<transform>(player);
  reg.emplace<collider>(player, collider{.size = {10.0f, 14.0f}, .offset = {0.0f, -7.0f}});
  reg.emplace<platformer_body>(player);
  reg.emplace<platformer_input_map>(
      player, platformer_input_map{.move = axis_define(ctx, "move", {{key_left, key_right}}),
                                   .jump = action_define(ctx, "jump", {key_space}),
                                   .down = action_define(ctx, "down", {key_down})});
  reg.emplace<camera_follow>(camera_spawn(ctx, 3.0f),
                             camera_follow{.target = player, .bounds = {{0.0f, 0.0f}, {160 * 16.0f, 30 * 16.0f}}});
  build(ctx);
}
 
void update(context &ctx) {
  if (key_pressed(ctx, key_r)) { // R: màn mới
    seed++;
    build(ctx);
  }
}
 
void draw_player(context &ctx) {
  const transform &tr = world(ctx).get<transform>(player);
  draw_rect(ctx, rect_from_center(tr.pos - vec2{0.0f, 7.0f}, {10.0f, 14.0f}), colors::yellow);
}
 
void setup(context &ctx) {
  ecs_register(ctx, phase_startup, startup);
  ecs_register(ctx, phase_update, update);
  ecs_register(ctx, phase_render, draw_player);
}
} // namespace
 
int main() {
  context *ctx = create({.title = "Sinh màn platformer", .width = 960, .height = 540, .target_fps = 60,
                               .clear_bg_color = {0.37f, 0.80f, 0.89f, 1.0f}});
  mod_register(*ctx, {.name = "game", .setup = setup});
  run(*ctx);
  destroy(ctx);
}

Nhiễu: từ đơn giản đến phức tạp

njin::noise_2d() cho một số từ 0 đến 1 tại mỗi điểm, mượt theo không gian. njin::noise_desc có mọi núm chỉnh, và mỗi núm làm một việc dễ thấy:

Núm	Tác dụng	Khi nào chỉnh
seed	Đổi cả bản đồ	Mỗi màn
frequency	Nhỏ: vùng to; lớn: vùng vụn (0.02 đến 0.1)	Đầu tiên: quyết định cỡ vùng
octaves	Số lớp chi tiết chồng lên	Muốn mép có chi tiết nhỏ (3 đến 6)
gain	Độ mạnh của lớp nhỏ	Muốn mép gồ ghề (0.5 mặc định)
lacunarity	Lớp sau nhỏ hơn lớp trước bao nhiêu lần	Hiếm khi
fractal	fractal_fbm địa hình, fractal_ridged sống núi và sông, fractal_billow đồi tròn	Đổi dáng
warp	Uốn cong toạ độ (tính bằng ô)	Muốn viền cong queo (4 đến 20)

Đoạn dưới in nhiễu ra chữ (# là chỗ nhiễu cao hơn ngưỡng) với từng núm bật dần lên. Đây là kết quả chạy thật:

#include <cstdio>
#include <njin.h>
 
using namespace njin;
 
// In một trường nhiễu thành chữ: '#' là nơi nhiễu cao hơn `level`, '.' là nơi thấp hơn.
void show(const char *title, const noise_desc &d, f32 level) {
  std::printf("%s\n", title);
  for (i32 y = 0; y < 14; y++) {
    for (i32 x = 0; x < 60; x++)
      std::putchar(noise_2d(d, (f32)x, (f32)y * 2.0f) > level ? '#' : '.'); // *2: ký tự cao gấp đôi rộng
    std::putchar('\n');
  }
}
 
int main() {
  // Đơn giản nhất: một lớp, chỉ có seed và tần số. Vùng to, trơn.
  show("1. một lớp, tần số 0.06", {.seed = 4, .frequency = 0.06f, .fractal = fractal_none}, 0.5f);
 
  // Thêm lớp (octave): cùng vùng to đó, nhưng mép có chi tiết nhỏ.
  show("2. fBm, 5 lớp", {.seed = 4, .frequency = 0.06f, .octaves = 5}, 0.5f);
 
  // gain lớn làm các lớp nhỏ mạnh lên: mép gồ ghề hơn.
  show("3. fBm, 5 lớp, gain 0.7", {.seed = 4, .frequency = 0.06f, .octaves = 5, .gain = 0.7f}, 0.5f);
 
  // Uốn toạ độ (warp): viền cong queo như bản đồ thật.
  show("4. fBm, 5 lớp, warp 8", {.seed = 4, .frequency = 0.06f, .octaves = 5, .warp = 8.0f}, 0.5f);
 
  // Gờ nhọn: lấy vùng cao thì ra sống núi hẹp, lấy vùng thấp ra sông.
  show("5. ridged, 4 lớp", {.seed = 4, .frequency = 0.05f, .fractal = fractal_ridged, .octaves = 4}, 0.72f);
}

1. một lớp, tần số 0.06
.################.................################..........
..###############...............##############..............
....#############.............###############...............
......###########............################...............
........#########............################.........######
.........########............#################....##########
.........########.............#################.############
........#########..............##############...############
........#########................##########.......##########
##....###########..................#####............########
##################...................................#######
##....#############...................................######
........#############.................................######
..........#############..............................#######
2. fBm, 5 lớp
...############..####.............#...########...#..####...#
#.##############..##.............###...#######..............
.###############.#####..........##############..............
......################........#################......####...
......#########..####.........###############.......########
...........####................##############....###########
...............................########...##...#############
..######..#.##.####...........#########......###############
..########....#####..........#######..####...####.##########
...########...........................####..........########
##.########..######....................#................####
####.......#########.....................................###
###......##############...............................######
.........###############...........................#########
3. fBm, 5 lớp, gain 0.7
...###########...####..........#..#...########...#..####...#
#.##############..###............###...#######............#.
.######.########.######.........##############...........##.
......###################.#..##################......#####..
.....######.###..######.......###############.......########
............###....#............#######.####.....###########
................................######....##...#############
.#######..#.##.####..........###..####.......######.....####
.#########....##.###.......#########...###...####.##########
...#######........#...................#####.#.....####..####
#..#######...##.###...................##................##..
####.......#########.##...............###................###
####........########.##...............................######
........##########..####..............##...........###....##
4. fBm, 5 lớp, warp 8
..##########..####.............#..################...#######
#################................####....########.......###.
###################.............#################...........
....################.........####################...........
....########.####............####################.......####
.....######....................################......#######
........##....................################....##########
.............#...............############..###..############
.#####.#.#######............#############.....#####.########
.#######.................................###..#....#..######
.#######...#.####........................##..............###
###.....###########..#.................................#####
##.....################..............................#######
......#################.............#######..........#######
5. ridged, 4 lớp
###................###................#####.......#.########
#####..............###..............#####.............####.#
....##............###..............###................###...
.....###.........####..............##.................##....
......###........####.................................##....
........###....#.#.###...........##..................#######
.........###........###.............................########
.........##.........####...........#.................######.
........####........###.............###..............#####.#
#.......####.......###................###...........###.####
###.....####.......###.................###......######.....#
######.###..........#...................###########........#
#########.........#.#........................####...........
.########.............#.....................................

Đọc từ trên xuống: (1) một lớp cho những mảng trơn; (2) thêm lớp thì mép có chi tiết; (3) gain cao làm mép gồ ghề hơn; (4) warp uốn các mảng cho tự nhiên; (5) fractal_ridged cho các sống hẹp, hợp với núi hay sông.

Ghi chú

Nhiễu fBm dồn quanh 0.5 và hiếm khi ra ngoài 0.2 đến 0.8, nên "ngưỡng 0.3" không có nghĩa là 30% bản đồ. njin::generate_topdown() tự kéo giãn cho đủ 0 đến 1, nên ngưỡng của các vùng đất là phần trăm của bản đồ. Khi tự dùng njin::noise_2d(), hãy đặt ngưỡng bằng mắt như ở đoạn trên, hoặc xếp hạng các giá trị rồi lấy phần trăm.

Luật: làm bản đồ trông tự nhiên

Nhiễu thô thường vụn: chấm cỏ lẻ giữa nước, vũng một ô, mép răng cưa. Các luật sửa đúng những thứ đó, và chạy trên bất kỳ njin::tile_grid nào, dù nó đến từ nhiễu, WFC hay một bản đồ chữ (njin::tile_grid_from_text()).

Luật	Làm gì	Ví dụ
njin::grid_majority()	Mỗi ô theo loại chiếm đa số quanh nó	Xoá chấm lẻ, làm mượt mép
njin::grid_smooth()	Automat tế bào cho hai loại ô	Hang tròn trịa
njin::grid_remove_small(), njin::grid_merge_small()	Bỏ vùng nhỏ	Ao một ô, đảo lạc
njin::grid_keep_largest()	Chỉ giữ chỗ đi được lớn nhất	Không góc nào bị cô lập
njin::grid_border()	Viền một loại ô quanh loại khác	Cát giữa nước và cỏ, cỏ trên mặt đất
njin::grid_scatter()	Rải ngẫu nhiên, có khoảng cách tối thiểu và điều kiện	Hoa, bụi, đá, đuốc

#include <cstdio>
#include <njin.h>
 
using namespace njin;
 
constexpr i32 water = 0, sand = 1, grass = 2;
 
void print(const char *title, const tile_grid &g) {
  std::printf("%s\n", title);
  for (i32 y = 0; y < g.height; y++) {
    for (i32 x = 0; x < g.width; x++)
      std::putchar(".,#"[g.get(x, y)]);
    std::putchar('\n');
  }
}
 
int main() {
  // Nhiễu vụn cho ra một bản đồ lởm chởm: nước, cát, cỏ chấm lẻ khắp nơi.
  const noise_desc noise{.seed = 11, .frequency = 0.16f, .octaves = 3};
  tile_grid g = tile_grid_make(60, 14);
  for (i32 y = 0; y < g.height; y++)
    for (i32 x = 0; x < g.width; x++) {
      const f32 v = noise_2d(noise, (f32)x, (f32)y * 2.0f);
      g.set(x, y, v < 0.47f ? water : (v < 0.52f ? sand : grass));
    }
  print("Trước khi áp luật", g);
 
  // 1. Làm mượt: mỗi ô theo loại chiếm đa số quanh nó. Chấm lẻ và răng cưa biến mất.
  grid_majority(g, 2);
  // 2. Bỏ vùng nhỏ: mảng dưới 12 ô hoà vào loại ô bao quanh.
  grid_merge_small(g, 12);
  // 3. Viền: cỏ chạm nước thì thành cát, dày một ô.
  grid_border(g, grass, water, sand);
  print("Sau khi áp luật", g);
}

Bản đồ trước và sau khi áp ba luật (. là nước, , là cát, # là cỏ):

Trước khi áp luật
,##,.,,.#,,.,,#...,,,#,..,.,...,######......,###.,,,#####,..
#####......####..,,..,,######....#######...,,#,......,,#####
###,......####....#,,###,.......#,######....,##......,,,#,.,
,,###.,#####,#.....,#####,.....,,####,......##,,,,,##.,,,.##
..####,,,#####,......####,..,.#####,#......,.,...,##,..,####
....,,...,##......#..,,####,,,####,......,##,,.....#,,,..,#,
,###,,,..,#,,,..###,...##,...###......,#####.......##...,###
#############,,,###...,#,,.,,##,.....#######,.....,##,...,#,
.###########,,,...,,###..,#####....,#########....,,,#,,....,
#######,,###.......###,.,,.,###,.....,########....,,,##,#,,,
.,###,....#####...,###,.,########......####,,,...#######,,##
,,.......,############,.....,##,.,...,,#######,.....,,##,,.,
......,,.,#,,#####.,.,..#.......,..,########,##,...........#
##########,..,,,.,,#,,,#######,#,......,,,,,....###,,#####,,
Sau khi áp luật
####,......,##,...,######,......,####,......,.......,#######
####,......,##,...,######,......,#####,.....,........,,#####
####,.....,##,....,######,......,#####,.....,........,,,####
####,.,,,,###,.....,,####,.....,#####,............,,,,,,####
#####,######,........,###,....,###,,,.......,.....,,,,,,,###
############,.........,##,...,##,,.......,,,.......,,,...,##
###########,...........,#,..,##,......,,,##,.......,,....,##
###########,..........,#,,,,##,......,#####,.......,,....,##
###########,........,,#,,,,###,......,######,.............,#
#####,,,,,##,......,##,,,,#####,.....,#######,......,,,,,,##
,,,,,.....,##,,...,###,,.,,,###,......,######,.....,########
.........,#####,,,####,.....,,,.......,######,......,,######
.........,,#########,,................,#####,,........,#####
...........,##########,................,###,.........,######

Mảng cỏ vụn thành vài khối liền, chấm lẻ biến mất, và chỗ cỏ chạm nước có viền cát. Thứ tự các luật quan trọng: làm mượt và bỏ vùng nhỏ trước, viền sau cùng.

Bộ sinh top-down

njin::generate_topdown() nhận một bảng vùng đất (njin::biome) theo độ cao và, nếu muốn, độ ẩm:

• biomes: xét theo thứ tự, vùng đầu tiên thoả max_height và max_moisture được chọn. Ví dụ {{water, 0.3}, {sand, 0.35}, {grass, 0.8}, {rock, 1.0}}: 30% thấp nhất là nước, rồi cát, cỏ, và đỉnh là đá.
• island: kéo độ cao xuống về mép, để bản đồ là hòn đảo giữa biển.
• walkable, blocked_tile: chỉ giữ chỗ đi được lớn nhất, phần còn lại thành vật cản. Điểm xuất phát (result.spawn) luôn nằm trong đó, nên người chơi không bao giờ bị nhốt.
• border_tile: vòng tường quanh bản đồ.
• smooth, min_region: số lần làm mượt và cỡ vùng nhỏ nhất được giữ.
• Độ ẩm (moisture_noise, max_moisture) cho sa mạc và rừng ở cùng độ cao.

result.heights trả lại độ cao từng ô, để luật của riêng bạn dùng (ví dụ đặt cây ở chỗ cao vừa).

Bộ sinh platformer

njin::generate_platformer() dựng đường mặt đất bằng nhiễu một chiều, rồi đục hang, đào hố, đặt bục. Khác với top-down, nó có luật chơi được, vì màn nhìn ngang mà nhảy không tới thì hỏng:

Luật	Tham số	Mặc định	Vì sao
Hai cột cạnh nhau chênh không quá max_step ô	max_step	2	Nhân vật mặc định nhảy cao gần 3 ô
Hố không rộng quá pit_max ô	pit_min, pit_max	1 đến 2	Nhảy xa khoảng 59 px, hố 2 ô là 32 px
Hai cột trước hố và cột sau hố bằng nhau			Tránh bước xuống ngay mép hố, không còn chỗ đạp
Hai đầu màn bằng phẳng, không hố	safe_columns	6	Chỗ xuất phát và đích
Hang không đục lên sát mặt đất	cave_margin	4	Không thủng sàn, không sụp xuống hang giữa đường
Bục lơ lửng thấp hơn tầm nhảy	platform_height	3	Nhảy lên được
Chỗ đất lên hoặc xuống đúng 1 ô có thể là dốc	slope_r_tile, slope_l_tile	không dùng	Đi lên êm hơn

caves là tỉ lệ diện tích ngầm được đục (0.2 là chừng 20%): hang được chọn theo thứ hạng của nhiễu, rồi bo tròn bằng automat tế bào, và hốc dưới 8 ô bị lấp.

Ghi chú

Những con số trên dành cho njin::platformer_body mặc định (chạy 110 px/s, nhảy cao chừng 45 px, xa chừng 59 px). Đổi run_speed hay jump_speed của nhân vật thì đổi pit_max, max_step, platform_height theo.

Đã kiểm chứng thế nào: một bot chạy sang phải và nhảy khi gặp hố hay tường, điều khiển njin::platformer_body thật trên chính màn do ví dụ trên sinh ra (160 x 30, caves 0.2, pit_chance 0.06, platform_chance 0.05, không dùng dốc), tới được đích ở cả 20 seed liền nhau (1 đến 20). Đó là bằng chứng cho các tham số ở trên, không phải lời hứa cho mọi tham số: nới pit_max hay max_step quá tầm nhảy thì màn có thể không đi được.

Bo góc tự nhiên: autotile

Một lưới ô vuông trông "răng cưa" vì mỗi ô là hình vuông. Autotile sửa việc đó: đất được vẽ bằng một bộ ô, và mỗi ô của lưới chọn tấm nào trong bộ tuỳ theo các ô xung quanh nó. Chỗ đất hở ra thì có mép, hai mép gặp nhau thì góc tròn, chỗ đất lõm vào thì có góc lõm. Bạn viết luật: "những ô nào là đất, bộ ô nào vẽ chúng".

njin::grid_autotile() làm việc đó trên njin::tile_grid, bằng njin::autotile_rule:

Trường	Ý nghĩa
tiles	Các ô của lưới mà luật này thay bằng ô của bộ. Cỏ và đất có thể cùng là một địa hình
joins	Ô khác vẫn được coi là nối liền, nhưng không bị thay (đá dưới đất, cửa trên tường)
base	Số thứ tự ô đầu tiên của bộ trong tileset; bộ là các ô liền nhau
layout	njin::autotile_blob (47 ô, có cả góc lồi và góc lõm) hoặc njin::autotile_edges (16 ô, chỉ nhìn bốn phía)
outside	Những phía mà ngoài lưới coi như đất chạy tiếp (các bit njin::grid_side). Mặc định cả bốn

Một ô nhìn tám ô kề, cộng thành mặt nạ (njin::autotile_neighbor). Ô chéo chỉ tính khi cả hai ô kề thẳng cạnh nó cũng nối liền (nếu không, mép đã che góc rồi), nên còn đúng 47 kiểu. njin::autotile_index() đổi mặt nạ thành số thứ tự ô trong bộ:

#include <cstdio>
#include <njin.h>
 
using namespace njin;
 
// Trong lưới, đất chỉ là một số "trên giấy". Bộ 47 ô bo góc của đất, giả sử, bắt đầu ở ô số 100 của tileset.
constexpr i32 ground = 1;
 
int main() {
  // Một hòn đảo chữ L, viết bằng chữ cho dễ nhìn. '#' là đất.
  tile_grid g = tile_grid_from_text(
      "..........\n"
      "..####....\n"
      ".######...\n"
      ".######...\n"
      "..#####...\n"
      "....####..\n"
      "....####..\n"
      "..........\n",
      {{'#', ground}});
 
  // Ô nào nối liền ô nào: mỗi ô đất đổi thành số thứ tự trong bộ 47 ô, chọn theo tám ô kề.
  const tile_grid before = g;
  const i32 n = grid_autotile(g, {{.tiles = {ground}, .base = 100}});
  std::printf("%d ô đất được thay bằng ô của bộ\n\n", n);
 
  for (i32 y = 0; y < g.height; y++) {
    for (i32 x = 0; x < g.width; x++) {
      if (before.get(x, y) == -1)
        std::printf("  . ");
      else
        std::printf("%3d ", g.get(x, y) - 100);
    }
    std::putchar('\n');
  }
 
  // Cùng một mặt nạ, tính tay: ô (2, 1) là góc trên trái, chỉ có ô bên phải, bên dưới và chéo phải dưới.
  const u8 mask = neighbor_right | neighbor_down | neighbor_down_right;
  std::printf("\nô (2, 1): mặt nạ %d -> ô số %d của bộ (khớp: %s)\n", mask, autotile_index(mask),
              g.get(2, 1) == 100 + autotile_index(mask) ? "có" : "không");
}

29 ô đất được thay bằng ô của bộ
 
  .   .   .   .   .   .   .   .   .   . 
  .   .  10  31  31  26   .   .   .   . 
  .  10  33  46  46  45  26   .   .   . 
  .   4  41  46  46  46  42   .   .   . 
  .   .   4  36  41  46  42   .   .   . 
  .   .   .   .  12  46  45  26   .   . 
  .   .   .   .   4  36  36  34   .   . 
  .   .   .   .   .   .   .   .   .   . 
 
ô (2, 1): mặt nạ 28 -> ô số 10 của bộ (khớp: có)

Số 46 là ô ở giữa vùng (đủ tám ô kề). Góc trên trái của khối là ô số 10, đúng bằng mặt nạ neighbor_right | neighbor_down | neighbor_down_right tính tay ở dòng cuối.

Game mẫu có sẵn hai bộ 47 ô (đất phủ cỏ và đá) trong terrain.png, xếp đúng thứ tự của njin::autotile_index():

terrain.png của game mẫu platformer, vẽ lên nền trời: bộ đất phủ cỏ (trái) và bộ đá (phải), mỗi bộ 47 ô, đánh số theo thứ tự trong bộ. Ô 46 là ô ở giữa vùng

Cùng một màn, một bên chỉ dùng ô "đầy đủ" (46 và 93) cho mọi ô, một bên qua njin::grid_autotile():

Trái: mọi ô là ô đầy đủ, không autotile. Phải: cùng màn qua njin::grid_autotile(): mép có viền, cỏ chỉ ở mặt trên, góc lồi tròn

Vài điều nên biết:

• Gọi sau cùng. Autotile đổi ô "trên giấy" thành số thứ tự ô của bộ, nên các luật đọc loại ô (njin::grid_border(), njin::grid_scatter() với điều kiện) phải chạy trước. Các luật trong một lần gọi đều đọc từ một bản chụp lưới, nên thứ tự chúng không ảnh hưởng, và số thứ tự ô mới không bị nhầm với ô cũ.
• Va chạm vẫn là ô vuông. Góc tròn chỉ là hình vẽ; hộp va chạm của ô vẫn đầy đủ. Ở top-down đó thường đúng ý; ở platformer, đứng sát mép góc bo sẽ hơi "lơ lửng" vài pixel. Nếu cần hình khớp hẳn, dùng dốc (njin::tile_slope_r).
• Nhiều lớp. Ví dụ top-down ở trên chia thành ba tilemap (nước, đất, đá và hoa) với njin::tilemap::layer: đất bo góc để lộ nước bên dưới, đá bo góc để lộ cỏ bên dưới. Đó là cách có bờ biển và mỏm đá tròn mà không cần ô "cát chuyển sang nước" riêng cho từng cặp.
• Ngoài lưới. Mặc định ngoài lưới là đất chạy tiếp, nên mép bản đồ không bo. Bỏ side_up khỏi outside cho mặt đất platformer, như ví dụ; đặt outside = 0 cho hòn đảo, như ví dụ top-down.
• Tự vẽ bộ ô. Bộ 47 ô là quy ước phổ biến (còn gọi "blob tileset"). Dùng ảnh của bạn thì xếp các ô theo đúng thứ tự của njin::autotile_index(); script src/games/shared/tools/make_terrain.py là ví dụ cách dựng chúng từ mặt nạ.

Wave Function Collapse

WFC lấp lưới sao cho mọi cặp ô cạnh nhau đều hợp lệ. Bạn không đặt hình dáng, bạn đặt luật kề: "ô nào được đứng bên phải, bên dưới... ô nào". Có hai cách có luật:

Học từ một mẫu

njin::wfc_learn() đọc một njin::tile_grid mẫu (thường viết bằng njin::tile_grid_from_text()): mọi cặp ô cạnh nhau trong mẫu thành luật kề, số lần xuất hiện thành độ hay gặp. Mẫu nhỏ và đa dạng cho kết quả tốt; cặp nào mẫu không có thì không bao giờ xuất hiện. njin::wfc_desc::allowed cố định những chỗ bạn muốn (trời ở hàng trên, đá ở hàng dưới):

#include <cstdio>
#include <njin.h>
 
using namespace njin;
 
constexpr i32 sky = -1, grass = 0, dirt = 1, stone = 2;
 
void print(const tile_grid &g) {
  for (i32 y = 0; y < g.height; y++) {
    for (i32 x = 0; x < g.width; x++) {
      const i32 t = g.get(x, y);
      std::putchar(t < 0 ? ' ' : "gds"[t]);
    }
    std::putchar('\n');
  }
}
 
int main() {
  // 1. Mẫu: một khúc địa hình do người vẽ. WFC học từ nó ô nào được đứng cạnh ô nào theo từng hướng (trời chỉ
  //    nằm trên cỏ hoặc trên trời, cỏ nằm trên đất, đất nằm trên đá...), và ô nào hay gặp hơn ô nào.
  const tile_grid sample = tile_grid_from_text(
      "                              \n"
      "                    ggg       \n"
      "gggggggg    ggggggggddggggggg \n"
      "ddddddddgggggddddddddddddddddg\n"
      "dddddddddddddddddddddddddddddd\n"
      "ssdddddsssdddddddddsssssdddsss\n"
      "ssssssssssssssssssssssssssssss\n",
      {{'g', grass}, {'d', dirt}, {'s', stone}});
  const wfc_rules rules = wfc_learn(sample);
 
  // 2. Sinh. Cùng seed cho cùng kết quả; đổi seed là có bản khác.
  wfc_desc d{.width = 60, .height = 20, .seed = 8};
 
  // 3. Ràng buộc: hàng trên cùng luôn là trời, hàng dưới cùng luôn là đá.
  d.allowed = [&](i32, i32 y, i32 tile) {
    if (y == 0)
      return tile == sky;
    if (y == d.height - 1)
      return tile == stone;
    return true;
  };
 
  tile_grid out;
  if (!wfc_generate(rules, d, out)) {
    std::printf("luật quá chặt hoặc ràng buộc mâu thuẫn\n");
    return 1;
  }
  print(out);
}

        ggggg          g              gg  gg g  ggg gggg ggg
       gdddddggg  gggg g       g g g  gg gdggg  gddgddddgddg
gg    ggdddsddddggdddg ggg g  gdgg gggddgddgddgggddddddddddd
ddg  gdddddsddddddddddgdgdgg ggddggddgdddddgdddddddddddddddd
dddggddddddsdddddddddddddsdg gddddddddsddddddddddddddddddddd
ddddgddddddsdddddddddddddsdgggddddddsdsdddddddddddddsdddddds
dddddddddddsdddddddddddddsdgddddddddsdsdddsdddddddddsdddddds
dddddddddddsdsdddddddddddsddddddddddsdsdddsddddddsddsdddddds
dddddddddddsdsdddddddddddsddddddddddsdsdsdsddddddsddsdddddds
dddddddddddsdsdddddddddddsddddddddddsssdsssdddddssddsdddddds
dddddddddddsdsdsdddddddddsddddddddsdsssdsssdddsdssddsdddddds
ddsdddsddddsdsdsddsddddddsddddddddsdsssdsssdsdsdssddsdddddds
ddsdddsddddsdsdsdssddddddsddddddddsdsssdsssdsdsdssddsdddddds
ddsdsdsddddsdsdsdsssdsdddsddddddsdsssssdsssdsdsdssddsdsdddds
ddsdsdsddddsdsdsdsssdsdsdsdsddsdsdsssssdsssdsdsdssddsdsdddds
sdsdsdsdsddsdsdsdsssdsdsssssddsdsssssssdsssdsssdssddsssdddds
sdsdsdsdssdsdsdsssssdsssssssdssdsssssssdsssdsssdssddsssssdds
sssdsdsdssdsdsssssssdsssssssdssdsssssssdssssssssssdsssssssds
ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

Mọi cột đều đúng thứ tự trời, cỏ, đất, đá, và không có cỏ nào lơ lửng, vì mẫu chưa từng cho cỏ đứng dưới đất. Nhưng luật là theo cặp ô, không theo mảng ô: WFC này không biết "đồi rộng chừng nào", nên bề mặt có thể lởm chởm và đôi chỗ thành cột. Cho hình dáng tốt hơn thì dùng nhiễu (bộ sinh ở trên) rồi để WFC lo phần chi tiết, hoặc cho mẫu nhiều đoạn phẳng hơn (cặp cỏ với cỏ hay gặp hơn, nên bề mặt có xu hướng phẳng hơn), hoặc dùng luật tự viết như dưới đây.

Luật tự viết: đường nối liền

Với bộ ô có mép khớp nhau (đường, sông, hành lang), luật viết bằng tay dễ hơn mẫu: hai ô cạnh nhau hợp lệ khi cùng có đường hoặc cùng không có ở phía chạm nhau. Mười sáu ô đường đánh số đúng như njin::autotile_edges (bit 1 lên, 2 phải, 4 xuống, 8 trái), nên cùng bộ ô đó dùng để vẽ luôn:

#include <bit>
#include <cstdio>
#include <njin.h>
 
using namespace njin;
 
// 16 ô đường, đánh số theo đúng bộ autotile_edges: bit 1 là đường đi lên, 2 sang phải, 4 xuống, 8 sang trái.
// Ô 0 là cỏ (không có đường), ô 5 là đường thẳng đứng, ô 10 là đường nằm ngang, ô 15 là ngã tư.
constexpr i32 up = 1, right = 2, down = 4, left = 8;
 
int main() {
  wfc_rules rules;
  // Độ hay gặp: nhiều cỏ và đường thẳng, ít ngã ba, gần như không ngã tư hay đường cụt.
  for (i32 t = 0; t < 16; t++) {
    const i32 arms = std::popcount((unsigned)t);
    const f32 weight = arms == 0 ? 6.0f : (arms == 1 ? 0.05f : (arms == 2 ? (t == 5 || t == 10 ? 3.0f : 1.5f) : (arms == 3 ? 0.4f : 0.15f)));
    wfc_add_tile(rules, t, weight);
  }
  // Luật kề: hai ô cạnh nhau phải khớp mép, tức là cùng có đường hoặc cùng không có ở phía chạm nhau.
  for (i32 a = 0; a < 16; a++)
    for (i32 b = 0; b < 16; b++) {
      if (((a & right) != 0) == ((b & left) != 0))
        wfc_allow(rules, a, wfc_right, b);
      if (((a & down) != 0) == ((b & up) != 0))
        wfc_allow(rules, a, wfc_down, b);
    }
 
  wfc_desc d{.width = 40, .height = 14, .seed = 6};
  // Đường không chạy ra khỏi bản đồ.
  d.allowed = [&](i32 x, i32 y, i32 tile) {
    return !((x == 0 && (tile & left)) || (x == d.width - 1 && (tile & right)) || (y == 0 && (tile & up)) ||
             (y == d.height - 1 && (tile & down)));
  };
 
  tile_grid out;
  if (!wfc_generate(rules, d, out)) {
    std::printf("không sinh được\n");
    return 1;
  }
  const char *glyph[16] = {" ", "╵", "╶", "└", "╷", "│", "┌", "├", "╴", "┘", "─", "┴", "┐", "┤", "┬", "┼"};
  for (i32 y = 0; y < out.height; y++) {
    for (i32 x = 0; x < out.width; x++)
      std::printf("%s", glyph[out.get(x, y)]);
    std::putchar('\n');
  }
}

     ┌┐     ┌┬─┐ ┌─┐┌┐  ┌─┐         ┌─┐ 
 ┌───┼┤    ┌┘└─┘ │ │└┘  │ │         ├┐├╴
 │   ││  ┌─┼─┐ ┌─┴┐│    └─┤ ┌┐      ├┴┴┐
 ├───┘│  │╷└┐│ └┐┌┘└┐┌────┤ │└┐     └──┘
┌┘    │ ┌┘└─┘│┌─┴┘ ┌┘│ ┌─┐│ │ │   ┌─┐   
└─────┘ │ ┌──┴┘ ┌┐ ├┬┘┌┴┬┘└─┘ │┌┐┌┘ │┌─┐
   ┌───┐│ │┌────┴┘┌┘└┐└─┤┌─┐  ││││  └┘╶┘
┌┐ │┌──┘└─┼┘ ┌┐   └┐ │  ││ └─┐││└┤      
└┤┌┴┘┌──┐┌┘╷ │└┐   └┬┘ ┌┘├┬─┐│└┘┌┘┌┐ ┌─┐
 │└┬─┤ ╷└┘ └┐│ └┐   │┌┐└─┘└┬┼┘  └─┘│ └─┘
 │╶┘ └─┘    │└──┘┌┐ └┴┼─┐  ││      │┌┐  
 └┐      ┌──┘    └┴┐  └─┘  └┘      │└┤  
  └──────┘    ┌┐   └┐   ┌───┐┌┐  ┌┐└┐│  
              └┴────┘   └───┘└┘  └┘ └┘  

Mọi chỗ hai ô chạm nhau, đường đều khớp, và không có đường nào chạy ra ngoài bản đồ (đã kiểm từng cặp ô của kết quả trên: 0 chỗ không khớp). Độ hay gặp (weight) quyết định cảnh: cỏ nhiều, đường thẳng thường gặp, ngã tư hiếm.

Các tham số

Tham số	Ý nghĩa
seed	Cùng seed cùng kết quả
attempts	WFC không quay lui: gặp ngõ cụt (một ô không còn lựa chọn) thì làm lại với thứ tự ngẫu nhiên khác, tối đa từng ấy lần. Mặc định 20
periodic	true: mép phải nối mép trái, mép dưới nối mép trên (để lát nền, lặp được)
allowed	Ràng buộc cố định: ô tile có được đặt ở (x, y) không
njin::wfc_allow(), njin::wfc_add_tile()	Dựng luật và đổi độ hay gặp bằng tay

njin::wfc_generate() trả false khi luật quá chặt, ràng buộc mâu thuẫn hoặc hết số lần thử, và không đổi lưới đầu ra. Luôn kiểm tra giá trị trả về, và có chỗ dự phòng (một bản đồ vẽ tay, hay thử seed khác).

Kết quả của WFC cũng là njin::tile_grid, nên các luật ở trên (njin::grid_scatter(), njin::grid_autotile()...) chạy tiếp được.

Đưa vào game

njin::tilemap_from_grid() đặt lưới vào njin::tilemap, góc trên trái ở ô origin. Ô -1 của lưới không xoá ô đang có, nên chồng được nhiều lưới; muốn sinh lại từ đầu (như khi bấm R) thì gọi njin::tilemap_clear() trước, như hai ví dụ. Va chạm và animation của ô do njin::tilemap_set_shape() và njin::tilemap_animate() quyết định như mọi tilemap (xem Tilemap). result.spawn (và result.goal của platformer) là ô để đặt nhân vật.

Lưu ý

• Cùng seed, cùng bản đồ, trên mọi máy đã thử: một chuỗi băm của 12 seed cho cả ba bộ sinh ra cùng một giá trị khi biên dịch bằng gcc trên Windows (MinGW) và trên Linux (gcc 15), ở -O0, -O2 và -O3 -march=native. Chưa thử bằng MSVC hay clang. Lưu seed (số nhỏ) thay vì lưu cả bản đồ.
• Sinh chạy một lần lúc nạp màn, không mỗi frame. Đo trên bản -O2: bản đồ top-down 64 x 48 mất dưới 1 ms, màn platformer 160 x 30 dưới 0,3 ms; WFC là phần nặng nhất (một lưới 96 x 64 mất khoảng 0,2 giây), nên sinh trước khi vào màn.
• Sinh xong nên nhìn thử. Nhiễu và luật cho ra bản đồ hợp lệ, không phải bản đồ hay. Đổi seed vài chục lần và xem.

Xem thêm

njin::tile_grid, njin::generate_topdown(), njin::generate_platformer(), njin::grid_autotile(), njin::wfc_generate()

tilemap, level, platformer, topdown