Игровые баннеры тоже игры — презентация для FlashGamm в Киеве

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

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

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

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/10/flashgamm_xitri_s.swf" height="415" width="550" /]

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

Игровой баннер, он же игробаннер, он же 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)

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

Впечатления от FlashGamm в Киеве

FlashGamm Киев 2008

Сначала хочу выразить благодарность организаторам — всё было очень круто. Гораздо серьёзнее, чем я рассчитывал. Валерия Маллаева и Александр Титов сделали всё, чтобы эта встреча состоялась, а посетители остались довольны. В каждом докладе я нашёл что-то полезное для себя, а некоторые слушал, не отрываясь. Были известные люди, на некоторых из них я сам учился, за это им тоже громкое благодарю.

Очень много было сказано о том, как зарабатывать на флэш-играх путём поиска спонсоров и с помощью рекламы. В зале, кстати, был представитель AddictingGames, которому можно было на месте показать/продать игру (что некоторые и сделали :)). Ada Chen из Mochimedia рассказала об особенностях их рекламных сетей. Нужно срочно учить английский.

Как всегда порадовала своими новыми возможностями Alternativa3D в лице Антона Волкова. Было выступление, посвящённое созданию именно flash-игр на базе их движка. Как я понял, для независимых разработчиков flash-игр (инди-разработчиков) Alternativa3D теперь бесплатна, а значит самое время пробовать её в играх.

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

Были также доклады на примере реальных проектов. Все презентации и отчёты (некоторые уже есть) можно найти на сайте FlashGamm.

Я выступал с докладом о том, как использовать флэш-игры в рекламных целях. Фактически о том, что я называю «игровые баннеры». Рост на встрече предложил англоязычное название — «Casual Banners». Как вам предложение?

Сейчас готовлю отчёт о своей презентации, как будет — сразу выложу.

Изометрия в два счёта

Для flash-игры TilePaving использовалась одна маленькая, но полезная хитрость. Никакой изометрии в программном понимании там и в помине нет. Все расчёты для плиток производятся в привычных координатах _x и _y. А интересный ракурс создаётся благодаря двум простым действиям: повернуть символ на 45 градусов (всю игру целиком), а потом сплющить её по вертикали на 50%. Сжать повёрнутый символ во флэше не так-то просто — маркеры трансформации помнят угол поворота и сохраняют возможность растяжения/сжатия по осям самого клипа. Чтобы обойти этот момент, нужно символ временно сгруппировать (Ctrl + g), сжать по высоте и затем разгруппировать (Ctrl + b).

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

Читать далее Изометрия в два счёта

Добро всегда побеждает зло — игровой баннер

На днях был сделан игровой баннер для Доброблога. Идею долго выдумывать не пришлось — название блога говорит само за себя.

Теперь, чтобы перейти на сайт, нужно доказать свою доброту.
Кликаем мышкой!

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/10/dobrovszloxi3.swf" height="300" width="500" /]

Персонажей для баннера придумал и оживил (а точнее вывел из своих миров) — Никита Котов

Flash-игра TilePaving — головоломка для любителей поиграть в пятнашки

Первая моя игра, которая нашла своего спонсора в лице UGOPlayer через сайт FGL.

TilePaving Flash Game Splash

Цель игры — перевести заданные плитки в положения, указанные на мини-карте. Поиграть можно на сайте спонсора (там много рекламы) или под катом. Читать далее Flash-игра TilePaving — головоломка для любителей поиграть в пятнашки