Создание кнопок. Работа с управляющими элементами. Контроллеры

Ключевые слова: ZapWorks Studio, controllers, states, buttons, UI, actions

В прошлом уроке мы с вами рассмотрели, как можно сделать базовое приложение с дополненной реальностью с использованием Image Tracking. В этот раз мы рассмотрим, как можно сделать кнопки, управляющие отображением 3D моделей топпингов пиццы. Также, мы с вами сделаем стартовый экран, таким образом разделив игру на два состояния - два экрана, где первый экран абсолютно пустой с огромной кнопкой START и второй экран, где уже расположены и кнопки отслеживается пицца (рис. 1).

Рис. 1 - Демонстрация результата

Создание управляющих кнопок

Давайте начнем сначала с создания кнопок. В студии не реализован полноценный интерфейс создания и манипуляции UI элементами (элементы пользовательского интерфейса) в сравнении с Unity, поэтому любые нажатия на интерфейс отслеживаются с помощью обработчиков событий, которые позволяют понимать какой объект с каким взаимодействует.

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

Получается, что кнопка начинается с области, на которую можно нажать и соответственно нам необходимо эту область создать. Кнопки можно создавать двумя способами: из объекта Plane, который расположен в медиатеке или напрямую из объекта изображения (вкладка Images в окне медиатеки). Для создания нам сначала необходимо перетащить выбранный объект из окна медиатеки в окно иерархии, а затем при необходимости мы можем добавить текстуру или изменить цвет кнопки.

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

В рамках проекта у нас будет три кнопки, где у каждой кнопки есть два положения: кнопка нажата — это белая текстура и кнопка не нажата — это черная. Таким образом вам необходимо добавить 6 изображений в медиатеку. Затем необходимо эти кнопки добавить в окно иерархии. Поскольку у нас будет много различных элементов UI, я сразу создам для них общую группу, и также создам вложенную общую группу для трех кнопок топпингов. В результате должна получиться следующая структура в иерархии (рис. 2).

В процессе добавления изображений с иерархию вы могли заметить, что только что добавленные кнопки слишком большие и находятся в центре сцены (окно viewport). Вы можете изменить положение, вращение и размер через свойства в окне Properties или с помощью инструментов S R P в верхнем левом углу сцены. Помните, что изменяя свойства родители вы автоматически изменяет отображение детей, это удобно использовать во время манипуляций группами объектов.

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

Настройка и подключение контроллеров

Теперь, когда у нас есть кнопки, т. е. область, на которую пользователь может нажать, мы можем подключить взаимодействие с этими кнопками. Это можно сделать двумя способами: через контроллеры и их состояния, и с помощью программирования. Сейчас мы с вами рассмотрим простой вариант с помощью контролеров и экшенов, а уже в самом последнем шаге посмотрим, как это сделать с использованием программирования на примере других кнопок.

Работа с контролерами и состояниями всегда происходит в окне контроллеров. В первую очередь нам необходимо добавить новый контроллер, который будет отвечать за переключение кнопок. Для примера создадим контроллер Pepperoni, сначала нажимаем на кнопку “+”, а затем выбираем New Controller. Если мы посмотрим на логику работы нашей будущей кнопки, то поймем, что она работает в двух состояниях:

Соответственно вот эти два логических состояния нам и надо добавить в контроллер. Состояние можно добавить, выбрав необходимый контроллер и нажав New State. Я называю состояния OFF и ON соответственно (рис. 3).

Рис. 3 - Контекстное меню для создания контроллеров и состояний

Далее нам необходимо в наши состояния подключить свойства объектов. Для этого, обязательно вначале надо выбрать интересуемое нас состояние в окне контроллеров, а затем добавить свойство нажав на + или три полоски (в зависимости от типа данных) которые находятся напротив него в окне свойств (рис. 4).

Рис. 4 - Окно свойств в режиме добавления в состояние

Поскольку, как мы уже успели выяснить нам необходимо манипулировать отображением 3D модели пеперони, мы добавляем в состояние её свойство Visible. Также нам необходимо менять отображение кнопки, поэтому и тут нам необходимо добавить свойства Visible для двух объектов: Pepperoni.png и Pepperoni_select.png. Однако это еще не все, также необходимо для двух этих объектов добавить свойство Enabled. Оно отвечает за то является ли объект кликабельным. Обратите внимание, пока вы не уберете галочку с этого свойства и пока ваш объект находится ниже в иерархии, срабатывание будет происходить автоматически для более нижнего элемента. Свойство Visible никак на влияет на срабатывание, поэтому то, что элемент прозрачный еще не значит что он неактивный.

После того, как вы добавите все перечисленные пять свойств, их можно настроить для обоих состояний. Настройка также происходит в окне свойств, а в окне рабочей области можно контролировать результат (рис. 5). Подумайте и попробуйте сами понять какие долны быть значения у выбранных свойств, чтобы контроллер корректно работал.

Рис. 5 - Окно рабочей области

Итак, мы закончили настраивать один контроллер, внутри которого есть два состояния. В конце работы с контроллерами всегда необходимо перемещать активную (выделенную) зону на состояние base, таким образом мы выходим из состояния добавления или изменения свойств в состояниях. Далее нам необходимо соединить созданный контроллер с объектом кнопки. Подобного рода взаимодействия можно реализовывать через Actions. Обратите внимание, если вы не перешли в base состояние, то вы просто не сможете добавить action. Для того чтобы добавить действие, необходимо нажать на кнопку Add. В студии на данный момент доступно три типа обработчиков событий, которые будут ожидать конкретного действия от пользователя для выбранного объекта. Нам необходимо чтобы кнопка работала по нажатию, поэтому выбираем событие On Tap. Далее нам необходимо выбрать что будет происходить по нажатию. Поскольку мы с вами уже настроили контроллер и два состояния, то мы хотим этими состояниями манипулировать. Значит нам необходимо выбрать действие Activate State, а затем выбрать необходимый контроллер и его состояние. Когда action полностью готов напротив объекта появляется желтый круг со стрелкой, который показывают, что к объекту применен action (рис. 6). Таким образом вам необходимо настроить action для двух объектов Pepperoni.png и Pepperoni_select.png. И затем можно тестировать результат.

Рис. 6 - Результат подключения стейта контроллера через Actions

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

​Создание стартового экрана

Создание стартового экрана работает схожим образом, как и создание кнопок. Необходимо подобным образом создать кнопку START и контроллер Game State который будет отвечать за отображение необходимых элементы UI. Контроллер Game State содержит два состояния:

• Not Started Yet - когда пользователь только зашел в игру, ему доступна только кнопка начать игру;

• Playing - когда пользователь находится в процессе игры, т. е. может нажимать на кнопки топпингов и видеть оверлей при наведении на маркер.

В каждом из состояний какие-то элементы должны быть кликабельны и видны, а какие-то должны быть скрыты. Попробуйте сами сделать контроллер и два его состояния, опираясь на Рис. 1 в начале текущего блока. Обратите внимание, что кроме настройки двух состояний вам также необходимо подключить action к кнопке START, так чтобы по нажатию на нее происходил переход от состояния Not Started Yet в состояние Playing.

Вы можете найти ресурсы и сделать эту часть проекта сами, или загрузить уже готовый в качестве .zpp файла проекта отсюда (PizzaGame2). В следующем блоке мы разберем как добавить элементы UI и подготовить их к взаимодействию с другими игровыми объектами.

Список используемых материалов:

1. Studio | Buttons and Interactivity [Электронный ресурс] // Официальная страница ZapWorks. – URL: https://docs.zap.works/studio/getting-started/buttons-and-interactivity/

2. Studio | Controllers and States [Электронный ресурс] // Официальная страница ZapWorks. – URL: https://docs.zap.works/studio/getting-started/controllers-and-states/

3. How to Make an AR Game Using Vuforia [Электронный ресурс] – URL: https://www.raywenderlich.com/6120-how-to-make-an-ar-game-using-vuforia