Пользовательский интерфейс

Naninovel поставляется с несколькими встроенными UI: главное меню, настройки игры, меню сохранения-загрузки, панель бэклога, галерея CG, советы и многие другие.

Каждый из встроенных UI можно отключить или настроить; дополнительные сведения см. в руководстве по кастомизации UI.

Адаптивная вёрстка UI

Все встроенные интерфейсы реализованы с адаптивной вёрсткой. Это позволяет UI оставаться пригодным для использования на всех платформах, независимо от разрешения экрана.

Переключение UI

Функция переключения пользовательского интерфейса позволяет пользователю скрывать/показывать UI целиком.

Активируйте ввод ToggleUI (клавиша Space по умолчанию для автономного модуля ввода) или используйте кнопку HIDE на панели управления, чтобы скрыть/показать UI.

Когда пользовательский интерфейс скрыт, ввод Continue или щелчок мыши (касание экрана) также вернёт UI.

Кастомизация UI

Функция настройки UI позволяет добавлять UI, изменить или полностью заменить любой из встроенных элементов UI, таких как меню заголовка, меню настроек, бэклог принтера и т.д.

Заметьте, что текстовые принтеры и обработчики выборов реализованы через акторов интерфейса и настраиваются по-другому; см. соответствующую документацию по (текстовым принтерам, обработчикам выборов) для получения дополнительной информации.

WARNING

Прежде чем пытаться создавать пользовательские UI или изменять существующие, сначала убедитесь, что вы знакомы с системой UI Unity ↗ (uGUI). Хотя ниже представлены видеоуроки и примеры проектов по настройке пользовательского интерфейса, пожалуйста, имейте в виду, что мы не предоставляем никаких дополнительных рекомендаций или поддержку встроенных инструментов Unity; обратитесь к странице поддержки для получения дополнительной информации.

Для добавления пользовательского интерфейса или изменения (отключения) встроенного, используйте менеджер ресурсов UI, доступный через меню редактора Naninovel -> Resources -> UI.

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

Чтобы показать или скрыть любой из UI, перечисленных в диспетчере ресурсов, используйте команды @showUI и @hideUI соответственно.

Добавление пользовательских UI

Чтобы добавить новый UI, создайте префаб через контекстное меню ассета Create -> Naninovel -> Custom UI и добавьте его в список ресурсов UI. Затем он будет выведен вместе с другими префабами UI при инициализации движка.

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

EXAMPLE

Проект Unity, показанный в приведенном выше видеоуроке, доступен на GitHub ↗. Вы можете клонировать репозиторий ↗ с помощью Git-клиента или загрузить его в виде zip-архива ↗. Имейте в виду, что пакет Naninovel не распространяется вместе с проектом, следовательно, ошибки компиляции будут возникать после его первого открытия; импортируйте Naninovel из хранилища ассетов, чтобы исправить эти ошибки.

EXAMPLE

Другой, более продвинутый пример добавления UI инвентаря с версткой сетки, разбиением на страницы и перетаскиваемым окном можно найти в проекте примера инвентаря на GitHub ↗.

В частности, скрипты, связанные с UI, хранятся в директоряих Runtime/UI ↗, а префабы в Prefabs ↗.

Когда вы создаете новый пользовательский префаб UI через контекстное меню, jy будет иметь компонент Custom UI, прикрепленный к корневому объекту. Этот компонент (или, скорее, тот факт, что компонент реализует интерфейс IManagedUI) необходим для того, чтобы префаб был принят движком в качестве UI.

Свойство Disable Interaction позволяет навсегда отключить взаимодействие с UI, независимо от его видимости. Требует компонент Canvas Group для того же игрового объекта.

Если включен параметр Visible On Awake, UI будет виден при его создании (сразу после инициализации движка), и наоборот.

Когда включена функция Control Opacity и компонент Canvas Group присоединен к тому же игровому объекту, свойство Alpha компонента Canvas Group будет изменено синхронно с текущим состоянием видимости элемента UI. Затем Fade Duration будет управлять временем (длительностью в секундах) анимации затухания непрозрачности. Если вы хотите реализовать свой собственный эффект, для управления состоянием видимости элемента UI (например, анимация слайдов вместо затухания непрозрачности), отключите свойство Control Opacity и используйте события Unity On Show и On Hide для реакции на изменения видимости.

Если вы хотите поддерживать навигацию по UI геймпадом или клавиатурой, назначьте игровой объект с взаимодействующим компонентом (например, Button) свойству Focus Object. Затем этот объект будет автоматически сфокусирован, когда UI станет видимым, что позволит перемещаться по другим взаимодействующим объектам с помощью геймпада и/или клавиатуры. См. руководство по навигации UI Unity ↗ для получения дополнительной информации о том, как настроить поведение навигации.

Когда назначается Focus Object, свойство Focus Mode позволяет выбрать, когда фокусировать объект: режим Visibility фокусирует его сразу после того, как UI становится видимым, а Navigation откладывает фокусировку до тех пор, пока игрок не активирует навигационную клавишу на геймпаде (левый джойстик или D-pad) или клавиатуре (клавиши со стрелками).

События Unity On Show и On Hide позволяют привязывать пользовательские обработчики реагировать на изменения в интерфейсе видимость. Например, вы можете подключить триггеры Animator для запуска пользовательских анимаций, когда UI становится видимым, и наоборот.

Если включена функция Hide On Load, UI будет автоматически скрыт, когда движок начнет операцию загрузки. Обычно это происходит при загрузке другого сценария Naninovel или выходе из главного меню.

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

Block Input When Visible позволяет отключить обработку вводных данных, когда UI становится видимым. Это полезно для предотвращения использования игроком различных горячих клавиш (скрытие UI, продолжение чтения и т.д.) во время взаимодействия с UI. Allowed Samplers позволяют добавлять исключения к заблокированным входам; например, вы можете добавить имя ввода ToggleUI в список, позволяя игроку переключать UI, при этом предотвращая активацию любых других вводов.

Включение Modal UI заставляет все другие UI игнорировать взаимодействие, пока данный UI виден. Это похоже на Block Input When Visible, но влияет на взаимодействие на основе событий (щелчки мыши, прикосновения, навигация по UI) вместо прямой обработки ввода.

Несколько других компонентов также будут добавлены по умолчанию при создании UI:

• Canvas Group позволяет скрывать UI, изменяя непрозрачность (контролируется с помощью Fade Duration) и позволяет UI игнорировать взаимодействие с пользователем, когда это необходимо.
• Canvas Scaler автоматически масштабирует вёрстку в соответствии с текущим разрешением дисплея.
• Graphic Raycaster позволяет игроку взаимодействовать с кнопками и другими взаимодействующими элементами внутри холста UI.

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

Отключение встроенных UI

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

Модификация встроенных UI

Если вы хотите изменить существующий встроенный (базовый) префаб UI, вы можете найти его в папке пакета Naninovel/Prefabs/DefaultUI.

Если это возможно, пожалуйста, воздержитесь от непосредственного редактирования встроенных префабов, чтобы предотвратить проблемы при обновлении пакета. Взамен этого, лучше создать новый префаб из шаблона в контекстном меню ассета Create -> Naninovel -> Default UI -> ... или вручную дублировать префаб, который вы хотите изменить (Ctrl/Cmd+D), и переместите его из папки пакета. Затем назначьте созданный/измененный префаб существующей записи (поле (Object) в диспетчере ресурсов UI.

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

EXAMPLE

Проект Unity, показанный в приведенном выше видеоуроке, доступен на GitHub ↗. Вы можете клонировать репозиторий ↗ с помощью Git-клиента или загрузить его в виде zip-архива ↗. Имейте в виду, что пакет Naninovel не распространяется вместе с проектом, следовательно, ошибки компиляции будут возникать после его первого открытия; импортируйте Naninovel из хранилища ассетов, чтобы исправить эти ошибки.

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

All the UI interfaces are stored under Naninovel.UI namespace:

Все элементы UI хранятся в пространстве имён Naninovel.UI:

Интерфейс	Соответствующий UI
IBacklogUI	Бэклог принтера.
ILoadingUI	Панель, показываемая при загрузке игры.
IMovieUI	UI, используемый для воспроизведения видеороликов.
ISaveLoadUI	Панель загрузки и сохранения.
ISceneTransitionUI	Обрабатывает переходы сцены(командами @startTrans и @finishTrans).
ISettingsUI	Панель игровых настроек.
ITitleUI	Главное меню игры.
IExternalScriptsUI	UI браузера внешних сценариев (функция модов коммьюнити).
IVariableInputUI	Форма ввода для назначения пользовательским переменных произвольного текста(используется командой @input).
IConfirmationUI	Панель UI, используемая для подтверждения важных команд (напр., при выходе в главное меню или удалении слота сохранения).
ICGGalleryUI	Браузер разблокируемых элементов галереи CG.
ITipsUI	Браузер разблокируемых подсказок.
IRollbackUI	Индикатор функции отката состояния.
IContinueInputUI	Полноэкранный невидимый слой UI, расположенный в нижней части стека UI и используемый для активации триггера continue input при нажатии или прикосновении.

Чтобы UI поддерживал видимость (видимый при пробуждении, время затухания) и параметры взаимодействия (отключение взаимодействие), также прикрепите компонент Canvas Group к тому же объекту.

Если вы знакомы с работой в C# и хотите переопределить базовую логику UI, создайте новый компонент ↗, реализуйте интерфейс IManagedUI (вы можете свободно наследовать компонент от CustomUI или ScriptableUIBehaviour для выполнения всех требований к интерфейсу) и прикрепите созданный пользовательский компонент. В папке Naninovel/Runtime/UI вы можете найти примеры реализаций встроенных UI. Вот пример минимальной реализации пользовательского компонента UI:

using UniRx.Async;

public class MyCustomUI : ScriptableUIBehaviour, Naninovel.UI.IManagedUI
{
    public UniTask InitializeAsync () => UniTask.CompletedTask;
}

Выполнение скрипта на событии Unity

При создании UI вы можете выполнить некоторые команды или начать воспроизведение определенного сценария Naninovel в ответ на некоторые события (например, [нажатие кнопки]). (https://docs.unity3d.com/Manual/script-Button.html ↗)).

Добавьте компонент Play Script к игровому объекту и либо выберите существующий сценарий Naninovel, либо запишите команды прямо в поле текстовой области; затем маршрутизируйте событие Unity ↗ какого-либо другого компонента для вызова метода Play() в компоненте Play Script. Сценарий будет выполнен, когда событие будет запущено в режиме воспроизведения. Приведенный ниже пример скрывает UI при нажатии кнопки.

Также можно ссылаться на аргументы события Unity в тексте скрипта с выражением {arg}; поддерживаемые типы аргументов: string, integer, float и boolean. Ниже приведен пример, демонстрирующий выполнение дрожания камеры и воспроизведение звукового эффекта, когда логическое событие Unity является положительным, и воспроизведение фонового размышления, когда оно отрицательно.

WARNING

Команды условного блока (if, else, elseif, endif) в тексте скрипта не поддерживаются.

Когда существующий сценарий Naninovel выбирается с помощью выпадающего списка, область текста скрипта будет проигнорирована, и выбранный сценарий Naninovel будет воспроизводиться вместо выполняемого в настоящее время; в случае, если вы хотите дополнительно выполнить некоторые команды, не перебивая воспроизведение текущего сценария, используйте область текста скрипта.