Полное руководство и инструкции по созданию AR-проектов.
Словарь терминов
Редактор – графический движок, инструмент для создания/редактирования AR-проектов. Включает панель инструментов, дерево элементов (объектов), окно просмотра, инспектор значений.
AR-проект (или проект) – сцена или набор сцен в слое дополненной реальности.
AR-проект – это всегда один QR-код (один адрес проекта).
Сцена – объект или группа объектов с их свойствами и анимацией в слое дополненной реальности. При открытии проекта всегда открывается одна сцена, которая может переключаться на новую по клику на кнопку или может открываться новая сцена при повторном открытии проекта (рандомизация).
Объект – это любой элемент в трёхмерном пространстве, из которого строится сцена. Каждый объект имеет тип с соответствующим набором параметров.
Дерево элементов – структура объектов представленных в проекте.
Свойства объекта – заданные в редакторе параметры объекта (позиция, вращения, масштаб, прозрачность, яркость, цвет, анимация и т.д.).
Тип объекта определяет его поведение и набор свойств.
Типы объекта – group (группа), button (кнопка), primitive (примитив может быть изображением, видео, прозрачной стеной или объемной фигурой), model (трехмерный макет – 3D модель), text (текст), background (фон).
Поддерживаемые форматы и требования к файлам
1. Изображение.
Формат: .png, .jpg/.jpeg. Макс. размер: 500 KB.
2. Видео.
Формат: .mp4, .webm. Макс. размер: 10 MB.
3. 3D-модель.
Формат: .glb (gltf-binary). Макс. размер: 4 MB.
4. Аудио.
Формат: .mp3. Макс. размер: 1 MB.
Используйте конверторы и сжимайте файлы, если имеющиеся у вас исходники не поддерживаются.
Например файл в формате gif не поддерживается, но его легко можно конвертировать в mp4 на сторонних ресурсах, а в наше редакторе имеется функция "как gif", которую можно включить для видео файла.
Стремитесь максимально уменьшить объем сцены для более быстрой загрузки. Помните, что скорость интернета и мощность устройств у всех разная.
Требования к изображению для трекинга.
Необходима хорошая детализация: богатая текстура или большое количество уголков. Картинка должна совпадать с напечатанной (той, на которую будет накладываться AR). Не рекомендуется передавать картинки через соцсети или сохранять в JPEG – при конвертации теряются детали и добавляются шумы. Не используйте изображения с прозрачным фоном.
Формат: .png, .jpg/.jpeg. Макс. размер: 20 MB.
Максимально допустимый размер проекта
Максимально допустимый размер проекта – 20 MB.
Ограничение обусловлено технологией. Загрузка сцены происходит в браузере и чем тяжелее сцена, тем дольше грузится проект.
В итоге скорость загрузки зависит от трех факторов – веса сцены, скорости интернета и мощности устройства на котором открывается проект.
Старайтесь минимизировать вес каждого объекта для более быстрой загрузки.
Начало создания проекта
Нажмите иконку "Плюс" или "Создать по шаблону".
Добавление ссылок и контактных данных в проект
Во вкладке "Данные" заполните имя, отчество, фамилию, должность и организацию. Эти данные будут сохраняться в записную книгу телефона при нажатии соответствующей кнопки внутри AR-проекта. Как правило заполняются при создании AR-визитки. Пропустите данные поля, если ваш проект не требует их.
"Комментарий" – поле для заметок, которое видно только вам.
Выберите контакты, заполните открывшиеся поля и нажмите "Сохранить и продолжить".
Можно добавлять несколько идентичных контактов (например несколько номеров телефонов, сайтов или ссылок на соцсеть).
Номер телефона, Viber и WhatsApp добавляется в международном формате (+7.....; +38050..... и т.д.).
Для добавления Telegram нужно иметь ссылку вида https://t.me/ARTAR_SUPPORT.
Cторонние ссылки должны иметь такой вид https://site.com.
Пропустите данный шаг, если проект не предусматривает переход по ссылкам.
К заполнению данных можно вернуться в любой момент.
Любые изменения не влияют на изначально созданный QR-код проекта.
Для отображения и привязки данных к проекту требуется провести дополнительные настройки в редакторе.
Переход между проектами
1. Скопируйте адрес проекта в который хотите переходить по клику.
2. Откройте вкладку "Данные" в проекте из которого хотите переходить. Вставьте ссылку и создайте кнопку.
Если нужно возвращаться назад (переходить из одного проекта в другой), продублируйте процесс аналогично.
Можно создавать почти неограниченное количество подобных переходов из одного проекта в другой.
Добавление картинки для трекинга
Выберите проект в котором хотите сделать меткой изображение. Выберите и загрузите файл.
Требуется хорошая детализация (контрастная картинка с большим количеством деталей и уголков подойдет идеально). Загружаемая картинка должна совпадать с напечатанной (на которую будет накладываться AR).
Не рекомендуется передавать картинки через социальные сети и мессенджеры или сохранять в JPEG – при конвертации теряются детали и добавляются шумы. Передавайте картинку файлом или архивируйте. Не используйте картинку с прозрачным фоном. Если на фото есть детали, которые будут меняться (например снег или задний фон), лучше их удалить или заменить на нейтральный (например белый или светло серый) в одном из фото редакторов.
После добавления изображения для трекинга AR-слой перестанет накладываться на QR-код, при этом QR-код и, соответственно, ссылка с адресом проекта не изменится.
QR-код. Особенности работы. Лайфхаки. Брендирование, стилизация, сохранение.
Открытый в админ панели или в редакторе QR-код отличается от скаченного.
Он не собирает статистику и показывает подсказки в проектах с анимацией "меню".
Используется для сканирования и тестирования проекта на этапе его создания.
QR-код генерируется автоматически и не меняется при любых изменениях контактов и редактировании проекта.
Единственное, что изменит QR-код это изменение адреса проекта.
Это позволяет сделать услуга White Label.
Например проект может открываться на вашем поддомене и иметь вид https://ar.site.com
Поэтому, если для вас важно не менять в будущем картинку QR-кода и вы планируете подключить свой домен/поддомен, сделайте это сразу.
Также открыть и скачать QR-код можно в редакторе.
Возможно ваши проекты отображаются так. Это можно изменить.
QR-код выполняет две или одну функцию в проекте:
1. Переводит по ссылке, которая открывает окно браузера, где и открывается камера.
2. Является меткой (триггером) на которую накладывается дополненная реальность.
Если в проекте меткой является картинка, то задействована только первая функция.
Если меткой является картинка, то требования к QR-коду менее жесткие. Например он может быть меньшего размера.
Если QR-код является меткой, то нельзя обрезать белое поле (рамку) вокруг него. И не рекомендуется печатать QR-код меньше чем 3.5 см.
Камера открытая в браузере распознает почти любой QR-код и "подтянет" слой AR.
То есть можно поделиться ссылкой, которая откроет AR и пользователь может навести камеру на любой QR-код (не наш, без AR), при этом он увидеть контент дополненной реальности.
Лайфхак не сработает, если обрезана белая рамка или QR-код не контрастный или сильно стилизован.
Помните, что не у всех телефоны последних моделей, а значит более слабые камеры могут не считать сильно маленький, искаженный или радикально стилизованный QR-код.
Клонирование проекта
Выберите проект, который хотите скопировать и нажмите "Клонировать".
Удобно использовать для создания шаблона.
Копия проекта имеет отдельный QR-код и бесплатно доступна в течение 14 дней после создания.
Удаление проекта
Выберите проект, который хотите удалить и нажмите "Удалить".
Проект удаляется безвозвратно.
Активированный (оплаченный) проект можно удалить только написав в техподдержку.
Месяцы подписки не возвращаются и не могут быть перенесены на другой проект.
Перенос проекта другому пользователю
Выберите проект, который хотите перенести.
Введите email участника, которому хотите перенести проект. (Участник должен быть зарегистрирован на платформе.)
После переноса проекта, он будет доступен только в аккаунте на который был перенесен.
Перенос не влияет на статистику (данные остаются, если не поставить галочку "Удалить статистику"), QR-код (остается прежним), месяцы подписки (сохраняются, как если бы проект не переносился).
Поставьте галочку напротив "Удалить статистику", если нужно обнулить количество просмотров и кликов.
Техподдержка и доступ к проекту
Задайте вопрос или сообщите о проблеме в техподдержку.
Напишите в Telegram (предпочтительно) или в онлайн-чат.
Если нужна консультация по конкретному проекту, напишите email на котором вы зарегистрированы на платформе и адрес проекта о котором идет речь.
Адрес проекта можно скопировать перейдя во вкладку "Ссылки".
Нажмите "Открыть", если нужно, чтобы специалист техподдержки мог зайти в редактор и работать с вашим проектом.
Сохраните проект и закройте редактор на время пока с вашим проектом работает техподдержка.
Обязательно опишите проблему. Напишите ваш email и адрес проекта.
Статистика
Во вкладке "Статистика" можно посмотреть статистику по просмотру (открытию проекта) и кликам на кнопки внутри проекта.
Доступен выбор периода – весь период, последний год, последние 3 месяца, последний месяц, последняя неделя, конкретный день.
Можно посмотреть общую статистику или узнать на какую кнопку сколько раз кликнули в конкретный день.
Мы планируем улучшить сбор статистики.
Обзор редактора
Колонка слева представляет дерево элементов (объектов).
Объекты организованы в дерево для их удобной группировки и манипуляции несколькими объектами как одним целым.
У дерева объектов всегда есть корневой элемент, который называется scene и содержит все остальные объекты.
Сцена состоит из объектов, объект имеет тип и состоит из свойств, у свойств есть значения.
В окне по центру можно видеть создаваемые объекты.
Нажимайте кнопки клавиатуры со стрелками вверх (или W), вниз (или S), вправо (или A), влево (или D) для перемещения по сцене. Для другого перемещения зажимайте shift и кнопки WSAD или стрелки (как описано выше). Также можно зажать левую кнопку мыши или тачпада, чтобы смотреть по сторонам.
Соответствующая иконка возвращает вид в исходное положение.
Также можно отменить и вернуть действие.
В колонке слева отображаются параметры объектов.
Выбираем в дереве элементов объект, которому хотим задать значения. Обратите внимание: настройки, доступные для разных типов объектов, несколько отличаются, но принцип работы один.
В панели инструментов есть базовая инструкция. (Иконка ℹ️)
Также подсказки появляются внизу, в визуальном окне редактора, при наведении курсора на иконки или значения.
Черный квадрат по центру показывает реальный размер QR-кода и помогает правильно разместить объекты относительно него. Данное правило работает, если меткой является QR.
В скором времени мы добавим подобную подсказку в редакторе, если меткой является картинка.
На выделенном объекте отображаются оси. X – красная, Y – зелёная, Z – синяя. Оси позволяют понять, где центр у объекта, как он повёрнут и отмасштабирован.
Не забывайте сохранить созданный проект перед тем, как закрыть редактор.
Предпросмотр
Просмотреть созданный проект можно в окне браузера (без AR).
Если созданный проект не открылся, обновите страницу.
Добавить, копировать, вставить, переместить, удалить элемент в дереве объектов.
Объекты организованы в дерево для их удобной группировки и манипуляции несколькими объектами как одним целым.
У дерева объектов всегда есть корневой элемент, который называется scene и содержит все остальные объекты.
Сцена состоит из объектов, объект имеет тип и состоит из свойств, у свойств есть значения. Значения объектов настраиваются в правой колонке.
Добавление.
В панели инструментов, расположенной в верхней части экрана, нажмите "Плюс" и выберите тип объекта, который хотите добавить.
Добавленный объект имеет следующие значения по умолчанию: Позиция 0-0-0; Вращение: 0-0-0; Масштаб: 1-1-1.
Чтобы добавить картинку, видео или 3D-модель, необходимо добавить соответствующий объект, загрузить файл с компьютера или выбрать из имеющихся в конструкторе и кликнуть на него.
На данный момент соотношение сторон загруженной картинки или видео не сохраняются. Нужно изменить масштаб вручную. В скором времени этот момент доработаем.
Обратите внимание, добавляемый объект вложится в выделенный элемент и будет принадлежать "родителю", т.е. значения, которые мы зададим (или уже задали) "родителю" будут непосредственно влиять на дочерний элемент. Это значит, что изменяя размер или например перемещая родительский объект мы перемещаем все вложенные в него дочерние объекты.
Удаление.
Для удаления объекта выделите его и нажмите "Корзину" в панели управления.
Удаляя родительский объект удаляются все вложенные в него дочерние объекты.
Копирование.
Выделите объект, который хотите скопировать, нажмите иконку «Копировать» в панели управления, выделите "Scena" или элемент в который хотите вложить скопированный объект и нажимаем "Вставить".
Если копируемый объект содержит подобъекты, то они копируются вместе.
Перемещение.
Выделите объект, который хотите переместить, переместите курсор в нужное место и кликните для вставки.
Данная инструкция актуальна, если нужно переместить объект в структуре дерева. При этом объект может не изменить свое положение в визуальном окне редактора и в AR.
Как переместить, то есть изменить позицию, в пространстве координат (в слое AR), рассмотрим ниже.
Свойства и значения сцены. Кнопка "Войти". Фиксированные 2D-кнопки.
Сцена – это корневой элемент.
Изменение свойств влияют на все объекты сцены.
Не рекомендуется существенно изменять значения Позиции, Вращения и Масштаба.
Как правило, анимацию тоже лучше задать объектам вложенным в сцену.
Если нужно настроить несколько объектов, используйте элемент группа (group), в который вложите другие объекты.
Ознакомьтесь с партнерской программой по ссылке. Согласитесь с условиями в личном кабинете.
Теперь поставленная в проекте галочка напротив партнерской ссылки автоматически добавит ссылку на регистрацию в ваш проект и каждый, кто откроет проект сможет перейти по вашей ссылке и зарегистрироваться в AR-конструктор.
Так выглядят фиксированные 2D-кнопки в телефоне.
"Делиться AR" работает только если поставить галку напротив "Поделиться" и "Делиться AR".
"Поделиться" позволяет делиться ссылкой на проект без дополненной реальности.
"Делиться AR" отправит ссылку по которой откроется камера в браузере. Далее нужно будет навести камеру на соответствующую метку-картинку или на любой QR-код (если картинка не задана меткой).
Свойства объектов – позиция, вращение, масштаб, размер, яркость, прозрачность, цвет.
Позиция, Вращение и Масштаб.
Эти поля есть у всех объектов. По умолчанию свойствам "Позиция" и "Вращение" заданы показатели 0 0 0. "Масштаб" имеет значения 1 1 1 и равен размеру QR-кода.
Есть три варианта изменить значения полей:
1. Навести курсор на поле со значение, зажать левую кнопку мыши или тачпад и перемещать курсор влево/вправо (наиболее быстрый способ).
2. Нажать на стрелки возле цифр (минимально возможное и точное изменение).
3. Ввести конкретное значение изменив цифру в соответствующем поле (быстрый и точный вариант, если известно значение которое нужно изменить).
Изменяя значения в разделе Позиция, мы перемещаем объект в пространстве по трем осям х y z (влево/вправо; вверх/вниз; ближе/дальше).
Настройки вращения изменят угол наклона в трех плоскостях (х, у, z).
Масштаб, соответственно, масштабирует объект и все вложенные в него объекты.
Плоские объекты можно масштабировать по двум плоскостям. Для отзеркаливания объекта необходимо установить отрицательные показатели.
Изменение размера в свойстве "Размер" не влияют на дочерние (вложенные) объекты.
Цвет.
Диалоговое окно выбора цвета зависит от браузера и операционной системы, поэтому у вас работа с цветом может выглядеть иначе.
Логика изменения цвета разных типов объектов похожа, но есть нюансы.
Видео и картинка красятся одинаково.
Пиксели с более темным цветом по сравнению с совмещенным цветом заменяются (умножаются на цвета изображения и искажают его), а пиксели с более светлым цветом по сравнению с совмещенным цветом остаются неизменными. Рассматривается информация цвета в каждом канале, и в качестве результирующего цвета выбирается базовый или совмещенный цвет, в зависимости от того, какой из них светлее.
Таким образом, белый цвет не закрашивает объект (оставляет его в исходном цвете), черный закрашивает полностью.
3D-модель.
Чтобы появилось окно с цветом нужно поставить галочку напротив "Покрасить".
Чтобы изменять цвет модели созданной в blender необходимо указать в названии материала !primary (например !primary-white). То есть все материалы, начинающиеся на !primary, будут краситься одним цветом. Остальные цвета краситься не будут.
Этот момент скоро улучшим.
Яркость настраивается только для модели (от 0 до 100).
Осветляет или затемняет модель.
Прозрачность настраивается для примитивов, фона, картинок, видео и моделей.
Создает эффект голограммы.
Геометрические фигуры. Работа с примитивом.
Выберите тип объекта primitive и задайте ему геометрию.
В конструкторе доступны plane (плоскость), circle (круг), box (куб), sphere (сфера), cone (конус), cylinder (цилиндр), torus (тор) и octahedron (октаэдр).
Доступны стандартные настройки. Можно задать прозрачность и изменить цвет. Также можно наложить текстуру (картинку или видео).
Например можно загрузить картинку с раскладкой футбольного мяча и наложить ее на сферу, получим объемный мяч.
Работа с фоном (background)
background (фон) – тип объекта с определенными свойствами.
Накладывается на всю сцену, то есть полностью закрывает её.
Если ваша картинка загруженная для фона отображается не на весь экран, увеличьте масштаб в колонке справа.
Фон по умолчанию имеет прозрачность 0.5 (можно настроить от 0 до 0.8) и не может быть не прозрачным.
Также доступна настройка цвета.
Вращение настраивается в одной плоскости.
Можно задать анимацию.
Фоном может быть картинка или видео. Добавляется аналогично элементу image/video.
На данный может в одном проекте можно добавить только один фон.
Хромакей, альфа канал, материалы.
В редакторе доступны четыре типа материала:
- flat – "чистый фон";
- standard – накладывает на изображение блики и затенения;
- chroma-key – используют для удаления реального зелёного или синего фона снятого на видео;
- alpha – для удаления фона сделанного в видеоредакторе. Идеально удаляет черный фон. Позволяет создать эффекты огня, сохраняет неоновый свет при удалении фона и применим при прочих эффектах.
Отображение сцены с удаленным фоном выглядит более эффектно.
Фон можно удалять в изображениях и видео.
Если фон изображения удаляется не корректно, используйте сторонний онлайн ресурс или редактор.
Например этот https://www.remove.bg/ru.
Для baсkground доступно flat, chroma-key и alpha.
Альфа канал имеет тонкую настройку. Воспользуйтесь ей, если после удаления фона объект имеет артефакты или выглядит не реалистичным.
Работа с текстом
Есть два варианта текста, который можно добавить в AR:
1. Добавить тип объекта "Text" и напечатать обычный текст (2D).
2. Собрать текст из 3D-букв.
Быстрее и легче напечатать.
Но можно создать группу и вложить в нее буквы.
Тексту (2D и 3D) можно задать нужные свойства. Используйте настройки для кастомизации текста и
Видео, как gif
Конструктор не поддерживает формат gif, но вы можете конвертировать gif в mp4 и включить функцию gif в редакторе.
Видео в данном режиме будет проигрываться зацикленно, без звука и не будет иметь кнопок плей/пауза.
Допускается несколько видео в одном проекте.
Работа со звуком (аудио файл)
На данный момент звук можно привязать к анимациям.
Мы работаем над тем, чтобы можно было отдельно загружать и управлять звуками.
Стена и общие принципы работы AR
Стена (wall) – тип объекта с присущими ему свойствами.
В редакторе обозначается красным цветом (квадратом или прямоугольником).
Достаточно знать всего три принципа, чтобы правильно работать со стеной:
1. В дереве объектов Стена должна быть выше объекта, который закрывает.
2. Стена должна быть ближе к камере (значение по оси z в Позиции).
3. Если стене поставить галку Прозрачная, то она сможет закрыть только прозрачный объект.
Стена невидимая, из-за того что она не рисует цветов, но она пишет в глубину, т.е. формально она непрозрачная. Значит, она действует на все объекты, которые идут после неё в сцене, а также на все прозрачные объекты.
Объекты в проекте имеют свойства и параметры в системе координат х; y; z.
Соответственно объекты расположенные ближе к камере закрывают те, которые находятся дальше. Все, как в физическом трехмерном мире. Но есть нюансы.
Общее правило такое, вначале рисуются непрозрачные объекты в том порядке, в котором они идут в сцене, а потом рисуются прозрачные от дальнего к ближнему.
Объект "Text" по умолчанию прозрачный и не может быть иначе.
Объект может быть условно прозрачным, если поставить галочку напротив Прозрачность, но оставить значение 1.
То есть прозрачность не видима глазу, но объект будет вести себя иначе.
Например бывают случаи, когда картинка отображается не корректно (края имеют артефакты), достаточно поставить галочку напротив Прозрачный и края сгладятся.
Создание кнопки
Кнопка (button) – тип объекта со свойствами позволяющими кликнуть на заданную зону и совершить действие.
В редакторе кнопка отображается голубым прямоугольником. В слое AR невидима. Для создания видимой кнопки необходимо вложить в button модель, картинку или видео, настроить размер кликабельной зоны (автоматически или вручную) и выбрать имеющийся контакт или пункт меню.
Анимацию меню рассмотрим в разделе "Анимация".
Чтобы контакты отобразились в редакторе и их можно было "привязать" к кнопке, необходимо добавить их в админ панели.
Работа с группой. Рандомизация. Поворот за камерой.
Группа (group) – тип объекта, который призван быть материнским для вложенных в него объектов.
Без вложенных объектов невидим и не имеет смысла.
Можно задать свойства позиции, вращения и масштаба.
Группа необходима для удобного управления вложенными в неё объектами.
В группу можно вложить всё, в том числе другие группы.
Исключением является фон (background).
В группе реализованы две уникальные функции:
- рандомизация;
- смотреть в камеру.
Рандомизация позволяет показывать случайным образом выбранные объекты, группы объектов или полноценные сцены при каждом новом открытии проекта.
Количество объектов, которое можно реализовать в группе с рандомизацией ограничено только общим весом сцены. Других ограничений нет.
Вложите в группу то, что хотите открывать в слое AR, поставьте галочку напротив "Рандомизация" и сохраните проект.
С помощью данного функционала можно создать первые примитивные игры, организовать розыгрыши, провести акции и много другое.
По запросу мы быстро можем доработать функционал.
Например поставить ограничение на выпадание одного объекта в группе и другое.
"Смотреть в камеру" позволит поворачивать:
- глаза модели за камерой;
- кнопки для удобного нажатия;
- видео, например, человека с удаленным фоном (голограмму).
Функционал позволит создать реалистичные и эффектные проекты.
Общая логика анимации
Анимация — это визуальное отображение изменений свойств одного объекта.
Некоторые свойства объектов можно анимировать. Доступные анимации отличаются и зависят от типов объектов.
Слева у таких полей находится иконка бегущего человечка. Синий цвет показывает, что анимация включена, чёрный – выключена. При нажатии на него откроется панель анимаций этого конкретного поля. Повторный клик свернёт анимацию. "Крестик" – удаление анимации. Иконка плей запустит проигрывание анимации (ее можно остановить нажав на появившийся квадратик).
Кнопка "Добавить анимацию" добавит анимацию. После настройки анимации можно задать значения следующей анимации, для этого еще раз нажмите "Добавить анимацию".
Одновременный просмотр всех анимаций в визуальном окне редактора недоступен.
Сохраните проект и нажмите предпросмотр, чтобы посмотреть всю сцену.
Разберем какие анимации доступны для различных типов объектов.
В сцене, группе, кнопке, стене можно анимировать свойства позиции, вращения и масштаба.
Для примитива, фото, видео, фона и текста дополнительно доступны анимации цвета и прозрачности.
Видео имеет дополнительную настройку воспроизведения, реализованную в виде анимации.
Модель имеет внутреннюю анимацию.
Разделы анимации для различных свойств.
Позиция.
В этом разделе задается анимация перемещения объекта в пространстве. Можно задать "вылет" (появление) объекта в одной, двух или трех плоскостях. Значения могут быть отрицательными и положительными. Соответственно, меняется сторона вылета.
Вращение.
Анимация кругового вращения объекта в трёх плоскостях.
Для корректной работы рекомендуем устанавливать значения параметров кратно 360.
Если требуется более гибкая настройка анимации вращения, вложите объект в группу и анимируйте группу.
Масштаб.
Анимация размера объекта.
Цвет.
Анимация цвета позволяет изменить один цвет объекта на другой.
Прозрачность.
Позволяет анимировать прозрачность от 0 до 1.
Внутренняя анимация модели.
Позволяет изменить значение свойств модели заданных в Blender (программе для создания 3D-моделей).
Разберем настройки анимаций.
Значение.
Настраивает положение объекта из которого начинается анимация или в котором заканчивается.
То есть анимация происходит в диапазоне указанном в свойстве объекта и значении.
Обратно.
Меняет порядок анимации.
Галочка напротив "Обратно" настраивает запуск анимации с указанных значений.
Для корректной работы рекомендуем всегда ставить галочку "Обратно" в первой анимации.
Относительно.
Настройка позволяющая установить "Значение" относительно свойств объекта.
Необходима для удобства работы.
Длительность.
Время проигрывания анимации в миллисекундах.
Задержка.
Время (в миллисекундах) через которое запустится анимация после наступления "События старта".
Смягчение.
Настройка визуального отображения изменения свойств (кривая перехода).
То есть, непосредственно, настройка анимации.
Событие старта.
Событие инициирующее запуск анимации, то есть то, что триггерит анимацию.
Существуют такие событие старта:
- first-appear – запускает анимацию при первом сканировании (открытии проекта);
- appear – запускает анимацию каждый раз при наведении на метку;
- menu – старт анимации объекта по клику на кнопку с заданным значением поля "Пункт меню";
- mousedown – старт при нажатии (прикосновении);
- mouseup – старт при отпускании (клик);
- mouseenter – старт при наведении курсора мыши или при удержании пальца над объектом;
- mouseleave – старт при отведении курсора или пальца (жест смахивание).
Комментарий.
first-appear – наиболее часто используемый триггер анимации.
appear – используйте, если уверены, что повторно запускаемая анимация необходима.
menu – анимация для сложных проектов, в которых необходимо отобразить больше контента и сильнее вовлечь пользователя.
mousedown/mouseup - по умолчанию заданы в свойствах кнопок.
mouseenter, mouseleave - редко используемые.
Анимация видео
Особенность анимации видео в том, что дополнительно нужно настраивать анимацию воспроизведения. Иначе видео начнет проигрываться сразу, а появится через время (задержка + время на анимацию появления).
То есть, если необходимо настроить появление и исчезновение видео, то помимо анимации свойств объекта, необходимо добавить две анимации видео (play/pause).
Галочка напротив "Значение" включит видео, отжатая галочка – выключит.
Анимация модели
Анимацию модели созданную в Blender можно настроить в редакторе.
Аналогично анимациям других типов объектов настраивается "Задержка" и "Событие старта".
Звездочка (*) запустит все имеющиеся в модели анимации одновременно.
Для включения одной определенной анимации необходимо знать её название заданное в Blender и написать его в поле "Значение". Обязательно необходимо заключить его в звездочки.
Все анимированные иконки в конструкторе имеют одинаковые названия: *anim_1*; *anim_2* и так далее.
Анимация меню
Тип объекта "Кнопка" (button) имеет настройку "Пункт меню".
В открытом проекте есть скрытая переменная – номер пункта меню. По умолчанию стартовое состояние сцены – ноль. И в него переходят при повторном клике.
При нажатие на кнопку с пунктом меню, номер меняется на него. Если нажать повторно, то сбросится в ноль. Если пункт ноль, то так же сбросится.
Анимация сработает тогда, когда номер поменялся.
Для этого выберите объект, который хотите анимировать, настройте значения анимации и в "Событии старта" выберите menu. Откроется дополнительная настройка – "При переходе". Укажите номер (или "любого") рядом с "из" и "в".
Клик на "из" или "в" изменит цифру на значение "любого". Это значит, что в каком бы состоянии не находилась сцена, клик на кнопку инициирует переключение сцены в указанное состояние.
Также алгоритм запустит несколько анимаций, если, например, сцена перейдет из пункта 2 в пункт 3. Сработают:
[2 "любого"] ["любого" 3] [2 3].
Для наглядности и лучшего понимания логики анимации меню, реализована подсказка в предпросмотре (без AR и при сканировании QR-кода в редакторе). В правом верхнем углу будет появляться цифра, которая показывает в каком состоянии сейчас находится сцена.
Вам не нужно каким-то образом скрывать эту цифру, просто скачайте QR-код и при просмотре сцены цифры-подсказки появляться не будут.
Это особенность QR-кода описана в данном разделе.
Настройка стартового состояние сцены позволяет более гибко настраивать анимацию меню.
То есть повторный клик, будет по прежнему возвращать сцену в нулевое состояние, но при этом, не в стартовое. Произойдет разделение стартового состояния и состояния запускающего анимацию при повторном клике.
Например, используйте эту настройку, если необходимо при первом открытии проекта показать объект (для этого задайте анимацию first-appear), а по первому клику инициировать двойную анимацию – скрыть первый объект и показать второй.
Авторские права © 2020-2021 AR-конструктор ARTAR. Все права защищены.