html5 game

Создаем HTML5 игру. Часть 1: Выбор технологий

12 февраля, 2014
3 минут(ы) чтения

Если контент не отображается, включите VPN.

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

Выбор графической подсистемы

Сейчас для HTML5 существует всего три основных средства визуализации графики. Это DOM (CSS), Canvas (2D и WebGL) и SVG.

Упрощенно можно сказать, что DOM манипулирует встроенными в HTML тегами, которые стилизуются и трансформируются посредством CSS.

Canvas

Более новый, отдельный, специальный растровый контейнер для 2D и 3D содержимого. К содержимому контейнера Canvas, в отличие от DOM и SVG, не могут быть применены CSS-правила, все через JavaScript. Перерисовка сцены в этом контейнере происходит попиксельно. Canvas расширяется возможностью отрисовки WebGL содержимого и включает в себе богатый стек API-вызовов.

SVG

Это своего рода XML-расширение возможностей HTML, технология отображения векторного содержимого. SVG является отдельным текстовым форматом, созданным W3C и не жестко привязан к браузеру, как DOM. К тому же, уже ставший довольно популярным в использовании, например, в графических редакторах.

Web-Draw библиотеки

Использовать Native Canvas API достаточно сложно и программисту приходится писать свою реализацию сохранения состояний, работой со слоями и кэшированием. К счастью уже написано достаточно много разнообразных Web-Draw библиотек от сторонних разработчиков. Моими фаворитами являются три очень популярных фреймворка: kinetic.js, paper.js, crafty.js.

kinetic.js

Имеет большое комьюнити, наибольшую гибкость и его API очень похож на нативный Canvas. Kinetic уже содержит в себе всю необходимую абстрактную модель, которая включает примитивы, эффекты, анимации и трансформации. Большим плюсом является маленький вес библиотеки, который можно еще уменьшить, формируя собственную сборку. На февраль 2014 уже вышла пятая версия библиотеки и она, к слову, довольно стабильная.

paper.js

Более тяжелая библиотека, но и более мощная, по-сравнению с kinetic.js. Тоже использует Canvas, но за перерисовкой содержимого тут следит сам движок. Этот инструмент может подойти для тех, кто уже немного освоился с 2D графикой, но не хочет самостоятельно следить за перерисовкой сцены. Благодаря множеству подключаемых плагинов и поддержкой кривых, с paper можно создавать по-настоящему уникальные игры.

crafty.js

Crafty это полноценный инструмент для разработки мощных браузерных игр. Радует возможность из коробки обработкой звуков, простотой компоновки ресурсов и уровней, а также мощными средствами биндингами и киллер-фичей — возможностью выбирать DOM или Canvas. Crafty исповедует модель MVC для разработки. С выходом 0.6 версии движка, к сожалению утратилась некоторая обратная совместимость, поэтому для продакшена использовать этот движок следует с некоторой осторожностью. Отдельно про Crafty читай мой пост здесь.

Локальный веб-сервер

Запуск игры через файловую систему браузера не подходит по многим причинам. Самая важная причина — невозможность отправки ajax-запросов. Для этого и нужен локальный веб-сервер. Кроме того, игры разработанные на высокоуровневых движках, могут неправильно отображать содержимое если они запущены не через сервер. Сейчас в мейнстриме следующие локальные серверы: Nginx, Apach, Node, IIS.

Интегрированная среда разработки

Современная ИСР здорово автоматизирует работу, следит за ошибками и подсвечивает синтаксис.

WebStorm

Самая мощная ИСР для JavaScript. Есть внутренний контроль версий, поддержка Git, Mercurial, SVN и пр. Адекватная ценовая политика и частые релизы делают WebStorm одной из лучших программ в своем роде.

Brackets

Идея OpenSource проекта от Adobe удалась. Двухнедельные релизы для создания лучшей программы Front-End разработчика. Уже сейчас это бесплатная, открытая платформа, построенная на Node.js. Brackets включает в себя все необходимые инструменты для быстрой разработки: подсветка кода, быстрый запуск, автоматическое обновление данных в браузере и множество плагинов, которые я советую установить:

  • autoprefixer
  • brackats-code-folding
  • jshint
  • todo
  • Workspaces

Сборщик скриптов

Две мощные технологии GRUNT и AMD набирают силу. У обеих есть свои плюсы и минусы.

Grunt

Действительно мощная технология, требующая некоторой настройки на серверной стороне (о ней я расскажу потом).

AMD

Это клиентская технология для создания асинхронной модульной компоновки скриптов. Для этого модульного механизма есть два замечательных решения: browserify и require.js. Рекомендую внедрять AMD с самого начала разработки. Чем старше будет проект, тем больше зависимостей придется отслеживать.

Система контроля версий

Сейчас набирают силы именно децентрализованные системы контроля версий. Это Git или Mercurial под предводителями SaaS, такими как Github и Bitbucket. В пользу первого говорит большая распространенность и удобный клиент под Windows. В пользу второго — возможность бесплатно создавать частные репозитории.

Итог первой части

Разбор технологий сделан. И настал момент выбрать, что же использовать?

Canvas

Сейчас самый популярный инструмент для создания игр на HTML5. Его возможности создавать 2D игры уже впечатляют, а за горизонтом уже вырисовываются огромные перспективы 3D игр.

kinetic.js

Мощная библиотека, множество примеров, стабильность и малый вес делают её отличным средством для продакшен-решений.

Node.js

для Front-End разработчика лишним не будет. Вы можете установить его как с официального сайта, так и в качестве удобного решения всё-в-одном Winginx, который уже включает в себя популярные СУБД, например, MongoDB.

WebStorm или Brackets

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

require.js

Стабильная технология, низкий порог входа и широкая поддержка комьюнити.

GitHub

По совместительству социальная сеть и удобный клиент под Windows, с помощью которого можно перестать возиться с командной строкой.


В следующей части статьи настроим игровую логику.

Денис Сергеевич Басковский

Философ, изобретатель и поэт.

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
samsung smarttv
Предыдущая статья

История разработки игры под Smart TV

html5 game 2
Следующая статья

Создаем HTML5 игру. Часть 2: Игровая логика