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

Интересный ход применили ребята из Nitrome в игре Knuckle Heads. Даже не знаю как доступно описать управление в игре - это надо попробовать.

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

Отдельно отмечу оформление игры. Качественная пиксельная графика, электронная музыка и интересные идеи - визитная карточка Nitrome.

Пора поработать головой. Точнее двумя.

Во flash-играх часто возникает необходимость сделать паузу. Подразумевается, что действующие лица перестают двигаться и взаимодействовать между собой. В последнее время это актуально и для игровых баннеров. Людей раздражает постоянно мельтешащая анимация и некоторые сайты выдвигают требование ставить баннер на паузу через 15 секунд. Если эта функциональность не закладывалась с самого начала, то включить паузу не всегда просто и сильно зависит от того, как все устроено.

Мне известно 2 подхода к flash-программированию: структурированный и хаотичный. При первом все символы и объекты организуются в строгую иерархию, управление сосредоточено в одном месте, и этот “мозг” каждый кадр перебирает массив подчиненных ему объектов и вызывает для каждого функцию действия. Все строится по принципам ООП. Таким образом работают, например, движки 2D физики и 3D. Хороший способ, уменьшает вероятность ошибки, но требует основательного подхода и много времени.

Есть еще хаотичное или стихийное программирование, когда для каждого клипа (которому это нужно) задается событие onEnterFrame и он запускается в “свободное плавание” (программисты со стажем сейчас меня нещадно осудят). Это настоящее самоуправление, каждый клип живет в пределах своих фигурных скобок. Друг о друге символы знают мало, обычно разбиваются по группам и заносятся в массивы. Метод тоже хороший, можно все сделать быстро, но есть шанс запутаться и поматерить флэш, который “опять глючит”. Этот метод я обычно использую для задач-однодневок, пока все свежо в памяти.

Есть еще третий метод, который мне нравится больше всего - он сочетает в себе и структуру и свободу выбора - ООП основанное на событиях. Но это уже условное отделение - классы как-никак.

Так вот, возвращаясь к вопросу о глобальной паузе: для структурного подхода все просто: заводится логическая переменная (пауза есть/нет), опираясь на которую, главный клип либо вызывает для всех функцию действия, либо нет. Это что касается кода, остановить твиннинг гораздо сложнее. Например, летит муха, у нее дрожит туловище, она машет крылышками и к тому же моргает. Нужно 3 раза вызвать функцию stop(). А если на сцене символов много, и все они разные? Как минимум для каждого объекта нужно описывать функцию его полной остановки (с событиями кстати также - наследование не поможет если символы разные).Для стихийного подхода к программированию это почти расстрел. В обоих случаях нужно писать много строк Actionscripta. Некоторое время я так и мучался, попутно выдумывая, как это можно упростить. Вот то, что есть у меня на сегодня:

Что может приводить объект в движение? Твиннинг или ActionScript (а точнение событие EnterFrame). SetInterval я во внимание не беру.
Значит должна быть функция которая останавливает проигрывание клипа и отключает для него onEnterFrame. Читать полностью »

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

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

Вот такой пример.
Флэшка не простая, а управляемая: клавиши 1,2,3,4 на цифровой клавиатуре справа переключают виды камеры. Можно зумировать скроллером мыши. Пробел - пауза. Клавиши вверх/вниз - ускорить/замедлить просмотр (жми много раз). Право/лево - кадр вперед/назад. Q - переключает режим качества. Заявлена еще клавиша S, но я не понял что она делает. Читать полностью »

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

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

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

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

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

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

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

Привет всем!

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

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

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

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

Еще один урок от 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).

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

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

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

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

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

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

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

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

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

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

Действительно, физических движков на сегодня реализовано немало, даже 3-х мерных хватает, а вот найти им достойное применение получается не у всех. Игра Crayon Physics Deluxe - как раз тот случай, когда игровой момент составляет сама физика движка. Deluxe - это сиквел на игру Crayon Physics и пока еще в стадии разработки, но из ролика понятно, что она уже сегодня серьезно обогнала своего предшественника, а если еще и уровней побольше сделать, э-эх!

Реализовано, как я понял, не на флэше, но не вижу причин, почему бы это не исправить. Используется Box2D physics engine.

Вначале даже не знал как к этому относиться. Сейчас меня это улыбает.

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