Карта
Я создаю RPG на основе плитки с Javascript, используя карты высоты шума perlin, а затем назначаю тип плитки в зависимости от высоты шума.
Карты выглядят примерно так (в мини-карте).
У меня есть довольно простой алгоритм, который извлекает значение цвета из каждого пикселя на изображении и преобразует его в целое число (0-5) в зависимости от его положения между (0-255), которое соответствует плитке в словаре плитки. Этот массив 200x200 затем передается клиенту.
Затем двигатель определяет плитки из значений в массиве и рисует их на холсте. Итак, я заканчиваю интересными мирами, которые имеют реалистичные функции: горы, моря и т.д.
Теперь следующее, что я хотел сделать, это применить какой-то алгоритм смешивания, который заставил бы плитки плавно вписаться в своих соседей, если сосед не относится к одному типу. Пример карты выше - это то, что игрок видит в своей мини-карте. На экране отображаются рендеринг версии раздела, отмеченного белым прямоугольником; где плитки отображаются с их изображениями, а не как одиночные цветные пиксели.
Это пример того, что пользователь увидит на карте, но это не то же место, что показано выше в окне просмотра!
В этом представлении я хочу, чтобы переход произошел.
Алгоритм
Я придумал простой алгоритм, который будет пересекать карту в окне просмотра и отображать другое изображение поверх каждой плитки, обеспечивая ее рядом с плиткой другого типа. (Не меняя карту! Просто отрисовка дополнительных изображений.) Идея алгоритма состояла в том, чтобы профилировать существующих соседей плитки:
Это примерный сценарий того, что движок может отображать, при этом текущий фрагмент будет тем, который помечен X.
Создается массив 3x3, и значения вокруг него считываются. Таким образом, для этого примера будет выглядеть массив.
[
[1,2,2]
[1,2,2]
[1,1,2]
];
Моя идея заключалась в том, чтобы выработать ряд случаев для возможных конфигураций плитки. На очень простом уровне:
if(profile[0][1] != profile[1][1]){
//draw a tile which is half sand and half transparent
//Over the current tile -> profile[1][1]
...
}
Что дает этот результат:
Работает как переход от [0][1] до [1][1], но не от [1][1] до [2][1], где сохраняется жесткий край. Поэтому я решил, что в этом случае нужно будет использовать угловую плитку. Я создал два листа спрайтов 3x3, которые, как я думал, будут содержать все возможные комбинации плиток, которые могут понадобиться. Затем я воспроизвел это для всех плиток, которые есть в игре (белые области прозрачны). Это заканчивается 16 плитами для каждого типа плитки (центральные плитки на каждом спрайте не используются.)
Идеальный результат
Итак, с этими новыми фрагментами и правильным алгоритмом примерный раздел будет выглядеть так:
Каждая попытка, которую я сделал, потерпела неудачу, хотя в алгоритме всегда есть некоторые недостатки, и шаблоны в конечном итоге странны. Кажется, я не могу все правильно рассмотреть, и в целом это кажется плохим способом сделать это.
Решение?
Итак, если кто-то может предоставить альтернативное решение о том, как я могу создать этот эффект или какое направление для написания алгоритма профилирования, тогда я был бы очень благодарен!
