Пользовательский интерфейс Unity: создание слайд-шоу с помощью кнопок-переключателей

Задача: создать меню с тремя переключателями, каждая с изображением и текстовым сообщением.

Настройка сцены

Я сразу же создал холст для сцены и пустой объект в качестве UI-менеджера.

У меня есть объект внутри холста, который будет представлять PictureSelectionMenu, и в нем будут храниться все необходимые компоненты, необходимые для выполнения задачи. Я могу создавать дубликаты этого меню всякий раз, когда это необходимо, предварительно создавая объект.

Объекты меню выбора изображения

• Фон — коричневое фоновое изображение.

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

• Toggle Group Object— хранит все переключатели для изображений 1–3.

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

• Заголовок — содержит фон и текст.

• Изображение правила — кнопки-переключатели управляют этим изображением и будут меняться в зависимости от того, какой переключатель выбран.

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

Диспетчер пользовательского интерфейса (сценарий правил игрового времени)

Этот сценарий содержит общедоступные методы для различных кнопок-переключателей. Изменение изображения и текста сообщения.

using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEngine;
using UnityEngine.UI;

public class PlayTimeRules : MonoBehaviour
{
    [SerializeField] private Toggle[] toggles;
    [SerializeField] private Image _currentImage;
    [SerializeField] private Sprite[] _playerTimeImage;
    [SerializeField] private TMP_Text _playerTimeText;

    private void Start()
    {
        _playerTimeText.text = "Do Not Touch The Dinos";
        _currentImage.overrideSprite = _playerTimeImage[0];
    }

    public void Picture1()
    {
        if (toggles[0].isOn == true)  {
            _playerTimeText.text = "Do Not Touch The Dinos";
            _currentImage.overrideSprite = _playerTimeImage[0];
        }
    }

    public void Picture2()
    {
        if (toggles[1].isOn == true)
        {
            _playerTimeText.text = "Dino's Enjoy Playing Hide n Seek";
            _currentImage.overrideSprite = _playerTimeImage[1];
        }
    }

    public void Picture3()
    {
        if (toggles[2].isOn == true)
        {
            _playerTimeText.text = "Have Fun!";
            _currentImage.overrideSprite = _playerTimeImage[2];
        }
    }
}

Пример GIF