Gamedev + Урок

Привет! Сегодня разберёмся, что такое массивы и структуры данных. Создадим сетку комнаты, научимся размещать объекты по этой сетке.

P.S. Передаю привет тому человеку, который ставит минусы на всё, что я пишу. Счастья тебе, здоровья.

Ссылки на предыдущие гайды:

Первый гайд

Второй гайд

Третий гайд

Сегодня мы поговорим о следующем:

- Что такое массивы и для чего они нужны? Что такое структуры данных?

- Какие виды структур данных существуют в GMS? Их особенности.
- Реализуем сетку карты.

Что такое массивы и для чего они нужны?

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

Индекс - это порядковый номер элемента в массиве.

Важно знать:

1. Индексы в массивах начинаются с нуля.

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

2.1. Массив называется одномерным, если в него не вложены другие массивы. Если в массив вложен другой массив, то это уже двумерный массив. Если в массиве есть массив с массивом - трёхмерный. И так далее.

Массив - структура данных. Что такое структура данных?
Структура данных - это "контейнер", который хранит данные в определённом формате. Соответственно, массив - один форматов хранения данных.

Какие виды структур данных существуют в GMS? Их особенности.

Первый структура данных, которую мы разберём называется Array (массив). Его можно создать несколькими способами:

1.array = array_create(10, noone)
2. array = [1, 2, 3, 4] // внутри пишем любые свои значения
3.
array[0] = 1
array[1] = 2

И так далее. Также можно объявить сколько угодно мерный массив:

array[0][0][0][0] = 1.

Такие массивы преспокойно встраиваются в сохранение стандартными средствами GMS. Также здесь в автономном режиме работает "сборщик мусора". И это важно, поскольку в структурах данных (приписка DS) этого нет. Соответственно, их придётся удалять вручную.

Structs или структуры.

По сути, тот же массив, но вместо индексов - у нас именованные значения. Структуры используются для упорядоченного хранения информации. Пример объявления структуры из мануала:

// Create event
mystruct =
{
pos_x : x,
pos_y : y,
count : 1000
};
// Clean Up event
delete mystruct;

Таким образом получается, что левое значение у нас выступает в качестве хранилища для какого-то значения, которое будет записано справа через двоеточие.

Обращение к struct для вычленения из него данных похоже на таковое для объектов. Нам нужно назвать структуру, а затем через точку - нужную нам "переменную".

show_debug_message(mystruct.pos_x)

С-но, в каждом значении структуры можно хранить другое значение. Напоминает HTML-код.

mystruct =
{
a :
{
aa : "Example"
},
b :
{
bb : "Another"
},
};

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

show_debug_message(mystruct.a.aa)

Также для простоты к структуре можно обращаться через with

with(mystruct)
{
a += other.x;
}

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

// Функция-конструктор.
function Vector2(_x, _y) constructor
{
x = _x;
y = _y;
static Add = function(_vec2)
{
x += _vec2.x;
y += _vec2.y;
}
}
// создаем новую структуру
v2 = new Vector2(10, 10);

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

DS Grids или сетки.

Формально - это двумерный список. Позволяет, как ни странно, создавать сетку и назначать каждой клетке какое-либо числовое значение.

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

Как создать:

переменная = ds_grid_create(ширина в клетках, высота в клетках)

DS Lists или списки.

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

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

переменная = ds_list_create();
Вставить новое значение:
ds_list_add(переменная, значение)

DS Maps или словари.

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

переменная = ds_map_create()
Вставить новое значение:
ds_map_add(переменная, ключ, значение)

Мануал рекомендует использовать вместо DS Maps - структуры. Собственно, с ними нам тоже придётся поработать.

DS Queues, DS Priority Queues, DS Stacks

Всё это - "очереди", только по разному работающие. Разберём сначала Stacks и Queues.

Stacks это структура типа LIFO (last-in-first-out / последним пришёл - первым ушёл). Как и со списками, мы можем "вычленять" последние значения из стаков с помощь команды pop. Особенность LIFO в том, что в таком случае мы получим последнее значение, которое загружали в список.

С Queue ситуация обратная. Там используется FIFO (first-in-first-out / первым пришел - первым ушёл). То есть, забирая значение из queue (очередь), мы получим первое значение, которое вставили.

Важная оговорка. pop - берёт значение из массива, при этом удаляя его из него.

Priority Queue или приоритетная очередь - это та же очередь, но в которой каждое значение имеет свой "вес" - приоритет, что влияет на расположение данных в структуре и позволяет отбирать, скажем, наиболее дешёвые пути. Как говорит мануал, полезно для создания таблиц лидеров или информационных списков. Мы же будем это использовать для написания алгоритма поиска путей А* (A star, А звездочка).

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

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

1. У объекта oGameManager пропишем две дополнительные макро переменные, которые будут хранить ширину и высоту одной клетки.

#macro CellWidth 32

#macro CellHeight 32

2. Создадим объект oGrid, который расположим в нашей основной комнате.

3. У этого объекта создадим событие Create, где будем создавать нашу сетку.

3.1. Для наглядности, создадим сетку с помощью команды mp_grid_create
mp в данном случае - это "motion planning" - планирование движения. Система, которая позволяет создать сетку комнаты и сразу же по ней создавать пути, используя встроенные алгоритмы. Они не дают всего необходимого функционала, поэтому этот пункт выполняем исключительно для наглядности.

global.grid = mp_grid_create(0, 0, ceil(room_width / CellWidth), ceil(room_height / CellHeight), CellWidth, CellHeight)

3.1.1. Перейдём в событие Draw, где отрисуем сетку.

draw_set_alpha(0.1)
mp_grid_draw(global.grid)
draw_set_alpha(1)

3.1.2. Зайдём в игру и посмотрим, что получилось.

Как видно, у нас получилась квадратная сетка. Используя функции mp_grid_* мы можем закрашивать нашу сетку, делая определённые квадраты непроходимыми. Но мы не можем назначать таким клеткам свою стоимость.
Иными словами, если будет два одинаковых по длине пути, но один через условные зыбучие пески, а второй по асфальту, то получим 50/50, что персонаж выберет медленный и потенциально опасный путь, просто потому что мы не можем указать, какой из путей будет приоритетнее.

Подробнее о том, когда и какие функции поиска путей использовать, мы будем говорить в следующем гайде. Продолжим.

3.2. Удаляем или комментируем то, что мы написали. Сейчас будем работать со структурами данных.
3.2.1. Создаём сетку через ds_grid_create в событии create

var cells_x = ceil(room_width / CellWidth)
var cells_y = ceil(room_height / CellHeight)
global.grid = ds_grid_create(cells_x, cells_y)

Ок. По сути, сетка готова. Теперь по ней мы можем создавать объекты. Давайте же заполним всю нашу комнату oDirt, а дальше уже будем разбираться.
3.2.2. Всё там же в Create нам нужно пройтись циклом по осям x, y, создавая объект oDirt по указанным координатам. Затем мы передадим получившиеся координаты, в клетках, в переменные внутри объектов, для удобства.

for (var _y = 0; _y < cells_y; ++_y)

{

for (var _x = 0; _x < cells_x; ++_x)

{

ds_grid_set(global.grid, c, u, 0) // 0 - это стоимость клетки. Ноль - значит непроходима.

var inst = instance_create_layer(_x * CellWidth + 16, _y * CellHeight + 16, "Instances", oDirt)

inst.coordx = _x

inst.coordy = _y

}

}

if instance_position(mouse_x, mouse_y, oObject)
{
var inst = instance_position(mouse_x, mouse_y, oObject)
scrOutlinedText(dmxg + 10, dmyg + 10, c_white, c_black, string(inst.coordx) + " " + string(inst.coordy), depth, fontArialRusSmall, fa_left, fa_top)
}

Работает! Впрочем, это только первая часть того, что нам нужно, не так ли? Помимо создания карты, мы должны иметь возможность располагать объекты самостоятельно, удалять их при необходимости. Да и с расположением земли не всё так гладко, как хотелось бы. Мы ведь совсем не добавили фон!

Начнём с конца, ибо это, на самом-то деле, достаточно просто.
У нас с вами есть два пути.
1. Мы создаём слой для спрайтов, на котором у нас будут спрайты фона.
2. Мы создаём для каждого нашего объекта "переднего плана" дубликат для заднего фона. По сути, увеличиваем количество объектов в комнате в два раза, соответственно увеличивая и нагрузку.

Работать мы будем с первым вариантом по той причине, что он будет работать быстрее, а также предоставляет нам весь необходимый функционал, потому и смысла во втором варианте нет.

Первый вариант, несмотря на преимущество в скорости работы, имеет существенный минус. Мы не сможем обращаться к спрайтам по их координатам, да и в целом будем сильно ограничены в работе с ними. Придётся хранить ID каждого отрисованного нами спрайта. Для этого нам придётся создать вторую переменную, которая будет хранить координаты клеток (по x, y), а также id спрайта.
Так как мы знаем размер одной клетки, мы можем легко получить индекс той клетки, на которую сейчас наведены. Следовательно, можем получить и ID текущего спрайта - удалить его или назначить новый.

Получаем порядковый номер клетки. Для этого берём координату x текущей клетки, к ней плюсуем произведение текущей координаты y и максимального размера сетки по x. Т.Е. формула:

cell_id = x + y * max_x

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

var cell_id = mouse_x div CellWidth + mouse_y div CellHeight * ceil(room_width / CellWidth)

Итак, работаем.

1. Создаём новый слой - Asset Layer, который назовём Backs.
2. Перейдём к объекту oGrid.
3. Добавим ещё одну глобальную переменную сразу после объявления сетки - global.grid_array = []
4. Чуток допишем цикл. Сделаем так, чтобы в список у нас добавлялись значения x и y.

var cells_x = ceil(room_width / CellWidth)

var cells_y = ceil(room_height / CellHeight)

global.grid = ds_grid_create(cells_x, cells_y)

global.grid_array = []

for (var _y = 0; _y < cells_y; ++_y)

{

for (var _x = 0; _x < cells_x; ++_x)

{

ds_grid_set(global.grid, _x, _y, 0) // 0 - это стоимость клетки. Ноль - значит непроходима.

var inst = instance_create_layer(_x * CellWidth + 16, _y * CellHeight + 16, "Instances", oDirt)

inst.coordx = _x

inst.coordy = _y

array_push(global.grid_array, [_x, _y])

}

}

5. Ок. Осталось ставить спрайты на "фон". Мы могли бы делать это и в цикле, при создании объектов, но зачем нам лишняя нагрузка? Правильно, незачем. Перейдём к объекту oDirt и у него создадим событие Destroy. Этот код будет выполняться перед уничтожением объекта.
С-но, алгоритм прост. Рисуем спрайт, сохраняя его ID. Узнаём индекс нужного нам массива и в него вставляем ID нарисованного спрайта.

var back = layer_sprite_create("Backs", x - 16, y - 16, sDirtBG)
var cell_id = coordx + coordy * ceil(room_width / CellWidth)
array_push(global.grid_array[cell_id], back)
ds_grid_set(global.grid, coordx, coordy, 1) // Делаем проходимым

if instance_position(mouse_x, mouse_y, oObject)
and mouse_check_button_pressed(mb_right)
{
var inst = instance_position(mouse_x, mouse_y, oObject)
with(inst)
{
instance_destroy();
}
}

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

Если упрощать, то нам нужно сделать следующие шаги, чтобы данную систему реализовать в полной мере.
1) Реализовать глобальную переменную, чтобы мы могли отслеживать событие: открыто сейчас какое-либо меню или нет. Простой переключатель, который будет закрывать старое меню при переключении на новое.
2) Сделать родительский объект или функцию для всех меню, так как логика взаимодействия у нас не отличается.
3) Расписать отдельно логику для каждого пункта. Конкретно сейчас, нам нужно таким образом реализовать меню строительства.

Теперь о самом меню строительства.
При активации оно должно выводить список всех возможных к постройке объектов. Следовательно, самое оптимальное здесь - использовать массив, в который мы передадим все эти объекты. Желательно заранее предусмотреть систему, которая убережёт нас от ситуаций, когда интерфейс уходит за границы экрана.

После того, как будет готов вывод объектов - нужно будет настроить логику взаимодействия с этими объектами. Выглядеть оно должно следующим образом:
- Нажали ЛКМ по объекту - объект, на который мы сейчас наведены, стал активным. Если был иной объект - он заменяется на новый.
- Нажали ПКМ где угодно - выбранный объект сбросился.
Если же нажали ЛКМ по игровому полю - то поставили активный сейчас объект, удалив при этом старый.
Для удобства также желательно отрисовывать спрайт активного объекта под курсором мыши.

Непосредственно реализация.

Начнём с того, что заблокируем наш пользовательский интерфейс на нужных нам значениях. Пусть это будет FHD. Тогда, в объекте oGameManager, в Create, нужно будет добавить одну строку кода:

display_set_gui_size(1920, 1080);

Нового здесь ничего нет, поэтому повторяться не буду. Всего это шесть новых объектов.
В oGameManager пропишем переменную-тумблер:

global.placing = noone

object_list = [["Земля", oDirt], ["Камень", oRock], ["Металл", oMetal], ["Уголь", oCoal]]

object_name = noone
object_to_draw = noone
menu = noone

dmxg = device_mouse_x_to_gui(0)
dmyg = device_mouse_y_to_gui(0)
if instance_position(dmxg, dmyg, self) and mouse_check_button_pressed(mb_left)
{
// Если не активно - делаем активным
if !active
{
active = !active
global.placing = "Building";
var startx = x + sprite_width * 2 + 5
var starty = y - sprite_height
for (var i = 0; i < array_length(object_list); ++i)
{
var inst = instance_create_layer(startx + 64 * i + 5, starty, "Instances", oCell)
inst.object_name = object_list[i][0]
inst.object_to_draw = object_list[i][1]
inst.menu = "Building"
}
}
else
{
active = !active
global.placing = noone
}
}

if menu != noone and global.placing != menu
{
instance_destroy();
}

draw_self()
if object_to_draw != noone
{
draw_sprite(object_get_sprite(object_to_draw), 0, x + 32, y + 32)
}

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

Начнём с первого, так как это просто. Выводить название объекта мы будем при наведении на него.
Для этого дополним Draw GUI у oCell. Если мы наведены на объект - нарисовать чёрный полупрозрачный прямоугольник и поверх него текст для лучшей отчётливости. И немного настроим "глубину", чтобы не было перекрытия этого текста.

if object_to_draw != noone

{

draw_sprite(object_get_sprite(object_to_draw), 0, x + 32, y + 32)

if instance_position(device_mouse_x_to_gui(0), device_mouse_y_to_gui(0), self)

{

depth = -1000

draw_set_font(fontButtonText20)

var width = string_width(object_name)

var height = string_height(object_name)

draw_set_alpha(0.33)

draw_set_color(c_black)

draw_rectangle(x, y - height, x + width, y, false)

draw_set_color(c_white)

draw_set_alpha(1)

scrOutlinedText(x, y - height, c_white, c_black, object_name, depth, fontButtonText20, fa_left, fa_top)

}

else

{

depth = 0

}

}

var starty = display_get_gui_height() - 64 - 64 * (array_length(object_list) div 10)

var inst = instance_create_layer(startx + 64 * (i mod 10) + 5, starty + (i div 10) * 64, "Instances", oCell)

Конечный результат меню:

Теперь логика взаимодействия и размещения.

Нам нужно завести ещё одну переменную, которая будет хранить объект, который мы хотим использовать. Иными словами, при клике на объект oCell, мы должны из него "вычленять" тот объект, который он хранит. Как следствие, получим спрайт, который будем отрисовывать в качестве "призрака".

Сделаем же это. Для этого у объекта oPlayer пропишем переменную:

place_object = noone;

if instance_position(device_mouse_x_to_gui(0), device_mouse_y_to_gui(0), self)
and mouse_check_button_pressed(mb_left)
{
oPlayer.place_object = object_to_draw;
mouse_clear(mb_left)
}

if place_object != noone

{

var cell_x = mouse_x div CellWidth * CellWidth

var cell_y = mouse_y div CellHeight * CellHeight

draw_sprite(object_get_sprite(place_object), 0, cell_x + 16, cell_y + 16)

// Обводочка по границам объекта, для удобства.

draw_set_color(c_white)

draw_rectangle(cell_x, cell_y, cell_x + 32, cell_y + 32, true)

}

Может выглядеть кривовато, но это из-за спрайта земли. Проверял на простых квадратах - всё встаёт четко в границы. :)

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

Step у oPlayer:

var cell_x = mouse_x div CellWidth
var cell_y = mouse_y div CellHeight
var cell = cell_x + cell_y * ceil(room_width / CellWidth)
if mouse_check_button_pressed(mb_right)
{
// Сбрасываем объект или удаляем объект/фон
if place_object != noone
{
place_object = noone
}
else
{
// Если в текущей позиции нет объекта - удаляем фон, иначе - объект
var inst = instance_position(cell_x * CellWidth, cell_y * CellHeight, oObject)
if inst
{
with(inst)
{
instance_destroy();
}
}
else
{
if array_length(global.grid_array[cell]) > 2
{
layer_sprite_destroy(global.grid_array[cell][2])
array_delete(global.grid_array[cell], 2, 1)
}
}
}
mouse_clear(mb_right)
}
if mouse_check_button_pressed(mb_left)
{
var place_x = mouse_x div CellWidth * CellWidth + 16
var place_y = mouse_y div CellHeight * CellHeight + 16
if place_object != noone
and !instance_position(device_mouse_x_to_gui(0), device_mouse_y_to_gui(0), oGBuild)
{
// Удаляем объект, если находим.
var inst = instance_position(cell_x * CellWidth, cell_y * CellHeight, oObject)
if inst
{
with(inst)
{
instance_destroy()
}
}
// Удаляем фон
if array_length(global.grid_array[cell]) > 2
{
layer_sprite_destroy(global.grid_array[cell][2])
array_delete(global.grid_array[cell], 2, 1)
ds_grid_set(global.grid, cell_x, cell_y, 0)
}
// Ставим новый объект
var new_inst = instance_create_layer(place_x, place_y, "Instances", place_object)
new_inst.coordx = mouse_x div CellWidth
new_inst.coordy = mouse_y div CellHeight
mouse_clear(mb_left)
}
}

Собственно говоря, система размещения объектов сделана. Осталось её дорабатывать напильником.
Результат:

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

Собственно, OChar - родитель oCharPlayer и oCharNoControl.
oCharNoControl - родитель oCharNeutral и oCharEnemy.

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

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

- Сохранение. Встроенное VS самописное.

- Звуки.

Небольшое объявление. В формате гайда я объясняю, как сам делаю те или иные вещи, как их понимаю. Когда гайды подойдут к концу - останется только заполнить игру механиками, спрайтами, звуками, музыкой. Это я планирую делать в дальнейшем в виде блога или вроде того.

Есть вопросы или что-то не получается - обращайся, помогу.

Есть пожелания или замечания - буду рад выслушать.

Ссылка на скачивание файла проекта для ЛЛ:
https://disk.yandex.ru/d/w31aDLE9ClPy9Q

Привет!

Приношу свои извинения за долгое отсутствие. Лето, выходные, ну вы понимаете. :)

Ссылки на предыдущие гайды:
Первый гайд
Второй гайд
Третий гайд

Недавно проводил один из стримов, на котором частично воссоздал старые добрые "танчики" с Денди (Battle City). Исходники, которые можно будет допилить самому, приложу к посту ниже. Там тоже есть что потыкать.

Иерархия объектов

Кратко:
Тоже самое, что и с классами. Есть родительский класс и дочерний, который наследует его свойства. В нашем случае, слово "класс" заменяется на "объект, но смысл не меняется.
Важно: свойства эти можно "переписать", создав событие заново. В нём же можно дополнительно указать, если мы хотим сохранить свойства, при этом дополнив их.

Подробно:
Перед созданием любого объекта, мы должны чётко представлять его предназначение. Часто множество объектов исполняют схожие функции, но с небольшими отклонениями. Таким образом, вырисовывается проблема: создавать стопицот объектов с одинаковым кодом - бред, который захламляет код и делает его нечитаемым.
Решение этой проблемы - создание универсального "шаблона", на основе которого будут строиться другие объекты с нужными дополнениями.
Таким образом, наш шаблон становится родителем. А все, кто создан по этому шаблону - его "детьми" (дочерними объектами). Они перенимают его свойства, но могут их в нужной степени корректировать.

Работа иерархической системы в GML (GameMaker Language) имеет особенность, с которой быстро придётся познакомиться на практике.
Все "дочерние" объекты по умолчанию считаются частью "родительского".
У нас есть общий родительский объект для всех блоков. При этом, в комнате его у нас нет. Но есть его дочерние объекты.
Следовательно, делая проверку на наличие родительского объекта, у нас высветится "истина".
Делайте проверки на наличие тех или иных объектов в комнате обдуманно.

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

Какие проблемы могут возникнуть при работе с иерархической системой.

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

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

Небольшие пояснения, слева направо.

- Есть общий "Шаблон" под персонажа, который включает базовые их возможности и характеристики.
- На основе этого шаблона строятся два других: для подконтрольных и неподконтрольных персонажей. При этом, для последних также следует разделение на основе поведения: будут они враждебно или "мирно" настроены. С-но, общая логика работы написана в главном родительском объекте, а в дочерних - некоторые правки к ней.

Аналогично с объектами.
- Всё, что есть в игре, кроме персонажей - у нас будет объектом, с которым мы можем взаимодействовать.
- Каждый такой объект мы делим по двум типам: постройки, которые что-то делают (или не делают), но суть - должны быть построены. И природные объекты, которые игрок ставить не сможет.
Дальше, соответственно, они снова делятся.

Как это выглядит в движке.

Создадим два объекта: oObject и oNature.
Первый - родительский объект для всех типов объектов, второй - только для "природных". При этом, у нас также есть объект для земли - oDirt.
Перейдём к oObject.
Нажмём у него на Parent. Далее - на плюсик, где поставим ему дочерним объект oNature.

Аналогично проделаем с oNature для oDirt. Как видно, родитель у него уже выставился.

Ок. Родительские объекты сделали.

Перейдём обратно к oObject и создадим у него событие Create.
Теперь немного мыслей в слух.

Базово, каждый наш объект должен иметь следующий перечень "настроек":
- Количество ХП. Так как каждый объект интерактивен, следовательно, каждый объект можно атаковать. С-но, вводим переменную hp и приравниваем её к 0 по умолчанию.
- Координаты по сетке. coordx, coordy. Не столько необходимость, сколько просто упрощение. Делаем их равными -1 по умолчанию, так как мы в любом случае будем их переназначать при размещении объектов.
- Может объект гореть или нет - flammable. False по умолчанию.

Пока остановимся на этом. Перейдём к объекту oNature.

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

У нас появится выпадающее меню из трёх опций:
- Open Parent Event - открыть это же событие в родительском объекте.
- Inherit Event - унаследовать событие
- Override Event - переписать событие.

С-но, нам нужно выбрать второй пункт: унаследовать событие.

Тогда у нас откроется окно кода с готовой строкой:

event_inherited();

Это значит, что то, что мы прописали в oObject, для oNature у нас унаследуется и будет активно для этого объекта. И при этом, ниже этой строки кода мы можем добавить то, что нам нужно.

Следуя плану, сейчас нам нужно убрать связь между oNature и oDirt, создать ещё два объекта (oResource и oNotResource) и уже затем выставить связь между oNotResource и oDirt.

Собственно говоря, для не-ресурсных объектов - это всё.
Для ресурсных - нам нужно объявить, какие ресурсы он может содержать.

Открыв объект oResource (родительский для всех блоков, с которых что-то будет добываться), создадим его с наследованием от родителя.

Далее - обозначим ресурсы, приравняв их все к нулю.

Metal = 0;
Coal = 0;
Wood = 0;
Stone = 0;
Gem = 0;

По сути - всё.

Теперь, когда будем создавать ресурсные объекты, в качестве родителя будем у них выставлять oResource. Создавая объект, будем наследовать событие создания у oResource, переписывая нужные нам строки кода.

Проверим, как это всё работает.

Создадим объект oRock.
Поставим ему в качестве родителя oResource.
Создадим у него событие Create, унаследовав код.
Пишем код:

event_inherited();
Stone = irandom_range(5, 15)

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

Добавлю ещё кое что прежде, чем закрыть эту тему.
Когда выстраивается взаимодействие между объектами игры, которые не находятся под прямым управлением игрока, очень часто, чтобы избежать ошибок, придётся делать проверку на наличие объекта в комнате. Для этого используется команда: instance_exists(объект);.
Это ещё одна вещь, которую нам позволяет делать иерархия и которая немного развязывает руки в разработке.

Глобальные переменные

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

1. Локальные переменные. Объявляются с помощью ключевого слова var

var название = значение

Эти переменные нельзя использовать где-либо, кроме текущего события. С-но, в другом событии они будут недоступны, также будут недоступны и для изменения из посторонних объектов.

2. Обычные переменные (не знаю, как правильно их обозвать:D)
Мы с ними уже активно работали, объявляются они просто:

название = значение

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

inst.coordx = 1;

global.название = значение

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

4. Макро переменные. По сути, те же глобальные переменные, но за одним исключением. Они не могут быть изменены. Также используются для хранения значений, которые являются константами и могут пригодиться в нескольких местах программы. Объявляются следующим образом:

#macro Название Значение

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

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

План, как всегда.
- Массивы и с чем их едят, а также grid (сетка комнаты), размещение объектов по сетке. Включая объяснение, в каких случаях лучше использовать встроенные функции, в каких – писать свои с нуля.

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

- Иные способы хранения информации в GMS2, когда их стоит или не стоит использовать.

- Сохранение. Встроенное VS самописное.

- Звуки.

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

Краткое содержание:
• Скроллинг текста
• Создание скрипта
• Скрипт работы кнопок главного меню
• Внешние ссылки
• Создание локализации с помощью JSON

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

Создайте новое поле extrasList аналогично предыдущим. Затем добавьте ему дочерний пустой объект viewport, которому так же добавьте дочерний объект content. В итоге у нас получилась своеобразная матрёшка extrasList -> viewport -> content.

К extrasList прикрепляем компонент Scroll Rect. Эта важная курица будет контролировать работу скроллинга содержимого.

В качестве Content установите наш одноимённый объект content, уберите галочку с Horizontal (нам пока не требуется горизонтальный скроллинг), Movement Type --> Clamped, Viewport --> viewport.

• Movement Type отвечает за поведение контента при достижении нижней или верхней точки скроллинга. Unrestricted унесёт содержимое в дальние дали, Elastic даст ему плавно отскочить и вернуться назад, а Clamped просто резко остановит.

Не хватает только полосы прокрутки. Создайте для extrasList дочерний объект UI/Scrollbar. Как видите - у него есть два компонента (Image и Scrollbar) и два дочерних объекта. В первую очередь сделаем его вертикальным. Для этого в компоненте Scrollbar установите Direction --> Bottom to Top. Теперь нужно разместить его в правой части extrasList и растянуть на всю высоту экрана. Это, равно как и изменение его цветов вы теперь сможете сделать самостоятельно ;) Когда всё будет готово, назначьте объект Scrollbar в качестве Vertical Scrollbar в компоненте Scroll Rect.

Далее сделайте размеры viewport и content побольше - подстать extrasList - и добавьте текстовый компонент в content. Для корректного отображения скроллинга в content нужно добавить еще один компонент - Content Size Fitter и установить:

Horizontal Fit --> Unconstrained

Vertical Fit --> Preferred Size

• Обычно для конструкций скроллинга требуется установка компонента Mask для объекта viewport. Этот компонент будет скрывать текст за пределами границ viewport. Сейчас он нам не нужен, так как текст доходит до края экрана.
При желании попробовать добавьте компоненты Mask и Image для viewport и отключите у Mask галочку на Show Mask Graphic. Текст будет обрезаться на границах viewport.

Полюбуемся результатом.

• В правом нижнем углу можно разместить кнопки, ведущие в ваш Дискорд, ВК, сайт итд. Можете этого не делать, но я далее все равно покажу как это прописать в скрипте.

Каждую сцену нужно добавлять в билд через меню File - Build Settings. Причем сцена, зарегистрированная под номером 0 будет являться стартовой. Давайте добавим нашу сцену в билд.

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

ВАЖНО! Я постараюсь максимально понятно и просто объяснить что и как работает, но знайте - мои объяснения не обучат вас C#. Вы просто научитесь пользоваться теми функциями, которые использую в своей игре я. Обязательно ищите дополнительную информацию, читайте справочники и учебники и шерстите форумы каждый раз, когда вам что-то непонятно.

Откройте Notepad++ или любой другой редактор кода. Измените кодировку на UTF-8, а синтаксис на C#. Затем сохраните файл как mainMenu.cs в папку Assets/Scripts.

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using System.Runtime.Serialization.Formatters.Binary;
using System.IO;
using System.Linq;
using System.Text;
using UnityEngine.SceneManagement;

Затем создайте класс mainMenu - он должен называться так же как и сам файл. К классу допишите : MonoBehaviour - это означает наследование от базового класса Unity.

Подробнее о пространствах имен

Подробнее о клаcсах

Подробнее о MonoBehaviour

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

Нам понадобится переменная типа GameObject, которая будет указывать на поле newGameList.

public class mainMenu : MonoBehaviour {
public GameObject newGameList;
}

Слово public перед переменной означает, что она будет доступна для других классов. Пока что все переменные и методы мы будем делать публичными.

Теперь создадим метод menuNewGame(), который будет показывать/скрывать newGameList. Фактически он проверяет активен ли объект newGameList в иерархии - если да, то скрывает, а если нет, то активирует.

public void menuNewGame() {

if (newGameList.activeInHierarchy == true) newGameList.SetActive(false);

else {

newGameList.SetActive(true);

}

}

Подробнее о конструкции if... else

Старайтесь всегда соблюдать отступы в коде и не лепить всё в одну кучу - это просто удобно для чтения.

Теперь сохраним файл и вернемся в Unity. Чтобы всё заработало как надо, мы должны прикрутить к кнопке newGame скрипт mainMenu в качестве компонента. Затем в этом компоненте в поле newGameList указать одноимённый объект. В компоненте Button в событии On Click () укажите нашу кнопку и выберите из списка наш новый метод menuNewGame().

Теперь можно запустить игру и посмотреть как работает кнопка. Если не работает - ищите где что пропустили :)

Аналогичную операцию с переменной, методом и назначением скрипта  нужно проделать с кнопками "Загрузить игру", "Настройки" и "Дополнительно".

• Тут есть одна важная деталь. Каждый раз прикручивая скрипт к кнопке, нам придется назначать в инспекторе переменные. Это особенность редактора Unity. Можно, конечно, делать отдельный скрипт и класс для каждой кнопки, но это шило на мыло. А расписывать всё только через скрипт мы не будем (пока что...).

Обратите особое внимание на то, чтобы в каждом методе активация одного поля меню приводила к деактивации другого.

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

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

Я даже специально скриншот для этого сделаю.

Конечно же нет смысла комментировать каждую строку - это слишком громоздко. Я сделал это в качестве примера. Однако, указывать вкратце что и как делает очередной метод стоит. Не перенебрегайте этим! Спасибо мне потом скажете.

Теперь сделаем скрипт для кнопок "Выход" и ссылок на соцсети. Для выхода из приложения используется простая команда Application.Quit(); Её нужно добавить в метод exitGame() и описанным ранее способом привязать к кнопке exit.

Для перехода по ссылке используем команду Application.OpenURL("адрес ссылки"); аналогичным образом.

• Экономьте время и силы. Прикрепите скрипт mainMenu к одному объекту, сделайте все привязки, затем скопируйте компонент. Выделите все необходимые объекты и массово вставьте скопированный компонент со всеми привязками.

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

Сейчас мы просто обязаны немного поговорить о тексте. Как его хранить в игре?

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

2. Хранить его в отдельных текстовых файлах, а затем импортировать с помощью библиотек LINQ. Это хороший способ - я так поначалу и делал. На каждую сцену у меня был свой текстовый документ со строками необходимого текста. Проблема наступила, когда его стало слишком много и я начал теряться в структуре. Вторая проблема наступила, когда я решил добавить несколько языков в локализацию - это создало необходимость делать более громоздкий код и в разы больше файлов.

3. Хранить текст в JSON. Этот вариант на данный момент идеален для меня, так как я готовлю локализацию с 11 языками. Этот формат позволяет мне поддерживать хранение текста сразу блоками, а не строками и структурировать его. Подробнее про формат JSON можно почитать тут.

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

Схема будет такая:
• Создаем базу данных текста в Excel или Google Таблицы
• Создаем класс под эту базу данных в проекте
• Импортируем БД в JSON и добавляем в проект
• Создаем скрипт, распаковывающий JSON, и расставляющий значения переменных текста

Благодаря возможностям JSON, мы сразу получаем возможность делать локализацию своей игры - переводить её на другие языки. Не вижу смысла откладывать эту тему на потом. Такие серьезные моменты лучше решать сразу.

Я буду объяснять на примере Гугл Таблиц (Google Spreadsheets), но тут с Excel различий мало. Создайте новую таблицу.

• В программировании первая цифра, первый элемент, первый объект - это всегда ноль. Всё начинается с нуля. Привыкайте считать с нуля и тогда вы не словите когнитивный диссонанс при написании кода.

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

Key - это поле нам нужно для упрощенного обращения к элементу. Мы будем "вызывать" элемент по Key и требовать "какие ваши доказательства" предоставить необходимое значение.

• Не забудьте внести в таблицу весь текст главного меню - кнопки меню, заголовки настроек, текст из "Дополнительно".
• Обратите внимание, что названия языков мы не вносим в таблицу. Они отображаются в родном начертании в компоненте Dropdown объекта optionsList - language - Dropdown.

Хорошо, сделали - что дальше? Как запихать это в игру? Для начала нам нужно превраить нашу таблицу в json. Сохраните её в xlsx - стандартный формат экселя, который поддерживается и гугл таблицами. Далее зайдите на сайт, сохраните его, создайте его закладку, выбейте татуировку ссылки на левой руке - Beautifytools (https://beautifytools.com/excel-to-json-converter.php). Откройте с помощью него нашу таблицу и экспортируйте в json.

Нам понадобится новая папка для хранения текстовых баз данных (а у нас уже именно база данных, представьте себе). Assets/Resources/textDB

Там нам понадобится новый файл с кодировкой UTF-16 LE с BOM и синтаксисом JSON.

Добавляем конвертированную в джейсон таблицу в файл и получаем следующий результат.

• Если вам непонятно почему это так расположено и что это за знаки, то почитайте про синтаксис JSON

Теперь всё это нужно аккуратно запихать в игру. Для начала нам потребуется новый скриптовый файл dataBase.cs. Добавьте ему такие же пространства имен, как и файлу mainMenu. Этот файл будет содержать классы для импорта различных таблиц в формате JSON.

Импорт будет происходить в список List<> - этот класс в языке C# позволяет хранить объекты одного типа, добавлять/удалять элементы, сортировать и прочие прелести жизни. Каждый блок из файла json будет рассматриваться как отдельный объект и импортироваться в список, откуда мы его с лёгкостью будем использовать в игре.

Создадим в скрипте dataBase.cs класс TextDB, в котором объявим список List<Textdata>. Textdata - это класс, который описывает наши текстовые объекты.

• Разъяснение. Текстовым объектом в нашем случае является каждая строка таблицы со своим id, Key и блоками russian, english, japanese.

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

public int id; // int - это 32-битный формат целых чисел от -2147483648 до 2147483647

public string Key; // string - это строковый формат. Хранит одну строку текста

public string russian;

public string english;

public string japanese;

"Одна строка" - понятие растяжимое. В языке программирования знак переноса строки ( '\n') - это такой же символ как и буква. Переменная формата string может содержать очень много текста -  до 2^31 символов (2 147 483 648).

Осталась "мелочь" - написать в скрипте mainMenu.cs команду на импорт базы текста и подставить значения в зависимости от языка. Классы, которые наследуют от MonoBehaviour могут использовать специальные методы движка Unity. В нашем случае потребуется метод Start() который выполняется сразу после инициализации объекта. В него мы и добавим инструкции по импорту базы. Также понадобится объявить переменную textDatabase класса TextDB.

public TextDB textDatabase;
void Start() {
TextAsset asset0 = Resources.Load("textDB/mainMenu") as TextAsset;
textDatabase = JsonUtility.FromJson<TextDB>(asset0.text);
}

Для того, чтобы видеть в инспекторе нашу базу данных, добавьте в скрипте dataBase.cs перед классами строку [System.Serializable].

Теперь, если вы запустите игру и выберете объект, к которму прикреплён скрипт mainMenu, вы увидите список импортированных тесктовых объектов.

Прекрасно! Следующий шаг - это настроить функцию выбора языка. Язык мы выбираем при помощи всплывающего списка Dropdown в разделе настроек. Давайте создадим для него переменную public Dropdown langDropdown, чтобы было проще к нему обращаться. Также в скрипте mainMenu создадим новый метод setLanguage().  Прикрепите скрипт mainMenu к объекту Dropdown и в поле Lang Dropdown укажите этот объект. В разделе On Value Changed прикрепите метод setLanguage().

Что будет происходить? Каждый раз, когда вы будете выбирать язык во всплывающем меню, будет меняться числовое значение Dropdown и вызываться метод setLanguage(). У каждого языка получится свой порядковый номер: русский - 0, английский - 1, японский - 2. На основании этого номера мы и будем менять текстовые блоки.

Для быстрого доступа к текстовым блокам создадим для каждого из низ переменную класса Text и назначим их соответствующим полям скрипта mainMenu в инспекторе.

public Text newGameText;
public Text loadGameText;
...
Однотипные переменные можно объявлять через запятую.
public Text newGameText, loadGameText, optionsText, extraText, exitText, langText, audioText, musicText, creditsText;

Теперь напишем смену блоков текста при помощи оператора switch. Этот оператор похож на if...else.  Также мы применим цикл foreach, который будет перебирать элементы списка с текстом и выбирать нужный согласно критерию. Критерием будет значение Key. Значение из Dropdown получим с помощью запроса langDropdown.GetComponent<Dropdown>().value

Подробнее об операторе switch можно почитать здесь

Подробнее о циклах и цикле foreach

public void setLanguage() {
switch (langDropdown.GetComponent<Dropdown>().value) {
case 0:
foreach (Textdata p in textDatabase.text) {
if (p.Key == "newgame") newGameText.text = p.russian;
else if (p.Key == "loadgame") loadGameText.text = p.russian;
else if (p.Key == "options") optionsText.text = p.russian;
else if (p.Key == "extra") extraText.text = p.russian;
else if (p.Key == "exit") exitText.text = p.russian;
else if (p.Key == "language") langText.text = p.russian;
else if (p.Key == "ambience") audioText.text = p.russian;
else if (p.Key == "music") musicText.text = p.russian;
else if (p.Key == "credits") creditsText.text = p.russian;
}
break;
}
}

В конструкции switch нам также необходимо прописать блоки для case 1: и case 2:

• Надписи "свободный слот" в меню новой игры и загрузки можно пока не трогать - для них припасен отдельный урок ;)

PlayerPrefs.SetInt("language", langDropdown.GetComponent<Dropdown>().value); 
PlayerPrefs.Save();

Запись с именем "language" будет создана автоматически, а если она уже существует, то поменяет своё значение. Добавьте эти строки в метод setLanguage() до или после конструкции switch.

Теперь нам нужно прописать код, который проведёт операции с локализацией при старте игры.

Что нам нужно:
• Если игра запускается впервые - установить язык как на устройстве пользователя или английский (иначе японец не сможет прочитать надписи на русском и поменять язык)
• Если игра уже запускалась и язык сохранён, то установить этот язык
• Установить значение value объекта Dropdown согласно текущему языку

Нам понадобится новый метод setLangAtStart(), в котором мы определим язык устройства и установим его или английский.

public void setLangAtStart() {

if (!PlayerPrefs.HasKey("language"))

{

if (Application.systemLanguage == SystemLanguage.Russian) PlayerPrefs.SetInt("language", 0);

else if (Application.systemLanguage == SystemLanguage.English) PlayerPrefs.SetInt("language", 1);

else if (Application.systemLanguage == SystemLanguage.Japanese) PlayerPrefs.SetInt("language", 2);

else PlayerPrefs.SetInt("language", 1);

PlayerPrefs.Save();

}

langDropdown.GetComponent<Dropdown>().value = PlayerPrefs.GetInt("language");

setLanguage();

}

Теперь внесём небольшой корректив в конструкцию switch и заменим условие (langDropdown.GetComponent<Dropdown>().value) на (PlayerPrefs.GetInt("language")). Теперь игра будет запускаться с тем языком, который вы установили в прошлый сеанс.

Дополнительно можно сделать так, чтобы менялось название игры при смене языка. Фактически нам нужно просто подменить изображение. Создадим для этого переменную logo класса Image и новый метод changeLogo(). В нём мы используем команду Resources.Load<Sprite>("имя файла"); для обращения к содержимому папки Resources и загрузке оттуда необходимого изображения.

public void changeLogo() {
if (PlayerPrefs.GetInt("language") == 0) logo.sprite = Resources.Load<Sprite>("Images/game_name");
else logo.sprite = Resources.Load<Sprite>("Images/game_name_eng");
}

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

Материалы из поста

Содержание туториала (Google Docs с ссылками на Пикабу)

Игра "Питерский Квест" в Google Play

Архив версий apk и Windows

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

Для начало запомните важную вещь - в 2D игре интерфейс построен на слоях. Одно поверх другого. А также связь Parent - Child (Children) - когда один объект находится в другом и свойства родительского объекта влияют на свойства потомка. Именно по этим принципам мы и будем строить наше меню. Давайте попробуем визуально представить как его можно расположить на экране.

Левый блок - это будет объект mainMenu. Он будет родителем для объектов "название игры", "пункты меню" и "ваше лого". Они тоже будут содержать в себе объекты. Начнем.

Создайте пустой объект (Empty Object) и сделайте его дочерним объекта Canvas (в иерархии перетяните один объект на другой). Другой вариант - клик ПКМ по объекту Canvas и затем выбор создания пустого объекта. Так он автоматически станет дочерним. Переименуйте его в mainMenu.

Чтобы mainMenu стало видно на экране, ему нужно добавить компонент Image через меню Add Component в инспекторе (как добавлять компонент я рассказывал в прошлом посте). Так, ну и где же он?

Чтобы придать нашему меню нужное положение, воспользуемся его компонентом Rect Transform. В разделе Anchors устанавливаем:

- Min X: 0.03 Y: 0

- Max X: 0.3 Y: 1

Затем Left, Right, Top, Bottom ставим по нулям.

Что это всё означает? Anchors (якоря) устанавливают границы нашего объекта относительно размера экрана. Min X: 0.03 прикрепляет левый край (ставит якорь) объекта на уровне 0.03 ширины экрана. Max X: 0.3 прикрепляет правый край на уровне 0.3 - что в итоге дает нам ширину объекта не в пикселях, а в процентах. Он будет занимать в ширину 27% экрана с небольшим отступом слева в 3%. Аналогично с Y - только это уже про высоту объекта.

Теперь установим нашему меню вместо белого пятна приятный глазу цвет. В компоненте Image нажмите на поле Color и установите:

- R - 0.012 (красный)

- G - 0.012 (зеленый)

- B - 0.023 (синий)

- A - 0.7 (альфа-канал или прозрачность)

Для закрепления материала по размещению объекта на экране создадим два декоративных элемента - две полоски по бокам от плашки меню.

1. Создаём два пустых объекта как Child объекта mainMenu - line1 и line2

2. Назначаем Anchors для line1

- Min X: -0.03 Y: 0

- Max X: -0.01 Y: 1

3. Назначаем Anchors для line2

- Min X: 1.01 Y: 0

- Max X: 1.03 Y: 1

• Если устанавливать Anchor больше или меньше единицы, то границы объекта будут выходить за пределы родительского объекта.
• Можно копировать компонент (например Image) через функцию Copy Component и вставлять его другому объекту или вставлять его значения такому же компоненту другого объекта через функцию Paste Component. Пример того и другого на видео.

Теперь можно похвалить себя и подышать свежим воздухом. Далее нам нужно создать объекты для названия игры, пунктов меню и логотипа. Делаем мы это по тому же принципу - создаем дочерние объекты в mainMenu - top, middle и bottom. Для наглядности сразу добавляем им компонент Image с белым цветом (потом изменим).

• Можно выделить в иерархии сразу несколько объектов про помощи Ctrl+левый клик и добавить компонент всем сразу

Аккуратно распределяем объекты на объекте mainMenu, расставляя значения Anchors.

Top --> X: (0, 1) Y: (0.8, 0.96)

Middle --> X: (0, 1) Y: (0.15, 0.8)

Bottom --> X: (0, 1) Y: (0.04, 0.15)

Для создания небольших отступов или точного корректирования положения объекта можно задавать значения Left, Right, Top, Bottom в компоненте Rect Transform. Попробуйте поставить всем трем объектам эти значения по 2 пикселя. Главное не злоупотреблять этим, а то может верстка перестать быть стабильной.

Итак, мы нашли хорошее расположение для блоков и теперь можем удалить у них компоненты Image и Canvas Renderer, так как больше они нам не понадобятся.

• Вообще старайтесь не оставлять ничего лишнего. Это очень полезная привычка, которая поможет в оптимизации игры

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

Откроем Фотошоп и создадим в нём новый файл размером 1000х1000 пикселей.

Затем добавим название игры.

Нарисуем декоративную линию.

Добавьте слоган внизу, затем подрежьте инструментом "Рамка" лист по самые края логотипа.

Далее удаляем слой фона, чтобы сделать логотип прозрачным. Затем устанавливаем размер изображения с шириной в 1000 пикселей. После этого нам очень важно сделать так, чтобы каждая сторона изображения была кратна 4 - это необходимо для применения алгоритмов сжатия, чтобы уменьшить вес игры. Так как обрезать уже нечего, то через "Размер холста" делаем высоту 212 пикселей. Итоговый размер 1000х212.

Когда всё готово, вы должны поменять цвет всех объетов на белый. Зачем? На белое изображение в Unity мы легко сможем наложить любой цвет, если нам приспичит. На чёрный - не получится.

Сохраните полученое изображение в формате PNG и положите его в папку проекта Assets/Resources/Images (создайте её). Сам исходный файл PSD сохраните в отдельной папке вне проекта, где вы будете хранить исходники графики.

Самое время добавить созданное название в игру! Создаем для top дочерний объект gameName, добавляем ему компонент Image и выравниваем на экране. Для того, чтобы изображение не искажалось, в компоненте Image активируем Preserve Aspect - эта функция позволит сохранить пропорции.

Отлично! Гейб Ньюэлл вами был бы доволен.

Теперь займёмся объектом middle и сделаем в нем несколько кнопок, которые будут вести в нужное место - "Новая игра", "Загрузить игру", "Настройки", "Об игре", "Выход".

Нам пригодится полезный компонент под названием Vertical Layout Group. Он выравнивает дочерние объекты по вертикали, регулирует их высоту, ширину и отступы. Это означает, что нам не придётся вручную устанавливать размеры и положение кнопок. Его можно сразу добавить к объекту middle.

• Я предпочитаю пользоваться старой версией компонента Text в Unity. Новая версия называется TextMeshPro. Если в вашей версии Unity нет Button, а есть только Button - TextMeshPro, то посмотрите в подпункте Legacy. Или почитайте как работает TextMeshPro

Таким же образом добавьте еще 4 кнопки и настройте Vertical Layout Group у объекта middle.

Padding - это отступы всего списка кнопок относительно объекта.

Spacing - это отступы между кнопок.

Потыкайте настройки, чтобы понять, как это работает, а потом сделайте как на скриншоте. Как видите, теперь у нас есть аккуратный список кнопок.

Обратите внимание на иерархию - у каждой кнопки есть дочерний объект Text. Это такой же объект, как и все, только с прикрепленным компонентом Text. В нем можно вписать текст объекта, указать шрифт, размер, начертание, цвет, выравнивание. Этих настроек вполне достаточно для нашей игры. Установите размер шрифта 24 пикселя.

• Если вы хотите другой шрифт, то создайте папку Assets/Resources/Fonts и добавьте его туда. Он будет доступен в поле выбора шрифта.

Теперь можно нажать кнопку Play вверху рабочего стола и потыкать по кнопкам.

У каждой кнопки есть компонент Button, у которого есть целый ворох настроек как кнопка будет меняться при нажатии, наведении курсора итд. Однако, для мобильных платформ, где не мышка, а тачскрин, это не нужно. Поэтому отключите эту функцию, поставив Trasition --> none.

Далее можно удалить у кнопок компонент Image - для такого минималистичного дизайна он не нужен. Цвет текста сделайте белым.

В объекте bottom осталось место для вашего логотипа. Подыщите что-нибудь прикольное, нарисуйте в фотошопе и сделайте так же, как мы делали с названием игры.

• В любом случае вы вольны экспериментировать в оформлении и делать как вам нравится. Мы не упустим этот момент - не переживайте. Далее по туториалу нам придётся делать столько кнопок, что они вам в кошмарах сниться будут.

Пришло время для правой части меню - не забыли про неё? Для начала определимся, что будет делать каждая кнопка.

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

Загрузка игры - аналогично, только загружает сохранение.

Настройки - выбор языка игры, громкости звука и музыки.

Дополнительно - авторы, ссылки, благодарности и прочая второстепенная информация.

Выход - закрывает приложение.

Сделаем на каждую кнопку кроме "Выход" своё поле с информацией, которое будет активироваться при нажатии. Создайте в Canvas дочерний объект newGameList, скопируйте для него компонент Image из объекта mainMenu и установите Anchors --> X: (0.31, 0.9) Y: (0, 1).

В нем создайте 6 кнопок для слотов сохранений и назовите их game_0, game_1, game_2, game_3, game_4, game_5. В этот раз мы не будем распределять их с помощью Vertical Layout Group, но сделаем их с небольшой графикой.

Для начала распределите их равномерно по объекту newGameList, используя Anchors.

Теперь создайте в Фотошопе новое изображение размером 400х400 пикселей. Нарисуйте в нем прямоугольник с границей, но без заливки, как показано на скриншоте.

А затем нарисуйте прямоугольник поменьше, но с заливкой.

Удалите слой фона, сделайте прямоугольники белого цвета и сохраните как PNG в папку Assets/Resources/Images под именем frame_1.

В Unity нам потребуется отредактировать границы спрайта изображения, для того чтобы мы могли его без искажений растягивать в разные стороны. В дереве проекта выберите наше новое изображение frame_1, нажмите в инспекторе Sprite Editor и в открывшемся окне установите Border (границы) на 12 пикселей. Именно в этих местах спрайти будет растягиваться, подгоняясь под размеры кнопки. Закройте это окно и нажмите Save.

Примените новый спрайт ко всем кнопкам и в компоненте Image установите Image Type на Sliced. Надо поправить цвет кнопок.

- R - 0.012 (красный)

- G - 0.012 (зеленый)

- B - 0.012 (синий)

- A - 0.7 (альфа-канал или прозрачность)

Если вам хочется немного свободно места между слотами, то добавьте на кнопки отступы по 5 пикселей с каждой стороны.

• Не забывайте, что однотипные объекты можно выделять вместе CTRL+клик и массово менять настройки компонентов. Это очень экономит время.

Так как нам нужно точно такое же поле для раздела "Загрузка игры", мы можем просто скопировать это. Деактивируйте объект newGameList, нажав на галочку возле его имени в инспекторе, затем в иерархии щёлкните по нему ПКМ и нажмите Duplicate. Теперь нужно только его переименовать в loadGameList, чтобы не путаться. Деактивируйте его, чтобы не мешался.

Раздел "Настройки". Создайте такое же поле, но только без кнопок. Этот раздел посложнее предыдущего, поэтому сделаем для начала небольшие намётки.

Первым сделаем блок выбора языка с выпадающим списком. Нужно создать объект language внутри optionsList и установить ему Anchors X: (0.03, 0.97) Y (0.85, 0.95). Внутри language создаем объект header, устанавливаем Anchors X: (0, 0.48) Y (0, 1), добавляем ему компонент Text с размером шрифта 24 и выравниванием по правому краю и по центру.

Теперь нам нужно сделать выпадающий список. В Unity уже есть готовое решение - нам нужно только правильно его настроить. Добавьте в language объект UI -> Dropdown и устанвите ему Anchors X: (0.5, 1) Y (0, 1). Сразу же можно установить ему почти чёрный цвет с прозрачностью 0.78.

В нём достаточно много дочерних объектов. Разверните его полностью и внимательно поменяйте настройки. По шаблону "Объект: Компонент --> настройки".

- Dropdown: Dropdown --> Transition "none", список Options - поменять Option A итд на названия языков игры.

- Label: Text --> Русский, размер шрифта 24, цвет белый.

- Arrow: Rect Transform --> PosX -20, Wigth 40, Height 40.

- Template: Rect Transform --> Height 450; цвет сделать как у объекта Dropdown

- Viewport: пропускаем.

- Content: Rect Transform --> Height 80.

- Item: Rect Transform --> Height 80; Toggle --> Transition "none"

- Item Background: цвет сделать как у объекта Dropdown

- Item Checkmark: Rect Transform --> PosY -5

- Item Label: Rect Transform --> Left 25, Top 15; Text --> размер шрифта 24, цвет белый.

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

По аналогии с языковой панелью делаем объект music, размещаем в нём объект header с компонентом Text (пишем "Громкость музыки"). Нам понадобится слайдер - добавляем его UI/Slider с Anchors X: (0.5, 1) Y (0.3, 0.7).

В компоненте Slider отключаем Transition.

В дочернем объекте Background делаем черный цвет.

Таким же образом создаём слайдер для "Громкости звуков".

Готово! Вы - великолепны!

Лимит картинок опять исчерпан, поэтому продолжим в следующий раз.

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

Материалы из поста

Содержание туториала (Google Docs с ссылками на Пикабу)

Игра "Питерский Квест" в Google Play

Архив версий apk и Windows