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

Обзор

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

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

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

Лист спрайтов
Лист спрайтов, содержащий спрайты покадровой анимации.

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

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

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

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

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

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

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

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

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

  1. Выделите один или несколько символов в библиотеке или экземпляры символов в рабочей области. Выделение также может содержать растровые изображения.

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

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

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

    Способ размещения изображений на листе спрайтов. Этот параметр может принимать два значения:

    • Базовый (по умолчанию)
    • MaxRects
    Формат данных Внутренний формат для хранения данных изображений. Выберите формат, который наилучшим образом подходит для предполагаемого использования листа спрайтов после экспорта.
    Поворот Поворот спрайтов на 90 градусов. Данная настройка доступна только для некоторых форматов данных.
    Обрезка Данная настройка обеспечивает экономию места на листе спрайтов за счет обрезания неиспользуемых пикселей каждого символьного кадра, добавляемого на лист.
    Кадры стека Выбор этой настройки исключает дублирование повторяющихся кадров выбранных символов на результирующем листе спрайтов.

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

Экспорт анимации на основе листа спрайтов для мобильных приложений
Train Simple - Matthew Pizzi

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

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

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

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

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

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

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

    generate-texture-atlas (2)
    Создание атласа текстур
  3. Выберите параметры экспорта для атласа текстур. 

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

    Способ размещения изображений в атласе текстур. Этот параметр может принимать два значения:

    • Базовый (по умолчанию)
    • MaxRects
    Формат данных Внутренний формат для хранения данных изображений. По умолчанию используется формат JSON.
    Поворот Поворот изображения на 90°. Данная настройка доступна только для некоторых форматов данных.
    Свести наклоненные объекты в растр Выберите этот параметр, если вы используете преобразования объектов с наклоном. Animate преобразует эти объекты в растровые изображения, так как некоторые игровые платформы неправильно интерпретируют преобразование с наклоном. 
  4. Чтобы просмотреть конечный результат, откройте вкладку Просмотр.

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

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

Animation.json

Этот файл содержит сведения об анимации. 

spritemap.json

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

spritemap.png

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

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

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

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

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

  1. Создайте проект в Unity, выбрав для него путь размещения. В указанном местоположении будет создана папка с вложенной папкой Активы

  2. Создайте две вложенные папки в разделе Активы как Ресурсы и Редактор

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

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

    Загружая образец, вы принимаете Условия использования и Политику конфиденциальности в сети Интернет. 

  4. Переместите файлы атласа текстур, такие как Animation.json, spritemap.json, spritemap.png, и файлы подключаемого модуля Unity, например Plugin.cs и Effect.shader, в папку Активы > Ресурсы.

  5. Переместите файлы AnimateEditor.cs и WrapperPlugin.cs в папку Активы

  6. В Unity выберите файл AnimateEditor.cs и перетащите его в область главной камеры.

  7. Воспроизведите проект. Воспроизведение проекта приводит к разделению карты спрайтов на разные спрайты.

  8. Переместите файл AnimateEditor.cs в в редактор.

  9. В Unity выберите файл WrapperPlugin.cs и перетащите его в область Главная камера. Кроме того, отмените выбор или удалите файл AnimateEditor.cs из области главной камеры.

  10. Воспроизведите или опубликуйте результаты в зависимости от потребностей. 

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

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

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

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

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

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

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

Примечание.

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

Экспорт документа как текстуры
Экспорт документа как текстуры

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

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

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

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

Частичный выбор символов
Частичный выбор символов

Руководство по публикации текстур

Руководство по публикации текстур
Узнайте, как создавать более гибкие и стабильные ресурсы с помощью векторов и публиковать их в виде растровых текстур.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет