Подсимволы. Сборка UI игры
Ключевые слова: ZapWorks Studio, custom symbols, timeline animation, UI, element properties, controllers, states, actions
В прошлом блоке мы рассмотрели, как можно сделать кнопки, а также как эти кнопки подключить через контроллер и экшены. В этот раз мы рассмотрим из чего состоит UI будущей игры и как его сделать. В этом блоке мы сделаем следующие вещи (рис. 1):
создадим информационную панель, в которой будет располагаться символы Timer и Score, отвечающие соответственно за подсчет времени и очков, и также добавим кнопку сдачи заказа;
добавим еще один экран в UI, показывающий набранные очки в конце игры с кнопкой RESTART;
сделаем анимацию, которая будет показывать, соответствует ли сделанная пицца полученному заказу.
Обратите внимание, символов Score и Timer нет во встроенной в студию библиотеке символов, поэтому вам будет необходимо их добавить самим из материалов проекта на гугл диске.
Рис. 1 - Демонстрация результата
Создание информационной панели
Начнем сборку UI с создания информационной панели. В уже ранее созданной UI группе создадим новую группу и назовем ее Info Panel. Далее нам необходимо добавить задний фон чтобы зрительно отделить область. Это можно сделать, переместив объект Plane из медиатеки в иерархию как дочерний объект для объекта-группы Info Panel. Затем нам необходимо привязать группу к верхнему краю, это можно сделать, указав в свойстве RelativeTo значение Z.screenLeft (рис. 2).
Рис. 2 - Свойство для привязки объекта к краю экрана
Помните, что мы изначально работаем в режиме Portrait, однако весь интерфейс и значения студии созданы под ориентацию Landscape, поэтому привязка к левому краю равносильна привязке к верхнему, и соответственно привязка к правому краю эквивалентна привязке к нижнему краю. После применения свойства привязки вы могли заметить, что изменился центр и положение объектов, так и должно быть. Теперь с помощью инструментов S R P или свойств объекта вам необходимо изменить размер получившейся группы и ее положение так чтобы оно соответствовало предполагаемому результату.
Далее мы добавим таймер и подсчет очков. Как уже упоминалось ранее эти два объекта являются символами, поэтому вам необходимо добавить их вручную в окно Symbol Dentitions. После добавления символов у вас в студии откроется окно с инструкцией как этими символами можно пользоваться (рис. 3), в следующем блоке нам это еще пригодится.
Рис. 3 - Инструкция по использованию символа Timer
А мы вернемся к текущему проекту, загруженные символы необходимо добавить в объект-группу Info Panel и расположить в разных сторонах панели. Перейдем к первичной настройке символов. У символов, как и у всех объектов есть свойства, однако некоторые из них являются уникальными, их нет у других объектов. Это связано с тем, что они были добавлены во время создания символа. Нам необходимо установить следующие значения для каждого из символов (рис. 4, 5).
Рис. 4 - Значения для символа Timer
Рис. 5 - Значения для символа Score
Добавив таймер и счетчик подсчета очков, можно перейти к следующему шагу - добавить кнопку, которая будет сдавать заказы, т.е. при нажатии на нее будет активироваться анимация с оценкой приготовленной пиццы. В качестве текстуры для кнопки у нас будет выступать изображение Bell.png. Соответственно его сначала необходимо добавить в медиатеку из материалов на гугл диске, а затем уже из медиатеки перенести в иерархию. Обратите внимание, текущее изображение — это изображение на прозрачном фоне, это значит, что будет отслеживаться нажатие только на черные элементы. С точки зрения пользователя будет неудобно пытаться попасть пальцем по маленьким полосочкам, поэтому мы также под текущее изображение добавим подложку из объекта Plane и объединим два этих объекта под общей группой Bell Button внутри группы Info Panel.
Окно текущего заказа
Перейдем к созданию окна текущего заказа, которое будет располагаться в нижней части экрана. Окно текущего заказа будет выглядеть как текстовые облако, в котором отображается то что говорит повар. Значит в нижнюю группу элементов, будут входить следующие объекты:
текстура текстового облака, как задный фон (background) для текстового объекта;
сам текстовый блок, в котором отображается текущий заказ;
изображение повара, как декоративный элемент.
Рис. 6 - Меню создания Text
После этого на сцене и в иерархии добавится новый текстовый объект. Необходимо изменить его положение соответственно положения текстового облака (background) и также выбрать цвет текста, т. к. по умолчанию цвет текста белый. Размерами текстового поля очень удобно манипулировать с помощью инструмента TXT, который расположен в верхнем левом углу в окне сцены. Во время настройки тестового блока также не забудьте протестировать что весь текст отображается и находится в рамках предполагаемой области.
Контроллер состояния текущего заказа
В прошлом блоке мы рассмотрели, как создавать и подключать контроллеры и сейчас нам необходимо это снова вспомнить. Для управления отображением текущего заказа создадим контроллер Order Generator, который будет отвечать за смену свойства Text у текстового объекта (рис. 7).
Рис. 7 - Свойство Text у текстового объекта
Далее необходимо создать 8 состояний заказов, так чтобы они не повторялись, ниже представлен список текстовых состояний:
None (Margarita);
Pepperoni;
Mushroom;
Pineapple;
Pepperoni + Mushroom;
Pepperoni + Pineapple;
Mushroom + Pineapple (Vegetarian);
All 3 (Pizza Grande).
После создания и настройки свойств проверьте, что при смене состояния изменяется текст на экране. Не забывайте, что по окончанию работы с контроллерами необходимо перейти в base состояние.
Окно окончания раунда
Теперь давайте добавим экран, который будет отображаться пользователю, когда заканчивается время игры. Для начала нам будет необходимо создать саму панель и объединить ее, сделав группой, а затем добавить новый стейт и настроить отображение элементов.
Начнем с создания панели - создадим группу Global Score Button. В качестве заднего фона будем использовать объект Plane. Перетаскиваем его из медиатеки с иерархию и называем Score Panel Background. Далее необходимо добавить два текстовых объекта. У одного свойство текст будет всегда “GAME OVER”, а у второго объекта текст будет меняться в зависимости от того сколько очков наберет пользователь. Соответственно давайте так их и назовем: Game Over Text и Score Text.
Также необходимо добавить кнопку RESTART, нажав на которую пользователь сможет начать новую игру. Данная кнопка добавляется по такому же принципу, как и кнопка START из предыдущего блока. В результате сборки панели у вас должна получиться следующая иерархия (рис. 8). Результат отображения внешнего вида вы можете посмотреть на рисунке 1.3.
Рис. 8 - Иерархия окна окончания раунда
По завершению процесса создания панели можно перейти к созданию состояния. В ранее созданный контроллер Game State добавьте состояние Game Over и установите свойства видимости и кликабельности таким образом чтобы только что созданная панель была доступна только в состоянии Game Over.
Создание окна оценки текущего заказа с использованием timeline анимации
Давайте перейдем к созданию окна оценки текущего заказа и его анимации. Для начала необходимо создать само окно, это можно сделать по аналогии с окном окончания игры. Создадим новую группу и назовем ее Complete Order Panel. Далее добавим ей задний фон с помощью объекта Plane и установим его прозрачность на 50% чтобы панель не перекрывала отображение оверлея. Также внутри группы расположим текстовый объект, у этого объекта в будущем мы будем с помощью скрипта менять значение текстового поля. Результат текущего шага можно посмотреть на рисунке 1.2.
Далее нам необходимо сделать анимацию, которая будет отображаться каждый раз, когда пользователь нажимает на кнопку завершения заказа. Взаимодействие с анимацией работает схожим образом, как и со стейтами. Анимации так же управляются контроллерами, однако их основное отличие заключается в том, что стейт хранит в себе информацию о свойствах объектов, а анимации информацию о смене между “внутренними состояниями”.
Поскольку анимация работает в контексте игры, то мы сделаем ее вложенной в контроллер Game State. Добавить таймлайн можно нажав ПКМ на контроллер и выбрав New Timeline. Я назову анимацию Ranking Timeline. Во время работы с таймлайном, мы можем точно так же добавлять свойства, которыми мы хотим манипулировать и менять их значения.
Для того чтобы создать анимацию на таймлайне необходимо выставить ключевые кадры (keyframes) и настроить между ними переходы. Переходы между различными числовыми значениями настраиваются автоматически после добавления кадров. Переходы между логическими значениями не надо добавлять. Также необходимо связать кадры начала анимации и состояния за кадром (до начала анимации, -1 секунда). Для того чтобы связать два ключевых кадра необходимо выбрать их (они подсветятся оранжевым цветом) и нажать ПКМ. В открывшемся контекстном меню необходимо выбрать Make Line, т. е. связать два кадра между собой. Обратите внимание, что связывание нужно для того, чтобы сделать значения двух кадров одинаковыми. Поэтому есть две опции:
связать с левым значением - к обоим кадром присвоится значение, которое находится левее на таймлайне;
связать с правым значением - к обоим кадрам присвоится значение, которое находится правее.
Таким образом выглядит готовая таймлайн анимация (рис. 9). Попробуйте настроить анимацию длиной в 1 секунду, где на 800 миллисекундах происходит смена состояния из видимого и активного в невидимое и не кликабельное. Нажав на треугольник в верхней части рабочей области, вы можете проиграть анимацию и проверить правильность работы.
Рис. 9 - Пример готового таймлайна
Вы можете найти ресурсы и сделать эту часть проекта сами, или загрузить уже готовый в качестве .zpp файла проекта отсюда (PizzaGame3). В следующем блоке мы разберем как подключить элементы UI и посмотрим на базовое программирование в студии.
Список используемых материалов:
Studio | Timelines [Электронный ресурс] // Официальная страница ZapWorks. – URL: https://docs.zap.works/studio/getting-started/timelines/
Studio | Buttons and Interactivity [Электронный ресурс] // Официальная страница ZapWorks. – URL: https://docs.zap.works/studio/getting-started/buttons-and-interactivity/
Studio | Controllers and States [Электронный ресурс] // Официальная страница ZapWorks. – URL: https://docs.zap.works/studio/getting-started/controllers-and-states/
How to Make an AR Game Using Vuforia [Электронный ресурс] – URL: https://www.raywenderlich.com/6120-how-to-make-an-ar-game-using-vuforia
Last updated
