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

Обзор

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

Она использует элемент ввода HTML, который наложен поверх холста рендеринга PlayCanvas и позиционируется в зависимости от того, используется ли мышь или сенсорный экран для взаимодействия с элементом ввода.

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

Если используется сенсорный экран, предполагается, что будет показана виртуальная клавиатура, и элемент ввода HTML позиционируется соответственно.

Вот примеры его использования на компьютере:

И на мобильных устройствах:

Примечание: Это не поддерживает 3D-элементы.

Как установить

Откройте пример проекта, щелкните правой кнопкой мыши на папке 'ui-input' и выберите 'Copy'.

Откройте свой проект, щелкните правой кнопкой мыши на панели ассетов и выберите 'Paste'

Добавление вашего первого текстового поля

Создайте элемент Entity изображения/группы пользовательского интерфейса в качестве дочернего элемента экрана пользовательского интерфейса 2D и установите соответствующий размер. Обязательно включите 'Use Input' на компоненте Element. Это определяет область ввода, на которую пользователь может нажать и начать вводить текст.

Добавьте компонент Script к элементу Entity и добавьте тип сценария 'uiInputField'.

Создайте элемент Entity текста пользовательского интерфейса в качестве дочернего элемента элемента Entity, который мы только что создали. Текст в элементе будет обновляться на основе ввода пользователя и данных атрибутов сценария.

Вернитесь к типу сценария 'uiInputField', который добавили ранее, укажите ссылку на элемент Entity текста и измените данные атрибутов сценария в соответствии с вашим вариантом использования. Наведите указатель мыши на каждый атрибут, чтобы увидеть всплывающую подсказку и описание.

Наконец, запустите сцену для тестирования.

Продвинутый: Как стилизовать

Библиотека использует нейтральный цветовой стиль для элемента ввода HTML. Если вы хотите изменить стиль, чтобы он лучше соответствовал вашему приложению, вы можете изменить CSS в 'ui-input-library.js' в функции createInputDom.