Как создаются 2D и 3D анимации: от концепта до вашего телефона
Каждый раз, когда вы стреляете из автомата, достаёте оружие ближнего боя или перезаряжаете снайперскую винтовку, вы видите результат кропотливой работы нескольких команд, одна из которых – команды аниматоров. Давайте заглянем за кулисы и узнаем, как рождаются эти анимации специально для каждой модели оружия.
Особенности анимации для мобильных игр
Modern Strike Online предназначена для работы на телефонах и планшетах, что накладывает особые требования на создание анимации. Аниматоры должны постоянно помнить:
- Игроки видят анимацию на небольших экранах;
- Мобильные устройства имеют ограниченную мощность;
- Анимация должна быть читаемой даже при быстрой игре.
Как анимируется оружие
Этап планирования: от идеи до технического задания
Всё начинается с документа от геймдизайнера. В нём описывается новое оружие: какой это будет автомат, пистолет или снайперская винтовка, как она должна стрелять и перезаряжаться, какие уникальные анимации оно должно иметь в состоянии простоя.
Руководитель команды аниматоров изучает предложения и даёт свои комментарии:
- Что технически возможно реализовать;
- Что будет слишком дорого по времени;
- Какие ограничения есть у мобильных устройств.
Главная Цель этапа — обеспечить прозрачность и согласованность между отделами до начала активной работы.
Создание основы: от концепта к 3D-модели
После утверждения концепции оружие передаётся концепт-художникам и 3D-моделлерам. Аниматоры получают готовую модель только третьими в очереди, но это время не тратится впустую, ведь аниматоры уже трудятся над прокси-анимацией.
Секрет эффективности: прокси-анимация
Пока художники дорабатывают финальную модель оружия, аниматоры создают прокси-анимацию – это временная анимация на упрощенной геометрии. Прокси-анимация – от слова proxy — представитель, уполномоченный, но мы подразумеваем как объект, который временно заменяет рабочую модель.
Представьте, что аниматор берёт простой прямоугольник, проецирует на него изображение будущего автомата и анимирует его как настоящее оружие. Это позволяет:
- Заранее продумать все движения оружия;
- Протестировать, как анимация будет выглядеть в игре;
- Сэкономить время на финальном этапе.
С таким подходом у команды есть дополнительное время чтобы опробовать различные идеи и подготовить основные движения оружия в пространстве камеры. Прорабатывать детали и мелкие движения аниматоры будут уже на этапе готовой модели. Тем самым команда создаёт объемный рисунок для работы.
3D анимация оружия: технический процесс
Проверка модели и риггинг
Когда готовая 3D-модель оружия попадает к аниматору, первым делом проверяется:
- Правильные ли размеры (важно для мобильного экрана)
- Корректно ли настроены оси поворота
- Все ли подвижные части присутствуют
Затем начинается риггинг — создание «скелета» для оружия. Это система костей и контроллеров, которая позволит оружию правильно двигаться.
Одно из интересных решений было сделано в данном риге – при движении одного контроллера через масштабирование автоматически двигаются мелкие элементы клинка.
Далее команда аниматоров либо копирует ту прокси-анимацию, которую подготовили ранее, либо делают новую анимацию с нуля.
Три этапа создания анимации с “чистого листа”
- Блокинг — «Что происходит?»
Аниматор расставляет основные ключевые кадры: где находится оружие в начале, в середине и в конце действия. Например, для анимации стрельбы из автомата это может быть:
- Оружие в покое
- Момент отдачи
- Возврат в исходное положение
- Блокинг+ — «Как это происходит?»
Между ключевыми кадрами добавляются промежуточные позы. На этом этапе показывается:
- Насколько тяжёлое оружие (тяжёлый пулемёт движется медленнее пистолета)
- Характер персонажа через оружие (удивление, страх или крутость персонажа с оружием в руках)
- Реалистичность движений
Так же на этом этапе добавляется работа со временем, чтобы то что было придумано подходило под технические нужды игры. У каждого оружия есть свои временные рамки по перезарядке, доставанию и убиранию оружия и они учитываются каждый раз под каждую единицу оружия.
- Финальный полишинг
Анимация доводится до идеала и проходит утверждение у продюсера, геймдизайнеров и руководителя отдела аниматоров, а затем попадает в игру.
2D анимация: интерфейс и эффекты
Всё начинается с встречи аниматора и художников. Они обсуждают, как будет выглядеть будущая анимация: какие элементы будут двигаться, какие останутся неподвижными, и как лучше «нарезать» (разделить) изображение на отдельные части. Рассмотрим процесс анимации на примере экрана загрузки.
Почему это важно? Если изначально неправильно разрезать картинку, потом будет сложно собрать её обратно и заставить красиво двигаться.
Примеры:
- Анимация нового оружия в меню
- Эффекты взрывов и выстрелов
- Движущиеся элементы интерфейса
- Анимация получения наград
- Подвижный экран загрузки
Этап 2: Получение и тщательная проверка арта
Когда художники передают готовые изображения, аниматор проделывает ряд проверок:
Проверка №1: Границы подвижных элементов
Дым от взрывов, пыль от пуль, огонь от выстрелов — все эти элементы должны иметь плавные края. Если граница слишком резкая, при движении это будет выглядеть неестественно, как будто кто-то вырезал картинку ножницами.
Проверка №2: Охота на лишние пиксели
В каждом слое изображения могут прятаться невидимые глазу прозрачные пиксели. Они занимают драгоценное место в памяти телефона, поэтому их нужно найти и удалить, чтобы телефон лишний раз не нагружался.
Проверка №3: Совместимость с игровым движком
Программа Spine (которая используется для создания 2D анимации) понимает только определённые способы наложения изображений друг на друга. Если художник использовал другие режимы, аниматор должен это исправить.
Этап оптимизации — экономим каждый байт:
Дорезка и дорисовка деталей Аниматор изучает каждый элемент и думает: «А можно ли это сделать лучше?» Иногда нужно подрезать изображение, иногда — попросить художника дорисовать недостающие детали. Чем точнее нарезка, тем меньше технических проблем будет потом.
Отбор повторяющихся элементов Если в анимации есть много похожих частиц (например, искры от пуль), аниматор оставляет только 3-4 самых красивых варианта. Зачем хранить 20 почти одинаковых искр, если можно использовать 4 разных в разных комбинациях?
Хитрость с размытыми элементами Для элементов без чётких границ (свечения, тени, дым) аниматор может уменьшить их в 2 раза, а потом растянуть обратно в программе. Файл станет в 4 раза меньше, а на экране телефона разница почти незаметна и вашему телефону будет проще!
Объединение неподвижных частей Если какие-то элементы двигаться не будут (например, фон), их можно склеить в одно изображение. Это необходимо для экономии места.
Экспорт из Photoshop Для переноса всех элементов из Photoshop в программу анимации используется специальный скрипт PhotoshopToSpine.
Этап 3: Риггинг — создание «скелета» для плоских картинок
Плоские картинки также нуждаются в “скелете”, чтобы аниматор превратил неподвижные картинки в марионеток, которые могут двигаться.
Философия мобильного риггинга Главное правило: игроки видят анимацию на маленьких экранах телефонов, поэтому не стоит тратить время на детали, которые всё равно не будут заметны на маленьких экранах. Лучше сделать проще, но быстрее и стабильнее.
В Modern Strike Online может быть много движущихся элементов одновременно (интерфейс, эффекты, анимация оружия). Поэтому нужно выбирать, что действительно важно анимировать, а что можно оставить статичным.
Организация рабочего пространства Аниматор создаёт удобную систему названий для всех элементов и окрашивает разные группы костей в разные цвета. Это как наведение порядка в инструментах — потом работать намного быстрее.
Этап 4: Создание анимации
На этом этапе «скелет» оживает! Аниматор может делать практически всё:
- Двигать и поворачивать любые элементы
- Менять их размер
- Даже изменять цвета прямо в анимации
Работа с цветом в анимации: Можно изменять цвет элементов прямо в процессе анимации. Например, сделать так, чтобы оружие светилось при выстреле или интерфейс менял цвет при получении награды. Но нужно использовать это осторожно — слишком много цветовых эффектов могут замедлить игру на слабых телефонах.
Этап 5: Экспорт — подготовка для игры
Упаковка в атлас
Идеальный вариант — уместить все элементы анимации в один «атлас» (большое изображение, где собраны все мелкие картинки). Это как собрать все инструменты в один ящик — быстрее найти и использовать.
Настройки экспорта Аниматор настраивает множество параметров; размер атласа, формат сжатия и качество изображения.
Этап 6: Архивирование и передача
Дальше всё архивируется по определённым папкам и передаётся следующим командам для работы и интеграции анимации в игру.
Дополнительные материалы
Часто ко всем материалам добавляется видео анимации в высоком качестве без интерфейса — это помогает другим специалистам понять, как должна выглядеть анимация. Например, команде Моушен дизайнеров, работающих над видео
Интеграция в игру
Настройка в Unity
После создания анимация попадает в игровой движок Unity, где:
- Добавляются процедурные анимации (автоматическая тряска камеры при стрельбе)
- Настраивается синхронизация с игровой механикой
- Оптимизируется производительность для разных моделей телефонов
Особенности мобильной оптимизации
Аниматоры Modern Strike Online постоянно балансируют между качеством и производительностью:
- Анимация должна красиво выглядеть на флагманских телефонах
- Но при этом нормально работать на бюджетных устройствах
- Размер файлов должен быть минимальным (важно для скачивания по мобильному интернету)
Заключение
Каждая секунда анимации – это результат недель работы команды профессионалов. От первого наброска геймдизайнера до финальной интеграции в игру проходят месяцы, а иногда и больше. Множество команд трудятся над каждым оружием.
Теперь, держа телефон в руках и играя в Modern Strike Online, вы знаете, какой огромный путь проходит каждое движение оружия, прежде чем попасть на экран вашего устройства. За каждой анимацией стоят люди, которые думают о том, как сделать вашу игру максимально захватывающей и плавной, даже на небольшом экране мобильного телефона.