В этой статье я пробегусь по основам создания кнопок диалога с иконками. Конечный результат будет выглядеть примерно так:

Демонстрационная карта, созданная в ходе написания этой статьи, прилеплена в конце.

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

Два самых важных инструмента в создании диалогов - это константы и записи (Constants & Records)

Сейчас я расскажу, почему именно они.

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

В коде диалога никогда не должно быть чисел. Должны быть только константы и вычисленные переменные. Есть только три числа, которые могут быть в каком нибудь элементе кода.

В любом другом случае, Вы должны использовать константу или переменную.

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

Создайте новую карту и сразу откройте редактор триггеров (F6).

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

В этой папке создайте новую целочисленную переменную и дайте её название "cDialog Border". Пометьте галочку "Constant" и установите её начальное значение 40.

Граница Диалога (Dialog Border) это расстояние между краем окна и ближайшими расположенными элементами, как видно ниже:

1. cDialog Border = 40
2. cButton Size = 84
3. cIcon Size = 76
4. cButton Gap = 4

Создайте вышеуказанные константы. В результате этого Ваша карта будет выглядеть следующим образом:

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

    cDialog Extra = (cDialog Border * 2) <Integer>

Нам так же надо знать второе значение, оно высчитывается немногим сложнее. Мы хотим, чтобы центр нашей иконки (cIcon Size = 76) был в одной точке с центром кнопки (cButton Size = 84). Его значение должно быть равным 4, но нам надо вычислить его так, чтобы при изменении одной или обеих констант оно оставалось верным.
Создайте еще одну переменную, CButton Inlay и задайте её начальное значение следующим образом:

(cButton Size / 2) - (cIcon Size / 2) - не самая точная формула, но для четных чисел она подходит отлично.
Ваша карта станет выглядеть вот так:

Надеюсь, что вы поняли, что такое константы и как их надо использовать при создании диалога.

Я собираюсь использовать записи для хранения данных наших кнопок. Если вы не знакомы с записями, то я не смогу вот так объяснить что это такое. На мой взгляд, намного проще понять это на примере. Просто следуйте статье и в конце Вы поймёте, что это такое. Могу лишь сказать, что это аналог структуры.
Итак, у нас есть X кнопок. На рисунке показаны 6, но на самом деле не имеет значения, сколько их. Мы хотим где нибудь сохранить немного информации о каждой кнопке так, чтобы потом её можно было использовать для отображения этой кнопки. В данном случае мы хотим сохранить следующее:

• Типы юнитов для их создания при нажатии
• Картинку каждого юнита на соответствующую кнопку
• Текст, который будет показываться в качестве подсказки

Давайте сделаем это. Для начала создадим папку "Unit Button" в папке нашего диалога. В этой папке создайте запись (Record) с названием "Unit Button Record".

Справа, добавьте 3 переменные:

• Spawn Unit, тип: Unit Type
• Icon, тип: File - Image
• Tooltip, тип: Text

Создание записи на самом деле ничего напрямую не делает, оно просто объявляет новый тип, который может быть использован в дальнейшем. Преимущество записей в том, что они могут быть использованы в качестве массивов.
Cоздайте новую переменную внутри нашей папки Unit Button, и назовите его "Unit Buttons". Её типом должен быть Record - Unit Button Record. Это должен быть массив, для начала на 10 элементов. Это число можно изменить позже при необходимости.

Возможно, Вы заметили, что не можете установить начальное значение.

Инициализация каждой записи проходит в два этапа. Для начала мы добавим действие под названием "Add Unit Button". Оно будет работать с тремя параметрами - "Spawn Unit", "Icon", и "Tooltip", то есть со всеми данными, которые указаны в нашей записи. Оно будет заполнять каждый следующий слот в массиве с этими значениями. Также оно будет сдвигать указатель массива, чтобы у нас была возможность отслеживать следующий свободный элемент массива. Затем мы создадим ещё одно определяющее действие под названием Add Unit Button. Для каждой кнопки оно будет вызываться один раз.

Ах да, чуть не забыл. Нам понадобится создать переменную, которая, собственно, и будет считать количество кнопок, назовём её "nUnit Buttons".

    nUnit Buttons = 0

Теперь можно и создать действие добавления кнопки в папку с нашим диалогом. Оно будет совсем небольшим:

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

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

Вообще совсем не обязательно создавать именно 6 кнопок. Я выбрал это число просто для того, чтобы было два ряда и не было совсем уж много кода. Если вам понадобится иметь 10 кнопок - делайте 10, 8 - делайте 8. Однако стоит помнить, что в данном случае в массиве записей только 10 элементов, и если вы хотите больше кнопок, то это число надо увеличить.

Кстати. Указанный тут способ объявления кнопок является самым эффективным и удобным, как минимум из за того, что
кнопки будут отображаться в том порядке, в котором их инициализировали. То есть, чтобы поменять их местами, понадобится только поменять местами строчки в коде.