Хитри - блог о хитростях разработки флэш-игр, игровых баннеров и флэш-анимации

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

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

В нашем случае удобно хранить скорость в разложенном по осям виде. То есть не величина и угол поворота (как в управлении автомобилем), а в виде speedX и speedY. Далее каждую составляющую мы будем прибавлять к соответствующей координате (отрицательные значения смещают в другую сторону).

При равномерном движении можно просто прибавлять к координате число. Но введение понятия “Скорость” позволяет организовать замедление и ускорение.

Осталось разобраться с гравитацией. Это сила, которая с постоянной величиной действует вертикально вниз на все объекты (в программировании обычно на все незакрепленные объекты). То есть постоянно (по событию enterFrame) прибавляет какое-то значение к скорости (переменной speedY). Почему именно к скорости? Потому что к координатам применяется уже суммарный вектор всех сил (у нас пока только скорость и гравитация). Поэтому вначале применяем гравитацию к скорости, а потом скорость к координатам. Надеюсь, не намудрил.

Теперь по порядку: Читать полностью »

Прошла суббота, а вместе с ней и UAFPUG 3, посвященный флэш-анимации.
Я был приятно удивлен теплым коллективом и не ожидал, что это будет так интересно.
Знакомство и общение с новыми людьми, красивый город и увлекательное after party сделали свое дело. Теперь буду посещать такие мероприятия чаще.

Отдельное спасибо скажу организаторам встречи - Лерике и всем остальным, кого я не знаю: все было просто супер! Просторный, прохладный зал с мягкими диванами, розыгрыш ценных и почетных призов, экскурсия по городу, fireshow - молодцы. Порадовали гости приехавшие специально для этого из России.

Я выступал вторым, между Колесником Александром и Акимовым Олегом. Когда подошла моя очередь, я разволновался и первое время мялся как школьник и сказал далеко не все что хотел. Потом как-то попустило и речь пошла более связная. Думаю, это придет с опытом.

Выкладываю свою презентацию, ниже можно и исходник скачать. Все хитрости подаются как готовое решение - эффект копируется в флеш-мультфильм путем copy/paste. Код не везде “чистый”, потому как некоторые вещи брал из работ которым более 2-х лет. К тому же возможен “левый код”, который нужен был для символов, которых здесь нет. Я об этом не сильно заботился, потому как решение выложить исходник было принято уже на самой презентации. Поэтому примите все как есть.

Сегодня Adobe Flash - это мощная программа, которая решает широкий спектр задач и создала несколько профессий – флэш-программисты, флэш-аниматоры и иллюстраторы. Веб-дизайнеры не отстают и тоже стремятся взять флэш на вооружение.
В связи с этим, люди, которые занимаются преимущественно анимацией, Actionscript-ом практически не пользуются, максимум – команды play(), stop(), gotoAndPlay(), gotoAndStop(). Программисты же, впадая в фанатизм, пытаются все сделать исключительно скриптами, а к твиннингу относятся с пренебрежением. Не все, конечно, но многие. Как в программировании, так и в простой анимации, есть свои преимущества и недостатки. И эффективней работать будет тот, кто использует преимущества обоих направлений.
Так как сегодняшняя тема посвящена анимации, то и доклад ориентирован в основном на флэш-аниматоров.

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

Читать полностью »

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

Но не только под водой можно таким образом показывать воздух. Иногда возникает необходимость показать воздух на суше. Непростая задача - он ведь прозрачный. Например есть игровой баннер, где летит воздушный шарик, а мы включая/выключая вентиляторы должны проводить его до конца экрана. Чем выше от вентилятора, тем меньше воздействие ветра. Чтобы добавить играбельности и лучше объяснить пользователю что и как, можно воспользоваться этим способом и наглядно показать пределы ветра. Для этого будем считать что воздух замусорен пылинками, ворсинками и т.д. В случае с нашими вентиляторами, они силой ветра поднимают осевшую на них пыль. Я просто придумал такие условия, но они помогают мне лучше передать картину происходящего.

Чтобы сделать такие пузырьки нужно: Читать полностью »

На сайте www.stickpage.com живут слепленные из палок человечки. По большому счету они все злые и грозные. Поэтому постоянно устраивают между собой разборки, - с кровью и прочими летальными исходами.

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

Вот такой пример.
Флэшка не простая, а управляемая: клавиши 1,2,3,4 на цифровой клавиатуре справа переключают виды камеры. Можно зумировать скроллером мыши. Пробел - пауза. Клавиши вверх/вниз - ускорить/замедлить просмотр (жми много раз). Право/лево - кадр вперед/назад. Q - переключает режим качества. Заявлена еще клавиша S, но я не понял что она делает. Читать полностью »

Раньше я понятия не имел, как сделать во флеше дрожащего персонажа. Мне это казалось сложным делом - это ж все тело анимировать нужно. Не знаю как с этим справляются другие, а я теперь знаю простой, но очень эффективный способ - дрожь в 2 кадра!

После такой отработки дрожит бизнесмен, не желающий рассказывать где деньги лежат:

Всего лишь нужно для каждой части тела сделать 2 состояния (2 кадра) которые немного (главное не переборщить) отличаются друг от друга. Читать полностью »

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

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



Или вот такой наборчик:

Рассказ не просто о спецэффектах, а о том как сделать их именно во флэше.
Обратите внимание, как символ с кусочком анимации используется многократно. И набор этих клипов дает качественно новый результат (деформируя клипы по вертикали и горизонтали, можно изменить результат до неузнаваемости).
Ссылки на уроки: часть1, часть2, часть3.

А вообще советую скачать их к себе на комп и детально исследовать в любимом проигрывателе.

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

Сделать огонь проще, чем это может показаться. Ничего военного в этом нет. Хитрость в том, как его потом можно использовать. Посмотрите на примеры ниже: из пламени полученного в первом кадре остальные эффекты получаются за несколько минут (рисование я не считаю).

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

Собственно, как это сделать: Читать полностью »

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

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

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

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

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

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

Теперь распишу каждый пример подробно. Читать полностью »

Урок от ANIMEFISH.COM
Оказывается анимация не такая уж и страшная штука, если понимать что к чему.
Содержание привожу “как есть”:

Всем привет!

Хочу поделиться хитростями использования класической анимации во flash.

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

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

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

Итак, начнем с основ. Сначала нам нужно создать “ключевые кадры”, они содержат главные фазы анимации - между которыми мы позже прорисуем промежуточные фазы.