Remontnouta.ru

ПК Ремонт техники
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

О создании UI-анимаций в играх и почему они так важны

О создании UI-анимаций в играх и почему они так важны

Привет! Я старший UI-дизайнер Pixonic, Алексей Морев. И в этой статье речь пойдет UI-анимациях, которые каждый из нас может увидеть в играх.

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

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

Прежде всего, давайте определимся, что такое анимация и какие ее виды существуют.

Если упрощенно, анимация — это последовательность кадров, которая «оживляет» изображение. Она делится на полную (full animation) и упрощенную (limited animation). Примером полной анимации является любой полнометражный анимационный фильм: диснеевские «Аладдин», «Книга джунглей», «Русалочка» и пр. Примеры упрощенной анимации — большинство мультсериалов, таких как «Рик и Морти», «Гравити Фолз», «Крайний космос» и пр.

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

Полная и упрощенная анимация на примере мультфильма «Симпсоны»

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

Что такое анимация, разобрались. Теперь логично перейти к следующим вопросам: какой тип анимации использовать в UI? И нужна ли она вообще?

Сперва отвечу на второй. Нужна ли нам анимация? Вроде бы все понятно: окно открылось, приз получен, кнопка нажалась. Не так уж и важно при этом использовать какую-либо анимацию, верно?

Не совсем так. Благодаря анимации можно не только разнообразить визуальную составляющую игры, но и помочь пользователю понять, что происходит на экране, куда нужно нажимать и какое действие выполнить. Это одна из основных причин использования UI-анимации в играх: чтобы привлечь внимание игрока к элементам, наиболее важным в данный момент.

Вторая причина — способность анимации показать общую динамику и стиль игры. UI-анимация должна соответствовать динамике игры. Это способствует еще большему погружению. Если в динамичной игре использовать слишком медленные анимации, это будет раздражать игроков, что скажется на общем восприятии игрового процесса.

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

Читайте так же:
Глючат текстуры в играх

Давайте на примерах одного и того же попапа посмотрим, как он выглядит с полной, упрощенной и минимальной анимацией.

Полная анимация

Упрощенная анимация

Минимальная анимация

Кто создает UI-анимацию и как устроен процесс разработки

Обычно в разработке анимации участвует три человека:

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

Создание анимации можно условно разделить на три этапа: продумывание, создание референса и реализация.

Первый этап: идея

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

Давайте поэтапно разберем процесс создания анимации на примере анимации попапа, которая показана выше.

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

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

Тезисно опишем идею:

  • Появление попапа после долго отсутствия игрока в игре;
  • Сделать плавную, но достаточно быструю анимацию;
  • Использовать Full frame анимацию;
  • Анимировать каждый элемент;
  • Анимировать пушку динозавру;
  • Добавить анимированное свечение под динозавром.

Второй этап: создание референса

Создаем собственный анимационный референс, который в дальнейшем будет демонстрироваться, дорабатываться и изменяться.

Для этого подойдут такие программы, как Adobe Animate, After Effects, Spine и т.д. На данном этапе для нас не имеет значения, в какой программе анимировать (исключение может составлять Spine, т.к. у этого редактора есть экспорт анимации во многие движки), поэтому выбираем, что для нас окажется удобнее и быстрее. Можно даже покадрово проанимировать элемент в Photoshop, но это уже экзотика. Я предпочитаю работать в After Effects, поскольку это наиболее гибкий редактор в плане анимаций: в нем можно реализовать практически любую идею, которая придет в голову.

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

Нельзя забывать и про длительность самой анимации. К примеру, если появление окна занимает больше одной секунды, а в игре оно появляется достаточно часто, игрок очень быстро устанет от затянутой анимации и будет раздражаться. В то же время, если появление какого-то элемента происходит довольно редко, и это событие приносит игроку радость (например, получение сундука, приза или ачивки), можно сделать анимацию появления длиннее и красочнее.

Читайте так же:
Во что можно поиграть втроем с друзьями

Третий этап: реализация

Здесь мы оптимизируем всю графику, использованную в референсе: нарезаем частицы, свечение, подложку, динозавра и прочие мелочи — иными словами, все визуальные эффекты.


Пример оптимизированной нарезки

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

Почему нельзя сразу сделать все на движке? Ответ не очевиден, но довольно прост: когда вы создаете анимацию, к примеру, в After Effects, у вас есть только программа анимации и ее функционал. Не нужно настраивать камеры в игре, чтобы они верно отображались в UI. Не нужно оптимизировать графику и делить все на составляющие: вы легко можете заменить любой элемент, а то и вовсе переосмыслить анимацию, полностью ее переиначив. Если же сразу все создавать на игровом движке, вы потеряете много времени на оптимизацию файлов, будете зажаты в техническом плане и потратите много времени на нарезку графики для анимации на начальном этапе, хотя в конечном итоге она может оказаться совсем другой.

Особенности профессии

3D-аниматор — одна из ключевых фигур в создании анимационных фильмов или игр, но не единственная. Над фильмами работает целая команда специалистов. 3D—аниматор на одном из этапов создания фильма делает трехмерные объекты движущимися в пространстве и времени, создавая с помощью динамики и поз определенный характер персонажа и его настроение. Помимо владения специальными программами, настоящий профессионал должен разбираться в психологии и анатомии человека, знать основы актерского мастерства, обладать чувством времени (для правильной расстановки ключей анимации). Всё это помогает понимать процессы создания реальных изображений и исключать ошибки в движениях: довольно долго новички-аниматоры не могут справиться с «плавающим» движением персонажей. Для создания правдоподобной и интересной анимации необходима большая практика и навыки работы.

При приёме на работу от специалиста требуется опыт:

  • анимирования персонажей (субъектов — людей, животных; объектов — жидкостей, природных элементов);
  • работы со спецэффектами;
  • экспорта анимаций в движок;
  • создания концепт-арта;
  • создания качественных UV—разверток;
  • настройки скелета, материалов и скиннинга модели;
  • постобработки в графических редакторах.

Для создания 3D-мультфильма или игры необходима слаженная работа целой команды специалистов:

  • Художник-постановщик, который определяет общий замысел и идею фильма, делает наброски персонажей и окружающей среды.
  • 3D-моделлер, создающий конкретные 3D-модели персонажей и объектов.
  • Художник по текстурам, рисующий текстуры.
  • Сетапер, создающий скелет персонажей и объектов (риггинг, скиннинг) — (сгибание пальцев и рук, открывание двери, шевеление ветвей, перелистывание книги и т.п.).
  • После сетапера в действие вступает 3D-аниматор.
  • Осветитель, выставляющий свет.
  • Оператор, устанавливающий камеру.
  • Визуализатор, создающий дизайн-проект по чертежам и эскизам — окружающий пейзаж, архитектурные сооружения, одежду персонажей.
  • VFX-специалист — специалист по спецэффектам.
  • Компоузер, специалист на последней стадии создания фильма, которому под силу исправить многочисленные ошибки предыдущих специалистов. Он формирует объемную финальную картину из слоёв, преображает созданный видеоряд, придавая фильму законченный вид и лоск.
Читайте так же:
Зависает экран во время игры

Совет по работе с несколькими эффектами анимации

При работе с несколькими объектами на слайде может быть сложно выделить объекты и примененные к ним эффекты анимации.

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

Имена объектов без описания

В области выделения вы можете дать уникальное имя каждому объекту, чтобы с ними было легче работать при применении эффектов анимации. См. ниже.

Уникальное имя для каждого объекта

Чтобы изменить имена объектов по умолчанию, на вкладке Главная нажмите Выделить и щелкните Область выделения.

Открытие области выделения

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

Где нужны аниматоры

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

Но и сегодня аниматор — очень востребованная профессия. Они нужны в кино- и телеиндустрии, в рекламе. Создание фильмов и мультфильмов в студиях поставлено на поток, поэтому аниматоры в кино и на телевидении не просто востребованы — их не хватает, причём как в России, так и за рубежом.

Аниматоры задействованы и в гейм-индустрии. Они создают специальные клипы анимации, которые компьютерная программа потом микширует (совмещает) и делает из этого движение. Например, для персонажа отдельно делается клип для ходьбы, отдельно — для падения, отдельно для поднятия руки, поворота головы. Потом все эти клипы совмещаются и получается анимация движений персонажа. Игрок нажимает соответствующую кнопку на компьютере, активируется программа, и персонаж выполняет нужные действия.

Методы создания анимации в компьютерной графике

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

Методы создания анимации в компьютерной графике

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

Давайте ознакомимся с широко известными видами анимации, с помощью которых создавались известные нам цифровые персонажи:

  • Традиционная анимация.
  • векторная графика.
  • 3D компьютерная графика.
  • Графика движения.
  • Stop-motion
Читайте так же:
Во время запуска игры черный экран

Традиционная анимация

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

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

Методы создания анимации в компьютерной графике

2D векторная графика

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

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

Методы создания анимации в компьютерной графике

3D компьютерная графика

3D анимация является очень широко распространенной техникой создания графики. Она совершенно не похожа на другие виды анимации в компьютерной графике. Несмотря на использование схожих принципов композиции и движения, технические методы, применяемые для решения поставленных задач, сильно отличаются. В 3D-анимации разработчику не нужно быть художником-графиком. Скорее это напоминает игру с куклами, чем создание рисунка.

Это также называют CGI — computer-generated imagery — изображения, сгенерированные компьютером. Такие изображения появляются, когда компьютерные аниматоры создают поток изображений, сводящихся в одно целое, что и формирует саму анимацию. С помощью компьютерной графики динамические и статические изображения объединяются. Полученные 3D персонажи появляются на экране в цифровом формате, после чего объединяются с каркасом. Данный процесс дает возможность по-разному анимировать каждый объект.

Анимация создается путем формирования моделей в самостоятельных ключевых кадрах. Затем компьютер их «размножает» и интерпретирует анимацию путем добавления множества промежуточных кадров между ключевыми.

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

Главной отличительной особенностью между 2D и 3D анимацией является тот факт, что в первой из них аниматор создает и работает над отдельными кадрами, а при использовании метода 3D-анимации мы имеем непрерывный поток сменяющих друг друга изображений. Его остановка воспринимается как ошибка. И даже если наш персонаж в какой-то промежуток времени остается неподвижным, все равно мы имеем непрерывный поток кадров, создающий иллюзию реальности.

Читайте так же:
Во что поиграть на пк топ

Методы создания анимации в компьютерной графике

Графика движения

Этот метод создания анимации чаще всего используется для промо-роликов, анимированных логотипов и вступительных титров. Он представляет собой перемещающиеся графические тексты и другие объекты. Часто данный способ создания анимации называют графикой движения.

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

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

Stop-motion

Эта разновидность компьютерной анимации больше других напоминает привычную нам анимацию. Ее суть заключается в последовательном фотографировании объекта, который находится в движении. Для создания такой анимации фотографируется какой-то элемент, затем делается повторный снимок при его перемещении на небольшое расстояние. Процесс повторяется необходимое количество раз, после чего полученные изображения воспроизводятся, и мы получаем эффект движения.

Применяется несколько различных форм stop-motion анимации — Cut-Outs, Claymation and Puppets и другие, но все они создаются одним и тем же способом – последовательным фотографированием.

4. Создание 2D-анимации онлайн

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

Хорошая новость заключается в том, что вам совсем не обязательно обладать профессиональными навыками, чтобы создать анимацию самостоятельно.

Как? С помощью онлайн-редактора для анимации с готовыми шаблонами и анимированными сценами. Так что, если вы не планируете стать аниматором и изучать профессиональные программы, вы можете просто воспользоваться онлайн-инструментами.

Другая хорошая новость – этот процесс можно автоматизировать. Да-да! С помощью Renderforest вы можете создать анимированное видео всего за пару минут. Выберите подходящий шаблон, добавьте свой сценарий, а система автоматически сгенерирует анимацию.

how to choose2D animation software

Введите сценарий, содержащий до 2048 символов. При необходимости видео можно будет дополнительно настроить.

automatied 2d animation creation

Помимо автоматического создания видео есть 2 других варианта. Первый вариант: добавьте сцены вручную – выберите подходящие сцены (от анимации персонажей до заднего фона) и соедините их в единое видео. Второй вариант: использовать готовые пресеты видео – выберите пресет, исходя из ваших требований и предпочтений.

Создание анимации онлайн не только сэкономит ваше время, но и поможет сократить затраты на продакшн.

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector