Возможно, вы хотите создать собственную игру в стиле ретро или помочь кому-то с графикой. Тогда вам понадобится спрайт : анимированный в разных позициях персонаж в стиле пиксель-арт.
Пройдите этот урок, в котором я научу вас созданию милого кролика с зацикленной анимацией бега.
Если вам сложно рисовать в стиле пиксель-арт, то воспользуйтесь готовыми спрайтами.
Перед анимацией, мы создадим статичный рисунок, поэтому нам нужно придумать, как будет выглядеть наш персонаж.
Это не самый важный шаг в этом уроке, но создание наброска является частью моего рабочего процесса.
Я нарисовал несколько набросков головы и выбрал наиболее подходящий по стилю.
Чтобы превратить кролика в пиксельный рисунок, открываем Фотошоп и рисуем глаза. Набросок нам нужен только для того, чтобы определить стиль рисунка.
Если вы никогда не занимались пиксель-артом, то создаем новый файл не очень большого размера, например, 400 х 400 пикселей. Мы много будем работать с увеличением масштаба (до 700%) и использовать инструмент Pencil Tool (P) (Карандаш) для рисования отдельных пикселей. Я советую вам открыть дополнительное окно с рабочим документом, в котором масштаб будет 100-200%, чтобы вы могли сразу в реальном размере видеть свою работу без необходимости на одном документе туда-сюда переключаться с большого масштаба на маленький. Таким образом, у вас будет открыто два документа: на одном масштаб до 700% (рабочий), а на другом - 100-200%.
Я не ограничиваю себя определенным размером спрайта, но я постараюсь сделать персонажа как можно меньше, при этом сохранив наиболее важные детали. Поэтому глаза - хорошая начальная точка.
Глаза представляют из себя две простые линии, которые находятся рядом. Каждый глаз 3 пикселя в высоту и 1 пиксель в ширину, черного цвета.
Закончив глаза, мы можем продолжить рисовать нос и другие детали. Ничего страшного, если на данном этапе линии выглядят слишком просто.
Теперь мы сгладим некоторые линии. Также я добавил большие передние зубы.
Дорисовываем пару пикселей, чтобы создать улыбку.
Уши нарисованы максимально узкими с внутренней частью шириной 1 пиксель и таким же контуром.
Одно ухо рисуем свисающим вниз.
Рисуем второе ухо.
Рисуем большие пухлые щеки и заканчиваем голову.
Теперь мы можем нарисовать тело. У кролика будет человекоподобная фигура. Рисуем туловище в форме капли.
Ноги кролика будут короткими с большой стопой. Пока рисуем только одну ногу.
Рисуем вторую ногу, но сдвигаем ее слегка вправо, чтобы она не перекрывалась первой.
Ноги выглядят слегка смещенными, поэтому я передвинул их на один пиксель левее. Также я объединил ногу с животом, удалив пиксель между ними.
В положении стоя видна только одна рука. Рука имеет форму капли и немного перекрывает туловище.
Удаляем лишние линии на руке.
Базовый контур нашего персонажа готов.
На данном этапе мы превратим персонажа в законченный статичный спрайт.
Выбираем цвет.
Каким цветом вы хотели бы закрасить кролика? Я выбрал желтовато-коричневый цвет и заполнил им все, кроме носа. Для заливки используем Paint Bucket Tool (G) (Заливка).
Теперь давайте нарисуем белый живот. Зубы также закрашиваем белым. На носу добавляем один пиксель розового цвета, остальное оставляем белым.
Теперь нанесем тени: более темным оттенком базового цвета шерсти добавляем тени в тех местах, куда меньше всего попадает свет. Также этим цветом можно добавить текстурности на щеках.
Нога, которая находится на заднем плане, должна быть темнее. Таким образом, заднюю ногу полностью закрашиваем цветом тени, так же делаем с задним ухом, только на кончике оставляем один пиксель базового цвета.
Некоторые детали персонажа будут выглядеть лучше с меньшей контрастностью, поэтому я закрасил некоторые области черного контура темно-коричневым (например, шея и мордочка).
Персонаж в положении стоя готов.
Теперь мы можем добавить кролику немного движения.
Вы можете создать подобную анимацию, используя любое количество кадров, но, так как персонаж маленький, шести кадров будет достаточно.
Давайте пока уберем конечности.
Голова и туловище не будут сильно меняться во время бега, поэтому на всех кадрах эти элементы будут находиться в одном положении.
Ниже рисуем линию, которая зафиксирует высоту ног и будет показывать поверхность, по которой бежит кролик.
Берем Rectangular Marquee Tool (M) (Прямоугольное выделение), выделяем голову и верхнюю часть туловища и сдвигаем выделенную область на один пиксель (для этого активируем инструмент Move Tool (V) (Перемещение) и используем клавиши со стрелками).
Затем передвигаем голову на два пикселя правее.
В предыдущем шаге туловище получилось немного растянутым. Чтобы это исправить, сожмем его по вертикали на 1 пиксель и отредактируем контур и заливку.
Также опускаем туловище на 1 пиксель вниз, потому что большую часть анимации ноги будут в согнутом положении, и, таким образом, они не будут одинаковы по высоте.
Мы немного упростим себе задачу и будем работать только с ногами на переднем плане, так как для заднего плана они будут идентичны.
Движение ноги похоже на маятник: большую часть времени нога согнута, за исключением первого кадра, когда персонаж делает шаг вперед.
Таким образом, у анимации движения ног будет 6 кадров (советую вам изучить готовые раскадровки анимации бега). Обратите внимание на положение стопы. Для наглядности я нарисовал ноги синим цветом.
На новом слое рисуем заготовки ног. Обратите внимание, что ноги не привязаны к одной точке на туловище. Когда конечность отходит назад, то ее основание перемещается левее, а когда нога направлена вперед - правее.
Далее выполняем последовательность действий по рисованию законченного варианта ноги. Для начала синий цвет закрашиваем цветом шерсти (для этого можете воспользоваться инструментом Paint Bucket Tool (G) (Заливка) с выключенным параметром Contiguous (Смежные пиксели)) и, вместо рисования контура вокруг ног, выделяем пустую область за пределами ног с помощью Magic Wand Tool (W) (Волшебная палочка) и сжимаем выделение Select - Modify - Contract (Выделение - Модификация - Сжать) на 1 пиксель. Затем инвертируем выделение Select - Inverse (Выделение - Инвертировать) и далее инструментом Paint Bucket Tool (G) (Заливка) (Contiguous (Смежные пиксели) отключаем) заливаем выделенную область цветом контура.
Ноги еще не закончены, но давайте добавим на некоторых кадрах положение в прыжке.
Мы добавляем прыжок, потому что во время бега тело персонажа не находится все время на одном уровне. Поэтому поднимаем туловище и голову на 1 пиксель выше на третьем кадре, где нога вытянута назад и отталкивается от земли, и шестом кадре, на котором нога поднимает кролика вверх.
Кадры с прыжком отмечены ниже фиолетовыми линиями. Для других линий уменьшаем непрозрачность (Opacity) до 20%, это будет тень. В играх-платформерах такая тень не всегда нужна, но в нашем случае она сделает анимацию интереснее.
Чтобы закончить ноги, делаем стопу более пухлой, соединяем ногу с телом и немного затеняем ее.
Оставшиеся две фиолетовые линии закрашиваем черным и также уменьшаем непрозрачность до 20%.
Закончив с ногами, копируем их и перемещаем копии на несколько пикселей вправо.
Сейчас картинка выглядит странно, потому что обе ноги направлены в одну и ту же сторону, что естественно для кроликов, так как они передвигаются прыжками. Но наш кролик - человекоподобный персонаж и будет двигаться соответствующим образом.
Чтобы создать анимацию бега, ноги должны двигаться в противоположных направлениях, когда одна нога вытянута вперед, вторая - отведена назад.
Поскольку у нас 6 кадров, движение одной ноги на противоположную сторону будет состоять из трех положений. Переставляем местами копии ног так, чтобы оригинал и копия были направлены в противоположные стороны.
Слои с копиями должны находиться под слоем с туловищем кролика.
Чтобы закончить ноги на заднем плане, закрашиваем их более темным оттенком базового цвета, как мы делали на статичном рисунке выше.
Так выглядит готовая анимация ног. Пока не думайте о самом процессе анимации. Сперва мы закончим подготовку кадров, а потом займемся сведением их в зацикленный бег.
В исходном уроке анимация
Теперь пора добавить руки.
Ниже вы можете посмотреть черновую раскадровку движения рук. Они находятся в изогнутом положении на протяжении всего цикла анимации, только немного распрямляясь на первом кадре. Но вы можете попробовать нарисовать свою собственную анимацию движения руки.
Размещаем руки на новом слое над телом и заполняем их основнім цветом кролика, как мы делали с ногами.
Добавляем объем.
И, наконец, затеняем, чтобы добавить больше объема.
Затеняем копии рук и меняем их местами, чтобы обе руки были направлены в противоположные стороны.
Запомните, что руки двигаются в противоположном направлении относительно ног. Например, когда левая нога идет вперед, левая рука отходит назад.
Вот так выглядит анимация рук.
В исходном уроке анимация
Теперь добавим движения голове, так как сейчас она выглядит слишком статично.
Сейчас мы сделаем так, чтобы уши двигались в такт телу. На кадрах, где кролик слегка подпрыгивает, уши направлены вниз, двигаясь по инерции, несмотря на то, что кролик подпрыгивает вверх.
На следующем после прыжка кадре уши менее изогнуты и направлены вперед.
Также анимируем щеки. Их движение похоже на движение ушей: во время прыжка они опускаются чуть ниже, затем после прыжка подымаются.
Вот так выглядит готовый вариант.
В исходном уроке анимация
Нам осталось доработать туловище. Сперва анимируем белый живот. Во время бега грудь слегка поворачивается, а белое пятно должно реагировать на это движение.
Когда передняя рука направлена назад, будет видна большая часть пятна, когда рука направлена вперед, мы видим лишь небольшую часть живота.
В статичном положении необязательно рисовать хвост, так как он может быть скрыт за туловищем. Но в анимации бега лучше не игнорировать этот элемент.
Сначала на новом слое рисуем красный квадрат, чтобы обозначить место расположения хвоста. Пока что этот слой может находиться выше всех предыдущих слоев.
Заполняем хвост цветом, наносим тени и обводку.
На первом кадре, когда передняя рука отводится назад, кончик хвоста перекрывается.
Чтобы закончить хвост, перемещаем слой на задний план и при необходимости корректируем тени/детали.
Мы закончили работу с кадрами. Вот так выглядит готовая анимация. Дополнительные детали делают анимацию гораздо интереснее, не правда ли?
В исходном уроке анимация
У нас есть 6 кадров с зацикленной анимацией бега. Теперь нам осталось склеить их вместе.
Копируем все кадры на новый файл.
Вам нужно копировать по одному кадру в правильной последовательности (слева направо). Чтобы скопировать все слои одновременно, вам нужно перейти в меню Edit - Copy Merged (Редактирование - Скопировать совмещенные данные). Перед копированием убедитесь, что фон прозрачный и не залит цветом.
Размер нового файла должен быть чуть больше кролика.
Вставив кадры, размещаем их в правильном положении. Нижняя линия остается без изменений на всех кадрах, как и нос, кроме двух кадров, где кролик подпрыгивает на 1 пиксель.
В итоге у вас должно получиться всего 6 слоев, по одному слою на каждый кадр, фон прозрачный.
Чтобы начать создавать анимацию в Фотошоп, нам нужно открыть временную шкалу Window - Timeline (Окно - Шкала времени). На шкале находится кнопка Create Frame Animation (Создать покадровую анимацию). Вместо нее может быть кнопка Create Video Timeline (Создать временную шкалу для видео), чтобы переключиться на анимацию, нажмите кнопку в виде стрелки и в появившемся выпадающем меню выберите нужный режим.
Нажимаем кнопку Create Frame Animation (Создать покадровую анимацию), затем кликаем по кнопке вызова параметров в правом верхнем углу шкалы…
…и выбираем Make Frames From Layers (Сделать кадры из слоев).
И, наконец, выделяем все кадры и при необходимости меняем задержку (я выбрал 0.1 секунды), устанавливаем режим повторения на Forever (Всегда).
И получаем вот такого забавного кролика с анимацией бега!
Теперь вы можете использовать этот спрайт в игре или экспортировать его в GIF.
Поздравляю, теперь кролик умеет бегать! Он готов к спасению принцессы-крольчихи и другим героическим свершениям.
Этот урок должен дать вам понимание принципов создания дизайна и анимации спрайтов. Теперь вы можете нарисовать своего собственного персонажа или использовать для игры готового кролика!
Создать объемного персонажа для логотипа или рекламного ролика — только половина дела. Как только внешность вашего героя готова, согласована и утверждена, начинается самое интересное — создание 3d анимации. Это трудоемкий и невероятно интересный процесс, который позволяет в итоге «оживить» любую задумку . Например, научить персонажа говорить с клиентом, грустить и радоваться, размышлять и двигаться, «вляпываться» в приключения и показывать на пальцах, как применить ваш продукт.
Работа 3d аниматоров — колоссальный труд, позволяющий создать не просто двигающуюся картинку, но и вполне достоверную реальность вокруг. Как создается трехмерная анимация и какие чудеса можно сотворить умеючи, разберем подробнее в статье.
Анимация трехмерных объектов существенно отличается от 2d анимации — «плоских» мультиков, где объем достигался с помощью перспективы и правильной покраски персонажей и окружения. Сегодня технологии позволяют сразу и показать ее форму освещением и движением камеры. В этом случае понятие анимации изменяется:
2d анимация — создание иллюзии движения или изменение формы объектов с помощью технических приемов.
Анимация 3d — автоматическое перемещение или трансформация объектов в пространстве и времени.
Проще говоря, раньше нужно было покадрово отрисовывать передвижение каждого персонажа. Теперь достаточно создать трехмерную модель персонажа, после чего ее можно двигать в пространстве без дополнительных усилий и прорисовок. Но говорить-то просто, а на деле — оживление 3d модели персонажей довольно сложный процесс. Чтобы заставить фигурку двигаться, мало иметь доступ к компьютеру и умным программам. Нужно еще и представлять, как может передвигаться герой, какие силы на него при этом влияют (не те, которые высшие, а, например, гравитация, сила трения и сопротивления).
Если вы хотите получить с характером — важно обратиться к аниматорам, которые в курсе всех тонкостей и готовы фанатично прорабатывать каждую деталь. Не только походку, но и мимику, и движение волосков, и скольжение ткани (если герой, конечно, носит одежду).
Чтобы учитывать все и сразу, нужно быть немножко волшебником и немножко гением — вполне удачное описание для аниматоров студии KLONA.
Как гласит современная мудрость: ничто не зомби, кроме зомби. И если ваш герой — не он, то анимирование персонажа должно быть «живым», или, как нынче говорят, верибельным. Зритель должен поверить, что герой действительно ходит, смотрит, кривится или улыбается , взаимодействует с окружающей средой.
Создание и анимация 3d персонажа — это сотворение истории, которая рассказывается не словами на бумаге (или экране), а движением. Например, мимика героя может сказать многое о характере. Но для этого у него должно быть достаточно «качественное» лицо, чтобы заставить мышцы двигаться.
Когда к вопросу подходят без должного старания или в полсилы, как правило, получается что-то по меньшей мере неестественное, а иногда — даже пугающее.
Потому давайте возьмем , как точку отсчета, и посмотрим, что с ней можно сделать:
Каждый из способов легче всего пояснить, рассматривая не только технологию, но и примеры.
— один из наиболее распространенных способов создания 3д анимации персонажей. Суть метода заключается вот в чем: на шкале времени задается несколько главных точек, в которых положение или форма объекта изменяется. Аниматор задает нужные параметры модели в указанных кадрах, а «промежуточные» состояния программа рассчитывает автоматически.
Пример : Для простоты возьмем резиновый мячик, который ударяется о землю и отскакивает вверх. Чтобы отобразить один такой «скачок», процесс нужно разбить на три этапа: мячик в верхней точке — мячик на земле — мячик снова в верхней точке. По-хорошему следует задать больше ключевых кадров, учитывать кучу мелочей. Как то, что при падении резиновый корпус растягивается, а при ударе — сплющивается.
Если правильно деформировать объект в каждой фиксированной точке времени, анимация 3d получится максимально естественной.
Не всегда 3d модели персонажей — это люди или животные. Нашим героем может быть любой объект, например, летающая камера или НЛО (в общем все, на что хватит фантазии). В таком случае мигания лампочек и вращения по оси будет недостаточно — не интересно. А вот заставить объект летать по траектории, да еще и «отправить» камеру следить за перемещением, вовремя приближаясь и отдаляясь...
И умелое обращение с фокусом (вот уж что точно должна уметь студия 3d анимации) превратит простое кружение объекта в пространстве — в увлекательный почти что блокбастер.
Суть способа заключается в том, чтобы:
После того, как персонаж/объект «привязывается» к траектории, программа сама рассчитывает и создает движение. Если при этом добавить анимацию самого объекта (взмахи крыльев, открытие шлюзов, выдвижение шасси) и «поиграть» с камерой, можно добиться весьма интересных эффектов.
Команда студии КЛОНА точно знает, как сделать простое движение по проложенному маршруту и умопомрачительно динамичным.
Наш герой — не находится в вакууме. Любого персонажа окружает какая-то реальность , в которой обязательно имеются гравитация (если дело не в космосе), движение воздушных масс и другие виды колебаний. Все это стоит учитывать, чтобы анимация персонажа была достаточно реалистичной.
Как выглядит результат такой анимации и где ее можно наблюдать?
В деталях. Когда персонаж идет по городу, и плащ развевается под порывами ветра, или когда под водой волосы липнут к лицу — все это получается благодаря анимированию с учетом окружающих факторов.
Строго говоря, анимация в динамической среде — скорее вычислительная работа с глубоким погружением в физические характеристики объектов. Но без всего этого даже самое детальное 3d моделирование с не сделает персонажа живее.
Технология захвата движений — молодая, но очень популярная. Сегодня motion capture используется практически во всех фантастических фильмах. Суть такого способа крайне проста:
В результате действия героя получаются реалистичными, убедительными, а аниматорам не приходится бороться с физикой и вспоминать, в каком месте что гнется.
Это простой способ создавать анимированные, интерактивные дизайны пользовательских интерфейсов; как оказалось, с его помощью можно легко анимировать почти что угодно (не только интерфейсы).
Сначала нужно создать векторный персонаж в Sketch . Вы можете использовать мой готовый пример (вместе с примером principle) – скачайте исходники .
Как только персонаж нарисован (я использую Sketch), убедитесь, что вы сгруппировали все объекты вместе, чтобы можно было легко передвигать их в Principle (вы можете также сгруппировать их в Principle, это на ваш выбор). В этом примере я сгруппировал левую/правую руку, левую/правую ногу, тело, тень на земле и флаг. Мы переместим эти объекты в Principle, чтобы создать нашу анимацию.
Когда вы нарисовали и сгруппировали свой персонаж в Sketch, откройте Principle и выберите “Import”. Артборд персонажа проимпортируется в Sketch. После импорта у вас будет новый артборд внутри Principle.
Наш импортированный персонаж из Sketch Выделите артборд и продублируйте 4 раза. Соедините каждый артборд со следующим, а последний с первым, используя “Auto”. Это как раз и сгенерирует анимацию. Каждый слой на каждом артборде будет анимироваться со слоем с таким же названием в следующем артборде.
Присоедините каждый артборд к следующему Когда все артборды соединены, выделите руки, ноги, туловище и другие сгруппированные элементы, которые вы бы хотели изменить на артбордах 2 и 4. В примере ниже вы увидите, что 1-й и 3-й артборды одинаковы, а в 1-м и 4-м артборде положения объектов немного отличаются. Это создает бесшовную петлю анимации. Вы бы могли при желании сделать всего 2 артборда, это был бы еще более простой вариант, но мы не ищем легких путей:)
Анимация в конечном виде Вот и все, теперь давайте запишем анимацию.
В Principle есть встроенный инструмент для записи. Однако при предварительном просмотре, анимация зацикливается. К сожалению, в Principle не предусмотрено простого способа для запуска и остановки анимации в нужный момент времени. Поэтому довольно сложно записать идеально цикличную анимацию. Но я нашел решение. Я записываю один полный цикл анимации в GIF, затем импортирую gif-ку в Photoshop (или любой другой gif-редактор) и удаляю кадры так, что последний становится равен первому. Пересохраняем gif и у вас отличная “цикл”!
Это пример простой и быстрой анимации. Я уверен, что добавление большего количества кадров, а также аккуратное передвижение и выравнивание частей персонажа, может действительно оживить персонаж лучше. Principle предлагает массу опций для анимирования, и в этом посте я описал самые базовые возможности. Если вы создадите своих собственных персонажей, делитесь ими в комментариях – очень интересно посмотреть на результат.
Мир open source не стоит на месте и постоянно развивается. Про Blender 3D написано уже много статей, но помимо Blender, существует еще много полезных и бесплатных программ. Одна из них, это MakeHuman . На Хабре упоминания о ней имеются, но какой либо информации по ней нет. Предлагаю вам заглянуть под кат и посмотреть, что анимация персонажей в связке MakeHuman+Blender3D, это действительно просто. Осторожно, много картинок.
Запустим Blender и перейдем в настройки (Ctrl+Alt+U).
В дополнениях, у вас должен появиться пункт MakeHuman, при выборе которого вы увидите три дополнения, которые необходимо активировать проставив галочки.
Также необходимо активировать дополнение Import-Export Make Human:
Последнее, что необходимо сделать в настройках, это поставить галочку возле Auto Run Python Scripts (необходимо для работы скрипта импорта).
Сохраняем настройки нажав Save User Settings.
Сразу скажу, что русский язык включается в настройках.
MakeHuman, это генератор персонажей мужского и женского пола. По пиктограммам и надписям, думаю понятно, какой ползунок за какую часть человеческого тела отвечает.
Во вкладке «Моделирование» персонажа можно состарить, изменить цвет кожи, сделать ему длинные руки, ноги и т.д.
Во вкладке «Геометрии» персонажа можно одеть, добавить ему волосы, зубы, брови, веки, язык и другие необходимые органы (если требуется).
Для примера, я сделал вот такого симпатичного молодого человека.
Теперь, необходимо добавить ему кости для анимации.
Переходим во вкладку Поза-Анимировать и выбираем любые понравившееся кости. Я выбрал кости «Basic».
По середине окна, есть кнопка с тремя точками, которая позволяет выбрать папку для сохранения и имя файла. Сохраняем нашего персонажа и переходим в Blender.
Ищем сохраненный ранее файл и выбираем его.
В принципе, персонаж со всеми костями и манипуляторами готов. Можно подвигать частями тела и уже делать анимацию в ручную. Но это не наш метод и мы пойдем дальше.
Blender поддерживает формат анимации bvh. Данную анимацию, в основном, получают с помощью Motion Capture. В интернете много файлов с готовой анимацией. Мы возьмем анимацию отсюда . Скачиваем архив Zip file for BVH directories 01-09 (45 MB). и распаковываем.
Убеждаемся, что в Blender выбран наш персонаж и в так называемом «T» окне, выбираем вкладку Misc и нажимаем кнопку Load And Retarget.
В открывшемся окне выбора файла, выбираем любой понравившийся нам файл с анимацией bvh, который мы скачали ранее.
И теперь можно насладиться нашей анимацией, нажав кнопку Play.
2. После того как вы накопите у себя много файлов с анимациями bhv, становится трудно ориентироваться в них всех. Естественно, вам хочется иметь какой-то предпросмоторщик. И он есть. Называется bvhacker, является бесплатной и open source программой и живет . Так же, с помощью него можно исправлять и корректировать анимацию.
На этом на сегодня всё, надеюсь информация будет кому-то полезной.
В следующей статье расскажу о том, как создать анимацию, используя камеру и motion capture в blender.
В этом уроке мы хотим рассказать об основных этапах создания анимированных персонажей с помощью программы Flash на примере разработки персонажа игры «Учимся играя» и аватара для Web-сайта.
Согласно сценарию игры «Учимся играя», все действия в ней выполняет главный персонаж Колобок (рис. 1), который перемещается по полю (рис. 2) в поисках алмаза.
Смысл данной игры заключается в том, что играющий должен выбирать путь к цели (алмазу), называя по имени предметы, расположенные справа, слева, сверху и снизу от клеточки, где стоит Колобок, осуществляя, таким образом, перемещения персонажа вверх-вниз, вправо-влево. Например, для того, чтобы Колобок переместился на одну клеточку вниз, в меню на рис. 2 нужно выбрать слово «orange». Правильно выбирая названия в меню, играющий может подвести персонажа к заветному алмазу.
Тот же самый принцип лег в основу нескольких тематических игр. Так, на рис. 3 показан вариант игры, посвященный изучению дробей 1 .
1 Программа содержит 12 тем для изучения («Форма. Цвет. Число», «Времена года», «Часы», «Птицы», «Животные», «Устный счет», «Геометрические фигуры», «Римские цифры», «Дроби», «Палитра художника», «Английский язык», «Нотная грамота»).
В создании игры принимали участие Александр Прохоров, Михаил Морозов, Дмитрий Быстров, Елена Андрианова, Андрей Вязников. Более подробную информацию об игре можно получить по адресу: http://computergames.com.ru/54/7217.html .
Как следует из вышеописанного сценария, одной из задач при разработке игры было создание персонажа Колобок и анимации его перемещений.
В качестве примера показана анимация перемещений Колобка сверху вниз: анимация 1 .
На первом этапе создаются эскизы внешнего вида героя (рис. 4) , а также эскизы его перемещений и основных действий (рис. 5).
Параллельно делаются эскизы, в которых показывается, как персонаж будет выглядеть в разных темах игры. В частности, на рис. 6. показан эскиз к теме «Астрономия», а на рис. 7 эскиз к теме «Дроби».
В данном случае внешний вид Колобка определяется не только эстетическими, но и техническими соображениями как создать героя, чтобы его можно было легко анимировать.
На рис. 8 видно, что персонаж состоит из отдельных элементов.
2 Данная работа выполнялась Еленой Адриановой.
Это позволяет задать перемещение каждого элемента (руки, ноги, брови, глаза и т.п.) по отдельности. Таким образом, вместо того, чтобы многократно перерисовывать персонаж в разных положениях, достаточно задать автоматическую анимацию элементов, из которых он состоит.
Рассмотрим подробнее, из чего сделан наш герой. Папка «Части», показанная на рис. 9, содержит 12 элементов (в основном это мувиклипы), из которых состоит Колобок. Например, левая нога Symbol 4d (рис. 9), правая рука Symbol 7d (рис. 10) и т.п.
При этом отдельные элементы, такие как Symbol 12d (рис. 11), уже заключают в себе анимацию движения бровей и глаз и тоже состоят из отдельных элементов.
В частности, мувиклип Symbol 12d состоит из отдельных составляющих: брови (Symbol 34) (рис. 12), левый глаз (рис. 13). В свою очередь, мувиклип, изображающий левый глаз, базируется на мувиклипе «глаз» (рис. 14).
Таким образом, герой как бы собирается из отдельных деталей конструктора.
Для того чтобы показать, как перемещаются отдельные элементы, из которых состоит Колобок, во время ходьбы, обратимся к рисунку, где показан цикл ходьбы в режиме Оnion Skinning (калька). Из рис. 15 видно, что во время ходьбы у него перемещаются не только руки и ноги, но практически все элементы, из которых он состоит. При этом все элементы анимированы в режиме автоматической анимации движения (Motion Tweening) и только руки (вернее линии, которые соединяют кисти рук с телом) анимированы в режиме автоматической анимации формоизменения Shape Tweening (на рис. 8 эта анимация задана в слоях Layer 5 и Layer 7).
На рис. 16 показано, как создается анимация при движении персонажа влево . При этом задействованы многие общие элементы, используемые при анимации движения персонажа вниз.
Аналогично анимируются движения Колобка при движении вправо и вверх.
Для того чтобы разнообразить движения персонажа, добавляются различные периодически повторяющиеся жесты. Например, Колобок прикладывает во время ходьбы руку ко лбу или, глядя на зрителя, грозит пальцем (рис. 17).
Основные варианты движения Колобка можно наблюдать в данном ролике .
Некоторые жесты персонажа появляются в ответ на действия игрока. Например, когда играющий долго думает, колобок начинает зевать. Если ответ неверен, персонаж недовольно морщится и т.д.
Для того чтобы лучше разобраться в том, как анимирован данный персонаж, можно обратиться к исходному fla-файлу .
Часто оживить Web-сайт помогает персонаж, который взаимодействует с посетителем. Самый простой пример это тестирование на сайте, при котором, помимо устных комментариев (или вместо них), результат ответа оценивается путем отображения настроения аватара.
Рассмотрм пример создания подобного персонажа.
На начальном этапе выбирались те настроения героя, которые должны быть задействованы по сценарию, и художник делал соответствующие наброски (рис. 18).
Далее изображения доводились до чистового вида в программе Photoshop. При этом создавался шаблон с постоянными контурами лица, в который вписывались необходимые для передачи данного настроения черты. Цвет лица при этом также менялся (рис. 19).
После этого во флэш был сделан следующий интерактивный ролик . В этом ролике мы отразили лишь шесть кадров, то есть использовали только часть изображений, показанных на рис. 18. Но для того, чтобы понять принцип, этого вполне достаточно. Рассмотрим более подробно, как создать подобный ролик.
В первом кадре помещаем изображение лица «грустный» по команде File => Import=> Import to stage , а затем переводим его в векторный вид по команде Modify=> Bitmap=> Trace Bitmap .
Затем применительно к первому кадру записываем строчку кода stop(); рис. 20.
Данный код указывает, что программа не должна переходить к следующему кадру до тех пор, пока пользователь не выполнит некоторое управляющее действие.
Так, верхняя кнопка будет содержать код, показанный на рис. 21.
Второй и последующие кадры создаются при помощи команды Insert Keyframe. Данная команда создает на каждом вводимом кадре все элементы с предыдущего кадра, так что нам остается только заменить картинку с очередным выражением лица.
Для более подробного знакомства с данным роликом можно обратиться к исходному
