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

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

Написано по-английски, но это не важно. Такие уроки можно и не читать - из демок все понятно. Например, видео приведенное ниже нужно просто смотреть много раз, потом много раз смотреть его покадрово. Потом можно и комментарии почитать - понятней будет:



Или вот такой наборчик:

Рассказ не просто о спецэффектах, а о том как сделать их именно во флэше.
Обратите внимание, как символ с кусочком анимации используется многократно. И набор этих клипов дает качественно новый результат (деформируя клипы по вертикали и горизонтали, можно изменить результат до неузнаваемости).
Ссылки на уроки: часть1, часть2, часть3.

А вообще советую скачать их к себе на комп и детально исследовать в любимом проигрывателе.

Еще один урок от ANIMEFISH.COM

Привет Всем!

Итак, продолжаем хитрить

Этот пост посвящен одной из важных хитростей в анимации - 2,5D.
Для тех кто не в “танке” 2,5D - это серединка между 2D и 3D
Интересно, а что значит серединка? Давайте рассмотрим.

Очень часто в анимации требуется использовать движение обьекта не в 2-х плоскостях, как это происходит в 2D, а в 3-х - как это должно происходить в 3D. Но, но! Мы же знаем, что наш всеми любимый Adobe Flash не умеет использовать элементы 3D графики…. А что же делать? Ведь так хочется (или требуется) иногда привнести такой элемент.

На помощь могут прийти 3 способа: 1 - мы прорисовываем покадрово все фазы, как это делают мультипликаторы… сложноватенько и долговатенько… 2 - мы рисуем то, что нам нужно в любом трехмерном пакете, а потом конвертим в последовательности кадров для флеш… Слишком большой объем файла получиться, а у нас каждый байт иногда на вес золота. Поэтому, поэтому выбираем метод 3 - ни 2D ни 3D - 2,5D.
Вся анимация - это обман. Да, это обман зрения. Задача аниматора - обмануть зрителя так, что бы тот не смог этого понять. Аниматоры - они как фокусники, - те же фокусы с обманом зрения. Иногда даже не замечаешь, как тебя обманул аниматор (хотя проффи часто видят то, чего не видит простой глаз). Итак, наша задача - обмануть зрителя так, что бы он думал, что видит объемный объект, на самом деле мы “дурим” - хитрим.

Итак - колесо, но не простое, а от телеги. Возможно кто-то из вас подобные вещи и делал, тут нет ничего сложного.

Рисуем колесо телеги (1), потом создаем movieClip, внутри которого делаем вращение нашему колесу (2) и сжимаем этот movieClip по горизонтали. О! У нас уже что-то получается похожее на колесо в объеме. Теперь сделаем копию этого клипа, поместим ее на слой и совершим над ней (копией) магический тинт. Теперь сдвигаем так, что бы…. ну в общем, сдвигаем на глазок так чтобы получилось как на рис (3). Следует учесть: если спицы колес делать тонкими - то и клипы нужно близко сдвигать, чтобы не было зазоров между затинтованным и оригинальным клипами (4). Так - теперь делаем сколько нужно колес и дорисовываем “телегу” и - поехали (5).

Дальше - дальше сложнее - нам нужна монетка? - без вопросов! Читать полностью »

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

Сделать огонь проще, чем это может показаться. Ничего военного в этом нет. Хитрость в том, как его потом можно использовать. Посмотрите на примеры ниже: из пламени полученного в первом кадре остальные эффекты получаются за несколько минут (рисование я не считаю).

Не буду судить об оправданности применения такого подхода в играх, но в баннерах это проходит на ура (конечно, если не злоупотреблять количеством). Да и для заставок тоже пойдет.

Собственно, как это сделать: Читать полностью »

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

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

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

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

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

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

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



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

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

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

Урок от ANIMEFISH.COM
Оказывается анимация не такая уж и страшная штука, если понимать что к чему.
Содержание привожу “как есть”:

Всем привет!

Хочу поделиться хитростями использования класической анимации во flash.

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

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

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

Итак, начнем с основ. Сначала нам нужно создать “ключевые кадры”, они содержат главные фазы анимации - между которыми мы позже прорисуем промежуточные фазы.

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

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

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

Условно выделю 2 способа - они немного похожи, но дают разные ощущения.

Смысл первого - в рисовании смазанного промежуточного положения, как будто предмет быстро движется, но его проекция не успевает исчезать с воздуха. Анимация при этом сглаживается, не вызывая раздражения. Проще будет, если нарисовать начальное и конечное положение, между ними вставить пустой кадр и включить режим Onion Skin Outlines . Если одного кадра недостаточно, можно нарисовать 2 или даже 3 (совсем роскошь). В примере ниже: в одну сторону - 1 кадр, обратно - 2:

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

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