Как создать систему диалогов в Unity с использованием Ink

Содержание

1. Введение
2. Создание системы диалогов в Unity с использованием Ink
3. Использование тегов в Ink для управления именами НПС, портретами и макетами
4. Настройка UI компонентов для отображения имен и портретов
5. Обработка тегов для динамического изменения имен и портретов
6. Создание анимаций и аниматоров для портретов и макетов
7. Установка значений по умолчанию при начале диалога с новым НПС
8. Заключение

👤 Введение

Привет всем! Меня зовут Тревер, и в этом видео я покажу вам простой, но эффективный способ отображения и управления именами НПС, портретами и различными макетами для системы диалогов, построенной в Unity с использованием Ink. К концу этого видео мы создадим систему, в которой портреты и имена могут легко изменяться для каждой строки диалога, а также легко изменить макет панели диалога. Давайте начнем!

🎮 Создание системы диалогов в Unity с использованием Ink

Перед тем, как начать, убедитесь, что у вас уже есть готовый проект Unity, созданный в предыдущем видео. Вам также потребуется установить плагин Ink для Unity и текстовый компонент TextMeshPro, который мы будем использовать позже.

Для начала создадим необходимые компоненты пользовательского интерфейса (UI) для отображения имен и портретов в диалоговой панели. Создайте объект Panel, добавьте ему изображения для отображения портретов и текстовый компонент для отображения имен персонажей. Установите соответствующие значения по умолчанию для изображений и текстовых компонентов. Не забудьте также настроить макеты для панели диалога, чтобы портреты и имена правильно отображались на экране.

🏞️ Использование тегов в Ink для управления именами НПС, портретами и макетами

Ink позволяет нам использовать теги для добавления метаданных к любой строке диалога. Каждый тег представляет собой простую строку, которая считывается в Unity. Мы можем структурировать теги, используя пары ключ-значение, где ключ представляет собой действие, которое мы хотим выполнить в нашем коде C#, а значение представляет собой данные, которые будут использоваться для этого действия.

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

1️⃣ Настройка UI компонентов для отображения имен и портретов

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

Пример кода:

void SetupUIComponents()
{
    // Создание панели для портретов
    GameObject portraitFrame = Instantiate(portraitFramePrefab);
    portraitFrame.transform.SetParent(dialogPanel.transform, false);

    // Создание изображения для портрета
    Image portraitImage = Instantiate(portraitImagePrefab);
    portraitImage.transform.SetParent(portraitFrame.transform, false);

    // Создание рамки для отображения имени персонажа
    GameObject speakerFrame = Instantiate(speakerFramePrefab);
    speakerFrame.transform.SetParent(dialogPanel.transform, false);

    // Создание текстового компонента для отображения имени
    TextMeshProUGUI displayNameText = Instantiate(displayNameTextPrefab);
    displayNameText.transform.SetParent(speakerFrame.transform, false);

    // Настройка параметров компонентов (изображений, текста и прочих свойств)
    // ...
}

2️⃣ Обработка тегов для динамического изменения имен и портретов

Теперь, когда у нас есть настроенные компоненты UI для отображения имен и портретов, давайте обработаем теги в Ink, чтобы динамически изменять имена и портреты персонажей во время диалога.

Ink позволяет нам добавлять теги к любой строке диалога, в которой мы хотим вызвать изменение имени и портрета. Мы будем использовать теги с ключами "speaker" (имя персонажа), "portrait" (портрет) и "layout" (макет панели диалога).

Добавим обработку тегов в код DialogManager, который является классом-одиночкой, отвечающим за управление диалогами. В методе ContinueStory, который обрабатывает переход к следующей строке диалога, вызовем метод HandleTags и передадим текущие теги строки диалога. Это позволит нам получить список тегов для текущей строки диалога.

Пример кода:

void ContinueStory()
{
    // Обработка тегов текущей строки диалога
    HandleTags(currentStory.currentTags);

    // Остальной код для продолжения диалога
    // ...
}

void HandleTags(List<string> tags)
{
    foreach (string tag in tags)
    {
        string[] tagComponents = tag.Split(':');

        if (tagComponents.Length != 2)
        {
            Debug.LogError("Invalid tag: " + tag);
            continue;
        }

        string key = tagComponents[0].Trim();
        string value = tagComponents[1].Trim();

        switch (key)
        {
            case "speaker":
                // Установка отображаемого имени персонажа
                displayNameText.text = value;
                break;

            case "portrait":
                // Воспроизведение анимации для изменения портрета
                portraitAnimator.Play(value);
                break;

            case "layout":
                // Воспроизведение анимации для изменения макета панели диалога
                layoutAnimator.Play(value);
                break;

            default:
                Debug.LogWarning("Unhandled tag: " + tag);
                break;
        }
    }
}

🎭 Создание анимаций и аниматоров для портретов и макетов

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

Создайте папку "Animations" в своем проекте Unity и внутри нее создайте еще одну папку "Portraits". В этой папке создайте аниматор контроллер с именем "PortraitAnimator". Далее, создайте анимации для каждого портрета (нейтральное, счастливое, грустное), и добавьте эти анимации в портретный аниматор.

То же самое сделайте и для макетов панели диалога. Создайте новую папку в папке "Animations" и назовите ее "Layouts". В этой папке создайте аниматор контроллер с именем "LayoutAnimator". Затем создайте анимации для каждого макета (левый и правый) и добавьте их в аниматор макетов.

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

🔄 Установка значений по умолчанию при начале диалога с новым НПС

При переходе к новому НПС мы хотим сбросить значения портрета, имени и макета панели диалога на значения по умолчанию, чтобы информация не передавалась от предыдущего НПC (персонажа) к новому.

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

Пример кода:

void EnterDialogMode()
{
    // Сброс значений по умолчанию
    displayNameText.text = "???";
    portraitAnimator.Play("Default");
    layoutAnimator.Play("Right");

    // Другой код, связанный с началом диалога
    // ...
}

Теперь, если мы начнем диалог с новым НПC, мы увидим, что значения по умолчанию устанавливаются для имени, портрета и макета, пока мы не получим новые значения из тегов Ink.

🎉 Заключение

Поздравляю! Теперь у вас есть система диалогов в Unity, которая позволяет легко управлять именами НПC, портретами и макетами панели диалога с использованием Ink. Вы научились использовать теги в Ink для управления именами, портретами и макетами, а также настроили UI компоненты для отображения этих элементов. Вы также научились обрабатывать теги в коде DialogManager, чтобы динамически изменять значения и обновлять UI во время диалога. Хорошей работы и успешной разработки игр!