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

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

Но не только под водой можно таким образом показывать воздух. Иногда возникает необходимость показать воздух на суше. Непростая задача - он ведь прозрачный. Например есть игровой баннер, где летит воздушный шарик, а мы включая/выключая вентиляторы должны проводить его до конца экрана. Чем выше от вентилятора, тем меньше воздействие ветра. Чтобы добавить играбельности и лучше объяснить пользователю что и как, можно воспользоваться этим способом и наглядно показать пределы ветра. Для этого будем считать что воздух замусорен пылинками, ворсинками и т.д. В случае с нашими вентиляторами, они силой ветра поднимают осевшую на них пыль. Я просто придумал такие условия, но они помогают мне лучше передать картину происходящего.

Чтобы сделать такие пузырьки нужно: Читать полностью »

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

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

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

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

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

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

Не совсем о флэш-играх, но хитрость.

Недавно сделал карту для сайта kartablogov.ru. Она отображает плотность распределения блогов по регионам России. По замыслу автора, регионы на карте должны менять цвет в зависимости от количества блогов. Отлично, цвет в дизайне - сильная штука. Здесь он меняется от зеленого до красного и понять где зарегистрировано больше блогов можно даже без наведения мышки.

Собственно, я столкнулся с проблемой, как расчитать программно промежуточный цвет. То есть, 2 крайних значения у меня есть, а все оттенки между ними должны расчитываться.
Закраска делается функцией Color.setRGB() и ей в качестве параметра нужен цвет в виде 0xFFFFFF. Это хорошо, все привыкли к такому формату, но если записать его в переменную, в таком виде он уже не хранится и при трэйсе выдаст 16777215. Чтобы корректно расчитывать оттенки, цвет нужно разложить на составляющие Red, Green и Blue. И потом по пропорции вычислять для каждой составляющей…

Короче, много работы. Я не спорю, это давно кем-то уже написано и можно найти в сети готовый скрипт. Просто есть еще один интересный способ. Его я и предлагаю:

1. Создаем символ-контейнер (назовем colorSampler).
2. В нем создаем клип (назовем s) и анимируем его с эффектом Tint из одного цвета в другой (100 кадров). Фишка в том, что заданный “руками” эффект Tint теперь можно считать программно.
3. Для этого клипа создается объект Color. И теперь, чтобы получить промежуточный цвет, отправляем символ colorSampler в нужный кадр и считываем его с символа s методом Color.getRGB().

В примере ниже строится произвольный график, где цвет столбиков зависит от их высоты. Символ в нижней части как раз и задает цветовой переход.



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

Пока писал пост, подумал что еще проще нарисовать градиент (100 пикселов шириной), сделать из него объект BitmapData и считывать цвет методом getPixel(). Будет наглядней.

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

По вине хостеров блог лежал 2 дня.

Оказывается, посыпался винт, на котором жили сайты одной тарифной линейки. Сейчас все перенесли на новый сервер. Точнее только серверные файлы. А все базы ушли в страну, “богатую рыбой и бобрами”. Даже не знаю, как теперь быть всем тем, кто понятия не имеет что такое phpMyAdmin и резервное копирование базы.

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

Что не сохранилось: последние несколько комментариев и рейтинг популярности статей старше 14 апреля.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Привет всем!

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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