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

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

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

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

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

Это продолжение дорожных приключений. Тогда попросили сделать вариант с прицепом. Я понимаю желание сделать “побырику” flash-игру типа “Парковка” имея под рукой готовый код, поэтому дальше описан пример как это сделать. И не один прицеп, а целый поезд.

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

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

От предыдущего примера код почти не отличается. Добавилось несколько новых клипов и одна функция в коде. Читать полностью »

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

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

  BannersXitri (48.8 KB, 456 hits)

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

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

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

Это уже третья версия игры:

В предыдущие версии тоже стоит поиграть, наверное так даже будет интереснее - Shift 1 и Shift 2.

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

P.S. Спасибо Ixifeus за ссылку

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Интересный ход применили ребята из Nitrome в игре Knuckle Heads. Даже не знаю как доступно описать управление в игре - это надо попробовать.

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

Отдельно отмечу оформление игры. Качественная пиксельная графика, электронная музыка и интересные идеи - визитная карточка Nitrome.

Пора поработать головой. Точнее двумя.

Не совсем о флэш-играх, но хитрость.

Недавно сделал карту для сайта kartablogov.ru. Она отображает плотность распределения блогов по регионам России. По замыслу автора, регионы на карте должны менять цвет в зависимости от количества блогов. Отлично, цвет в дизайне - сильная штука. Здесь он меняется от зеленого до красного и понять где зарегистрировано больше блогов можно даже без наведения мышки.

Собственно, я столкнулся с проблемой, как расчитать программно промежуточный цвет. То есть, 2 крайних значения у меня есть, а все оттенки между ними должны расчитываться.
Закраска делается функцией Color.setRGB() и ей в качестве параметра нужен цвет в виде 0xFFFFFF. Это хорошо, все привыкли к такому формату, но если записать его в переменную, в таком виде он уже не хранится и при трэйсе выдаст 16777215. Чтобы корректно расчитывать оттенки, цвет нужно разложить на составляющие Red, Green и Blue. И потом по пропорции вычислять для каждой составляющей…

Короче, много работы. Я не спорю, это давно кем-то уже написано и можно найти в сети готовый скрипт. Просто есть еще один интересный способ. Его я и предлагаю:

1. Создаем символ-контейнер (назовем colorSampler).
2. В нем создаем клип (назовем s) и анимируем его с эффектом Tint из одного цвета в другой (100 кадров). Фишка в том, что заданный “руками” эффект Tint теперь можно считать программно.
3. Для этого клипа создается объект Color. И теперь, чтобы получить промежуточный цвет, отправляем символ colorSampler в нужный кадр и считываем его с символа s методом Color.getRGB().

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



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

Пока писал пост, подумал что еще проще нарисовать градиент (100 пикселов шириной), сделать из него объект BitmapData и считывать цвет методом getPixel(). Будет наглядней.