Первоначально я опубликовал это на своем веб-сайте 7 апреля 2017 года. Я также опубликовал это на Dev.to 26.11.18.

Если вы знакомы с roguelike (пошаговыми поисками подземелий), такими как Nethack, то вы, несомненно, знакомы с идеей отображения элементов игры в виде символов ASCII.

Здесь я объясню, как я использую аналогичный подход для создания макетов комнат в игре, над которой я работаю, и как я использую Phaser (игровой движок JS) для визуализации комнат на основе моих макетов.

Следующий массив строк представляет одну комнату:

«E» представляет врага, а «p» представляет собой неподвижный блок, который можно использовать как платформу или стену. Дефис представляет собой пустое пространство просто потому, что мне его легче читать, чем пробелы, хотя я не считаю тире, чтобы найти какое-либо расстояние.

Закомментированные числа сверху и справа обозначают столбцы и строки соответственно; Я разделил холст шириной 800 пикселей и высотой 600 пикселей на квадраты размером 25 на 19 по 32 пикселя.

Как и когда оформляется комната

1. Игрок сталкивается с краем мира (канвасом)

2. X-позиция игрока затем изменяется на положение края, противоположного столкновению (столкновение с правым краем, игрок перемещается в крайнее левое положение; столкновение с левым краем, игрок перемещается в крайнее правое положение на холсте); это создает впечатление входа в новую комнату

3. Затем комната очищается с помощью метода Phaser `sprite.kill()`

4. Переменное целое число затем увеличивается или уменьшается на 1 в зависимости от края столкновения (правое, +1; левое, -1), и это целое число затем используется в качестве индекса нашей комнаты в нашем массиве уровней.
— Итак, если индекс нашей текущей комнаты равен 0 (первая комната в массиве уровней), и игрок сталкивается с правым краем холста, наше целое число увеличивается до 1, и мы визуализируем комнату, индекс которой равен 1 (наша вторая комната в массиве уровней). массив уровней)

5. Получив нужную нам комнату по индексу, мы проверяем каждую строку в массиве комнат; каждую из этих строк можно рассматривать как ряд вещей, которые можно отобразить на холсте сверху вниз.

6. Для каждой строки (строки) в массиве комнат мы проверяем каждый символ по его индексу, используя `String.charAt()`.

7. С помощью оператора switch символ может быть сопоставлен с регистром; если и после совпадения мы вызовем метод Phaser `group.create()` для визуализации совпавшего спрайта или изображения.

Таким образом, используя структуру комнаты выше, `level1[0][8].charAt(4)` будет соответствовать регистру `p` в нашем операторе switch:
— 0 — это индекс комнаты (это показана только комната, но обычно их может быть несколько), 8 — это индекс строки, а 4-й символ 8-й строки — это «p».

Функция рендеринга комнаты (сокращенно)

(Вызывается при столкновении.)

Эта функция рендеринга комнаты в настоящее время работает только с одним уровнем, но должна масштабироваться для размещения нескольких уровней и работать одинаково, если не идентично.

Система комнат работает, как описано в псевдокоде ниже, где каждый «столбец» фактически представляет один символ в строке: