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

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

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

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

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

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

Многое из картинки должно быть понятным. Имеем символ мяча и вся эта анимация происходит внутри него. В последнем кадре скрипт отрабатывает плавность анимации (чтобы не было 2-х одинаковых положений подряд). Скрипт вращения мяча пишется не на клипе который смещается твиннингом, а на другом клипе внутри него. Тоесть всего имеем: клип мяч -> мяч1(нарисован на картинке) -> мяч2 - вот на нем и пишем. Клипы, которые участвуют в твиннинге, программно смещать нельзя, иначе пропадает сам твиннинг.

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

onClipEvent (load) {
	backSpeed = 4;//то же что и speed у фона
	maxSpeed = 5;//будем ограничивать максимальную скорость
	speedX = 0;
	onEnterFrame = function() {
		var dx = _parent._xmouse - _x;
		speedX += dx * .1;//сила притяжения к курсору
		speedX *= .7;//затухание
		speedX = (speedX > maxSpeed)? maxSpeed : (speedX < -maxSpeed)? -maxSpeed : speedX;
		if(_currentframe < 23) {
			_x += speedX;//если в воздухе
		} else {
			_x -= backSpeed;//если прижаты к земле
		}
	}
}

Здесь реализовано движение “пружинкой” (переменная _x изменяется не напрямую, а через переменную скорости - speedX, к которой предварительно прикладываются сила натяжения и затухание). Оно достаточно гладкое, управляемое подходит для этого случая. Если мяч касается земли (кадры 23-31), то действует сила трения и он в этот момент “привязан” к фону. По правильному, переменная backSpeed у мяча и speed у фона - одно и тоже. Здесь я их разнес чтобы сделать код независимым.

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

Интересно на 23%