Подготовка маркера. Сборка базового проекта

Ключевые слова: ZapWorks Studio, Image Tracking, symbols, 3D models, overlay, marker, target

​Подготовка к работе

Для создания проектов с отслеживанием изображений эти изображения для начала необходимо подготовить к работе - преобразовать изображения в маркеры. В экосистеме ZapWorks это можно сделать двумя способами: с помощью встроенного интерфейса в студии и с помощью утилиты ZapWorks CLI. В данном блоке мы с вами рассмотрим только первый вариант. Связано это с тем, что утилита ZapWorks CLI используется в основном для работы в паре с Universal AR SDK, и ориентировано на промышленную разработку проектов.

Подготовка и добавление маркеров в студию работает через Медиатеку. Вам необходимо нажать "+" в верхнем правом углу, и в выпадающем контекстном меню выбрать опцию Train Image File (рис 1). Далее у вас откроется окно загрузки файлов, где вам необходимо выбрать желаемое изображение.

​Во время импорта изображений, студия предоставляет возможность выбрать дальнейшую ориентацию маркера. Если в процессе работы вы поняли, что выбрали не тот вариант, не переживайте. Ориентацию маркера можно изменить в любое время, щелкнув на него правой кнопкой мыши в Медиатеке и выбрав Properties (свойства). Ориентация может быть в двух вариантах (рис. 2):​

• upright - вертикально для расположения как плаката на стене например;

• flat - горизонтально, как что-то что можно положить на стол или пол.

Рис. 2 - Меню настройки свойств маркера

Далее алгоритмы студии анализируют изображение с разных углов, ищет контрольные точки распознавания и создает новый файл в Медиатеке. Все маркеры хранятся в отдельной вкладке targets (рис. 3).

Рис. 3 - Медиатека после добавления маркера

Если ваше изображение не добавляется, убедитесь, что исходное изображение было экспортировано с цветовым пространством RGB (CMYK не поддерживается) и что изображение имеет стандартное разрешение, например 1920х1080, 1024х1024 и т. д. Изображения с разрешением более 4k могут приводить к ошибкам. В этом случае попробуйте использовать версию вашего изображения с более низким разрешением. Ниже представлен полный процесс создания маркера (рис. 4).

Рис. 4 - Процесс создания маркера в студии

ВАЖНО!!! Для сохранения или предпросмотра проекта, вам необходимо войти в учетную запись ZapWorks. Поэтому если вы пока не зарегистрировались, вы можете сделать это перейдя по этой ссылке. Далее в процессе работы вам будет необходимо из студии войти в учетную запись ZapWorks, ваши данные сохранятся в системе. Однако во время каждого нового открытия студии у вас будет появляться окно авторизации (рис. 5). Поскольку вы уже сохранили данные в системе, нажав на кнопку Login with browser, вы автоматически сможете войти в систему без лишних действий.

Рис. 5 - Окно авторизации в системе

Сборка базового проекта

Для начала необходимо перетащить маркер из Медиатеки в окно Иерархии, так в окне сцены (viewport) отобразится для предварительного просмотра изображения маркера, а в Иерархии добавится новый объект (рис. 6).

Рис. 6 - Добавление маркера на сцену

Затем необходимо добавить оверлей, чтобы при наведении на маркер что-то отображалось. Для добавления оверлея необходимо также перетащить объект в окно иерархии, однако, обратите внимание, что объект должен быть дочерним элементом для объекта маркера (рис. 7). Любой контент, добавленный в объект маркера в Иерархии, будет одинаково отображаться относительно этого маркера как в окне предварительного просмотра, так и при просмотре в приложении Zappar.

Рис. 7 - Добавление Оверлея на маркер

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

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

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

1. General | What Makes a Good Tracking Image? [Электронный ресурс] // Официальная страница ZapWorks. – URL: https://docs.zap.works/general/design/what-makes-good-tracking-image/

2. General | Image Tracking [Электронный ресурс] // Официальная страница ZapWorks. – URL: https://docs.zap.works/studio/getting-started/image-tracking/

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