Руководство пользователя Отмена

Экспорт анимаций для мобильных приложений и игровых платформ

Поиск

Последнее обновление 25 мая 2023 г.

Создайте лист спрайтов или атлас текстур и экспортируйте свои анимации для мобильных приложений и игровых платформ. Импортируйте атлас текстур в Unity или на любую другую игровую платформу с помощью подключаемого модуля.

Общие сведения

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

Лист спрайтов

Лист спрайтов — это файл растрового изображения, содержащий меньшие изображения, упорядоченные в виде «плитки». Компиляция нескольких графических объектов в один файл позволяет использовать графику в Animate и других приложениях, загружая только один файл. Это повышает эффективность загрузки изображений, что полезно в случае повышенных требований к производительности, например при разработке игр.

Листы спрайтов можно создать из любого выбранного набора роликов, символов кнопок, графических символов или растровых изображений. Элементы можно выбирать на панели «Библиотека» или в рабочей области (нельзя выбирать элементы из этих двух источников одновременно). Каждое растровое изображение и каждый кадр выбранных символов отображаются на листе спрайтов как отдельные графические объекты. Если выполняется экспорт из рабочей области, любые преобразования (масштабирование, сдвиг и т. д.), примененные к экземпляру символа, сохраняются в выходном изображении.

Атлас текстур

Атлас текстур — это коллекция текстур в виде одного большого изображения или нескольких изображений требуемого размера. Можно оптимизировать игру, создав атлас текстур и используя его в игровом приложении.

В Animate можно создать атлас текстуры из символов, таких как фрагменты роликов, графические объекты или кнопки. Элементы можно выбирать на панели «Библиотека» или в рабочей области (нельзя выбирать элементы из этих двух источников одновременно). Каждое векторное изображение и каждый ключевой кадр выбранных символов отображается как отдельное растровое изображение в атласе текстур. При экспорте объектов рабочей области все преобразования (масштабирование, сдвиг и т. д.), примененные к экземпляру символа, сохраняются в выходном изображении.

Различие между листом спрайтов и атласом текстур

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

Функция	Лист спрайтов	Атлас текстур
Производительность в мобильных приложениях	Низкая	Высокая
Эффективность загрузки приложения	Высокая, так как отсутствуют вычисления	Низкая, так как выполняется вычисление файла JSON
Размер	Занимает больше места	Занимает меньше места
Качество анимации	Среднее	Высокое
Количество создаваемых файлов	Два файла: один файл растрового изображения и один файл json	Переменная: на основе размера изображения.
Количество создаваемых растровых изображений	В зависимости от количества кадров, используемых в листе спрайтов, также может увеличиваться количество растровых файлов, что приводит к увеличению размера листа спрайтов	В спрайте генерируются только уникальные растровые изображения, благодаря чему уменьшается суммарный размер.

Создание листа спрайтов

Чтобы создать лист спрайтов, выполните следующие действия.

Выделите один или несколько символов в библиотеке или экземпляры символов в рабочей области. Выделение также может содержать растровые изображения.
Щелкните выделенные объекты правой кнопкой мыши и выберите пункт «Создать лист спрайта».

В диалоговом окне Создать лист спрайта выберите необходимые параметры и нажмите Экспорт.

Параметр экспорта	Описание
Размер изображения	Общий размер листа спрайтов в пикселях. Значение по умолчанию («Автоматический размер») позволяет вместить все включаемые спрайты.
Формат изображения	Формат файла изображения, содержащего экспортируемые спрайты. Прозрачность изображения (альфа-канал) поддерживается для 8-битных и 32-битных изображений PNG. В 24-битных изображениях PNG и изображениях JPG прозрачный фон не поддерживается. В общем случае разница в визуальном качестве 8-битных и 32-битных изображений PNG незначительна. Размер 32-битных файлов PNG в четыре раза превышает размер 8-битных файлов PNG.
Отступы листа	Отступы от краев листа спрайтов (в пикселях).
Отступы фигуры	Отступы в пикселях между изображениями на листе спрайтов
Алгоритм	Способ размещения изображений на листе спрайтов. Этот параметр может принимать два значения: Базовый (по умолчанию) MaxRects
Формат данных	Внутренний формат для хранения данных изображений. Выберите формат, который наилучшим образом подходит для предполагаемого использования листа спрайтов после экспорта.
Поворот	Поворот спрайтов на 90 градусов. Данная настройка доступна только для некоторых форматов данных.
Обрезка	Данная настройка обеспечивает экономию места на листе спрайтов за счет обрезания неиспользуемых пикселей каждого символьного кадра, добавляемого на лист.
Кадры стека	Выбор этой настройки исключает дублирование повторяющихся кадров выбранных символов на результирующем листе спрайтов.

Экспорт анимаций в мобильные приложения или игровые движки

Animate помогает экспортировать анимацию на игровые платформы и мобильные приложения. Хотите смотреть анимацию на мобильном телефоне или в игровом движке? Посмотрите учебный видеоролик в конце этого примера и выполните следующие шаги.

В разделе «Библиотека» щелкните правой кнопкой мыши фрагмент ролика.
Выберите «Создать лист спрайта».
В диалоговом окне «Лист спрайтов» выберите необходимые параметры.
Нажмите «Экспорт».

Как экспортировать анимацию для мобильных приложений и игровых движков

Посмотрите видео и узнайте о других вариантах экспорта анимаций.

Создание атласа текстур

Разработчики игр могут использовать Animate для управления анимированными объектами и их экспорта в Unity или на любые другие часто используемые игровые платформы в виде атласа текстур.

Процесс генерирования атласа текстур в Animate и его импорта в Unity представлен на следующей схеме.

flow-diagram-Texture-Atlas — Иллюстрация технологического процесса создания атласа текстур и его импорта в Unity.

Для создания атласа текстур анимации выполните следующие действия.

В Animate можно создать атлас текстур для выбранного символа в Библиотеке или для экземпляра символа в рабочей области.
Щелкните этот символ правой кнопкой мыши и выберите в меню Создать атлас текстур. Откроется окно Создание атласа текстур.

Создание атласа текстур

Выберите параметры экспорта для атласа текстур.

Параметр экспорта	Описание
Размер изображения	Общий размер атласа текстур в пикселях. Значение по умолчанию («Автоматический размер») позволяет вместить все включаемые изображения.
Оптимизировать размеры	Когда установлен флажок «Оптимизировать размеры», удаляются пустые пиксели из растрового изображения, а размеры не являются степенью числа два. Это применимо ко всем генерируемым растровым изображениям. Когда флажок «Оптимизировать размеры» снят, растровое изображение генерируется на основе выбранных размеров.
Формат изображения	Формат файла изображения, содержащего экспортируемые спрайты. Прозрачность изображения (альфа-канал) поддерживается для 8-битных и 32-битных изображений PNG. В общем случае разница в визуальном качестве 8-битных и 32-битных изображений PNG незначительна. Размер 32-битных файлов PNG в четыре раза превышает размер 8-битных файлов PNG.
Разрешение	Выберите любое значение в диапазоне 0,3–3,0
Отступы листа	Отступы в пикселях от краев атласа текстур
Отступы фигуры	Отступы в пикселях между изображениями в атласе текстур.
Алгоритм	Способ размещения изображений в атласе текстур. Этот параметр может принимать два значения: Основные MaxRects (по умолчанию)
Формат данных	Внутренний формат для хранения данных изображений. По умолчанию используется формат JSON.
Поворот	Поворот изображения на 90°. Данная настройка доступна только для некоторых форматов данных.
Свести наклоненные объекты в растр	Выберите этот параметр, если вы используете преобразования объектов с наклоном. Animate преобразует эти объекты в растровые изображения, так как некоторые игровые платформы неправильно интерпретируют преобразование с наклоном.
Оптимизировать файл Animation.json	Когда установлен флажок «Оптимизировать файл Animation.json», то удаляются отступы и разложенная матрица, а также сокращаются используемые имена (по умолчанию). Когда флажок «Оптимизировать файл Animation.json» не установлен, то при экспорте сохраняются отступы и значимые имена.

Можно выбрать вариант экспорта символа в несколько растровых изображений в зависимости от размера.

Создание атласа текстур для нескольких растровых изображений

Если размер ресурса больше выбранного измерения изображения, появляется предупреждение.
Чтобы просмотреть конечный результат, откройте вкладку «Просмотр».

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

Созданная папка вывода для атласа текстур содержит следующие файлы.

Animation.json

Этот файл содержит сведения об анимации. Идентичные кадры по умолчанию оптимизируются и консолидируются в файле Animation.json.

spritemap.json

Этот файл содержит сведения о файле spritesheet.png.

spritemap.png

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

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

Импорт атласа текстур в Unity

Можно импортировать созданные в Animate файлы атласов текстур в избранные игровые платформы. Чтобы импортировать файлы атласов текстур, создайте подключаемые модули для соответствующих игровых платформ. В этот выпуск включен образец подключаемого модуля импорта для инструмента Unity.

Импортируйте атлас текстур в Unity, выполнив следующие действия.

Создайте проект в Unity, выбрав для него путь размещения. В указанном местоположении будет создана папка с вложенной папкой Активы.
Создайте две вложенные папки в разделе Активы как Ресурсы и Редактор.
Щелкните здесь, чтобы загрузить образец подключаемого модуля для импорта для Unity. Выберите Подключаемый модуль Unity с вкладки Загрузки и укажите номер версии, который требуется загрузить.

Архив unity-plugin.zip состоит из файлов Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs и Effect.shader.

Загружая образец, вы принимаете Условия использования и Политику конфиденциальности в сети Интернет.
Переместите файлы атласа текстур, такие как Animation.json, spritemap.json, spritemap.png, и файлы подключаемого модуля Unity, например Plugin.cs и Effect.shader, в папку Активы > Ресурсы.
Переместите файлы AnimateEditor.cs и WrapperPlugin.cs в папку Активы.
В Unity выберите файл AnimateEditor.cs и перетащите его в область главной камеры.
Воспроизведите проект. Воспроизведение проекта приводит к разделению карты спрайтов на разные спрайты.
Переместите файл AnimateEditor.cs в в редактор.
В Unity выберите файл WrapperPlugin.cs и перетащите его в область Главная камера. Кроме того, отмените выбор или удалите файл AnimateEditor.cs из области главной камеры.
Воспроизведите или опубликуйте результаты в зависимости от потребностей.

Можно даже настроить подключаемый модуль, изменив файл WrapperPlugin.cs в соответствии с потребностями.

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

Публикация текстур

Аниматоры могут создавать и экспортировать контент в векторном формате или использовать растровый формат для платформ HTML 5. Для более высокой производительности при работе с анимациями в параметры публикации добавлена возможность их экспорта в качестве атласа текстур.

1. Создайте документ Canvas. Выберите пункт меню Файл > Создать для вывода окна «Новый документ».

2. Щелкните вкладку Дополнительно в верхней части экрана и выберите параметр HTML5 Canvas. Откроется новый FLA-документ.

3. Щелкните Файл > Параметры публикации.Если установлен флажок Экспортировать документ как текстуру на вкладке «Основные», то на вкладке Параметры изображения появятся параметры публикации текстур. По умолчанию в публикацию текстур включены все символы. Чтобы выбрать отдельные символы, щелкните значок параметров рядом.

Хотя этот параметр может увеличить размер ресурсов, он повышает производительность. Кроме того, вы можете увеличить разрешение изображений в два или три раза от исходного для дисплеев HiDPI. Чтобы изменить параметры разрешения, щелкните значок гаечного ключа рядом с функцией Экспортировать документ как текстуру, как показано на снимке экрана ниже. Измените значение параметра «Разрешение», чтобы увеличить его в 2 или 3 раза.

По умолчанию при публикации текстур задается в 2 раза большее разрешение. Кроме того, диапазон для разрешения можно менять от 0,3 до 3.

Публикация текстур применима только к типу документа HTML5 Canvas.

Параметр «Экспортировать документ как текстуру» включен

Выбор между векторным или растровым файлом напоминает выбор между размером файла и производительностью. Платформы HTML5 оптимизированы для растрового контента. Таким образом, для сложных фигур лучше предварительно преобразовать векторные изображения в растровые. Для части базового контента все еще можно использовать векторный контент. Эта функция в Animate доступна в диалоговом окне «Частичный выбор символов». Частичный выбор символов позволяет выбрать символы, которые следует преобразовать в растровый контент, а остальные сохранить как векторные объекты.

Чтобы открыть раздел «Частичный выбор символов», щелкните Изменить в диалоговом окне Параметры публикации и выберите символ в списке. По умолчанию выбраны все символы.

Открытие окна «Частичный выбор символов».

Выберите символы в списке.

Повышение производительности графики с помощью растровых текстур

В Animate растровые текстуры позволяют повысить производительность анимации на разных платформах. Хотите снизить уровень сложности векторов с помощью растровых текстур? Посмотрите учебный видеоролик в конце этого примера и выполните следующие шаги.

На панели «Инспектор свойств» щелкните «Параметры публикации».
На вкладке «Основные» щелкните значок гаечного ключа рядом с пунктом «Экспортировать документ как текстуру».
На вкладке «Параметры изображения» нажмите кнопку «Изменить» и выберите нужные символы.
Нажмите кнопку ОК.