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

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

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

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

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

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

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

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

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

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

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

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

Мне известно 2 подхода к flash-программированию: структурированный и хаотичный. При первом все символы и объекты организуются в строгую иерархию, управление сосредоточено в одном месте, и этот “мозг” каждый кадр перебирает массив подчиненных ему объектов и вызывает для каждого функцию действия. Все строится по принципам ООП. Таким образом работают, например, движки 2D физики и 3D. Хороший способ, уменьшает вероятность ошибки, но требует основательного подхода и много времени.

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

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

Так вот, возвращаясь к вопросу о глобальной паузе: для структурного подхода все просто: заводится логическая переменная (пауза есть/нет), опираясь на которую, главный клип либо вызывает для всех функцию действия, либо нет. Это что касается кода, остановить твиннинг гораздо сложнее. Например, летит муха, у нее дрожит туловище, она машет крылышками и к тому же моргает. Нужно 3 раза вызвать функцию stop(). А если на сцене символов много, и все они разные? Как минимум для каждого объекта нужно описывать функцию его полной остановки (с событиями кстати также - наследование не поможет если символы разные).Для стихийного подхода к программированию это почти расстрел. В обоих случаях нужно писать много строк Actionscripta. Некоторое время я так и мучался, попутно выдумывая, как это можно упростить. Вот то, что есть у меня на сегодня:

Что может приводить объект в движение? Твиннинг или ActionScript (а точнение событие EnterFrame). SetInterval я во внимание не беру.
Значит должна быть функция которая останавливает проигрывание клипа и отключает для него onEnterFrame. Читать полностью »

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

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

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

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

Привет всем!

Я сейчас попробую рассказать про оптимизацию анимации путем преобразования ее в PNG sequence (набор PNG картинок).

Зачем это надо? Все просто :). Когда много символов с одинаковым содержанием проигрываются одновременно (а в динамичных играх такое часто бывает), мы наблюдаем серьезную загрузку процессора.
На примере данной флэшки на Athlon 1.9 загрузка процессора была 100%, на Intel Core2Duo 3.0 - 24%. После превращения всей повторяющейся анимации в последовательность картинок - 60% и 12% соответственно (24 framerate).

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

Вот вам простой и проверенный способ, как быстро сделать из векторной анимации, анимацию из последовательности картинок: Читать полностью »

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

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

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

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

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



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

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

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

Еще один урок от ANIMEFISH.COM

Привет Всем!

Итак, продолжаем хитрить

Этот пост посвящен одной из важных хитростей в анимации - 2,5D.
Для тех кто не в “танке” 2,5D - это серединка между 2D и 3D
Интересно, а что значит серединка? Давайте рассмотрим.

Очень часто в анимации требуется использовать движение обьекта не в 2-х плоскостях, как это происходит в 2D, а в 3-х - как это должно происходить в 3D. Но, но! Мы же знаем, что наш всеми любимый Adobe Flash не умеет использовать элементы 3D графики…. А что же делать? Ведь так хочется (или требуется) иногда привнести такой элемент.

На помощь могут прийти 3 способа: 1 - мы прорисовываем покадрово все фазы, как это делают мультипликаторы… сложноватенько и долговатенько… 2 - мы рисуем то, что нам нужно в любом трехмерном пакете, а потом конвертим в последовательности кадров для флеш… Слишком большой объем файла получиться, а у нас каждый байт иногда на вес золота. Поэтому, поэтому выбираем метод 3 - ни 2D ни 3D - 2,5D.
Вся анимация - это обман. Да, это обман зрения. Задача аниматора - обмануть зрителя так, что бы тот не смог этого понять. Аниматоры - они как фокусники, - те же фокусы с обманом зрения. Иногда даже не замечаешь, как тебя обманул аниматор (хотя проффи часто видят то, чего не видит простой глаз). Итак, наша задача - обмануть зрителя так, что бы он думал, что видит объемный объект, на самом деле мы “дурим” - хитрим.

Итак - колесо, но не простое, а от телеги. Возможно кто-то из вас подобные вещи и делал, тут нет ничего сложного.

Рисуем колесо телеги (1), потом создаем movieClip, внутри которого делаем вращение нашему колесу (2) и сжимаем этот movieClip по горизонтали. О! У нас уже что-то получается похожее на колесо в объеме. Теперь сделаем копию этого клипа, поместим ее на слой и совершим над ней (копией) магический тинт. Теперь сдвигаем так, что бы…. ну в общем, сдвигаем на глазок так чтобы получилось как на рис (3). Следует учесть: если спицы колес делать тонкими - то и клипы нужно близко сдвигать, чтобы не было зазоров между затинтованным и оригинальным клипами (4). Так - теперь делаем сколько нужно колес и дорисовываем “телегу” и - поехали (5).

Дальше - дальше сложнее - нам нужна монетка? - без вопросов! Читать полностью »

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

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

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

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

Всем привет!

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

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

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

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

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