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

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

Тема выбрана как наиболее ходовая для игровых баннеров - шутер. С идеей тоже долго не возился. С некоторых пор я “завязал” и не пью спиртное (и вообще пытаюсь вести здоровый образ жизни), так что для успешного прохождения игры, нужно расстреливать бутылки со спиртным, но оставлять невредимыми упаковки с соком. Набравший 100 очков переходит на “сайт с трезвым подходом к разработке флэш-игр“. Пока их не набьете, у вас ничего не выйдет. Получился он вот такой (300х250):

  BannersXitri (48.8 KB, 455 hits)

Спасибо Мише Квакину, который уже это сделал.

P.S. Позже опишу как его сделать. Задавайте пока вопросы

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

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

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

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

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

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

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

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

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

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

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

Как-то попросили в комментариях рассказать о том как рисовать во флеше. Я по образованию не художник, поэтому как это делается “по науке” объяснить не смогу. Зато подскажу легкий и быстрый способ как рисовать фоновые изображения. Хотя таким способом нормально рисовать получается только природу - это тоже часто нужно.

Почти все сделаем при помощи одного flash-инструмента - Oval Tool (которым кружки рисуют). Все объекты будут состоять из набора кружков.

Думаю что по флэшке и так все понятно, но тем не менее распишу по кадрам. Читать полностью »

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

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

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

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

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

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

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

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

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

Раньше я понятия не имел, как сделать во флеше дрожащего персонажа. Мне это казалось сложным делом - это ж все тело анимировать нужно. Не знаю как с этим справляются другие, а я теперь знаю простой, но очень эффективный способ - дрожь в 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).

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

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

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

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

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