Занятие 4.2 Размещение примитивов на сцене
Цель: построить локацию образовательного проекта “Реконструкция сражения”, использовать элементы UI-дизайна. Подготовить локацию для применения логики.
Задачи:
- Разместить все необходимые объекты на локации
- Закрепить навык использования объектов “Текст”, как элементов UI-дизайна
- Научиться правильно использовать иерархию объектов в Varwin
- Расставить все объекты на локации структурировано, с использованием иерархии
- Усвоить навыки масштабирования, перемещения и поворота объектов.
- Усвоить навыки тестирования своих проектов на баги/ошибки
- Научиться настраивать текстуры на примитивных объектах
- Закрепить навыки использования свойств объекта
- Усвоить навык поиска референсов для локации и объектов на локации
Методические материалы для подготовки к занятию:
Пошаговая инструкция по разработке кейсов #5.
В этом кейсе мы познакомимся с примитивами Varwin (из библиотеки “Простые объекты”), а также научимся работать со стандартной логикой перемещения, вращения и масштабирования объектов.
Работая в привычной нам логике каждый проект начинаем с технического задания.
Техническое задание:
Необходимо разработать приложение на платформе Varwin, которая бы в схематичной форме представляла все фазы Куликовской битвы.
- В приложении должна быть реализована механика перемещения схематичных войск.
- Если полк несет потери, то его размер должен уменьшаться.
- Необходимо использовать правдоподобную схему Куликовской битвы.
- Приложение должно отражать три основные фазы боя:
- Первый этап составил бой авангардов: русских Сторожевого и Передового полка с легкой конницей Золотой Орды. Летопись указывает, что столкновение уже на этом этапе носило ожесточенный характер «и бысть брань крепка и сеча зла зело». Почти вся пехота этих полков «аки древеса сломишася, и аки сено посечено лежаху...»
- Одновременно конница Мамая атаковала полки Правой и Левой руки. Атака русского правого фланга была отбита. Более успешной была атака монгольской конницы против левого фланга русского войска. Почти все воеводы полка Левой руки были убиты. Полк стал подаваться назад, освобождая место для атакующей татарской конницы. Сражающиеся отошли до берега Непрядвы. Путь отхода к переправам был отрезан.
- Именно в это время воевода Дмитрий Боброк, наблюдавший из Зеленой Дубравы за ходом сражения, решил включить в него Засадный полк, состоящий из отборной, хорошо вооруженной конницы. Своевременный ввод в сражение крупного резерва, изменивший соотношение сил на направлении главного удара Орды, послужил поворотным моментом всего сражения. Ордынская конница пришла в смятение.
Создайте проект и выберите пустую сцену (Empty Scene), как в кейсовом задании с панорамами. В этом случае мы создадим локацию “с нуля”, используя средства платформы Varwin.
Создание локации.
Для начала нам необходимо будет реализовать реалистичное поле боя, которое бы соответствовало реальным историческим событиям.
Для этого проще всего найти схему битвы в “Google” или “Яндекс” по запросу “Схема Куликовской битвы”. Таким образом, нам будет проще собирать логику приложения, в том числе. Т.к. все условные обозначения и перемещения войск уже есть на карте.
Далее загружаем понравившуюся картинку и импортируем ее в ресурсы Varwin.
Совет: если вы забыли как импортировать ресурсы, то вы всегда можете обратиться к главе 2.2.2!
Далее необходимо сделать основу в виде “земли” на пустой сцене по которой будут перемещаться войска. Для этого выберете уже знакомый объект “Плоскость”, вытащите его на сцену (1) и не забудьте установить правильные свойства и параметры (2).
Не стесняйтесь сразу сделать этот объект побольше, т.к. поле боя должно быть большим относительно игрока.
А также оно обязательно должно являться препятствием , чтобы другие объекты не проваливались сквозь него и не иметь гравитации, чтобы объект не провалился в бесконечность пустой сцены.
Далее мы применяем (1) загруженный ресурс “Схема Куликовской битвы” как текстуру для объекта “Плоскость”. У нас получается поле битвы в двухмерном виде, поверх этого вида мы будем выстраивать дальнейшие взаимодействия.
Следующее что нам нужно сделать это разместить сферическую панораму облаков, т.к. смотреть реконструкцию боя мы будем сверху вниз и как бы находится в облаках. Вспоминаем второй кейс, ищем ресурс для панорамы, добавляем объект панорама на сцену и масштабируем до нужных нам размеров, чтобы закрыть края плоскости.
То что мы сделали с панорамой называется cкайбокс.
Определение:
Скайбо́кс (англ. sky — «небо» и box — «коробка») — объект в трёхмерной графике, играющий роль неба и горизонта. Представляет собой несложную трёхмерную модель (как правило, куб или сферу), с внутренней стороны которой натянута текстура неба (так называемая «кубическая текстура»).
Для самостоятельной работы вам предлагается расставить дополнительные объекты на локации, так называемые “пропсы”.
Определение: Объекты которые раскрывают или дополняют локацию в дизайне уровней называют «пропсами» (от англ. «props» — реквизит). Они выполняют роль бутафорского реквизита на помогают зрителю в полной мере прочувствовать обстановку места действия.
Обычно при планировании нового уровня выделяют три группы пропсов:
Крупногабаритные объекты (массивные конструкции, павильоны, ограждения, автомобили, грузовики, деревья и т.д.)
Среднегабаритные объекты (домашняя и уличная мебель, рекламные вывески, антенны, мачты освещения, контейнеры и т.п.)
Малогабаритные объекты (мелкие детали интерьера и экстерьера — бутылки, камни, трава, листья и т.д.)
Основными объектами на нашей локации будут примитивы, играющие роль сражающихся полков. А пропсами на нашей локации будут деревья.
Самостоятельная работа: ищем 3D-модели для пропсов и расставляем их на локации. Нужно максимально украсить локацию.
В конечном итоге у Вас должно получиться что-то подобное:
Работа с примитивами.
В этом блоке мы с помощью примитивных объектов расставим войска и настроим их свойства.
Далее согласно схеме боя мы расставляем войска, делаем это с помощью объектов типа “Куб” и масштабируем, вращаем и перемещаем объекты чтобы они смотрелись так как нам нужно.
Также обозначим с помощью других примитивов места базирования главнокомандующих, Ставку Мамая и Русский Стан.
Самостоятельная работа: Вам необходимо изменить цвет материала русских войск на красный, а цвет войск Мамая на синий.
Также необходимо создать дополнительную плоскость по которой можно будет телепортироваться и рассматривать поле боя. Она должна находиться на уровне облаков. Выглядеть это должно вот так:
Последним шагом расстановки объектов на сцене нам нужно создать несколько вспомогательных объектов типа “Точка”. В дальнейшем в редакторе логики “Blockly” мы создадим события с помощью которых наши войска будут двигаться, и благодаря этим точкам нам будет проще задать направление движения.
1 и 2 - точки правого фланга;
3, 4 и 5 - точки центра;
6, 7 и 8 - точки левого фланга;
9 - направление побега войск Мамая, её можно поставить далеко за нашей схемой боя.
По координате Y эти точки расположены выше на половину своей высоты, чтобы войска были расположены над плоскостью со схемой сражения.
Создание UI-дизайна.
Для того чтобы анимировать фазы боя нам необходимо разработать несколько кнопок для переключения между фазами, а также главную информационную панель, в которую мы будем добавлять описание определенной фазы из ТЗ.
Для кнопок будем использовать объект типа “Текст”. Мы уже делали подобные элементы во втором кейсе с панорамами, только там они использовались для переключения между панорамами, а тут будут использоваться для перехода из фазы в фазу и анимации.
Самостоятельное задание: создать понятный UI-дизайн переключения между фазами сражения. Должно быть 3 кнопки на каждую фазу, при переключении на каждую фазу должно присутствовать описание этой фазы. Финальный UI-дизайн должен выглядеть примерно так:
Контрольные вопросы (выборочно можно использовать на этапе рефлексии, для проверки усвоения знаний, полученных на занятии):
- Что такое пропсы и какие они бывают?
- Какие примитивные объекты вы использовали в этом проекте?
- Что такое скайбокс?
- Сколько объектов типа “Пропсы” можно использовать на одной локации?
- Что такое иерархия, родительские и дочерние объекты?