GrimmIronwill

Если резюмировать информацию по приложению то, в первую очередь надо рассматривать это как инструмент облегчения игр для мастеров. Несомненно, воображение и кубы могут создать много интересных ситуаций.
Но лично я, как мастер - давно нуждался в автоматизации многих фоновых процессов для своей компании песочницы.

Узнать подробнее о ходе разработки можно в группе ВК, прочие ссылки находятся там же:
https://vk.com/club214480055

Программа решает такие проблемы как:
• Отслеживание любых объектов на карте. С возможностью делать на них заметки.
• Симуляция живой экономики (частично реализовано)
• Симуляция жизни фракций (в разработке)
• Создание рандомных событий на основе жизни мира, а не того как ляжет куб (задача мастера).
• Добавление эффекта погружения в ваш мир за счёт описания тех процессов что происходят в нём на фоне.
И многое другое.

Инструментарий позволит:
• Загружать любое изображение в качестве вашей карты (готово).
• Создавать свои собственные фракции (в разработке).
• Создавать свои ресурсы и цепочки производств (готово).
• Создавать отряды и города, караваны и лагеря бандитов(готово).
• Создавать свои собственные типы юнитов для отрядов и городов(готово).
• Использовать любые изображения в качестве иконок для всего перечисленного выше(готово).
• Создавать автоматически или вручную дороги для отрядов или между городами(готово).
• Использовать и сохранять шаблоны уже готовых миров, созданных другими пользователями(готово).
И многое, многое другое.

Для реализации данной игровой механики придётся задействовать "Холсты" и использовать один единственный объект: тот, на котором должен выводиться данный текст.
Общий алгоритм прост: на вход мы получаем массив из строк, его преобразуем в одну большую строку.
Высчитав общую высоту этой строки, с учётом возможных переносов, создаём холст, шириной со спрайт исходного объекта и высотой нашей строки. Затем наносим на него весь указанный текст.
Ниже представлен код события "Create".

Таким образом получив один большой холст, необходимо сделать отрисовку лишь той части этого холста, что равняется высоте спрайта, за исключением обводки.
Для этого нам нужно использовать координату Y относительно этого холста, где ноль - верх, чем больше - тем ниже смещается рисующаяся часть холста.

При указании высоты холста я вычитаю четыре пикселя из высоты спрайта. Эти четыре пикселя складываются из двух пикселей обводки сверху и снизу.
Соответственно, если ваш спрайт имеет обводку более тонкую или более широкую - складываете количество пикселей обводки.
Тоже самое касается и отрисовки холста - прибавление двух пикселей нужно, чтобы отрисовка происходила внутри обводки, а не по ней.

Ниже представлен код события Draw GUI. Событие Draw должно быть пустым.

Остаётся сделать только непосредственно прокрутку текста.
Прокрутка текста реализована изменением переменной yy, значение которой должно держаться в промежутке от 0 до (высота текста - высота спрайта), чтобы игрок не мог прокручивать бесконечно вверх или вниз, максимум - мог увидеть самую нижнюю строку текста полностью. Происходит это в событии "Step" соответственно.

И небольшая иллюстрация того, как это всё дело просчитывается.

Этот код можно доработать при необходимости под ваши нужды, в том числе добавить различных удобств, вроде скроллбара.

Ссылка на скачивание проекта:
https://drive.google.com/file/d/1aJUFs81zFuVEpBIynM504KiBAtn...

Теория.
Что такое GUI?

GUI - графический пользовательский интерфейс, позволяющий взаимодействовать с программой (игрой) через графические элементы: иконки, меню, кнопки и т.п.

В GMS имеется два слоя, с которыми мы можем работать.
Первый зовётся application_surface. Это холст, на который происходит отрисовка любых форм в событиях draw, draw begin и draw end.
Второй - слой GUI, который рисуется выше, чем application_surface, перекрывая его. Отрисовка на него происходит, соответственно, в событиях draw GUI, draw GUI begin и draw GUI end.

Слой GUI по умолчанию равен размеру application_surface, который равен размерам комнаты. При этом, GUI автоматически подстраивается под размеры окна игры таким образом, чтобы вмещаться в него полностью.

"Глубина" (depth) работает точно также, как и на стандартном слое отрисовки. Чем меньше значение - тем "выше" рисуется объект. Если у объектов глубина одинаковая, то поверх будет рисоваться последний добавленный.

Практика.
Как включить отрисовку GUI?

Здесь всё просто.

Шаг первый.
У объекта создаём событие Draw (Рисовать) и внутри пишем одну команду:

exit;

Указанная функция говорит компилятору прекратить выполнение кода в данном событии, что немного оптимизирует игру.
Шаг второй.
Создаём событие Draw GUI (Рисовать GUI) и внутри пишем

draw_self()

Либо любую другую команду отрисовки, которую хотите.

Как удобнее использовать GUI?

Располагать элементы интерфейса проще всего вручную. Самый простой способ - подстроить размер комнаты под предполагаемый размер GUI (либо настроить сетку под данные размеры) и расположить объекты там, где вам нравится. Про размер GUI будет чуть ниже.

Так как слой глубины (depth) на слое GUI работает точно также, как и на слое комнаты, имейте ввиду, что:
- При расположении объектов на одном и том же слое, перекрывать их будет тот объект, что поставлен последним. Настроить порядок создания объектов вы можете вручную. Для этого в комнате выделите слой с объектами и в инспекторе прокрутите до вкладки Instances. Все изменения будут отображаться в реальном времени, что удобно.
- Глубину можно настроить вручную в любом событии, кроме события отрисовки. Для этого есть переменная depth; помните, что чем меньше значение - тем выше рисуется объект.

К сожалению, вывести слой GUI на экран на подобие комнаты на данный момент нельзя и иных удобных способов работы с GUI нет. Впрочем, вы также можете работать с ним через код, но это не так наглядно и занимает больше времени.

Зачем настраивать слой GUI и как?

Слой GUI сделан таким образом, чтобы всегда вмещаться в размер дисплея/игрового окна или application surface. Как следствие, появляется масштабирование тех объектов, которые мы рисуем на данном слое, чтобы они соответствовали заданным параметрам.

Объекты, которые мы рисуем на слое GUI, по умолчанию будут масштабироваться в зависимости от размеров application_surface. Чтобы этого избежать нужно установить размер GUI вручную.
Для этого существует команда:

display_set_gui_size(широта, высота);

При этом стоит помнить, что GUI продолжает подстраиваться под размер окна. Соответственно, нам также нужно зафиксировать размер окна. Для этого существуют следующие команды:

window_set_size(широта, высота), либо включить полноэкранный режим: window_set_fullscreen(true);

После указанных действий картинки на экране и в редакторе будут одинаковыми. Главное помните, что масштабирование к размеру окна происходит в любом случае.
Дальше работать предстоит методом подбора. Я обычно выставляю размер GUI (1920x1080) и расставляю все элементы относительно указанных значений.

Размер масштабирования вы также можете настроить. Для этого существует команда:

display_set_gui_maximise(Масштабирование по X, масштабирование по Y, смещение по оси X, смещение по оси Y).

Простой вызов функции без аргументов приведёт к тому, что масштабирование будет вестись от позиции (0, 0) игрового окна с такой шириной и высотой, чтобы покрыть всё окно.
Такой способ может быть использован заместо display_set_gui_size в том случае, если размер окна и размер GUI, под который вы всё расставляли, одинаков. В ином случае лучше всё же воспользоваться display_set_gui_size();

Если указать (-1, -1), то произойдёт сброс до стандартных настроек. Т.Е. отрисовка будет вестись от позиции (0, 0) вашего application_surface и будет пытаться показать всю его область.
Другие значения приведут к масштабированию интерфейса в соответствии с заданными параметрами. (2, 2) = 200% по X и Y от размера игрового окна.

Как взаимодействовать с GUI?

Так как GUI рисуется на отдельном слое, нам понадобится использовать встроенные в движок функции, чтобы получить координаты мыши относительно этого слоя. Эти функции:

device_mouse_x_to_gui(0);
device_mouse_y_to_gui(0);

Соответственно, первая переводит координату X мыши в относительную к GUI, вторая - координату Y.
Так как это функции, рекомендую назначать в начале шага их локальным переменным, чтобы избежать постоянных перерасчётов.
Дальше работа с ними происходит ровно также, как и с (mouse_x / mouse_y).

Как изменить курсор правильно?

Вопрос, который возник в комментариях. Подумал, что кому-то ещё может пригодиться.
Для изменения курсора существует переменная cursor_sprite, назначение спрайта которой изменит спрайт курсора. Пример ниже.

cursor_sprite = sprCursor;

Также, если вы хотите скрыть "системный курсор", то для этого существует команда:

window_set_cursor(cr_none)

Со списком всех возможных курсоров можно ознакомиться по ссылке ниже:
https://manual.yoyogames.com/GameMaker_Language/GML_Referenc...

На этом предлагаю закончить, так как непосредственно о рисовании GUI выше рассказано всё.
Надеюсь, что я смог ответить на все вопросы и знания выше помогут вам с разработкой игр в дальнейшем.
Добра!

Стоит сказать, что я не придумал ничего нового. Для этой работы я использовал данный сайт, знакомый всем, кто интересовался темой.
Там подробно разобрано, что такое гексы и как с ними работать. Однако, чтобы всё с данного сайта работало как нужно, мне пришлось столкнуться с некоторыми трудностями.

1. Не используйте спрайты гексов.
Причина этого кроется в "не идеальности" гексовых спрайтов как таковых. Различия в один пиксель или пару градусов рушат всё, в том числе - формулы, которые приведены в источнике.

2. Используйте сурфейсы (холсты).
Иные способы отрисовки гексов дадут многократную нагрузку на ваш ПК. Что печально, нагрузку ненужную, потому что всё, что нам нужно - мы можем быстро просчитать при помощи пары формул.
Если ранее вы не работали с сурфейсами, то сейчас - самое время. С редактором карт это достаточно просто, но даёт понимание о том, как они работают.

Хоть в коде это есть, но здесь всё же опишу.
Сурфейс - это холст. Как и на любой холст, мы можем нанести на него что угодно: любой спрайт, любую фигуру. Всё, что нам будет нужно затем - это данный холст нарисовать.
Заполнять холсты можно в любых событиях, в том числе в событии создания. И, что важнее, дальнейшая отрисовка данного холста будет заметно менее "тяжёлой" для игрового движка и процессора, так как холст не обновляется каждый кадр. Его можно обновить только ручками.
По сути, мы получаем статичную картинку, которую рисуем на экран.

3. Учите геометрию.
Было бы смешно, если бы не было так грустно. После того, как мы нарисовали границы гекса - нам нужно его чем-то заполнить. На этом моменте со всех ног влетает геометрия.
Смотрим пункт выше и понимаем, что рисовать условную землю в виде гекса - затея так себе. Опять же, не совпадут углы - и появятся "проплешины" внутри нашего гекса.
Я этот момент решил с помощью прямоугольных спрайтов, который масштабируется в размерах и обрезаются под конкретный гекс.

В остальном, редактор карт - штука незатейливая и в своей реализации достаточно простая, но, несмотря на это, имеющая некоторые заковырки, с которыми советую покопаться самому, чтобы слегка поднять свой личный скилл.

Ссылка на исходники.
https://disk.yandex.ru/d/_OSgSS-huMtgzg

Затем мы создаём спрайты под каждый слой тайлов.
Создаём тайлсет, впихиваем в него спрайт и немножко настраиваем. Затем - назначаем тайлсет - слою тайлов.
Вот так это по итогу будет выглядеть.

Создаём сетку.

Для неё у меня отдельный объект - oGrid. Размещаем его в Create и пишем следующий код:

var width = room_width div CellWidth;
var height = room_height div CellHeight;
global.grid = ds_grid_create(width, height);
var lay_id_ground = layer_get_id("GroundTiles");
var map_id_ground = layer_tilemap_get_id(lay_id_ground);
var lay_id_shadows = layer_get_id("ShadowTiles");
var map_id_shadows = layer_tilemap_get_id(lay_id_shadows);
for (var yy = 0; yy < height; ++yy) {
for (var xx = 0; xx < width; ++xx) {
ds_grid_set(global.grid, xx, yy, 1);
tilemap_set(map_id_ground, 1, xx, yy); tilemap_set(map_id_shadows, 1, xx, yy);
}}

Ссылочка на pastebin для удобного копирования:
https://pastebin.com/1cLfwHGg

Далее - создаём объект, который будет "следить". У меня это oPlayer. В Create ему пока объявим только одну переменную:
lineOfSight = [];
И поместим его в комнату. Проверьте результат. Ваша комната должна состоять из тайлов с обоих слоёв: земли и тени.

Алгоритмы.

Переходим ко вкусной части.

Для построения линии видимости нам с вами понадобится алгоритм, который будет рассчитывать, какие точки в заданном диапазоне нам нужно "закрасить" (или, в нашем случае, наоборот очистить).
Мы будем использовать алгоритм Брезенхема.
Вы можете более подробно ознакомиться с историей алгоритма в интернете.
Вариация данного алгоритма, которую мы будем использовать, представлена ниже. Можете смело копировать скрипт и вставлять.
https://pastebin.com/vfRMaXxp

x1, y1, x2, y2 - это точки начала и конца соответственно. В нашем случае, x1 и y1 мы получаем путём деления без остатка (div) x и y объекта на ширину / высоту клетки.
x2, y2 - наша конечная точка, которую получаем также путём деления без остатка уже mouse_x и mouse_y также на ширину / высоту клетки.
grid - наша сетка. Туда передаём global.grid.

Проверяем работоспособность.

Для этого перейдём в oPlayer, создадим у него событие отрисовки (draw) и напишем следующий код:
https://pastebin.com/Uz5RX41S
По сути всё просто.
Сначала запоминаем старые значения нашей линии видимости, затем строим новую линию и если новая линия не совпадает со старой - то "закрашиваем" старую тенями, а новую - наоборот, очищаем от них.

Единственный минус алгоритма, который я заметил - он может свободно обходить диагональные препятствия. Но, в целом, это не так критично и можно поправить добавлением чуть большего числа проверок.

Ниже - гифка с примером того, как это работает. Серое - стены. Клетки со стоимостью 0 в ds_grid.

Следующий наш шаг - это построить вокруг нашего игрока круг (или что-то его напоминающее) и попытаться построить линию видимости до каждой точки этого круга.

Скрипт для построения круга.

Алгоритм, взятый за основу, зовётся midpoint circle. Опять же, можете почитать про него в интернете. Самое для нас важное - он позволяет строить круги любого неотрицательного радиуса. Отрицательные значения приводят к казусам...
Ссылка:
https://pastebin.com/aG2q8S0L

Как это выглядит:

Всё, что нам осталось - это переписать код, который был у нас до этого, а именно:
- Удалить всё, что мы написали, из события отрисовки и перенести в пользовательское событие (или скрипт). Удобства ради, поскольку изменяем мы тайлы, а делать это можно откуда угодно.
- Запоминать не последнюю построенную линию, а наше предыдущее местоположение и точки круга. При изменении местоположения - изменять закрашенные точки.

Ссылка на реализацию:
https://pastebin.com/SXTFNhWR
Вызывается каждый раз, когда меняем своё местоположение или ставимся в первый раз. Radius равен четырём по умолчанию, circleOfSight = []; оба объявляются в Create.
Данная реализация хорошо работает с радиусом до четырёх. Но стоит увеличить радиус - как возникают артефакты. Они продемонстрированы ниже.

Из-за чего они возникают? Всё очень просто. Дело в самом алгоритме Брезенхема. Он просто не проходится по данным точкам в текущем своём виде.

Решить это можно с помощью сглаживания нашей линии. Таким образом, нам придётся обрабатывать несколько больше точек, чем до этого, но так мы сможем избавиться от указанных артефактов. Второй вариант, более радикальный, заключается в том, чтобы делать всю область изначально видимой, а уже затем закрашивать недоступные нам клетки.

На самом деле, здесь существует множество алгоритмов, которые помогут добиться такого же результата. Я предлагаю использовать немного модифицированный алгоритм Брезенхема. Вам же советую также ознакомиться с Алгоритмом Ву и Алгоритмом DDA.
Если вы делаете игры со своей собственной сеткой, то знать алгоритмы растеризации (хотя бы их названия и примерно что они делают) крайне полезно, ибо они здесь применяются очень активно.

Ссылка на модифицированный алгоритм Брезенхема:

https://pastebin.com/q24bVPbR

Всё, что делает данная модификация - дополнительно проверяет рядом стоящие "пиксели" (клетки в нашем случае) и закрашивает их при необходимости.

GIF с итогом работы.

Вот как-то так, ребята. Нового ничего не придумал, всё честно понатырено с интернетов и адаптировано. Если кому-нибудь это пригодится - буду рад.
Ссылка на источник, чтобы можно было самому всё потыкать:
https://disk.yandex.ru/d/puHuKcDoMQU5nQ

По итогу, мы получили несколько алгоритмов для построения линий (различной ширины), а также алгоритм для радиуса видимости.

UPD:// Есть проблемы с ФПС, пока думаю, как их решить. Возникают они из-за частого обращения к ds_grid (полагаю), либо из-за копирования массивов. Пока разбираюсь, позже отпишу в комментарии, если решу проблему.