Сенсорные джойстик-контролы

Нажмите здесь, чтобы увидеть проект.

Обзор

В этом учебнике представлена библиотека Touchscreen Joypad, которую можно установить и настроить для любого проекта, которому требуются сенсорные контролы.

Мы рекомендуем ознакомиться с системой пользовательского интерфейса PlayCanvas, если вы еще не использовали ее, так как она используется для отображения и позиционирования контролов для этой библиотеки.

Установка

Откройте пример проекта, щелкните правой кнопкой мыши на папке 'touch-joypad' и выберите 'Копировать'.

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

Добавление джойстика

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

• Левый/Правый фиксированный сенсорный джойстик - фиксированный джойстик, закрепленный в левом/правом нижнем углу экрана. Рекомендуется для игр с быстрой реакцией, где ожидается мгновенный ответ, например, для ретро-платформера.
• Левый/Правый половинный сенсорный джойстик - джойстик, у которого область ввода занимает левую/правую половину экрана, и джойстик перемещается туда, где вы касаетесь этой области, а затем требует перетаскивания для движения. Рекомендуется для случаев, когда нужно "толкать" или "тянуть" объект в приложении.

Для этого примера давайте использовать шаблон 'Left Half Touch Joystick'.

Создайте 2D-экран Entity и добавьте шаблон в качестве дочернего элемента экрана Entity.

Джойстик состоит из трех Entity:

• Область ввода (обведена красным)
• Основание (обведено синим)
• Ручка (обведена синим)

Область ввода будет прослушивать сенсорные и мышиные (для отладки) события, а также останавливать их распространение.

Это означает, что любые элементы пользовательского интерфейса под этим и любые события pc.Mouse или pc.Touch не будут вызываться, если сначала будет взаимодействовать с этой областью.

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

Он также имеет 'touchJoystick', который содержит всю логику и атрибуты для джойстика. Каждый атрибут имеет всплывающие подсказки, описывающие, для чего они предназначены, с некоторыми подробностями ниже.

Базовые и ручка Entity управляются скриптом и являются элементами пользовательского интерфейса. Если вы хотите, чтобы джойстик находился в другом месте, чем в шаблоне, пожалуйста, расположите и закрепите базовый Entity там, где вам нужно, а не область ввода.

Типы поведения

Существует 3 типа поведения для джойстика, которые обычно встречаются в сенсорных играх и приложениях.

'Фиксированный на месте', где основание джойстика не двигается от своей позиции:

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

'Перемещение к первому касанию и перетаскивание', где основание джойстика перемещается туда, где пользователь впервые касается области ввода, а затем перетаскивается, когда пользователь перетаскивает за пределы диапазона джойстика:

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

Чтение значений джойстика

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

Значения всегда нормализуются между -1 и 1 по обеим осям на основе того, где находится ручка между мертвой зоной (красный круг) и диапазоном (синий круг).

Размер кругов можно установить в редакторе через атрибуты скрипта.

Значения джойстика можно получить в коде из глобального объекта Javascript window.touchJoypad.sticks с идентификатором. По умолчанию идентификатором является 'joystick0', но его можно изменить в редакторе в скрипте для более конкретного обозначения.

Пример кода:

// Получить джойстик по идентификатору из глобального объекта
var joystick = window.touchJoypad.sticks['joystick0'];

// Получить нормализованные значения обеих осей джойстика и вывести в консоль
console.log('X: ' + joystick.x + ', Y: ' + joystick.y);

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

Добавление своих кнопок

Кнопки - это элементы пользовательского интерфейса с фиксированным положением на экране. Шаблон для кнопки находится в папке "templates" и должен быть добавлен в качестве дочернего элемента Entity экрана.

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

Как и джойстики, у них есть идентификатор, чтобы их можно было получить в коде из глобального объекта Javascript window.touchJoypad.buttons с использованием следующего API.

Джойстики также являются кнопками, что дает дополнительную гибкость в их использовании. Например, использование API wasTapped с идентификатором джойстика может действовать как ввод L3/R3 на контроллере PlayStation.

Пример кода:

// Получить глобальный объект кнопки
var buttons = window.touchJoypad.buttons

// Проверить, была ли кнопка нажата с момента последнего кадра
console.log('Была нажата: ' + buttons.wasPressed('button0'));

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