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

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

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

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

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

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

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



Сценарии и gameplay как для flash-игр, так и для баннеров могут быть самые разнообразные. Я выбрал для примера классический: есть объекты, которых нужно избегать и которые наоборот необходимо собирать. Если нет такой “борьбы противоположностей”, то обычно и играть не интересно. Такой вот метод “кнута и пряника”.

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

Пример и описание: Читать полностью »

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

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

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

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

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

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

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

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

Самый простой способ - сделать все твиннингом. Но при этом теряется контроль над скоростью анимации (доступны только 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. Как же нам это использовать? Читать полностью »

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

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

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

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