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

Неплохой туториал предлагает Emanuel Feronato по созданию вот такой-вот игры на поиск совпадений:

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

Написано на AS3 - как раз можно поучиться на реальном тематическом примере. Там же можно и исходники скачать.

Кстати, советую game-девелоперам следить за этим блогом - часто полезный материал появляется.

Например еще один урок аля проведи шарик через лабиринт не коснувшись стен. Я обалдел от способа которым определяется пересечение окружности с произвольной формой - определенно хитро!
Для желающих узнать азы физики и как грамотно использовать hitTest (01, 02, 03, 04, 05, 05_1, 05_2, 05_3).

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

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

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

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

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

Реализовано, как я понял, не на флэше, но не вижу причин, почему бы это не исправить. Используется Box2D physics engine.

Вначале даже не знал как к этому относиться. Сейчас меня это улыбает.

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

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

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

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

Для удобства, я использую условные границы “Лево” и “Право”. Эту роль играют 2 символа left и right, от которых мне нужны только координаты. Сами же они находятся за пределами флэшки. Таким образом легко можно сузить/расширить ширину фона (это полезно, когда создается группа баннеров с разными размерами).

Порядок действий: Читать полностью »

Нашел в сети сайт с интересными и достаточно оригинальными флэш-играми. Игры делают уже давно, а я о нем узнал только сейчас. Зацепился я за него через игру GROW nano vol.3. Простота идей поражает, а сюжет все равно затягивает - выбирая предметы в правильном порядке, нужно вылечить главного героя:

Предыдущие волумы: vol0, vol1, vol2.
Еще одна интересная игра от них же. Я набрал 27,3 фута, дальше экран не позволяет :).

Есть в этих играх, как и в Yeti Sports, что-то такое, что ни к чему не обязывает. Какая-то возможность решить все вопросы одним кликом. И что самое интересное, не нужно уметь круто программировать или хорошо рисовать, достаточно включить фантазию и придумать что-то необычное.

P.S. Идем по нарастающей, больше элементов - больше вариантов - GROW ISLAND

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

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

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

Самый простой способ - сделать все твиннингом. Но при этом теряется контроль над скоростью анимации (доступны только stop() и play() ). Если персонаж обладает ускорением, нестыковки с фоном будут обязательно.

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

1. Рисуем фон.
2. Растягиваем его по размерам будущей флэшки, даже чуть больше. Если есть выступающие элементы, их нужно отрезать с одной стороны и перенести в другую (я так поступил с тенью от забора).
3. Оборачиваем все это в клип, дублируем и переносим дубликат точно в конец оригинала. Это важно, иначе фон при анимации может дергаться. Кстати сейчас очень удобно доработать “бесшовность” - линии между клипами должны соединяться без изломов. Выделяем оба клипа и оборачиваем их в еще один клип.
4. На этом символе пишем код:

   onClipEvent (load) {
   	speed = 4;//скорость
   	x0 = _x;//Запоминаем начальное положение
   	x9 = x0 - _width / 2;//максимально-допустимое левое положение
   	onEnterFrame = function() {
   		_x -= speed;
   		var dx = x9 - _x; //Вычисляем перебор
   		if (dx > 0) {
   			_x = x0 - dx;//Компенсируем его и возвращаем в начальное положение
   		}
   	}
   }

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

5. Получаем зацикленную анимацию.
6. Вот так, если добавить окружение и действующее лицо.
7. Или вот так.
8. Или так.

Анимация сейчас привязана к переменной speed, которую можно менять по обстоятельствам.

Кому интересно, дальше о том, как анимируется мяч: Читать полностью »

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

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

Основой большинства спецэффектов во флэше, является функция duplicateMovieClip. До появления програмного рисования и объекта BitmapData, это был чуть ли не единственный способ программирования flash-эффектов. Эта функция просто создает дубликат уже существующего клипа. В нашем случае, мы создаем набор дубликатов и дальше управляем ими по ситуации.

Сделав более 500 игровых баннеров, я заметил, что некоторые эффекты часто переходят из одной работы в другую и практически без изменений. Самый популярный среди них - эффект взрыва / брызг / осколков.

Рзберемся, как это делается (я еще не разобрался с аудиторией сайта, поэтому буду разжевывать) + пример ниже: Читать полностью »

Многие разработчики и аниматоры сильно недооценивают встроенные возможности флэша, а порой просто не знают о них. Одна из таких - инструмент Free Transform Tool. А точнее его подвид Envelope. Наверное все знают его можно применять для изменения формы одного или нескольких объектов. Но мало кто знает, что это можно делать в режиме Edit Multiple Frames. Как же нам это использовать? Читать полностью »