HTML5 Phaser ECMAScript 6

Часть 6: Как создать одну игру для Android и iOS

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

Игра разработанная на HTML и JavaScript гарантирует ее работоспособность на любом устройстве где есть браузер. Первую версию игры я вовсе создал используя только HTML, CSS и jQuery. Но, мне хотелось, что бы в игре была красивая анимация, а что бы не изобретать велосипед, надо использовать проверенный реальными играми фреймворк.

Погуглив, я попал на сайт с TOP10 самых используемых фреймворков. Среди них были Construct 2, ImpactJS на первом и втором месте и Phaser на четвертом. Первые два были не только не бесплатными, но и последний раз обновлялись три года назад. Мне кажется, начинать знакомство с миром разработки игры с мертвых проектов это не лучшее решение. А вот Phaser имел для меня сразу два преимущества: он был компактным (всего один файл) и бесплатным. На официальном сайте Phaser есть хорошая пошаговая инструкция как начать им пользоваться. Советую ее прочесть, и повторить все шаги на своем ПК (или просто скачайте пример hellophaser). Так вам будет легче в будущем понять, почему я делаю так а не иначе. Если возникнут сложности, я всегда рад буду ответить на ваши вопросы =)

ТОП фреймворков по разработке HTML5 игр

Если вы прочитали пошаговую инструкцию с официального сайта, то вы уже знаете, что при разработке любой HTML5 игры необходимо настроить локальный сервер. Но если вы пока не читали (или вы не дружите с английским), в двух словах — дело в том, что вся игра это бесконечный JavaScript цикл в одном HTML файле, который открыт в браузере. А значит, если браузер разрешит JavaScript-у считывать локальные графские, аудио и текстовые файлы (необходимые для игры), то какая у него гарантия, что какой-то JavaScript не считает что-то лишнее и не отправить куда не надо? По этой причине JavaScript-у открыт доступ к файлам, только через HTTP протокол (http://).

Вы можете предложить залить игру на сервер, но тогда мы будем терять время на загрузку файла после каждого изменения (а изменений у нас будет очень много). В таком случае, рекомендуют ставить готовые сборки, например XAMPP. Если выбрать это решение, тогда важно не забыть его отключить после работы, что бы позже, при подключении к публичной WiFi точке, все файлы проекта не стали доступны другим пользователям сети =) Во избежании такой ситуации, я предлагаю использовать микро веб сервер (утилита Сonnect, о ней чуть позже), который запускается из консоли и работает пока консоль не закрыта.

интерфейс программы XAMPP для управления локальным сервером

Игру я буду писать на JavaScript-е 6 версии (ECMAScript 6), вместо 5-ой. Для меня главное преимущество новой версии в том, что я могу делить код на отдельные логические файлы (скрипт кнопки, скрипт таймера, скрипт карточки с графикой и словом и т.д.) и подключать их командой import в начале файла. Но изюминка, конечно же в поддержке классов и возможность реализовывать наследование!

За свою карьеру программиста, я не раз переходил от процерудного программирования к классам и обратно. На определенном уровне, начинаешь понимать, что тебе нужно больше гибкости и наконец перестать писать один и тот же код в каждом новом проекте. Последней точкой в выборе метода стали шаблоны программирования (кстати, созданы более 20 лет назад). Вы на практике увидите, как классы облегчат мне разработку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *