HTML5 игра за месяц, Viking постмортрем

Привет, недавно мы зарелизили нашу игру про викинга, разработка которой стартанула 16 сентября, а письма спонсорам с 95% готовой игрой мы рассылали в 20х числах октября.





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

www.newgrounds.com/portal/view/684290
www.kongregate.com/games/crazygamesdotcom/viking-way-to-valhalla



Текущие факты таковы: мы продали primary лицензию crazygames с фиксированной ставкой + перфоманс, который больше фиксированной. При идеальных раскладах наша сделка принесет чуть больше пяти к $.


Теперь перейдем уже к разработке. Во-первых в плане арта у нас была готова примерна 1/2 часть. Случилось так, что в течение года мы делали разные проекты и естественно не все дошли до финала. В нашем распоряжении были два пака — один предназначался для игры в стиле матч3, второй для клона одной популярной игры, только с викингом.

В конце лета я решил переходить на html5, так как каждый месяц положение флеша все хуже и хуже. Стал известен тот факт, что в новом обновлении google chrome закроет флеш, несмотря на то, что гугл не убрал плеер полностью, все же новости не самые лучшие. Правильность своего выбора я понял тогда, когда пришла новость от фгл.

Выбор был сделан в пользу phaser'a, ранее мы уже имели пару проектов на нем, есть косяки, есть свои проблемы, но в целом все отлично и в коробке множество разных фишек. Плюс ко всему, спонсоры не имеют ничего против него, в отличии от libgdx. Phaser довольно популярен, на сайте есть множество примеров, правда некоторые могу не работать.

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


В качестве программы для анимаций был выбран spriter, это самая ужасная программа для создания скелетных анимаций, но цена за spine высока, а dragon bones я попросту не смог подключить. У нас была бесплатная версия с ограничениями, которые никак не мешали. Для собирания атласов использовал texturpacker. Для анимаций эффектов мы использовали ранее купленный пак.

Были проблемы с механикой, логика которой мне поддалась не сразу, точнее то что имеется сейчас — результат двух вечеров, но дня три я убил в попытке сделать скатывание элементов, если под ними или рядом с ними есть стенка. У меня не получилось и я забил.

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



Рассказ мой слегка сумбурен, но я постараюсь в нем изложить вещи, которые вам могут быть полезны. Мы допустили ряд ошибок. Первая ошибка — потратьте силы на реализацию двух положений экрана. Большинство спонсоров требуют иметь игру в горизонтальном и вертикальном положении, я потыкавшись часа 2 забил на это и продолжил работу в портретном режиме. НЕ НАДО ТАК! Второе, используйте webfonts, не используйте bitmapfonts, потому-что большинство спонсоров покупай эксклюзив, а потом делают локализацию, с bitmapfonts это будет проблематично.

Для аудио используйте audiosprite, так вы сможете проигрывать музыку на устройствах. Один момент, аудио на девайсах грузится в разы дольше, более того загрузка аудио не фиксируется методами для отображения статуса загрузки, в результате вы начнете играть, вызовете звук и услышите полный сумбур. Чтобы этого избежать, вам необходимо проиграть рандомный звук с 0 громкостью, поставить слушатель на его окончание и только после этого ваша загрузка закончится. Но есть опять же проблема, если аудиоспрайт большой, а у нас он большой. То вы будете видеть 100% загруженную игру и около минуты — двух ждать еще пока загрузится аудио, поэтому мы даем игрокам возможность начать играть без звука, он появляется как только аудиоспрайт полностью загрузится.

Как вставить гифку не знаю, но можете глянуть тут:
vk.com/doc289007295_438356245?hash=9005a2db4db2003160&dl=411cbed8b40ea3c093

Для рекламы я использовал плагин от orange games, он работает, я проверял. Но запустить его сразу я не смог, возможно у меня также была проблема с тегом, попробуйте создать его сами и опробовать, но сперва помните, что вероятность загрузки рекламы с помощью их плагина на localhost крайне мала, поэтому тестируйте на зеркале или на ваше сайте, незнание этого факта стоило мне 3х дней.

На счет сайтлоков, вот вам небольшой код для получение текущего сайта, у нас была проблема с тем, что спонсор использовал iframe и на konnregate и на newground мы видели в качестве домена его сайт, проверял я это через windows.location.href, ниже код как делать правильно

var currentUrl = (window.location != window.parent.location)
            ? document.referrer
            : document.location.href;


Еще разработчик phaser'a в своей рассылке назвал нас игрой недели. Дальше будем пытаться продавать рескины, сайтлоки, исходники — будем выжимать соки. Ну и те кто еще не следит за моим блогом в вк, присоединяйтесь: vk.com/nrjwolf_blog

Да, вот небольшая фича, я встроил в игру динамическую смену цвета адресной строки, работает не везде. но где работает — выглядит круто!


Тутор тут: nrjwolf.com/blog/change-color-adress-bar-js/

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


Хочу дополнить, что с данным спонсором работаю второй раз, его зовут Raf и он отличный парень, готов помочь, поэтому вы также можете поиграть на его сайте :

Также можете поиграть на сайте спонсора: www.crazygames.com/game/viking-way-to-valhalla
  • +7

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

0
Спасибо за постмортем, про много полезного узнал из него, с игрой удачи! Но у меня возник вопрос, как так спонсоры требуют работу сразу в двух ориентациях экрана, если есть игры например которые нельзя заточить под обе ориентации? и еще хотел уточнить, ориентации влияют на стоимость продажи? и про webfonts еще, спонсор сам локализует или просит разработчика локализовать?
0
На счет ориентации можешь решать сам, но спонсоры ссылаются на статистику — большая часть игроков играет на декстопе, по этом портретный режим им не подходит. HTML5 игры еще не закрепились на мобильном рынке. На стоимость влияет косвенно, к примеру keygames и famobi сразу сказали, что требование к игре — работа в двух положениях экрана. Мы могли бы продать эксклюзив keygames, но пришлось бы еще делать горизонтальный режим. В общем, если будешь учитывать эти требования, то предложений будет больше. На счет webfonts тут как договоришься, спонсор будет делать локализацию сам, но скорее всего, тебе нужно будет вынести все текста в один файл и заранее позаботиться о поддержке нескольких языков, чтобы спонсору было удобно их включать в игру.
0
Вчера не смог пойти проголосовать, сейчас проголосовал :) Кстати жаль что нельзя отключить музыку сразу и во время первой битвы. Ну то есть по сути спонсоры хотят две разные игры) потому что как правило часть игр нельзя просто так переделать в другую ориентацию надо переделывать уровни, им то это выгодно, а вот разработчику надо две игры сделать по сути. Так вроде бы на сколько я помню продавать эксклюзив у html5 игр это не очень выгодно, потому что сайт локи хорошо продаются или ситуация изменилась? На счет webfonts понял, спасибо.
0
По сайтлокам пока два предложения, поэтому больше сам бы хотел проверить, надеюсь что будет больше. Да, два положения экрана действительно затратно делать.
0
Очень приятный арт!
А чем gaf converter не подошел для анимации?
Спасибо за статью, удачи!
0
Про gaf конвертер прочитал уже позже, со спрайтером работал еще прошлой зимой, по этому его подключение заняло у меня час, изучение же нового инструмента потребовало бы времени. Плюс видел недавно плагин, для перегона анимации из flash.
0
Молодцы! Поздравляю!
Спасибо большое за статью!
Единственное не совсем понял что у вас со звуком не так.
Я использую стандартные средства phaser и все отлично, только нужно сделать их как в mp3 так и в ogg, дальше движок сам выберет и подгрузит в зависимости от платформы. Сделал много игр — все отлично.
0
У нас каждый аудиоспрайт в этих форматах по 5мб, не знаю в чем проблема, но прогрузка звука не фиксируется основным прелоадером, из-за этого могут возникнуть проблемы.
0
хмм, что то вы намутили. использую Audacity — все сжимаю. Если что пишите, посмотрим, помогу решить.
0
а в чем заключается проблема с DragonBones? подключил к пикси без проблем — все работает. Spriter — это жуткая программа, если за последние два года ничего не изменилось
0
Прошлой зимой видел библиотеку к pixi, но с phaser не вставала, спрайтер — единственное что удалось запустить, поэтому и использовал в этот раз, чтобы не терять время. Жутка программа — да, но ко всему привыкаешь.
0
Третий уровень, у героя 160 здоровья и урон 2-8, у врага 360 и урон 19. Плюсанул на конге за баланс :D
0
урон зависит от количества соединяемых мечей, чем больше мечей — тем больше урон
0
gaf конвертер можно использовать в хтмл?
0
интересно а утих хтмл5 спонсоров обязательное требование чтоб на мобилах работало или webgl unity билд тоже могут взять? не знаете случаем?
0
В вебе с юнити пока что не очень
0
Арт хорош. Так есть спонсоры еще на хмтл5? Сколько заинтересовалось вашей игрой? Я так понимаю, продали веб+мобилы версии?
+1
Да, есть. Адекватные предложения были от двух спонсоров, остальные не совсем были довольны отдельными моментами в игре ( уровни, нет горизонтального режима, шрифт ). Продали веб, спонсор имеет право опубликовать на ios, но это скорее было дополнительно, чем конкретное условие.
0
Спилы пару дней назад сказали, что в следующем году спонсировать игры перестанут.
Будут только сами делать игры, похожие на те, что у них были популярны.
Так что минус один :(
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.