Релиз и разработка первой игры Spaceship

Мой первый пост про разработку флеш-игры Spaceship. Abyss, cпасибо за инвайт. Под катом куча текста и 2 метра картинок.

Прелюдия

Пару лет назад я случайно набрел на несколько блогов о флеш-разработке (а точнее блоги Badim-а и Евгения Кузьмина), почитал ошеломляющие статьи про успехи русских инди-разработчиков, задумал сделать свою флеш-игру. Отпугивало изучение нового языка программирования ActionScript 3 и редактора Flash Professional. Программировать игры я уже умел, а AS3 был похож на C++. Плюс у меня был планшет Wacom Bamboo и я любил рисовать. Казалось, что работы не так уж и много. 

Flixel

Сперва я решил посмотреть, что уже есть готовенького, писать свой движек с нуля не хотелось. Нашел Flixel и FlashPunk. Первый показался проще, сайт симпатичнее и я решил остановиться на нем. У Flixel-а очень хорошая документация, куча примеров, готового кода. Бери и делай. Все шло отлично, структура кода привычная, растровый рендер, готовые классы структур данных, готовая система частиц, простые классы для работы с клавиатурой. Так выглядела первая поделка на Flixel-e:


К тому же не нужно было разбираться с рисованием в Flash Professional, вместо него я использовал Photoshop. И тут мне захотелось сделать хитрую систему частиц. Я не помню, что мне точно нужно было, по-моему я хотел использовать разные области битмапы для отрисовки разных видов частиц в одной системе частиц (sprite sheet). Этого сделать мне не удалось, на форуме Flixel-а ответа не нашел. И все заглохло.

Все с нуля

Незаметно пролетело полгода. Периодически почитывал, что новенького в области флеш: кто что релизит, читал технические статьи, постмортемы, подписался на все основные блоги, заглядывал на форум. Нашел блог Антона Карлова и начал писать игру с нуля по его урокам. Первое, что мне нужно было понять — это как сделать игровой цикл, в котором каждый кадр обновлять состояние игры и делать отрисовку. Оказалось, что на чистом AS3 все делается через события, а отрисовка вообще выполняется автоматически. Было очень непривычно поначалу. Но уже через пару месяцев изучения книги Мука, статей по растеризации, уроков Антона Карлова у меня устаканилась внутренняя структура игры, отрисовка стала растровой и полностью контролировалась мной. Еще было много проблем с кэшированием — мучался с ним очень долго. Сначала код писался в встроенном редакторе, потом опять перешел на FlashDevelop. Аналогично сначала компилил в Flash Professional, потом перешел на экспорт в swc и компиляцию в FlashDevelop используя Flex SDK — время компиляции значительно ускорилось. Изучив основы AS3 был готов летающий кораблик и несколько врагов с пульками, определением столкновений через стандартные функции. Когда разобрался как сделать игровой цикл перешел к менюшкам. Нужно было научиться безболезненно переключаться между состояниями игры, заложить структуру главного меню. Первый вариант выглядел так:


Да, вот такой ужас был изначально. Явные проблемы с подбором цветов. Но с каждым новым игровым объектом, эффектом, декорацией техника улучшалась. Рисовал по-разному, искал «свою» технику, постепенно разбирался с Flash Professional, смотрел уроки по анимации, вдохновлялся работами на deviant.com. Некоторые вещи перерисовывал по 3 и более раза. Например, экран выбора уровня. Первый вариант был ужасен, я сразу решил, что буду его переделывать. Во втором варианте не понравилась планета, убрал ее. А после того как нарисовал фиолетовый остров, то увидел, что он по качеству значительно превосходит первый. Перерисовав первый остров и отрисовав песочный стал отставать последний. Обратите внимание, как улучшилась прорисовка нижней правой части фиолетового острова по сравнению с его вариантом на третьей и четвертой интерации.


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

Физические движки

В какой-то момент мне не понравилось насколько точно отрабатываются столкновения пулек с врагами. Нашел уроки по попиксельным техникам. Потом захотелось, чтобы когда враг «помер» его тушка красиво упала по всем физическим законам на землю, покатилась и т.д. Это была фатальная ошибка. Я убил на физические движки 3-4 месяца, пока в итоге окончательно не отказался от этой дурацкой идеи. Сначала был Box2d с его утечками памяти и громоздким кодом. Потом Nape, который показался мне более простым — кода получалось значительно меньше. К тому же в Nape я нашел возможности, которых не было в Box2d, а именно триангуляция объектов. Обычно для Box2d вершины для нестандартных объектов расчитывались с помощью PhysicsEditor. Тоесть, чтобы добавить в игру новый физический объект приходилось: экспортировать изображение объекта с прозрачностью в png, загружать эту картинку в PhysicsEditor, делать триангуляцию и полученный массив вершин запихивать в код игры.


Очень долго! А если мелочь какую-то поменять нужно? Опять все по новой. В Nape же все автоматом делается, все готовенькое. А форум какой! Ты задаешь вопрос и через пару часов тебе отвечает сам Luca Deltodesco (dELtaluca), тоесть тот, кто этот движек написал. А какие ответы: розжовывает, раскладывает по полочкам, а потом еще кладет в рот пару примеров. Сколько бы времени не было потрачено, но  я не жалею, что познакомился с этими технологиями, может в будущем пригодится. Очень интересно было играть на маленьких уровнях, с дебажной отрисовкой:


В то время главный герой и вообще все враги имели много кадров для отображения состояния. Например, главный герой практически мертв, поэтому с него течет масло, на корпусе много дырок и повреждений. В последствии я отказался от этой идеи, так как были добавлены новые состояния (взят бонус, получено повреждение, сработал щит) и количество кадров для отрисовки неприлично возрасло.

Редактор уровней

Паралельно с физикой начал работать над уровнями. Сразу решил делать свой редактор, уровни записывать в XML. Схема простая: расставляем объекты по уровню, XML выводим в буфер обмена, вставляем код в FlashDevelop, компилим. Сначала редактор выглядел так:


Единственный недостаток, который сильно мешал — ограниченные размеры окна редактора, которых всегда не хватало. Поэтому я добавил обработку события изменения размеров окна. Работать стало очень удобно. Ближе к концу редактор оброс функционалом, панельками и плюшками. Обратите внимание на характерную продольную триангуляцию объектов — заслуга Nape: 


Активно использовал горячие клавиши. Обычно я растягивал редактор на ширину экрана, панельки тоже «тянулись» и использовали новое пространство с пользой для дела. Так выглядела панелька добавления нового объекта:


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


В терминах редактора физические объекты (Phys), нефизические объекты (Non phys), невидимые физические объекты (Inv phys) были заменены на декорации (Decor). Появилась новая категория объектов — формации (Form-s). Дело в том, что сначала большинство врагов двигалось вокруг игрока или просто летело справа налево. Потом появились пути: каждому врагу можно задать траекторию полета в виде ломаной линии с 1-3 точками, задать скорость. Эти траектории видно на картинке выше в виде желтых линий. Но возникала новая проблема: задавать отдельно пути для каждого врага было очень затратно по времени. На создание группы врагов, которая бы двигались синхронно по одинаковому маршруту уходило 3-5 минут. Поэтому я сделал формации, они решали все проблемы. На рисунке ниже редактор в режиме добавления формаций. В правом верхнем углу добавлена формация из 4-х врагов в ряд, а правее от нее уже созданные враги по этой формации:


Другими словами формации — это просто шаблоны расстановки врагов. Одним шаблоном можно создать очень много врагов за несколько минут. В игре формации не принимают участия, никак не отображаются, они лишь служебный тип объектов для облегчения создания уровня. Так выглядит панелька редактирования формаций сразу после нажатия кнопки Create:


Напоследок приведу фрагмент XML-кода первого уровня, генерируемого редактором. Как видно все объекты унифицированы, хотя на ранних этапах для каждого типа объектов был свой тег.

Графика

Сначала все рисовалось сразу в Flash Professional, потом я начал делать зарисовки на бумаге. Потом фотографировал, импортировал, обводил. Позже просто срисовывал с бумаги, когда уже приловчился сохранять пропорции. Как я уже писал, рисовал на Wacom Bamboo, который затер до дыр:


Все что осталось от зарисовок, их было больше:


Графика, которая была перерисована или по другим причинам не попала в игру:

Магазин

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


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


Покупая предметы из магазина, можно значительно облегчить прохождение. Большинство покупок влияют на внешний вид игрока. Предметы из второго магазина практически никак не помогают игроку и не облегчают прохождение, они скорее for fun. С магазином стало играть значительно интереснее, появился дополнительный стимул. В магазины были интегрированы микротранзакции через API спонсора. Тоесть игра будет приносить какой-то пассивный доход от внутриигровых покупок. Позже напишу отдельный пост сколько это принесло денег.

Звуки и музыка

Большинство звуков делалось через бесплатный генератор звуков bfxr. Звуки выстрелов, взрывов, эффекты брались с сайта freesound.org и допиливались в звуковом редакторе Adobe Audition. Лишь несколько эффектов синтезировались с нуля в FL Studio (например прикольный низкочастотный эффект при нажатии кнопки «Play»).


Музыку хотел найти бесплатную, но ничего подходящего не было. Поэтому в FL Studio сделал 2 трека. Первый эмбиент, который звучит в главном меню и второй в быстром темпе для игрового процесса. Еще один трек можно услышать только после прохождения последнего уровня, его я сделал пару лет назад и он долго валялся без дела, а тут вдруг пригодился. Послушать его можно по этой ссылке. Основной трек простой по структуре и длится 34 секунды:

Сторонние библиотеки

Я использовал бесплатные библиотеки и вообще кучу кода с блогов флеш-разработчиков за что им большое спасибо и низкий поклон. Приведу полный список:

• TweenLite и TweenMax от GreenSock для анимирования элементов главного меню, переходов между экранами.
• Класс растеризации от Александра Поречнова (scmorr).
• Куча кода из уроков Антона Карлова для кэширования объектов, математических функций и прочего.
• Куча кода от Олега Антипова различных служебных классов для работы со звуком, кукисами. Жаль, что его блог больше не обновляется.
• Класс для работы с клавиатурой из Flixel.
• SwfProfiler от Shane McCartney для отслеживания fps и потребления памяти.
• The Miner от Sociodox для отслеживания утечек памяти, профилирования.

Торги и продажа

Про то, как проходили торги на FGL я подробно писал раньше. Добавлю, что после релиза игры был подписан электронный договор с спонсором. Для получения денег был выбран wire transfer, пришли в течении нескольких дней. Комиссия за перевод составила примерно $80. Итого получено $4000 — $400 (комиссия FGL) — $100 (комиссия банков) = $3500. Прибыль не окончательная: впереди сайтлоки и микротранзакции.

Помощь сообщества

Где-то в середине разработки я залил игру на FGL и создал тему на форуме для обсуждения игры Spaceship. Я получил огромное количество отзывов, идей, советов. Заливайте игру пораньше, сторонний взгляд быстро выявит кучу серьезных проблем. Большое спасибо всем, кто писал в той теме: orbit, Breeder, TheJoker, Deadly-maN, informatik2010, Zebestov, J0x, ADF, Rakotilla, SeeD, Bilbo.

Выводы. Что дальше?

Если очень захотеть, то на флеше можно заработать. Я раз 20 был готов все бросить, но через пару дней возвращался. На форуме появлялись темы, где ребята не могли продать свои игры. Это расстраивало. Дальше я планирую купить Apple Mac Mini и взяться за разработку под iOS. Паралельно буду заниматься следующей игрой на флеше, на форуме уже создал тему для обсуждения Bizarre Techno Invaders. И не забывайте подписываться на мой блог.

Играть в Spaceship