Буквально только что наткнулся на статью из песочницы о grid-tiling'е и решил написать свой аналог.
Мой метод распределения переходов несколько отличается от упомянутой в той статье.
Начало данной системы положено в небезызвестной игре WarCraft III.
На этом скриншоте редактора карт WC3 можно заметить швы, они обозначены красными стрелками. Судя по всему, логика тайлов в этой игре несколько иная, нежели в большинстве игр. Один тайл здесь не занимает целой клетки. Он находится как бы в точке, вокруг которой уже рисуются его углы.
Особенно хорошо это наблюдается со включенной сеткой.
Обычно в такой ситуации предлагается разделить тайл на 4 маленьких. Но есть одно но: что делать в подобном случае?
Когда все 4 окружающие один квад тайлы разные? Здесь явно видно, что большую часть занимает самый нижний тайл.
Взвесив все за и против, я пришел к своей, достаточно специфичной, системе. Добавим новую сетку, сетку переходов. В ней мы можем хранить, к примеру, тип int. В таком случае у нас будет возможно записать для каждого квада тайлов 16 ID окружающих 4 тайлов с 16 вариантами перехода. Этого более чем достаточно. Нет, если кому-то нужно больше ID — пожалуйста, используйте long. Я решил, что мне хватит по 16 автотайлов на игровую локацию, остальные будут без авто-переходов.
Далее, нам нужен сет тайлов. Можно, конечно, использовать маску, но с сетом тайлов, согласитесь, при хорошем навыке (не у меня, нет), можно добиться очень и очень неплохой картинки.
Себе я сделал вот такой тестовый набор тайлов. На один тайл приходится 12 вариантов перехода, можно добавить ещё свои 4. Ещё я зарезервировал слоты для будущей вариации тайлов, как в WC3, но эта часть довольно лёгкая и описывать здесь я её не буду.
Переходим к части программирования. Для начала, опишем функции, которые будут определять нужную битовую маску для выбора корректного индекса текстуры. Сразу оговорюсь, я свойственен выбирать довольно нестандартные решения. Тут будет использоваться Java + LWJGL.
Эта функция будет создавать маску битов для данного квада. Бит 1 означает, что в данном углу тайла есть смежный ему тайл (таким образом, можно комбинировать разные тайлсеты одной высоты). Ах, да. Высота, про неё-то я и забыл. Конечно, нам надо будет определять для каждого тайла его высоту, чтобы знать что рисовать поверх, а что внизу. Это решается просто добавлением очевидной переменной.
public int getTransitionCornerFor(World world, int x, int y, int height) {
int corner = 0;
if (world.getTile(x-1, y).zOrder == height)
corner |= 0b0001;
if (world.getTile(x, y).zOrder == height)
corner |= 0b0010;
if (world.getTile(x, y-1).zOrder == height)
corner |= 0b0100;
if (world.getTile(x-1, y-1).zOrder == height)
corner |= 0b1000;
return corner;
}
Каждый бит означает свой угол. 1 бит — левый верхний угол, 2 — нижний левый, 3 — нижний правый, ну и 4 — верхний правый.
Теперь, касаемо, самого метода определения нужных индексов текстуры для переходов. Метод у меня получился громоздкий и некрасивый, ну, всё в силу моих навыков. Хотя специально для статьи я разбил его на несколько методов, дабы не создавать огромное количество отступов.
public void updateTransitionMap(World world, int x, int y) {
int w = 16, h = 16;
int[] temp = new int[4]; //создаем массив, который будет хранить нам 4 угла с 4 битами под ID и 4 битами под переход (т.е. 32 бита в целом для всего тайла)
for (int i = 0; i < 4; i++) //на самом деле мне просто было лень нормально разбираться с побитовыми операциями
temp[i] = 0;
if (tileID > 0) {
for (int i = 1; i <= tilesNum; i++) {
int corner = getTransitionCornerFor(world, x, y, i);
int c = 0;
if (corner > 0) {
c = setPointTransition(world, temp, x, y, corner, c, i); //сначала задаем маску для всех углов
if (c == 3)
c = setCornerTransition(world, temp, x, y, corner, c, i); //потом, если есть 3 смежных(!) угла, соединяем их в один большой
if (c == 2)
c = setEdgeTransition(world, temp, x, y, corner, c, i); //если есть 2 смежных(!) угла, соединяем их в сторону
}
}
}
}
А вот и сами методы:
public int setPointTransition(World world, int[] temp, int x, int y, int corner, int c, int i) {
for (int k = 0; k < 4; k++)
if ((corner >> k & 1) == 1) {
int idx = 8+k;
int storage = 0;
storage = (idx & 0xF) << 4 | (i & 0xF);
temp[k] = storage;
int t = 0;
for (int l = 0; l < 4; l++) {
t = (t << 8) | temp[l] & 0xFF;
}
world.setTransition(x, y, t);
c++;
}
return c;
}
Здесь всё просто. Пробегаемся по каждому углу, проверяем бит. Если он один — ставим индекс 8 + k, т.е. угол (выше я описывал номер для каждой стороны (NE, SE, SW, SE)). Далее костыльным методом через цикл обновляем нашу карту переходов.
Не забываем в конце отдавать обновленное число с. Спасибо Java, что в ней нету ни out, ни передачи простейших типов по ссылке.
Методы, соединяющие точки в углы и стороны:
public int setEdgeTransition(World world, int[] temp, int x, int y, int corner, int c, int i) {
for (int offset = 0; offset < 4; offset++) {
boolean isSide = true;
for (int k = 0; k < 2; k++) { //количество точек у стороны
if ((corner >> ((k + offset) % 4) & 1) != 1)
isSide = false;
else if (k == 1 && isSide) {
int idx = (offset+1)%4;
int storage = 0;
storage = (idx & 0xF) << 4 | (i & 0xF);
temp[offset] = storage;
int t = 0;
for (int l = 0; l < 4; l++) {
t = (t << 8) | temp[l] & 0xFF;
}
world.setTransition(x, y, t);
}
}
}
return c;
}
public int setCornerTransition(World world, int[] temp, int x, int y, int corner, int c, int i) {
for (int offset = 0; offset < 4; offset++) {
boolean isCorner = true;
for (int k = 0; k < 3; k++) { //количество точек у угла
if ((corner >> ((k + offset) % 4) & 1) != 1)
isCorner = false;
else if (k == 2 && isCorner) {
int idx = 4+offset;
int storage = 0;
storage = (idx & 0xF) << 4 | (i & 0xF);
temp[offset] = storage;
int t = 0;
for (int l = 0; l < 4; l++) {
t = (t << 8) | temp[l] & 0xFF;
}
world.setTransition(x, y, t);
}
}
}
return c;
}
Здесь абсолютно такой же принцип. Единственное отличие — стартовый номер индекса текстуры, чтобы нам взять нужный и ещё один цикл, который задает смещение, означающее с какой точки стартовать угол. Проверяется смежный угол (или сторона) против часовой стрелки, начинающийся с данной точки. Если хоть одна точка не является смежным тайлом — прерываемся, ни угла, ни стороны не получается.
Вот и всё, карта переходов у нас построена! На каждый тайл приходится по 5 бит. Один для хранения тайла (256 возможных вариаций) и по биту на каждый угол для хранения метаданных.
Осталось только отрендерить это дело. Я буду рассматривать старинный deprecated-метод через immediate-mode (планирую уйти на VBO, сейчас немножко надо разобраться со структурой и динамическим апдейтом VBO, а также отрисовкой лишь видимой его части).
Ну, тут нет ничего сложного:
public void renderTile(World world, int x, int y) {
int w = 16, h = 16;
int s = 0;
if (tileID > 0) {
for (int i = 0; i < 4; i++) {
int t = world.getTransition(x, y);
int src = ((t >> (3-i)*8) & 0xFF);
int idx = src >> 4 & 0xF;
int id = src & 0xF;
int u = (idx%8)*16, v = 16 + 16*(idx/8) + (id-1)*48,
u1 = u + w, v1 = v + h;
if (id != 0) {
GRenderEngine.drawTextureQuad(x*16, y*16, 128, 144, u, v, u1, v1); //не обращайте внимания на хардкод, всё равно будет переписан под VBO
}
}
}
}
Что мы делаем здесь? Ага, проходимся по каждым 8 битам и достаем 4 первых и 4 последних, для ID и перехода. Далее передаем параметры OpenGL, он уже распределяет отрисовку.
Результат:
(Да-да, LWJGL-канвас, встроенный в Swing).
Кажется, мы что-то забыли? Рисовать цельный кусок тайла, если 4 окружающие точки ему родны по высоте!
public void renderTile(World world, int x, int y) {
int w = 16, h = 16;
int s = 0;
if (tileID > 0) {
int c = 0;
for (int i = 0; i < 4; i++) {
int t = world.getTransition(x, y);
int src = ((t >> (3-i)*8) & 0xFF);
int idx = src >> 4 & 0xF;
int id = src & 0xF;
int u = (idx%8)*16, v = 16 + 16*(idx/8) + (id-1)*48,
u1 = u + w, v1 = v + h;
if (id != 0) {
if (id == tileID)
c++;
GRenderEngine.drawTextureQuad(x*16, y*16, 128, 144, u, v, u1, v1);
}
}
if (c == 4) {
GRenderEngine.drawTextureQuad(x*16, y*16, 128, 144, 0, 48*(tileID-1), 16, (tileID-1)*48+16);
}
}
}
Чего-то не хватает? Верно, нам надо решить как отрисовывать нижний тайл. Если честно, у меня это получилось решить почти случайно, но именно этот момент ещё требует доработки. Пока это можно считать прикрученным костылем, но на результат он не влияет.
Немножко изменим наш метод:
public void renderTile(World world, int x, int y) {
int w = 16, h = 16;
int s = 0;
if (tileID > 0) {
for (int i = 1; i <= tilesNum; i++) {
int corner = getTransitionCornerFor(world, x, y, i);
int c = 0;
if (corner > 0) {
for (int k = 0; k < 4; k++)
if ((corner >> k & 1) == 1) {
c++;
}
}
boolean flag = false;
int fill = getFillCornerFor(world, x, y, i);
if (fill > 0)
for (int k = 0; k < 4; k++)
if ((fill >> k & 1) == 1) {
c++;
if (k == 4 && c == 4)
flag = true;
}
if (c == 4) {
GRenderEngine.drawTextureQuad(x*16, y*16, 128, 144, 0, 48*(i-1), 16, (i-1)*48+16);
if (flag)
break;
}
}
for (int i = 0; i < 4; i++) {
int t = world.getTransition(x, y);
int src = ((t >> (3-i)*8) & 0xFF);
int idx = src >> 4 & 0xF;
int id = src & 0xF;
int u = (idx%8)*16, v = 16 + 16*(idx/8) + (id-1)*48,
u1 = u + w, v1 = v + h;
if (id != 0) {
GRenderEngine.drawTextureQuad(x*16, y*16, 128, 144, u, v, u1, v1);
}
}
}
}
Добавился ещё один метод. Он почти эквивалентен методу, который пишет биты смежных тайлов. Вот он:
public int getFillCornerFor(World world, int x, int y, int height) {
int corner = 0;
if (world.getTile(x-1, y).zOrder > height)
corner |= 0b0001;
if (world.getTile(x, y).zOrder > height)
corner |= 0b0010;
if (world.getTile(x, y-1).zOrder > height)
corner |= 0b0100;
if (world.getTile(x-1, y-1).zOrder > height)
corner |= 0b1000;
return corner;
}
Он определяет, все тайлы в округе, высота которых больше высота переданного тайла.
Т.е. мы перебираем все тайлы для данной клетки (естественно, перебирать стоит лишь автотайлы) и смотрим сколько тайлов находятся выше данного. Не забываем, что перед этим мы считаем количество точек, покрытых данным тайлом. Если количество точек данного тайла + сумма точек других тайлов перекрывающих данный == 4, то мы рисуем полный квад с данной текстуркой и прерываем цикл. Вот такие костыли.
Результат отличный:
Пожалуй, на этом всё.
P.S. Чем этот способ лучше того? Ну, WC3 наглядно демонстрирует, что с такой системой можно добиться ландшафта невообразимой красоты. Лично мне кажется, что она более гибкая, что, правда, создает некоторые сложности её реализации. И да, она всё же требует некоторой, как я сказал выше, доработки.
Автор: ZnW
