Robokill — пример как нужно делать flash-игры

Хорошие люди подкинули ссылку и она забрала меня на пол-дня.

Игра называется Robokill. Из названия понятно, что уничтожать прийдется роботов. Так и есть. В игре более 10 видов противников, много оружия и дополнительные препятствия. Игра насыщена отличной графикой и спецэффектами.

Robokill

Особенно меня порадовали дополнительные фичи (не все уделяют им должного внимания), как карта уровня и инвентарь.

В игре 3 эпизода, но бесплатно можно пройти только 1 (за остальные придется выложить $9.95). Если к этому моменту игра не надоела, то она того стоит.

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

Приятного убивания времени.

Картинки обгоняют вектор!

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

Привет всем!

Я сейчас попробую рассказать про оптимизацию анимации путем преобразования ее в PNG sequence (набор PNG картинок).

Зачем это надо? Все просто :). Когда много символов с одинаковым содержанием проигрываются одновременно (а в динамичных играх такое часто бывает), мы наблюдаем серьезную загрузку процессора.
На примере данной флэшки на Athlon 1.9 загрузка процессора была 100%, на Intel Core2Duo 3.0 — 24%. После превращения всей повторяющейся анимации в последовательность картинок — 60% и 12% соответственно (24 framerate).

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/05/vector_vs_rastr.swf" height="400" width="550" /]

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

Вот вам простой и проверенный способ, как быстро сделать из векторной анимации, анимацию из последовательности картинок: Читать далее Картинки обгоняют вектор!

От этого бросает в дрожь

Раньше я понятия не имел, как сделать во флеше дрожащего персонажа. Мне это казалось сложным делом — это ж все тело анимировать нужно. Не знаю как с этим справляются другие, а я теперь знаю простой, но очень эффективный способ — дрожь в 2 кадра!

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

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/05/man_shake.swf" height="400" width="550" /]

Всего лишь нужно для каждой части тела сделать 2 состояния (2 кадра) которые немного (главное не переборщить) отличаются друг от друга. Читать далее От этого бросает в дрожь

Flash Effects Animation Tutorials

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

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



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

[kml_flashembed movie="http://www.youtube.com/v/BeW8892C9RM" height="355" width="425" /]

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

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

Полезности для флэш-разработчика

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

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

Самое полезное в моем арсенале — JSFL сценарии, которые разработал Евгений John Потапенко. Хотя в повседневной работе я пользуюсь всего несколькими функциями, они удовлетворяют почти всем потребностям. Скачать расширения можно с его сайта. Автору огромнейшее спасибо — благодаря тебе сэкономил кучу времени.

Распишу немного, что же это такое. Читать далее Полезности для флэш-разработчика

Золотая середина между flash и 3d Max

Еще один урок от Акимова Олега

Привет Всем!

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

Этот пост посвящен одной из важных хитростей в анимации — 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).

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/05/1whill.swf" height="200" width="500" /]

Дальше — дальше сложнее — нам нужна монетка? — без вопросов! Читать далее Золотая середина между flash и 3d Max

Гори, гори ясно, чтобы не погасло — программный огонь во флэше

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

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

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/05/fire.swf" height="200" width="550" /]

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

Собственно, как это сделать: Читать далее Гори, гори ясно, чтобы не погасло — программный огонь во флэше

Еще раз о воде — самый главный секрет

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

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

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/05/foam.swf" height="200" width="550" /]

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

Как сделать Flash игру на совпадения — тренируем память и прокачиваем AS3

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

[kml_flashembed movie="http://www.emanueleferonato.com/downloads/color_match.swf" height="400" width="500" /]

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

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

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

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

Море воды — программная анимация и не только

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

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

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

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/05/sea_all.swf" height="200" width="550" /]

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

Способ №1

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

Здесь Actionscript используется наравне с обычной анимацией. Создается клип с анимацией движения одной волны и потом он раскидывается каждый кадр по площади моря. Когда волна угасает, в последнем кадре анимации вызывается скрипт, который удаляет этот дубликат.

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/05/sea1.swf" height="200" width="550" /]

  1. Создаем прямоугольный символ box — это рабочая площадь моря. Дальше рисуем «барашка» — пену которая возникает на пике волны. Помещаем ее в клип wave и анимируем полный цикл — волна появляется и уходит с замедлением в наивысшей точке (можно просто сжимать клип по вертикали, а можно при этом стараться сохранять массу). В последнем кадре клипа wave пишем строку для удаления:
    this.removeMovieClip();
  2. Слоем выше на кадре пишем такой код:
    lev = 0;
    var w = box._width;
    var h = box._height;
    onEnterFrame = function() {
    	lev++;
    	var d = wave.duplicateMovieClip("d" + lev, lev);
    	d._x = box._x + Math.random() * w;//ложим в случайную точку
    	d._y = box._y + Math.random() * h;//на поверхности воды
    	d._xscale = d._yscale = 50 + Math.random() * 100;//больше реализма
    }
  3. Море в готовом виде. Похоже на легкий бриз в ясную погоду.
  4. Но это всего лишь принцип, делать так можно не только море. Например, в этом примере что-то похожее на кислоту, а вместо волн — пузыри с ядовитым газом. Думаю всплески от дождя и мигание звезд тоже неплохо получатся.

Способ №2.

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

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/05/sea2.swf" height="200" width="550" /]

  1. Символ длинной волны можно создать из маленьких кусков. Зазоры между ними изображены для наглядности, в жизни все должно быть вплотную.
  2. Так как код для всех волн одинаковый, лучше его писать внутри клипа волны.
    x0 = _x;
    x9 = x0 - _width / 2;
    onEnterFrame = function() {
    	_x -= speed;//скорость задается снаружи
    	var dx = x9 - _x;
    	if (dx > 0) {
    		_x = x0 - dx;
    	}
    }
  3. А переменная speed снаружи задается для каждой волны индивидуально. По простому, на клип, через onClipEvent:
    onClipEvent (load) {
    	speed = 3.5;//для верхнего клипа
    }
  4. Должно получиться примерно так. Можно сильнее детализировать море дополнительными волнами. Кораблик раскачивается синусом.

Способ №3

Тоже  волны, но совсем иного типа. Похоже на эффект из фильма «Хищник». Есть две одинаковые текстуры воды, смещенные по координатам. Причем нижняя просто лежит на сцене, а верхняя проявляется случайным образом.

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/05/sea3.swf" height="200" width="550" /]

  1. Берем любую однородную «бесшовную» текстуру воды.
  2. Вызываем для нее Break Apart (Ctrl + B). Теперь белой стрелкой (Subselection Tool) раздвигаем точки до размеров флэшки.
  3. Рисуем и анимируем примерно такой полумесяц, как в примере (у меня эта анимация длится 25 кадров). Это будет рядовой Волна. Внутри нее в первом кадре пишем код, который выполнится один раз и начнет проигрывание с произвольного кадра:
    if(!_first) {
    	_first = true;
    	gotoAndPlay(Math.floor(Math.random()*_totalframes));
    
    }
  4. Формируем из волн «отделение» — заполняем прямоугольную область. Из отделений — взвод, роту, батальон, полк и так далее, пока не заполнится весь экран. Можно, конечно, весь экран закидать одиночными символами, но так гораздо дольше и изменять потом тяжелее.
    Поместим весь набор, который занимает экран в символ wave1. Дублируем его и располагаем выше (символ wave2), зазора между ними быть не должно. Анимировать волны будем таким способом: обе волны смещаются вниз с одинаковой скоростью и как только нижняя скрывается за экраном, тут же перескакивает наверх. На первой волне пишем код:

    onClipEvent (load) {
    	y0 = _y;//запомним координату и привяжемся к ней
    	onEnterFrame = function() {
    		_y += .5;
    		if(_y > 175) _y = y0;
    	}
    }

    На второй:

    onClipEvent (load) {
    	y0 = _parent.water1.y0;//вот и привязались
    	onEnterFrame = function() {
    		_y += .5;
    		if(_y > 175) _y = y0;
    	}
    }

    Должно получиться что-то похожее. как на примере.
    Лимит по _y я подобрал вручную — габариты клипа постоянно меняются и к ним сложно привязаться.

  5. Вот так в рабочем режиме покрывают весь экран
  6. Воду, созданную на шаге 2 дублируем и ложим слоем выше. Смещаем на 5 пикселей вниз. Клип со всеми волнами становится для нее маской (во избежание проблем, в масочном слое должен быть всего 1 клип).
  7. Должно получиться примерно так. Поиграться можно с размером микроволн, плотностью заполнения, длительностью анимации.

Способ №4

Это не совсем волны, но эффект каустики во флэше. Здесь почти без скриптов. Способ больше подходит для «вида сверху».

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/05/sea4.swf" height="200" width="550" /]

  1. Берем любую однородную «бесшовную» текстуру воды.
  2. Создаем море размером с экран (а по высоте в 2 раза больше). Break Apart (Ctrl + B), и белой стрелкой (Subselection Tool) раздвигаем точки до размеров сцены. Слоем выше лежит копия моря, повернутая на 180 градусов и простым твиннингом уходит в альфу и обратно (здесь анимация длится 72 кадра — меняя скорость, меняется волнение воды).
  3. Все, что сделано выше, засовываем в символ и смещаем его по принципу «на половинку с возвратом». То есть на клипе такой код:
    onClipEvent (load) {
    	y0 = _y;
    	y9 = y0 - _height / 2
    	speed = .5;
    }
    onClipEvent (enterFrame) {
    	_y -= speed;
    	if(_y < y9) {
    		var del = Math.abs(_y) - Math.abs(y9);
    		_y = y0 + del - speed;
    	}
    }

Способ №5

На мой взгляд, обладает большим потенциалом и лучше передает реализм. Как и раньше, единицей воды становится анимированная твиннингом волна. От того, как вы ее закрутите, напрямую зависит результат.

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/05/sea5.swf" height="200" width="550" /]

  1. Рисуем фон и создаем клип воды water — прямоугольник, закрашенный градиентом (к горизонту светлее).
  2. Создаем клип wave и внутри анимируем волну. Анимация происходит в несколько этапов: вначале гребешок волны поднимается над поверхностью, опускается назад и дальше уже другая форма, деформируясь (анимация отражения по вертикали), смещается вниз с прозрачностью 30% (на глаз). Слева — формы, которые участвуют в анимации. Для них выбран такой же цвет, как у воды над горизонтом. При наложении на градиент появляются блики.
  3. Ложим клип wave за пределами экрана, а _y выравниваем по горизонту.
    Кадром выше пишем код:

    lev = 0;
    onEnterFrame = function () {
    	lev++;
    	var d = wave.duplicateMovieClip("w" + lev, lev);
    	d._x = water._x + Math.random() * water._width;//располагаем по горизонту
    };

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

Но не увлекайтесь: анимированное во флэше море — хорошо, а реальное море — лучше!