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

Совсем недавно мы общались с dedом pb|xto на тему: “Какими должны быть игры”. Что программисты делают виртуозные и играбельные движки, где геймплей строится на ловкости и быстром реагировании, а аниматоры “выезжают” на прикольных персонажах, качественной анимации и спецэффектах. И хотя я сторонник того, чтобы аниматоры начали программировать, а программисты рисовать, все же у каждого есть свой конек, с помощью которого можно делать самодостаточные игры.

И вот, удачный пример аниматорской игрушки - Mr. Coo: El Laberinto Esférico

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

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

Одна из лучших игр в этом жанре.

Это продолжение дорожных приключений. Тогда попросили сделать вариант с прицепом. Я понимаю желание сделать “побырику” flash-игру типа “Парковка” имея под рукой готовый код, поэтому дальше описан пример как это сделать. И не один прицеп, а целый поезд.

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

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

От предыдущего примера код почти не отличается. Добавилось несколько новых клипов и одна функция в коде. Читать полностью »

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

Это уже третья версия игры:

В предыдущие версии тоже стоит поиграть, наверное так даже будет интереснее - Shift 1 и Shift 2.

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

P.S. Спасибо Ixifeus за ссылку

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

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

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

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

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

Например, стоит подумать об аппликации, оригами или… конструкторе Лего. Именно так и поступил  некто Skinny Coder и перестроил близкие сердцу игромана старые игрушки на новый лад. Пока только в виде картинок.

Даже стало интересно, как теперь персонажей анимировать Хочется привязаться к конструкторскому пикселу и при движении смещать объект на один зубчик, примерно за треть секунды. А частица взрыва будет такой: вначале кубик 4х1, затем 3х1,  затем 2х1, затем 1х1 и нету его.

А вообще это хороший способ изобретения - взять качества с одного объекта и перенести их на другой.

Прошла суббота, а вместе с ней и UAFPUG 3, посвященный флэш-анимации.
Я был приятно удивлен теплым коллективом и не ожидал, что это будет так интересно.
Знакомство и общение с новыми людьми, красивый город и увлекательное after party сделали свое дело. Теперь буду посещать такие мероприятия чаще.

Отдельное спасибо скажу организаторам встречи - Лерике и всем остальным, кого я не знаю: все было просто супер! Просторный, прохладный зал с мягкими диванами, розыгрыш ценных и почетных призов, экскурсия по городу, fireshow - молодцы. Порадовали гости приехавшие специально для этого из России.

Я выступал вторым, между Колесником Александром и Акимовым Олегом. Когда подошла моя очередь, я разволновался и первое время мялся как школьник и сказал далеко не все что хотел. Потом как-то попустило и речь пошла более связная. Думаю, это придет с опытом.

Выкладываю свою презентацию, ниже можно и исходник скачать. Все хитрости подаются как готовое решение - эффект копируется в флеш-мультфильм путем copy/paste. Код не везде “чистый”, потому как некоторые вещи брал из работ которым более 2-х лет. К тому же возможен “левый код”, который нужен был для символов, которых здесь нет. Я об этом не сильно заботился, потому как решение выложить исходник было принято уже на самой презентации. Поэтому примите все как есть.

Сегодня Adobe Flash - это мощная программа, которая решает широкий спектр задач и создала несколько профессий – флэш-программисты, флэш-аниматоры и иллюстраторы. Веб-дизайнеры не отстают и тоже стремятся взять флэш на вооружение.
В связи с этим, люди, которые занимаются преимущественно анимацией, Actionscript-ом практически не пользуются, максимум – команды play(), stop(), gotoAndPlay(), gotoAndStop(). Программисты же, впадая в фанатизм, пытаются все сделать исключительно скриптами, а к твиннингу относятся с пренебрежением. Не все, конечно, но многие. Как в программировании, так и в простой анимации, есть свои преимущества и недостатки. И эффективней работать будет тот, кто использует преимущества обоих направлений.
Так как сегодняшняя тема посвящена анимации, то и доклад ориентирован в основном на флэш-аниматоров.

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

Читать полностью »

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

Почти все сделаем при помощи одного flash-инструмента - Oval Tool (которым кружки рисуют). Все объекты будут состоять из набора кружков.

Думаю что по флэшке и так все понятно, но тем не менее распишу по кадрам. Читать полностью »

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

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

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

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

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

Недавно сделал карту для сайта 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(). Будет наглядней.

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

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

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

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

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

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