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

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

Использование флэш-игр в рекламе

Основной смысл - как сделать из flash-игры рекламный продукт.

Игровой баннер - что это?

Игровой баннер, он же игробаннер, он же casual banner, он же interactive banner ads - это маленькая flash-игра, которая располагается на web-странице, выиграв в которую мы переходим по рекламной ссылке. То есть, это награда плата пользователя за полученное удовольствие от игры, за приподнятое настроение и т.д. Именно поэтому графика и идеи должны быть смешными и/или играбельными. (слайд 2)

Разновидности и классификации игровых баннеров

Эта классификация скорее условная и больше пригодится вам и заказчику чтобы лучше понять друг друга и говорить на одном языке. На примере таких прототипов можно наглядно объяснить что вы имеете ввиду и как это примерно будет выглядеть.

1. Шутеры - управляем прицелом/оружием/предметом и должны проявить меткость и реакцию, чтобы поразить цель. Прихлопнуть таракана, подстрелить утку, схватить падающее яблоко, зажечь свечку на убегающем торте. (слайд 5)
2. Догонялки - догонять может кто угодно кого угодно, лишь бы это было уместно и весело. Играть можно за любую сторону. Обычно реализуется на клики. Волк гонится за зайцем, дети за дедом Морозом, дровосек за ёлкой. (слайд 6)
3. Избегание препятствий - классика жанра - сказка “Колобок”, где нужно было уйти от всех зверей. (слайд 7)
4. Гонки - опять же соревноваться в скорости может кто угодно. Забег с тележками в супермаркете, страус против черепахи на мотоцикле. (слайд 8 - кликайте мышкой чтобы играть)
5. Собиралки - здесь всё что нужно перетаскивать, находить визуально, собирать из частей и т.д. (слайд 9)
6. Комбинируя различные варианты, можно получить много интересных идей. Также можно взять популярную игру, выделить один игровой момент  и сделать на нём баннер. Интерес пользователей гарантирован. (слайд 10)

Основные составляющие игрового баннера

Время идёт, меняются сценарии, стили, предпочтения заказчиков, но некоторые вещи остаются неизменными - фон, главный персонаж/объект (которым мы управляем), объекты с которыми он взаимодействует (противники, бонусы), вспомогательные объекты (взрывы, гильзы, ракеты и прочие спецэффекты) и элементы интерфейса (индикаторы, заставки, подсказки). (слайды 12-17)

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

Этапы создания игробаннера

Начинается с ТЗ пришедшего от заказчика или с собственной идеи. Будет лучше вместе с текстовым описанием получить от заказчика ещё и набросок, так вы лучше поймёте друг друга. (слайд 20)

Я лучше дружу с карандашом, чем с планшетом, поэтому мне больше подходит связка “рисование на бумаге - сканирование - обрисовка во флэше”, хотя если кому-то проще делать это сразу на экране - так и делайте. Лучше каждому объекту выделить отдельный слой - потом будет проще конвертировать их в символы. Я не спешу разукрашивать графику на этом этапе. Однако стоит залить её любым нейтральным цветом, чтобы срабатывал hitTest и вы видели, как объекты перекрываются. (слайды 21-23)

Далее идёт разнесение графики по символам и именование. Это важная часть работы. Если намудрите, потом будет сложно программировать. (слайд 24)

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

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

Теперь можно добавить вспышки, взрывы, вздрагивания, программно или анимацией - как вам будет удобней. Осталось добавить интерфейс со всеми индикаторами, барами, заставками и баннер готов. Дайте поиграть соседу и засеките, сколько он улыбался. Разделите на общее время игры - так рассчитывается “коэффициент смешности”.
(слайды 27, 28)

Варианты управления и играбельность

Баннер должен работать! Это главное, иначе нет смысла вообще его делать. В моём понимании для игр этот фактор определяет весёлая графика/анимация или играбельность. Под играбельностью я понимаю удобное и интересное управление. Игрок должен чувствовать контроль над ситуацией и понимать законы, по которым развивается игра. Это подвигнет его проверить свои тактические способности и поиграть. Исходя из этого есть несколько отработанных вариантов, которые хорошо себя зарекомендовали. Отдельно стоит сказать о баннерах на клики (кнопка): некоторые порталы требуют ставить баннер на паузу через 15 секунд после загрузки страницы если пользователь с ним не взаимодействовал (потом при наведении мыши баннер снимается с паузы и даёт возможность поиграть). Поэтому эти баннеры очень популярны и с этим пока ничего не поделаешь. (слайды 30-33)

Где брать идеи для сценариев

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

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

Как многократно использовать наработки

Если вы планируете (или вас заставляют это делать на работе) часто делать игровые баннеры, стоит задуматься об оптимизации и рациональном использовании времени.

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

Собирайте коллекции спецэффектов, хорошо если каждый запечатан в символ и легко переносится между флэшками (стоит дать символам в библиотеке уникальные имена). Полезно ещё собирать коллекции фонов и фоновых элементов, которые в дальнейшем путём комбинаций и тинтований дадут частично или полностью новую графику. Также стоит задуматься о коллекции походок - часто это трудоёмкая часть работы (прорисовка положений ног), поэтому их тоже имеет смысл собирать. Конечно лучше не использовать одинаковую графику несколько раз, но у вас будет хорошая база для изменений. Идеальный случай, когда в новой картинке не узнают старую - к этому нужно стремиться. Вообще я противник клонов и сторонник хороших идей. Эти библиотеки только для того, чтобы больше времени оставалось на выдумки. Если время позволяет - по возможности откажитесь от библиотек. (слайды 40, 41)

Вот собственно и всё, остальное в видеозаписи.

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