Создание простых диалогов

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

• 1. При приближении к диалоговому персонажу, открывается диалог(окно с текстом).
• 2. Под диалоговым окном имеется кнопка "Далее" для тех случаев, если весь текст не поместился в одно окно диалога, и поэтому он отображается по частям.
• 3. При уходе от диалогового персонажа, диалоговое окно пропадает.

Принцип работы мы разобрали, теперь переходим непосредственно к реализации диалоговых окон.

Первым делом в окне Inspector создадим объект Canvas, в котором создадим следующие объекты:

• UI - Image: картинка нашего диалогового окна. Назовём данный объект, Image.
• UI - Text - TextMeshPro: текст диалога, который будет располагаться на диалоговом окне. Назовём данный объект, Text.
• UI - Button - TextMeshPro: кнопка для смены текста. Назовём данный объект, Button. При создании данного объекта, внутри создастся и объект текста, который переименуем в Next.

В окне Hierarchy всё это должно выглядеть так:

А на сцене примерно так:

Поскольку изначально окно нашего диалога закрыто, и должно открываться только при определённых условиях, то давайте наше диалоговое окно деактивируем. Для этого для нашего UI объекта Image, необходимо в окне Inspector убрать галочку. Окно должно исчезнуть из игровой сцены вместе к нопкой "Далее".

Далее с помощью окна Project напишем скрипт C# с названием Dialog. Предлагаю писать его по частям, вместе с объяснениями. А в конце склеить все части воедино, в полностью готовый и рабочий скрипт.

Так же предлагаю данный скрипт Dialog сразу же перетащить на нашего диалогового персонажа. Ну а теперь можно переходить к написанию кода в данном скрипте.

Первым делом внутри нашего класса Dialog объявим переменные:

using UnityEngine;

public class Dialog : MonoBehaviour
{
    public GameObject windowDialog;
    public TextMeshProUGUI textDialog;
    public Button button;

    public string[] message;
    private int numberDialog = 0;
}

Первые 3 переменные будут хранить ссылки на наши объекты: окно диалога, текст диалога, и кнопку "Далее". Последние 2 переменные хранят массив текстов для одного конкретного диалога, и номер элемента текста, который необходимо подгружать с сцену.

Давайте теперь все наши переменные заполним. В первые три переменные перетащим соответствующие объекты. А в message впишем несколько текстов.

Теперь нам необходимо сделать так, чтобы наше диалоговое окно активировалось после того, как в область его коллайдера входит главный игрок, то-есть Вы.

private void OnTriggerEnter2D(Collider2D collision)
{
    if (collision.tag == "Player")
    {
        if (numberDialog == message.Length - 1)
        {
            button.gameObject.SetActive(false);
        } 
        else
        {
            button.gameObject.SetActive(true);
            button.onClick.AddListener(NextDialog);
        }

        windowDialog.SetActive(true);
        textDialog.text = message[numberDialog];
    }
}

Что мы тут сделали? С помощью метода OnTriggerEnter2D мы проверяем, вошёл ли какой-либо объект в область коллайдера данного объекта? А так же проверяем, что этот вошедший объект должен иметь тег Player. И если эти условия выполняются, то с помощью метода SetActive активируем наше окно диалога, и вставляем первую часть нашего текста в окно диалога.

Важно: чтобы эти две проверки работали, необходимо:

• Установить тег для Вашего персонажа "Player".
• У объекта, на котором весит данный скрипт(диалоговой персонаж), необходимо в окне Inspector в компоненте коллайдера в поле Is Trigger поставить галочку.

Внутри этой функции можно заметить ещё одну проверку на то, является ли наш диалог последним элементом массива. Если да, то кнопка "Далее" будет деактивирована(скрыта), так как она больше не нужна. А если нет, то кнопку "Далее" активируем, и с помощью AddListener добавляем событие клика, которая будет запускать функцию NextDialog(), которую мы напишем чуть позже.

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

private void OnTriggerExit2D(Collider2D collision)
{
    windowDialog.SetActive(false);
    button.onClick.RemoveAllListeners();
    numberDialog = 0;
}

Как видите, внутри данного метода не нужны никакие проверки. Здесь мы с помощью уже знакомого нам метода SetActive закрываем диалоговое окно, и с помощью метода RemoveAllListeners() удаляем событие клика по кнопке, которое было установлено в предыдущей части кода. А так же сбрасываем номер диалога на 0, чтобы при повторном открытии данного диалога, диалог начинался с самого первого элемента.

Ну и последняя часть, это наша функция NextDialog(), которая вызывается при нажатии на кнопку "Далее":

public void NextDialog()
{
    numberDialog++;
    textDialog.text = message[numberDialog];
    if (numberDialog == message.Length - 1)
    {
        button.gameObject.SetActive(false);
    }     
}

Данная функция подгружает следующую часть диалога. И если эта часть в массиве диалогов последняя, то с помощью метода SetActive() кнопку "Далее" деактивируем(скрываем).

Теперь соберём все наши части кода, и получим следующий скрипт:

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class Dialog : MonoBehaviour
{
    public GameObject windowDialog;
    public TextMeshProUGUI textDialog;
    public string[] message;
    public int numberDialog = 0;
    public Button button;

    private void OnTriggerEnter2D(Collider2D collision)
    {
        if (collision.tag == "Player")
        {
            if (numberDialog == message.Length - 1)
            {
                button.gameObject.SetActive(false);
            } 
            else
            {
                button.gameObject.SetActive(true);
                button.onClick.AddListener(NextDialog);
            }
            
            windowDialog.SetActive(true);
            textDialog.text = message[numberDialog];
        }
    }

    private void OnTriggerExit2D(Collider2D collision)
    {
        windowDialog.SetActive(false);
        numberDialog = 0;
        button.onClick.RemoveAllListeners();
    }

    public void NextDialog()
    {
        numberDialog++;
        textDialog.text = message[numberDialog];
        if (numberDialog == message.Length - 1)
        {
            button.gameObject.SetActive(false);
        }     
    }
}

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

На этом всё, если Вам был полезен данный гайд, буду рад Вашим лайкам и комментариям :)