Занятие 3.2 Зоны и продвинутые свойства объектов
Цель: разработать сцену проекта “Планеты” и подготовить ее для применения логических конструкций.
Задачи:
- Познакомиться с вспомогательным объектом “Зона”
- Изучить возможные логические конструкции для применения операторов условия
- Усвоить понимание UX/UI-дизайна и для чего он нужен
- Создать объекты для реализации комфортного и удобного UX/UI-дизайна
- Усвоить работу с базовыми свойствами объекта в инспекторе
- Изучить продвинутые свойства объектов объектов
- Расставить все необходимые объекты на сцене через desktop/vr редактор
- Закрепить навыки, полученные в лекционном материале.
- Усвоить навык работы по сформированному техническому заданию
Методические материалы для подготовки к занятию:
Пошаговая инструкция по разработке кейсов #3.
В кейсовом задании “Планеты” мы познакомимся с логическими конструкциями Blockly с применением условных операторов из категории “Логика” и познакомимся с базовыми свойствами объектов в инспекторе.
Для начала создайте новый проект, дайте ему название и выберите сцену.
В примере будет сцена “Космопорт”, но вы можете выбрать альтернативную, главное условие - на сцене должен быть жесткий “пол” для перемещения, поэтому, например, “Empty Scene”, не подойдет.
Примечание: в будущем мы познакомимся с приемом как можно сделать такой “пол” (или, если давать правильный термин - “зона для телепортации”) из любого объекта.
Формирование Технического Задания
Для того, чтобы определиться какие объекты нам необходимо разместить на сцене, как мы договорились в предыдущей главе, начнем с формирования Технического задания (ТЗ).
ТЗ: Необходимо создать проект на Varwin, который позволял бы проверять знания о порядке расположения планет солнечной системы, относительно солнца.
Обязательные требования:
- Необходимо использовать минимум 3 первых планеты от Солнца.
- В приложении должен быть реализован удобный UX/UI-дизайн (что это такое, поговорим, когда дойдем до этого шага), позволяющий пользователю понять что ему необходимо сделать и в какие точки размещать планеты.
- В приложении должна присутствовать механика, позволяющая определить на правильное место мы поставили планету или нет.
- После размещения всех планет на своих местах должно произойти событие, которое явно бы показывало пользователю о том, что он все сделал правильно.
Далее при разработке кейсового задания мы будем возвращаться к этим пунктам.
Пойдем по порядку.
Размещение необходимых объектов на сцене.
Сначала давайте еще раз почитаем ТЗ и поймем, какие объекты на сцене нам потребуются.
Размещение планет.
из ТЗ: “Необходимо создать проект на Varwin, который позволял бы проверять знания о порядке расположения планет солнечной системы, относительно солнца”.
Первый вывод, который можно сделать - нам понадобится Солнце, разместим его на сцене в удобном месте:
из ТЗ: “Необходимо использовать минимум 3 первых планеты от Солнца”.
Кроме Солнца на понадобятся три первые планеты: Меркурий, Венера и Земля:
Самостоятельная работа: Из астрономии мы знаем, что эти планеты имеют различный размер. Давайте сверимся с данными и попробуем сделать размер этих планет более реалистичным. В целом, рекомендуется сделать все планеты чуть меньше, чтобы пользователю было удобнее брать их в руки и переносить.
Размещение зон.
Итак, у нас должна получиться примерно следующая картина:
Из ТЗ: В приложении должна присутствовать механика, позволяющая определить на правильное место мы поставили планету или нет.
Для того, чтобы реализовать эту механику нам лучше всего подойдет объект “Зона”, который является вспомогательным объектом Varwin.
Определение:
Вспомогательный объект Varwin - это объект, который выполняет исключительно логическую функцию и не предполагает, что пользователь будет взаимодействовать с ним напрямую. Такой объект виден при размещении на сцене в редакторе логики, но в режиме просмотра приложения он будет невидим для пользователя.
Разместим три зоны на одной линии, относительно солнца, сделаем их размеры удобными для размещения планет (советуем по размерам ориентироваться на самую большую планету, чтобы она помещалась в зону). Это пункты 1,2,3 на картинке.
Совет: не забывайте использовать функцию копирования (CTRL+C - копировать, CTRL+V - вставить), чтобы расставлять объекты быстрее.
Каждой зоне зададим название, для дальнейшего удобного поиска нужной зоны в редакторе логики (4). Например, зона, где должна будет находиться “Земля” дадим имя “Зона Земля”.
Сохраните проект.
Попробуйте запустить проект в режиме Desktop, чтобы убедиться - в режиме просмотра зоны невидимы.
Создание UX/UI-дизайна
Поскольку зоны невидимы в режиме просмотра проекта, то логично, что пользователю будет не до конца ясно, в какие позиции ему будет необходимо разместить планеты, нам необходимо решить эту проблему.
Из ТЗ: В приложении должен быть реализован удобный UX/UI-дизайн, позволяющий пользователю понять что ему необходимо сделать и в какие точки размещать планеты.
Определение UX/UI:
Мы уже знаем, что такое UI – user interface, пользовательский интерфейс - это дизайн кнопок, текстовых панелей, полей ввода – всех точек взаимодействия пользователя с приложением.
UX – user experience, пользовательский опыт - это то, какой опыт/впечатление получает пользователь от работы с вашим интерфейсом. Удается ли ему достичь цели и на сколько просто или сложно это сделать (удобно ли читать текст, взаимодействовать с объектом, насколько вообще ему понятен сценарий вашего приложения).
UX/UI дизайн — это проектирование любых пользовательских интерфейсов в которых удобство использования так же важно, как и внешний вид.
Работа с объектом “Текст”, свойства “Текста
Для того, чтобы пользователю было понятно что делать при запуске приложения добавим UI - объект “Текст” (1).
Выделите этот объект, на правой панели (инспектор) вы увидите свойства текста категории “Текст”.
В первую очередь давайте впишем в поле “Текст” формулировку задания для пользователя (2).
Поменяйте цвет панели, для этого нажмите на прямоугольник (1).
Во вспомогательном окошке вы можете выбрать цвет, просто выбрав мышкой нужную область на цветовом поле (2). Или с помощью ползунков “RGB”.
Чтобы изменить прозрачность используйте нижний ползунок “A”.
Самостоятельная работа: поиграйте с другими свойствами из категории “Текст”, создайте свой уникальный UI.
Совет: старайтесь размещать текст так, чтобы его было удобно читать пользователю, на уровне глаз и достаточного размера. В нашем случае лучше всего разместить текст напротив точки появления игрока, чтобы он сразу увидел текст задания. Чтобы это понять протестируйте приложение в режиме просмотра.
Базовые свойства типа “Взаимодействие”.
Теперь давайте разберемся с базовыми свойствами объектов из категории “Взаимодействие” на примере текста. Пока не вдаваясь в детали, на начальном интуитивном уровне.
Поскольку текст является UI, то предполагается, что он будет просто висеть в воздухе, игрок не должен с ним взаимодействовать (только читать).
- Для этого нам нужно отключить для объекта гравитацию, чтобы он не упал при запуске приложения.
- Текст не должен являться препятствием, чтобы игрок и другие объекты могли свободно проходить сквозь него.
- Текст не является зоной телепорта, мы не можем на него “прыгнуть”.
- Текст является статичным объектом, не предполагается, что он будет перемещаться по сцене и сдвигаться другими объектами. Поставим соответствующие галочки (1).
Чтобы пользователь никак не мог взаимодействовать с текстом контроллерами, то снимаем все галочки (2):
- Можно брать в руку.
- Можно использовать.
- Можно дотронуться.
Это довольно стандартная схема для свойств объекта типа UI, которая пригодится нам в следующем разделе. Запомните ее.
Размещение точек установки планет.
Вторым шагом нам необходимо дать понять пользователю в какие зоны необходимо разместить планеты. Также обратимся к UI.
Для этого используем объект “Плоскость” и разместим на сцене (1).
Чуть-чуть поднимем плоскость над землей, чтобы она не сливалась с текстурой “пола” (2).
Можете вручную вписать координату для удобства.
А также применим к плоскости те же самые свойства взаимодействия, что и к тексту (3).
Примечание: Обратите внимание, что у плоскости также как и текста можно поменять цвет в свойствах Материала, можете этим воспользоваться. Другие свойства Материала мы рассмотрим в следующих темах.
Самостоятельная работа: вы уже знаете достаточно, чтобы добиться результата как на картинке ниже, сделайте это!
Размещение объектов для проверки результата.
Из ТЗ: В приложении должна присутствовать механика, позволяющая определить на правильное место мы поставили планету или нет.
В целях реализации этой механики в данном проекте предлагается использовать объект “Смайлик”.
Смайлик в зависимости от условий может менять свою эмоцию: безразличие, грусть, радость.
Давайте разместим эти объекты на сцене (1).
Не забываем давать логичные названия, соответствующие планетам (2).
Поскольку фактически смайлик тоже является UI, то не забываем и о правильных свойствах взаимодействия.
Логика в будущем будет строиться на том, что, если мы помещаем планету в правильную зону, то смайлик становится веселым.
Поэтому давайте сразу зададим грустную эмоцию смайлика через инспектор.
Совет: у некоторых объектов есть свои уникальные свойства, которые можно настраивать через инспектор, как у смайлика. Обращайте на это внимание.
На следующем занятии мы начнем разрабатывать логику для нашего проекта, поработаем с редактором логики Blockly, реализуем проверки соответствия планет и проверку условия победы.
Контрольные вопросы (выборочно можно использовать на этапе рефлексии, для проверки усвоения знаний, полученных на занятии):
- Что такое техническое задание?
- Для чего нужен объект “зона” и какой у него тип?
- Какие продвинутые свойства объектов вы знаете?
- Какие 4 эмоции есть у объекта “смайлик”?