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

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

Прелюдия

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

Flixel

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

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

Все с нуля

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Графика

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

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

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

Магазин

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

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

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

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

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

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

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

Я использовал бесплатные библиотеки и вообще кучу кода с блогов флеш-разработчиков за что им большое спасибо и низкий поклон. Приведу полный список:
  • 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

  • +54

Комментарии (53)

0
Поздравляю! Уверен что игра принесет порядочно на микро транзакциях:)
0
спасибо!
0
ты прямо по завершении игры стал тру игроделом) Искренне за тебя рад! Сделать первую игру качественной и продать за несколько k это круто.
0
спасибо)
0
Поздравляю, для первой флеш-игры очень даже хорошо. Разрабатывал игры до этого?(например, на других платформах)
0
А, отбой, невнимательно прочитал 1й абзац.
0
разрабатывал, как хобби, ниодной до конца не сделал
0
Молодец! Отличная игра и прекрасный постмортем! :)
0
спасибо!
0
Поздравляю! Напишете про результаты микротранзакций? Очень интересно.
0
спасибо! обязательно напишу
0
Годный постмортем, очень доставило. Удачи тебе в будущих проектах.
0
спасибо!
0
Отличный отчет!
  • abyss
  • abyss
0
спасибо! старался)
0
Прекрасный старт! Отличный пост.
0
спасибо!
0
Тут и добавить нечего. С огромным интересом прочитал. Буду ждать с нетерпением отчета по микротранзакциям.
А что с сайтлоками? Есть предложения?
0
по договору сайтлоки смогу продавать через 20 дней после выхода виральной версии. А ее пока нет и спонсор даже словом не обмолвился на этот счет. Предложений нет.
0
Наглядный рост в арте и программировании!!! Выглядит великолепно! НЕмного мыслей — для такой игры можно было написать свой простенький физ. движок. Это совсем не сложно:)
0
спасибо! свой физ двиг — это хардкор для меня :)
0
Не думаю, что редактор намного проще написать )
0
Свой редактор — вот хардкор! А простую эмуляцию физики сделать раз плюнуть!
0
физический движек — куча математики и физики, в теме нужно быть :)
0
Целая маленькая жизнь в этом посте. Автору дичайший респект, рисовка очень доставила.
Как ты сказал «свой стиль» реально есть.
0
спасибо!
0
молодец, отличный результат!
0
спасибо
0
Отличная игрушка, открыл посмотреть и прошёл до конца ))
Очень приятный графический стиль, хорошее управление, внятный магазин.
Молодец!
  • FreeS
  • FreeS
0
спасибо!
0
Да это же просто праздник какой-то, а не постмортем! Восхитительный, восхитительный пост!
  • SeeD
  • SeeD
0
спасибо!
0
Поздравляю. Для первой игры вообще отличный результат. И графика очень понравилась :)
0
спасибо!
0
200 лучей добра тебе! Отличная графика и исполнение :)
З.Ы. отписал тебе в личку
  • _dm_
  • _dm_
0
спасибо!
0
Микро это интересно!
  • Vel
  • Vel
0
Наверное самый подробный отчет который тут когда либо публиковался! Спасибо!
0
я тоже люблю подробные отчеты, поэтому решил расписать по максимуму :)
0
Игра класс)
П.с. когда заходишь в кизи магазин, их окно перекрывает твой курсор
0
спасибо! Так и должно быть. Их окна появляются, когда кончаются монетки.
0
Преотличнейший отчет — редкоть в наше время — большой респект и спасибо!
0
спасибо!
0
Игра просто супер, помню когда обсуждали ее на форуме, очень мне запомнилась. Одна из лучших за последнее время.

Ложечка дегтя: если будут микротранзакции, то надо заплатить за greensock (https://www.greensock.com/licensing/)
0
спасибо! блин я попал на деньги :)
0
Удивился, когда узнал о том, что игра русская. Качественно сделано. Удачи.
0
спасибо! А если точнее, то даже не русская, а украинская :)
0
На удивление игра понравилась, молодец, поздравляю!
0
спасибо!
0
Ссылки в посте битые: на трек с музыкой и на тему на форуме.
0
поправил
0
Игра супер! C первого взгляда мне понравилась :)
Поздравляю!
0
спасибо!
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.