Пусть этот курс будет называться «анимация в играх, для самых маленьких», сокращённо FGA. Пусть этот курс будет состоять из 8 уроков и одного бонуса (сейчас я сверюсь с картой этого курса… да, точно — 8 уроков и один бонус).

Если бы курс начинался с чего-то другого, то это был бы явно курс не по «анимации в играх, для самых маленьких». Поэтому именно с этой темы я начинаю этот курс. С темы создания персонажа, так часто измучаемой мной. «А я то думал… будет что-то интересное и новое…» — можете сказать вы, это я могу комментировать только следующим образом — работайте с нами, делайте, творите, создавайте.

Пару постов назад (пару месяцев назад:), здесь писали точно по такой же теме, но есть и сегодня отличия. Сегодня я взял, и полностью окунулся в перекладку, да ещё и motion использовал… ну, стоп об этом. Смотрим дальше.

В курсе нам будет помогать Кот Ли. Сначала я думал нарисовать ему костюм, а-ля костюм Брюса Ли, но остановился только на полосках на плечах, ведь всё таки это кот-ниндзя. Именно Ли мы будем мучать в процессе получения знаний. Вуа-ля!

Значит, Ли можно рисовать простыми фигурами. Сейчас распишем, как это. А анимация идёт тоже перекладкой. И об этом напишу. Вообще, много придётся читать, так что сядьте поудобней, теперь так часто будет. Перед нами составной конструктор Ли. Каждой части тела — свои клипы. Ног у нас два типа, именно о них — ниже.

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

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

Частота кадров у меня 24, и вообще, лучше сразу привыкнуть пользоваться только такой частотой кадров.

Почему перекладка так хороша? Ну, каждую часть тела мы конвертируем в объекты: мувиклипы или графику. Следовательно, вся анимация работает только с объектами, что значительно уменьшает размер исходника и получившегося файла. Да и моушины быстрее делаются, не нужно нажимать лишний раз F8)

Теперь о ходьбе.
Вот у нас есть ходьба. В целом, ходьбу можно рисовать только на интуитивном уровне. Особенно игровую. Если не верите, подойдите к зеркалу и посмотрите на свою походку. В ней есть что-то сложное? Ммм, не уверен, по-моему всё просто. Главное помнить: хвост, голова и даже тело(спасибо Lerika), должны двигаться. Реакция тела — это, вроде, так называется. Привожу пример скучной ходьбы при 8fps:

Так как Ли у нас — ниндзя кот, то спокойно он ходить точно не будет. Но вот носиться он будет как угарелый. Поэтому опуская неинтересности ходьбы, сразу переходим к бегу. На бег тратится 2 разных ноги, 8 кадров, по два кадра на одно положение ноги. Руки-лапы должны двигаться в противофазе к одноименной ноге-лапе, то есть, правая рука-лапа должна двигаться в том же направлении что и левая нога-лапа. 8fps:

Если тело ниндзи бежит, то оно должно слегка наклонятся. Амплитуда качания тела, головы и хвоста больше при беге, но кадров на неё расходуется в два раза меньше. На рисунке видно, что на качание головой требуется 10 кадров. Это при беге. При ходьбе кадров будет 20. Тоже самое получается в хвосте и теле.

При 24fps вот что получается (не забываем о тени под нашим героем):

А вот, что получается если сверху прикинуть motion tween, и заставить кота двигать телом в сторону счастья… Сразу теряются из вида некоторые ошибки и косяки движения.

Вопросы?

Будет очень хорошо, если читатели этого блога захотят поделиться с другими своими достижениями или примерами по этой теме. Я буду рад увидеть любые работы. Используйте файлохранилищи(типа narod.yandex.ru) для загрузки своих fla и swf.

Что касается меня, то я с радостью прокомментирую, восхищусь или найду что-то новое для себя в вашем творении. Мы все учимся. Так почему бы не перенимать опыт друг у друга и учиться вместе?

Вот так всё просто и без потерь энергии.

ps Кстати, запомните пароль: fgafirst

Чуть не забыл(спасибо Алексу) — исходник. В библиотеку можете не лазить, многое там не относится к этому топику.

email: wa.master@yandex.ru

при поддержке WayToRise Group

Анимация героя — зацикленная штука. Я использовал всего 8 кадров анимации при 20fps в результате(частота 20 кадров в секунду). Всё просто и легко. Примерно представляя как ходит человек(поднимает ноги и пр), можно, не особо выдумывая нарисовать 4 кадра анимации, и цикл будет в 80% готовности. Почему так? а потому что остальные 4 кадра будут будут лишь отличаться зеркальным положением рук и ног.

Анимация с 0.5 fps. На рисунке подробно показано, почему именно 4 кадра. Если присмотреться, то ноги на кадрах под цифрами 1, просто-напросто поменяны местами. На других кадрах — тоже самое.

Если ускорить нашего парня до 20fps, то получиться вот такой трюк:

Вообще, этот герой создан для одноименной игры, которая будет скоро релизиться товарищем memphys.sk, основателем Wheemplay Ltd.. Герой наш не простой, он умеет не только бегать, но и бить(кидать), прыгать и присаживаться:

В следующий раз, я расскажу о том, как анимировать героев 2.5d(псевдо 3d) в классическом стиле(немного отличным от игр faor и dofus), с примером кучи анимаций, которую я делаю для Bred.

Ну и напоследок… наш парень бежит куда? Правильно, к самой обаятельной и красивой участнице флеш-коммьюнити

email: wa.master@yandex.ru

при поддержке WayToRise Group

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

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

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

wamaster english version

© 2009-2010 Murlyka Animation Studio

email: wa.master@yandex.ru

при поддержке WayToRise Group

Первым делом, установив себе ПО (кстати, настоятельно советую не использовать различные руссификаторы – изучаем английский язык),  в нашем случае Flash, мы отключаем все панели Window ? Hide Panels или F4. Удобно теперь? Ничего глаз не режет? А по-моему, не режет.

Вторым делом идет небольшой, но очень крутой чит, о котором некоторые очень часто забывают. Чит этот, способен в тыщу раз сэкономить вам время при работе с флешем и любым другим ПО. Весь он заключается в автомитики моторики пальцев рук. И носит он гордое название HotKeys. Открываем опять вкладку Window. Смотрим какими горячими клавишами и сочетаниями клавиш нам могут быть доступны окна. Начать советую с Tools, резко забываем о том, что можно кликать мышкой по меню, и жмем Ctrl+F2. Вуа-ля. Нам доступны инструменты. По ним, кстати, тоже советую не щелкать, а лишь наводить мышью, для того, чтобы узнавать какие клавиши клавиатуры отвечают за вызов того или иного инструмента. На пример, Brush вызывается B, а Pencil Tool кнопкой Y, и тд.

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

Ну, а теперь небольшое отступление от темы. Я долго боролся с муками-терзаниями о том, стоит ли мне начинать курсы об анимации в играх, или все же нет. Теперь я точно знаю что НЕТ, не стоит! Почему? Да все просто. Просто при наличии таких гениальных и умелых специалистов как Xitri, Lerika, Ant.Karlov и Murejib в сфере раздачи хороших знанияй из области создания флеш-игр и всему, что с ними связано, моя лепта тут не нужна. Поэтому – долой терзания, данный блог будет вестись только о классической анимации во флеше (ну, или, хотя, и, не только во флеше).

Засим, до скорого.

PS а что стоит изменить в блоге? Убрать? Может быть, добавить?

email: wa.master@yandex.ru

при поддержке WayToRise Group

© 2009-2010 Murlyka Animation Studio

email: wa.master@yandex.ru

при поддержке WayToRise Group

Мы распрощались. А когда, через неделю он вернулся из своей командировки, он привез нам небольшой подарок, сувенир… я даже не знаю как его назвать. На самом верху вы можете наблюдать полосатое существо, красно-оранжевого цвета. О-дааа… Это кот, волшебный демон-кот. Дайхири.  Andre не рассказал нам, где он был, и тем более, где он раздобыл это существо. Он сказал лишь, что Дайхири будет хранить тепло, уют, спокойствие и гармонию в нашем доме. Да, и еще добавил, что всю дорогу, Дайхири то и делал, что спал. Как-то проснулся, перелез туда где посветлее, но так глаза и не открыл… Теперь Дайхири является полноправным членом нашей студии.

Вы хотите получить такого же Дайхири себе? Сохранить тепло и уют в Вашем доме, блоге, сайте? Скопируйте код:
<object width="190" height="130" data="http://murlyka.com/swf/dab.swf" type="application/x-shockwave-flash"><param name="quality" value="high" /><param name="src" value="http://murlyka.com/swf/dab.swf" /></object>
А вот и подошло время к уроку.

1) Дайхири. Этот урок посвящен скорее начинающим, чем опытным аниматорам. Немного полно я расскажу о том, как работать с mvc, и таймлайном.
2) Рисуем нашего персонажа с помощью Brush Tool (B), если навести на восклицательный значок, то можно увидеть мои настройки кисти.
3) Раскрашиваем нашего персонажа в нужный нам цвет.
4) Обводим персонажа с помощью Selection Tool(v) . Нажимаем на F8. Теперь делаем так, как показано на рисунке: выбираем movie clip, пишем имя нашего персонажа(лучше писать на английском). Кликаем на нем дважды (левая кнопка мыши). Далее, мы теперь находимся в только что созданном Movie Clip, и в нем есть персонаж. Теперь проводим туже ситуацию с обводкой и созданием мувиклипа с тем же персонажем, с той лишь разницей, что тепер не входим(не надо кликать два раза на вновь созданном movie clip) в созданный клип. Зачем это нужно? Ответ дальше.
5) Работа с таймлайном. Из рисунка понятно, что проводя первый раз операцию с обводкой и созданием объекта movie clip, я назвал его Дайхири статик. Над линией с кадрами(таймлайном) у вас все должно выглядеть сейчас также, только возможно с другим названием заместо моего «Дайхири статик». Слева на таймлайне, где у меня написано «Кот», у вас должно быть название(если вы его не меняли, кликните на нем два раза и поменяйте по своему усмотрению) «Layer 1″. Правее, за место моих 20 кадров и непонятных знаков на таймлайне, у Вас должен быть лишь один кадр. Что мы делаем. Мы щелкаем на таймлайне, на двадцатый кадр, и жмем <strong>F6</strong>, создавая тем самым Keyframe на двадцатом кадре. Теперь на уже появившемся наборе ключевых кадров(KeyFrame) кликаем на 10-й кадр, и жмем F6 опять. Должно получиться так же, как у меня, только без стрелок от 1 к 10, и от 10 к 20 кадру. Стрелки – tween(твины, программные изменения анимации). Суть твинов заключается в том, что мы создаем только начальное и конечное состояние объекта, а анимацией занимается сам компьютер. Кликаем на любом кадре между 1 и 10, жмем на правую кнопку мыши, выбираем Create Motion Tween. Тоже самое получается и с таймлайном с 10 по 20й. Получилось? Кстати, спешу заметить: на рисунке можно найти 20.0 fps – эта надпись означает количество кадров в секунду. Кликая на ней два раза вы можете задать свое количество кадров.
6) Кликаем на 10 кадр(справа и слева – стрелки). Теперь, работая инструментом Free Transform Tool (Q) меняем форму персонажа на 10 кадре. Я немного утрировал, но в целом, процесс должен быть ясен.) Вроде все готово. Первый и двадцатый кадры изменениям не поддались.
7) Нажимая на ctrl+enter, мы тестируем нашего персонажа.
Ву-аля! Всем спасибо спасибо за внимание, и удачных начинаний. Скачать исходник можно здесь.

Буду ждать замечаний, предложений и мнения. Wyveren.

email: wa.master@yandex.ru

при поддержке WayToRise Group

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

Переходя к самому миру.

Почва.

Рисуем блок, создаем мувиклип(обвели, F8) из нашего любимого блока земли. Прописываем ему название. Тут я не особо мудрил: почва относится к кладбищенской, значит и будет называться graveyard. Это простой блок, основа. Но как получить те блоки, что были использованы в примерах с зомби? Все просто, дублируем наш основной блок(как показанно на рисунке слева), прописываем, не менее понятное название новому блоку. Теперь рисуем на нем, что хотим (трава, камни, деревья), все, на что хватает наше воображение. Дублируем наш Graveyard, столько. сколько хотим. У нас появился конструктор. Но вот как его организовать для самой работы?

С почвой, с такой простой почвой, можно работать в одном слое, создаем новый слой, начинаем просто собирать конструктор из верхнего угла уход постепенно ниже(я работаю сверху-вправо):

Для следующего поста по организации мне понадобиться консультация какого-нибудь опытного флеш-программиста. Хотя вскоре, я покажу, насколько можно сильно разнообразить и анимировать почву нашего 3d мира.

email: wa.master@yandex.ru

при поддержке WayToRise Group

Как-то нам пришел на почту вопрос по поводу отличия видов анимации перекладки и анимации классической. Andre работает в обоих видах, но он уроки он выкладывал только в перекладке(создание мувиклипов, перекладка половины предыдущего кадра на новый кадр). Я же художник(большая часть рисунков на сайте – мои скетчи), но начинаю заниматься анимацией классической. Поэтому открываю небольшой урок,  по просьбе Andre, я сделал урок, для меня это новшество, но все же. И так. Создаем Зомби.

1) Создаем Зомби. Положив руку на сердце, скажу, что идеями вдохновлялся c deviantart

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

3) Соответственно сам аниматик, грязный и замедленный(первый опыт)

4) Ускоренный(как видим, некоторые дефекты сглаживаются)

5) Вместе с самим зомби. Раскрашено, но медлено(все таки есть дефекты).

6) Ускорили, посмотрели все пагубные эффекты. Сбил левую руку, она идет «волной».

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

Конец? Нет, вроде пока нет.

Кстати, недавно один из наших предыдущих исходников был замечен в свободном доступе, но под чужим авторством, даже без указания ссылки на нас. Мы долго с Андре думали, стоит ли дальше давать возможность получать наши исходники. И решили, что… Стоит. Ниже предоставлен небольшой бонус – качаем урок и исходник одним архивом. Говорить и показывать кто использовал наши материалы в коммерческих целях не буду, но этого человека ждет награда и первое, почетное место в нашем блэклисте. Да здравствует справедливость. Да снизойдет молния в этого умницу, с небес.

(если будет интересно пообщаться или поддержать Andre (не думаю что он скоро появится здесь), то напишите ему в контакте, я его видел, досталось ему не хило, хотя, не спорю – даже ему будет приятно получить поддержку)

Wyveren

email: wa.master@yandex.ru

при поддержке WayToRise Group

1) Начнем, с малого. Придумываем: какой же мир мы хотим делать, я взял за основу простую лужайку, с немногочисленными кустами и камнями.

2) Рисуем основу блоков. Подробней у Хитри

3) Раскрашиваем основу в тот цвет, который нам нужен, создаем из блока movieclip(я его назвал block)

4) Дублируем Block, переименовываем в «block grass», рисуем в слое над ним кусты.

5) Опять дулируем Block, теперь мувик называем «block grass stone», рисуем камни. Сделаем еще несколько таких блоков, с разными рисунками.

6) Конструктор! Начинаем собирать мазайку)

7) Еще больше деталей! Ура, у нас есть вот такая вот скучная, но вполне интересная и пригодная для игрового мира земля)

Вот в принципе и все.

email: wa.master@yandex.ru

при поддержке WayToRise Group

Нередко я задумывался о том, как создать простого героя. Создал.

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

2) Рисуем зарисовки. Намечаем фон.

3) Скетч нашего героя, пока предварительный.

4) Цветовая версия.

5) Надо признать, что на этапе №3 я уже рисовал каждую часть тела в своем слое, помещая их в movieclip по отдельности.

6) Аниматик. Нарисовав основного героя, рисуем к нему «скелет», который и будет проделывать всю анимацию, а потом уже обрисовываться дальше. Помеченный «х3″ означает увеличенную в три раза длительность кадра. Зачем? – Далее.

7) Анимируем нашего скелетона.

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

9) Настоящий вариант, без замедления.

10) Ну вот, мы и познакомились с принципами создания простой анимации для безымянной игры.

ps Я обдуманно выложил только принципы, сама технология: заполнение цветом, обрисовка, корректировка, тайминг и скетчинг(все в обратном порядке надо было перечислить), будет в видео, при создании третьего героя для безымянной игры. Это только первый. Я еще не решил кто будет вторым.)

Спасибо за внимание.
Скачать creating of Acid Knight

email: wa.master@yandex.ru

при поддержке WayToRise Group