понедельник, 30 июня 2014 г.

[HTML5] Lode Runner - игра на конкурс HTML5-игр сайта GameDev.ru

Вступление.


С 28 декабря 2013 года по ... 2014 года на сайте GameDev.ru проходил конкурс создания и продвижения HTML5-игр.

Наша команда разработчиков (Paralitix) решила попробовать свои силы в данном конкурсе. В качестве площадки для размещения игры выбрали ВКонтакте. Опыта разработки подобных проектов никто из команды ранее не имел. Были базовые знания HTML и JavaScript. На этом проекте к нашей команде присоединился начинающий художник, а мы раньше с художниками не работали, так как либо находили графику на различных открытых ресурсах, либо рисовали как могли сами.



Про игру.


На конкурс решили сделать клон игры Lode Runner. Почему выбрали именно эту игру? Во-первых, игра с очень богатой историей и интересна нам, как простым игрокам. Во-вторых, при своей видимой простоте, оказалось достаточно сложно реализовать систему искусственного интеллекта для поведения врагов.

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

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

Про инструменты.


Как основная среда разработки использовался Netbeans, а для быстрых правок - простой текстовый редактор. Отладку производили прямо в браузерах, либо выводом в отладочное текстовое поле, либо встроенным в браузер отладчиком (тот, что из коробки, или внешним, например, FireBug для FireFox). 

Краткое описание игрового процесса.


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

Управление персонажем с клавиатуры производится таким образом. Движение персонажа вверх, вниз, вправо и влево производится нажатием соответствующей клавиши со стрелкой. Клавишей "Пробел" можно включить или выключить паузу в игре. Нажатие клавиши Z позволяет вырыть яму слева от игрока. Нажатие клавиши X позволяет вырыть яму справа от игрока. При этом яма роется независимо от текущего направления движения персонажа. 

Также возможно управление персонажем с помощью мыши или с планшета/телефона, но данный режим остался в экспериментальном виде, не очень удобен и, пока, не задокументирован.

Технические подробности.


Как я уже писал выше, это была наша первая попытка написать игру на HTML5+JavaScript. Идея использовать классический ООП была отвергнута в первую же неделю работы. Прочитали несколько статей на эту тему, попробовали сами, и убедились, что как минимум на этом проекте, откажемся от его использования. Нам понравилась идея использовать фабрики для генерации объектов, поэтому именно этот способ мы выбрали для создания объектной модели игры.

Мы выбрали три базовых разрешения экрана, для которых было создано три набора картинок разного размера, чтобы можно было отобразить игру на весь экран без масштабирования (которое привело бы к искажению графики). Долго искали в Сети способ перевода игры в полноэкранный режим, совместимый с большинством современных браузеров.

Так как в качестве площадки мы выбрали ВКонтакте, то достаточно много времени потратили на изучение и применение его API. Игру на HTML5+JavaScript можно встроить только через iframe, поэтому потребовался Web-хостинг для размещения файлов проекта. А для доступа по HTTPS также потребовалось заказать и установить подписанные SSL-сертификаты начального уровня. Заодно, всю работу с API ВКонтакте перевели в PHP - это оказалось намного проще и удобнее реализовать. Для хранения данных пользователей воспользовались базой данных MySQL, предоставленной Web-хостингом.

В процессе разработки столкнулись с трудностями отладки подобных приложений. Отладчик из NetBeans, после какой-то очередной доработки отказался отображать нашу игру. Выручали отладчики, встроенные в современные браузеры (FireFox и Chrome). Понравился отладчик FireBug, разработанный как дополнение к FireFox. Но большую часть отладки проводили способом вывода информации в специально созданное текстовое поле, расположенное на той же странице, что и сама игра. Этот способ не самый удобный, но зато самый оперативный.

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

Вроде бы всё. Будут вопросы - задавайте. Спасибо за внимание.

Комментариев нет:

Отправить комментарий