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

Еще один несложный способ программной анимации фона.
В отличие от первого урока, где в качестве фона выступает всего один символ, здесь все построено на дубликатах. Есть всего один символ - эталон (в моем случае это будет куст), но внутри него может быть сколько угодно кадров с разными состояниями. Это могут быть 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. Как же нам это использовать? Читать полностью »

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

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

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

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