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

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

  1. Руководство пользователя Adobe Animate
  2. Введение в Animate
    1. Новые возможности Animate
    2. Визуальный глоссарий
    3. Системные требования Animate
    4. Сочетания клавиш Animate
    5. Работа с несколькими типами файлов в Animate
  3. Анимация
    1. Основы анимации в Animate
    2. Кадры и ключевые кадры в Animate
    3. Покадровая анимация в Animate
    4. Работа с классической анимацией движения в Animate
    5. Инструмент «Кисть»
    6. Руководство по движению
    7. Анимация движения и язык ActionScript 3.0
    8. Сведения об анимации движения
    9. Анимация движения
    10. Создание анимации движения
    11. Использование ключевых кадров свойств
    12. Положения в анимации движения
    13. Использование Редактора движения для анимаций
    14. Редактирование траектории анимации движения
    15. Управление анимациями движения
    16. Настраиваемое ускорение и замедление
    17. Создание и применение стилей движения
    18. Настройка диапазонов анимации движения
    19. Сохранение анимации движения в файлах XML
    20. Анимация движения и классическая анимация
    21. Анимация формы
    22. Анимация с использованием инструмента «Кость» в Animate
    23. Работа с риггингом персонажей в Animate
    24. Слои-маски в Adobe Animate
    25. Работа со сценами в Animate
  4. Интерактивность
    1. Создание кнопок в Animate
    2. Преобразование проектов Animate в другие форматы документов
    3. Создание и публикация документов HTML5 Canvas в Animate
    4. Добавление интерактивных возможностей с помощью фрагментов кода в Animate
    5. Создание пользовательских компонентов HTML5
    6. Использование компонентов в HTML5 Canvas
    7. Создание пользовательских компонентов: примеры
    8. Фрагменты кода для пользовательских компонентов
    9. Рекомендации: реклама в Animate
    10. Разработка и публикация контента для виртуальной реальности
  5. Рабочая среда и рабочий процесс
    1. Создание и использование малярных кистей
    2. Использование шрифтов Google в документах HTML5 Canvas
    3. Использование библиотек Creative Cloud Libraries и Adobe Animate
    4. Использование рабочей области и панели «Инструменты» в Animate
    5. Рабочие процессы и рабочая среда Animate
    6. Использование веб-шрифтов в документах HTML5 Canvas
    7. Временные шкалы и ActionScript
    8. Работа с несколькими временными шкалами
    9. Задание настроек
    10. Использование панелей разработки Animate
    11. Создание слоев временной шкалы в Animate
    12. Экспорт анимаций для мобильных приложений и игровых платформ
    13. Перемещение и копирование объектов
    14. Шаблоны
    15. Поиск и замена в Animate
    16. Отмена/повтор действий и панель «История»
    17. Сочетания клавиш
    18. Использование временной шкалы в Animate
    19. Создание HTML-расширений
    20. Параметры оптимизации изображений и GIF-анимаций
    21. Настройки экспорта для изображений и GIF
    22. Панель «Ресурсы» в Animate
  6. Мультимедиа и видео
    1. Преобразование и объединение графических объектов в Animate
    2. Создание экземпляров символов и работа с ними в Animate
    3. Трассировка изображения
    4. Использование звука в Adobe Animate
    5. Экспорт SVG-файлов
    6. Создание видеофайлов для использования в Animate
    7. Добавление видео в Animate
    8. Рисование и создание объектов в Animate
    9. Изменение линий и фигур
    10. Обводки, заливки и градиенты в Animate CC
    11. Работа с Adobe Premiere Pro и After Effects
    12. Панели «Цвет» в Animate CC
    13. Открытие файлов Flash CS6 в Animate
    14. Работа с классическим текстом в Animate
    15. Размещение иллюстраций в Animate
    16. Импортированные растровые изображения в Animate
    17. Трехмерная графика
    18. Работа с символами в Animate
    19. Рисование линий и фигур в Adobe Animate
    20. Работа с библиотеками в Animate
    21. Экспорт звуков
    22. Выделение объектов в Animate CC
    23. Работа с AI-файлами Illustrator в Animate
    24. Применение режимов наложения
    25. Упорядочивание объектов
    26. Автоматизация задач с помощью меню «Команды»
    27. Многоязычный текст
    28. Использование камеры в Animate
    29. Графические фильтры
    30. Звук и ActionScript
    31. Настройки рисования
    32. Рисование инструментом «Перо»
  7. Платформы
    1. Преобразование проектов Animate в другие форматы документов
    2. Поддержка специализированных платформ
    3. Создание и публикация документов HTML5 Canvas в Animate
    4. Создание и публикация документа WebGL
    5. Упаковка приложений AIR for iOS
    6. Публикация приложений AIR for Android
    7. Публикация для Adobe AIR на настольных ПК
    8. Параметры публикации ActionScript
    9. Рекомендации: размещение ActionScript в приложении
    10. Использование ActionScript в Animate
    11. Специальные возможности в среде Animate
    12. Создание и использование сценариев
    13. Обеспечение поддержки специализированных платформ
    14. Общие сведения о поддержке специализированных платформ
    15. Работа с плагинами поддержки специализированных платформ
    16. Отладка сценариев ActionScript 3.0
    17. Обеспечение поддержки специализированных платформ
  8. Экспорт и публикация
    1. Экспорт файлов из Animate CC
    2. Публикация OAM
    3. Экспорт SVG-файлов
    4. Экспорт графики и видео из Animate
    5. Публикация документов AS3
    6. Экспорт анимаций для мобильных приложений и игровых платформ
    7. Экспорт звуков
    8. Рекомендации: советы по созданию контента для мобильных устройств
    9. Рекомендации: правила работы с видео
    10. Рекомендации: руководство по созданию SWF-приложений
    11. Рекомендации: формирование структуры FLA-файлов
    12. Рекомендации: оптимизация FLA-файлов для Animate
    13. Параметры публикации ActionScript
    14. Задание параметров публикации для Animate
    15. Экспорт файлов-проекторов
    16. Экспорт изображений и анимированных файлов GIF
    17. Шаблоны публикации HTML
    18. Работа с Adobe Premiere Pro и After Effects
    19. Быстрая публикация анимаций
  9. Устранение неполадок
    1. Исправленные неполадки
    2. Известные проблемы

 

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

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

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

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

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

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

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

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

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

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

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

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

Функция

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

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

Производительность в мобильных приложениях

Низкая

Высокая

Эффективность загрузки приложения

Высокая, так как отсутствуют вычисления

Низкая, так как выполняется вычисление файла JSON 

Размер

Занимает больше места

Занимает меньше места

Качество анимации

Среднее

Высокое

Количество создаваемых файлов

Два файла: один файл растрового изображения и один файл json

Переменная: на основе размера изображения.

Количество создаваемых растровых изображений

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

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

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

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

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

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

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

    Параметр экспорта

    Описание

    Размер изображения

    Общий размер листа спрайтов в пикселях. Значение по умолчанию («Автоматический размер») позволяет вместить все включаемые спрайты.

    Формат изображения

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

    Отступы листа

    Отступы от краев листа спрайтов (в пикселях).

    Отступы фигуры

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

    Алгоритм

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

    • Базовый (по умолчанию)
    • MaxRects

    Формат данных

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

    Поворот

    Поворот спрайтов на 90 градусов. Данная настройка доступна только для некоторых форматов данных.

    Обрезка

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

    Кадры стека

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

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

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

  1. В разделе «Библиотека» щелкните правой кнопкой мыши фрагмент ролика.

  2. Выберите «Создать лист спрайта».

  3. В диалоговом окне «Лист спрайтов» выберите необходимые параметры.

  4. Нажмите «Экспорт».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

     Если размер ресурса больше выбранного измерения изображения, появляется предупреждение.

  5. Чтобы просмотреть конечный результат, откройте вкладку «Просмотр».

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

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

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

Animation.json

Этот файл содержит сведения об анимации. Идентичные кадры по умолчанию оптимизируются и консолидируются в файле 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. Для более высокой производительности при работе с анимациями в параметры публикации добавлена возможность их экспорта в качестве атласа текстур.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. На панели «Инспектор свойств» щелкните «Параметры публикации».

  2. На вкладке «Основные» щелкните значок гаечного ключа рядом с пунктом «Экспортировать документ как текстуру».

  3. На вкладке «Параметры изображения» нажмите кнопку «Изменить» и выберите нужные символы.

  4. Нажмите кнопку ОК.

Публикация ресурсов в виде растровых текстур для повышения производительности

Посмотрите видео и узнайте, как работают анимации с растровыми текстурами.

 Adobe

Получайте помощь быстрее и проще

Новый пользователь?