ДокументацияAPIСообществоСоздать приложение
Войти

Первые шаги

Чтобы создать свою первую маску:

Шаг 1. Подготовьте инструменты

  1. 1.
    Скачайте и установите приложение test.mask для Windows или для macOS. Приложение понадобится, чтобы увидеть готовую маску через веб-камеру компьютера. Если вы планируете просматривать маску только на мобильном устройстве, пропустите этот шаг.
  2. 2.
    Установите редактор кода с подсветкой синтаксиса, чтобы просматривать и редактировать конфигурационный файл. Например, удобно пользоваться Visual Studio Code.

Шаг 2. Скачайте проект маски

Мы подготовили шаблон проекта маски с минимальным набором файлов.

  1. 1.

    Скачайте проект маски и откройте его, например в Visual Studio Code.

  2. 2.

    В папке проекта вы увидите следующие файлы:

    • •
      Icon.png — миниатюрное изображение, которое идентифицирует маску в каталоге камеры (иконка маски);
    • •
      mask.json — конфигурационный файл, в котором указывается путь к иконке маски и параметры используемых в маске эффектов.

    Конфигурационный файл mask.json содержит строки в формате JSON и выглядит так:

    JSON{ "preview": "Icon.png" }

    В поле preview указывается путь к иконке маски. В данном случае это просто имя файла с расширением .png, так как иконка лежит в той же папке, что и конфигурационный файл.

  3. 3.

    Назовите папку с маской так, как будет называться ваш проект (например, First steps).

Шаг 3. Добавьте в проект изображение

  1. 1.

    Подготовьте текстуру — любое изображение в формате PNG. Можно использовать файл Glasses.png из готового проекта.

  2. 2.

    Создайте в корневой папке проекта маски папку Textures и поместите в неё файл с текстурой. В примере ниже файл называется Glasses.png.

  3. 3.

    В конфигурационный файл mask.json добавьте следующие поля.

    JSON{ "preview": "Icon.png", "effects": [ { "name": "patch", "anchor": "nose", "texture": "Textures/Glasses.png", "size": [100, 100] } ] }

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

  • •
    name — название эффекта,
  • •
    anchor — точка привязки эффекта,
  • •
    texture — путь к файлу текстуры,
  • •
    size — размер эффекта по оси X и Y.

В результате проект маски будет выглядеть примерно так:

Шаг 4. Посмотрите на результат

Для просмотра маски потребуется мобильное устройство или компьютер с камерой.

Windows

  1. 1.
    Запустите приложение test.mask, которое вы скачали на первом шаге.
  2. 2.
    Нажмите на кнопку Open mask.
  3. 3.
    Откройте папку с маской в проводнике, выберите файл mask.json и нажмите Открыть.

macOS

  1. 1.
    Запустите приложение test.mask, которое вы скачали на первом шаге.
  2. 2.
    В меню выберите File → Open Mask... .
  3. 3.
    Выберите каталог с проектом маски и нажмите Open.

Мобильное приложение

  1. 1.
    Откройте проект вашей маски и упакуйте все файлы и папки в ZIP-архив. Обратите внимание, что необходимо архивировать не только непосредственно папку проекта, но и все файлы и папки внутри неё.
  2. 2.
    Откройте сообщество Маски ВКонтакте и нажмите Написать сообщение.
  3. 3.
    Прикрепите ZIP-архив и отправьте сообщение. В ответ бот пришлёт вам ссылку.
  4. 4.
    Откройте ссылку на мобильном устройстве.

Если вы всё сделали правильно, то увидите маску на своём лице.

FAQ

У меня не получилось :(

Если что-то не получилось, скачайте готовый проект или задайте вопрос в чате сообщества.

Хочу открыть маску в мобильном приложении, но получаю сообщение о проблемах с архивом, что делать?

Посмотрите в разделе Просмотр маски, как решать проблемы с архивом. Чаще всего пользователи совершают ошибку на последнем этапе — архивируют папку проекта, а не файлы и папки внутри неё.

Отправила архив в сообщество, но получила только сообщение о том, что маска загружается, в чём причина?

Если вы добавили в проект собственный файл текстуры, возможно, причина в неправильном формате. Проверьте, что формат изображения — PNG. Подробное описание проблемы есть в разделе Просмотр маски.

Что дальше