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

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

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

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

Надеюсь игра вам понравится, мы старались сделать её весёлой.

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

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

Таким же образом можно передавать и фоновую скорость, например, мелькание воздуха за иллюминаторами самолёта. Нужно ускорить персонажа? - Заставьте фон двигаться быстрее. Читать полностью »

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

Использование флэш-игр в рекламе

Основной смысл - как сделать из flash-игры рекламный продукт.

На днях был сделан игровой баннер для Доброблога. Идею долго выдумывать не пришлось - название блога говорит само за себя.

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

Персонажей для баннера придумал и оживил (а точнее вывел из своих миров) - Никита Котов

Совсем недавно мы общались с dedом pb|xto на тему: “Какими должны быть игры”. Что программисты делают виртуозные и играбельные движки, где геймплей строится на ловкости и быстром реагировании, а аниматоры “выезжают” на прикольных персонажах, качественной анимации и спецэффектах. И хотя я сторонник того, чтобы аниматоры начали программировать, а программисты рисовать, все же у каждого есть свой конек, с помощью которого можно делать самодостаточные игры.

И вот, удачный пример аниматорской игрушки - Mr. Coo: El Laberinto Esférico

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

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

Одна из лучших игр в этом жанре.

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

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

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

А вообще, сама идея в ролике замечательная. Мое внимание привлекли однозначно.

Прошла суббота, а вместе с ней и 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, но я не понял что она делает. Читать полностью »