Этот сайт использует файлы cookies. Оставаясь на сайте, Вы соглашаетесь с использованием файлов cookies и принимаете Соглашение об использовании сайта.

ARnament

Создание AR-объекта на примере проекта ARnament

94
94

За любым приложением, стоит техническая часть, о которой часто и не задумываются. Сегодня мы расскажем, что скрывается за пользовательским интерфейсом мобильного приложения ARnament.


Мобильное IOS-приложение ARnament — прекрасный способ дополнить нашу реальность теплыми чувствами и прекрасными эмоциями. Наслаждаетесь красотой природы? — поделитесь своими ощущениями со всеми, кто находится рядом. Хотите поднять настроение жителям города в час пик? — напишите доброе пожелание, и пользователи обязательно отблагодарят вас лайками.

Создание AR-объекта

При создании нового AR-объекта (стикера) приложение создает сообщение со стилем, который пользователь может впоследствии редактировать.

ARnament предоставляет пользователю многофункциональный встроенный редактор со всеми необходимыми параметрами для оформления стикера: шрифт, кегль (размер буквы или знака по вертикали), цвет текста, обводки, тени, выравнивание текста.

Для экономии своего драгоценного времени пользователь приложения в несколько касаний может подготовить AR-объект для публикации, воспользовавшись набором предустановленных стилей.

Блок выбора шрифта — элемент интерфейса со списком всех доступных шрифтов.

Блок выбора цвета — элемент интерфейса со списком базовых цветов и их оттенков.

Блок настройки обводки — элемент интерфейса с параметрами цвета, толщины и контура текста.

Блок настройки тени — элемент интерфейса, отвечающий за выбор цвета и радиуса отбрасываемой текстом тени.

Все изменения моментально отображаются на тексте стикера (AR-объекта). Форматирование сообщения до сохранения на сервере осуществляется при помощи параметров NSAttributedString:

  • font — шрифт (если не выбран, используется системный) и кегль;
  • strokeColor — цвет обводки;
  • strokeWidth — толщина обводки;
  • shadow — объект NSShadow с заданными цветом и радиусом;
  • foregroundColor — цвет текста;
  • paragraphStyle — выравнивание (по левому/правому краю или по центру).

В момент завершения редактирования строка отформатированного текста преобразуется в изображение, которое впоследствии и сохраняется на сервере. После создания и публикации редактирование стикера станет недоступным.

Позиционирование AR-объекта

После перехода пользователя в AR-режим, приложение отправляет координаты устройства на сервер и получает информацию об опубликованных стикерах неподалеку.

Каждый AR-объект хранит собственные координаты, высоту над уровнем моря, данные о положении и визуализация текста.

На основании этих данных создается объект SCNNode. Изображение текста подгружается по URL и устанавливается на 2 плоскости, чтобы текст был виден с обеих сторон.

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

Расстояние между устройством и точкой, к которой прикреплен AR-объект, рассчитывается с помощью геопозиции (координаты и азимута).

На данном этапе MVP готов. Сейчас вместе с клиентом мы планируем старт доработок функциональности ARnament. Если вас также вдохновила идея создания AR-приложения — обращайтесь к нам. Будем стирать границы реальности вместе!