Создание визуальной новеллы в Unity 6 (3/10)

Я буду показывать на примере с  Unity 6, но вы можете использовать свою версию движка.

Дисклеймер:  Хотя этот туториал ориентирован на новичков, он требует некоторых базовых знаний о программировании и Unity. Если у вас что-то не получается, подписчики всех уровней имеют доступ к личным сообщениям. Напишите мне и я буду рад помочь!

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

Создайте новый "Universal 2D" проект в Unity. Затем перейдите в "Unity Asset Store", добавьте плагин Ink, который вы можете найти здесь. После того как вы нажмете "Add To My Assets", плагин попадет в ваш Package Manager в Unity. Вы его сможете там найти перейдя во вкладку Window -> Package Manager -> My Assets.

Импортируйте данный плагин себе в проект.

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

Добавим эти компоненты в вашу сцену. Для этого жмем правой кнопкой мыши в окне иерархии и выбираем UI -> Text - TextMeshPro. Если вылезет всплывающее окно о добавлении TMP Essentials, то импортируем их. Это добавит на нашу сцену Canvas в котором будет располагаться наше текстовое поле.

Так же добавим и кнопку. Правой кнопкой мыши в окне иерархии щелкаем по Canvas, и выбираем UI -> Button - TextMeshPro.

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

На компоненте Canvas вы должны найти компонент Canvas Scaler. Убедитесь, что режим масштабирования UI установлен на Scale With Screen Size. Это позволит элементам на экране выглядеть одинаково при любом размере экрана. Мне также нравится устанавливать эталонное разрешение 1920 x 1080, поскольку именно с таким разрешением я работаю чаще всего, но я оставляю этот параметр на ваше усмотрение.

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

В итоге сцена может выглядеть примерно так:

Теперь создадим пустой объект в иерархии и назовем его InkManager. Добавим к нему новый скрипт с тем же именем. Это станет ядром нашей игры, работающий как мост между сюжетом и проектом Unity.

Первым делом подключите необходимые пространства имен, чтобы определить чем мы будем дальше пользоваться. Нам понадобиться сам Ink и графический Ui TextMesh. Для этого напишите в самом верху скрипта InkManager следующее:

(Если вы используете старую версию движка или UI, то вам понадобится using UnityEngine.UI; и соответственно другие типы полей)

После чего можно переходить к добавлению полей класса. Напишите эти строки в верхней части класса InkManager:

[SerializeField] private TextAsset _inkJsonAsset;

_inkJsonAsset - это ссылка на файл истории, который будет использоваться для создания экземпляра класса Story. Этот json-файл автоматически компилируется плагином ink из файла .ink, который мы написали в Inky. Давайте переместим наш файл story в папку Assets. Вы должны сразу же увидеть два файла, вот так:

Присвойте файл .json соответствующему полю в скрипте InkManager. Не забудьте также назначить текстовое поле!

На этом этапе иерархия вашей сцены и InkManager должны выглядеть примерно так:

Давайте займемся кодированием!

Нам нужен способ начать нашу историю. Сначала мы должны создать экземпляр класса Story:

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

В вашем InkManager создайте функцию void StartStory() и добавьте в нее строку выше. Она должна вызываться из функции Start(), так как мы хотим начать историю в тот момент, когда запускаем игру. Нам также понадобится способ отображения строк нашей истории. Давайте создадим еще одну функцию:

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

Теперь, когда у нас есть способ отображения нашей истории, давайте вызовем DisplayNextLine() из функции StartStory(). Ваш скрипт должен выглядеть следующим образом:

Нажмите «Play» и вы должны увидеть на экране первую строчку вашей истории!

Теперь
давайте добавим немного взаимодействия и убедимся, что мы можем
просматривать историю с помощью кнопки, которую мы добавили ранее. Для этого щелкаем в окне иерархии Unity по кнопке и в инспекторе на компоненте Button добавим событие для OnClick. Нажмите плюсик, перетяните в поле объекта перетяните наш InkManager, а в качестве вызываемой функции выбирте в выпадающем списке DisplayNextLine().

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

Все материалы этого урока можете найти ниже.