Анимация текстур

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

Такую возможность поддерживают все эффекты, которые используют текстуры: patch, facemodel, model3d и plane.

Чтобы указать параметры анимации, добавьте к эффекту группу параметров animation, в которой задайте тип и скорость воспроизведения, порядок кадров и другие характеристики.

Примеры

facemodel

Эффект facemodel в маске накладывает текстуры на лицо. Вы можете анимировать эти текстуры. Для этого добавьте параметры animation к группе texture, которая описывает текстуру.

JSON
{ "icon": "mask-icon.png", "effects": [ { "name": "facemodel", "texture": { "texture": "Textures/makeup.png", "blend_mode": "Multiply", "animation": { "type": "once", "timeline": [50, 30, 50, 100] } } } ] }

patch

Эффект patch добавляет в маску текстуру как самостоятельный элемент. Для анимации этой текстуры добавьте группу параметров animation к группе texture. Анимация будет применена к текстуре, которую описывает texture.

JSON
{ "icon": "mask-icon.png", "effects": [ { "name": "patch", "texture": { "texture": "Textures/frame.png", "anchor" : "fullscreen", "blend_mode": "Multiply", "animation": { "type": "once", "timeline": [50, 50, 50, 100] } } } ] }

model3d и plane

Эффекты model3d и plane используют текстуры различных типов: diffuse, normal, specular, environment, emissive. Вы можете анимировать каждую из них.

Примеры ниже демонстрируют анимацию текстуры типа diffuse (обратите внимание на параметры effects > material > textures). Для анимации текстур других типов используйте аналогичный подход: добавьте в параметры текстуры после texture группу animation.

Пример анимации текстуры в model3d

JSON
{ "icon": "mask-icon.png", "effects": [ { "name": "model3d", "anchor": "forehead", "model": "Models/Cap.mdl", "material": { "technique": "Techniques/DiffUnlit.xml", "textures": { "diffuse": { "texture": "Textures/Cap_diffuse.png", "animation": { "fps": 15, "type": "loop" } } } }, "position": [0, 45, 10], "rotation": [10, 0, 0], "scale": [28, 28, 28] } ] }

Пример анимации текстуры в plane

JSON
{ "icon": "my-mask-icon.png", "effects": [ { "name": "plane", "anchor": "forehead", "material": { "technique": "Techniques/DiffUnlit.xml", "textures": { "diffuse": { "texture": "Textures/plane_diffuse.png", "animation": { "fps": 15, "type": "loop" } } } }, "position": [0, 45, 10], "rotation": [10, 0, 0], "scale": [28, 28, 28] } ] }

Примеры проектов

Мы подготовили проектов масок, демонстрирующих использование анимации. См. Примеры проектов — Анимация текстур.

Параметры animation

Параметр
Описание
type
Тип воспроизведения. Возможное значение — одна из следующих строковых констант: • "once" — однократное проигрывание с последующей остановкой на первом кадре или • "loop" — зацикленное проигрывание. По умолчанию используется "loop". Тип данных: string.
trigger_start
Событие для запуска анимации: • "mouth_open" — открытие рта; • "mouth_close" — закрытие рта; • "face_found" — начало трекинга лица; • "face_lost" — потеря трекинга лица; • "tap" — касание экрана. Касание отслеживается, если в конфигурационном файле маски задан параметр "mouse_input": true. Если параметр не указан, анимация запускается сразу при отображении маски. Если параметр указан, то до запуска анимации триггером текстура будет отображать первый кадр. Тип данных: string.
trigger_stop
Событие для остановки анимации: • "mouth_open" — открытие рта; • "mouth_close" — закрытие рта; • "face_found" — начало трекинга лица; • "face_lost" — потеря трекинга лица; • "tap" — касание экрана. Касание отслеживается, если в конфигурационном файле маски задан параметр "mouse_input": true. Если параметр не указан, анимация воспроизводится бесконечно. Тип данных: string.
fps
Число кадров в секунду при отображении анимации, другими словами, это скорость воспроизведения. Если не указан ни один из параметров — fps, timeline или timeline_ex, движок масок использует значение "fps": 30. Тип данных: int.
timeline
Ещё один параметр, который указывает скорость воспроизведения. Задаётся в виде массива, например "timeline": [200, 100, 40], где каждый элемент — это длительность воспроизведения соответствующего кадра в миллисекундах. В приведённом примере первый кадр будет показан в течение 200 миллисекунд, второй — 100 миллисекунд, а третий и остальные кадры (если они есть) будут иметь длительность 40 миллисекунд. Число элементов должно быть равно или меньше количества кадров. Тип данных: array<int>[].
timeline_ex
Параметр, который позволяет задать произвольный порядок следования кадров и указать длительность воспроизведения каждого кадра. Примеры использования смотрите ниже. Обратите внимание, что при использовании timeline_ex проигрывается только заданная последовательность кадров (при использовании timeline проигрываются все доступные кадры). Тип данных: array<( int или array<int>[2] )>[].

Важно! Параметры fps, timeline и timeline_ex позволяют настроить скорость воспроизведения различными способами. Используйте только один из них.

Если не указан ни один из этих параметров, то движок масок использует значение "fps": 30.

Как указывать кадры

В конфигурационном файле маски, в параметре texture укажите PNG-файл первого кадра (например, "Textures/frame.png"). Последующие кадры должны иметь аналогичное имя файла и числовой индекс (1, 2, 3 и так далее). Например, анимация из примера выше, содержащая 4 кадра, будет состоять из такой последовательности файлов:

  • •
    Textures/frame.png — имя файла в параметре texture, первый кадр.
  • •
    Textures/frame1.png — второй кадр.
  • •
    Textures/frame2.png — третий кадр.
  • •
    Textures/frame3.png — четвёртый кадр.

Упоминать все эти файлы, кроме первого, в JSON-разметке не нужно.

При использовании параметров fps или timeline кадры воспроизводятся последовательно в порядке возрастания индексов. Чтобы переопределить порядок, используйте параметр timeline_ex. Примеры приведены ниже.

Резюмируем:

  • •

    Файлы кадров должны иметь такое же имя, как файл первого кадра, и различаться последовательными индексами.

  • •

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

  • •

    В конфигурационном JSON-файле укажите только первый кадр.

Примеры использования timeline и timeline_ex

Как установить время воспроизведения отдельных кадров

Используйте параметры timeline или timeline_ex.

JSON
{ "icon": "mask-icon.png", "effects": [ { "name": "patch", "texture": { "texture": "Textures/frame.png", "animation": { "type": "once", "timeline": [50, 50, 60] } } } ] }

В этом примере движок проиграет 1-й кадр в течение 50 миллисекунд, 2-й кадр — тоже в течение 50 миллисекунд, а 3-й — в течение 60 миллисекунд. Остальные кадры, если они есть, тоже будут проиграны в течение 60 миллисекунд.

В случае использования timeline_ex код будет выглядеть очень похоже:

JSON
{ "icon": "mask-icon.png", "effects": [ { "name": "patch", "texture": { "texture": "Textures/frame.png", "animation": { "type": "once", "timeline_ex": [50, 50, 60] } } } ] }

Здесь движок тоже проиграет 1-й кадр в течение 50 миллисекунд, 2-й кадр — в течение 50 миллисекунд, 3-й — в течение 60 миллисекунд. Однако остальные кадры проиграны не будут, так как при использовании timeline_ex проигрывается только заданная последовательность кадров (в этом его отличие от timeline).

Как установить время и порядок воспроизведения кадров

Используйте параметр timeline_ex.

JSON
{ "icon": "mask-icon.png", "effects": [ { "name": "patch", "texture": { "texture": "Textures/frame.png", "animation": { "type": "once", "timeline_ex" : [50, 50, [5, 20], 40, 40, [0, 90], 100] } } } ] }

В этом примере движок масок проиграет следующую последовательность:

  • •
    1-й кадр — 50 миллисекунд.
  • •
    2-й кадр — 50 миллисекунд.
  • •
    6-й кадр — 20 миллисекунд (6-му кадру соответствует индекс 5).
  • •
    7-й кадр — 40 миллисекунд. Обратите внимание, что после прыжка на 6-й кадр, проигрывание продолжится с 7-го кадра. При этом специально указывать 7-й кадр не нужно.
  • •
    8-й кадр — 40 миллисекунд.
  • •
    1-й кадр — 90 миллисекунд (опять прыжок).
  • •
    2-й кадр — 100 миллисекунд. После прыжка на 1-й кадр проигрывание продолжится со 2-го кадра.

Обратите внимание, что первый кадр имеет индекс 0, второй — 1, третий — 2 и так далее.

Материалы по теме