Если вы только начали программировать и хотите написать мобильную и/или кроссплатформенную игру, беритесь за JS. Связка HTML+JavaScript работает везде. С фреймворками типа Electron на ней даже можно строить десктопные приложения.

Взгляните на 5 движков, с которым работа над игрой — в радость. Все они на момент написания статьи бесплатны и имеют открытый исходный код (open source). А еще — позволяют делать игры для Facebook. У каждого движка есть песочница, чтобы писать и тестировать код онлайн!

Для веб-разработчика создание HTML5-игры — повод ближе узнать Canvas и WebGL, поработать с 2D- и 3D-графикой в браузере. Это еще и урок оптимизации, ведь интерактивные красивости должны съедать как можно меньше памяти.

PixiJS

Эту библиотеку используют в качестве игрового движка, но на самом деле у нее более широкое применение. Она упрощает вывод интерактивной 2D-графики и анимации в любых приложениях на базе HTML5. Поэтому рекомендую веб-разработчикам присмотреться к Pixi.

Для рендеринга PixiJS может использовать как WebGL, так и стандартный Canvas. Но первый работает заметно быстрее, особенно когда нужно одновременно анимировать сотни и даже тысячи объектов. Скорость достигается за счет того, что WebGL — инструмент низкоуровневый. А значит без дополнительных фреймворков кодить для него трудоемко: нужно прописывать каждую мелочь в управлении текстурами и шейдерами. И здесь на сцену выходит PixiJS, который берет это на себя.

Тест производительности — разработчики назвали его Bunnymark. Вы можете сотнями добавлять на сцену шустрых разноцветных кроликов и следить, как меняется кадровая частота (FPS) — то есть как быстро идет рендеринг. На слабеньком нетбуке я получила частоту 29–30 кадров в секунду даже при безостановочном насыпании 25 000 кроликов на сцену. При этом анимация уже добавленных прыгунов быстро восстанавливалась до скорости 30 кадров секунду даже при наличии 75 000 мелких кролей на экране. На хорошей машине можно получить FPS на уровне 40–60+. Показатели зависят от видеокарты и браузера.

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

Доступность. В PixiJS есть функции, которые помогают адаптировать игру для людей с нарушениями зрения. Основа доступности — озвучивание экрана и поддержка клавиатурного управления наряду с «мышиным» и тактильным.

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

Исходники на Github.

Сообщество: живое и общительное — обитает в основном на форуме HTML5GameDevs, куда можно обращаться с вопросами.

Плюсы: Стабильно быстрый 2D-рендеринг даже на слабых машинах (при условии, что браузер поддерживает WebGL). Низкоуровневость — ниже только чистый JS, так что работа движка очень прозрачна. Кроссплатформенность, поддержка тачскрина. Удобная песочница, подробная документация на английском языке, понятный вводный курс для новичка. Движок хорош для создания небольших казуальных 2D-игр для мобильных устройств и ПК.

Минусы: в сравнении с движками, заточенными именно под игры, предлагает меньше инструментов «из коробки». Мало руководств на русском языке.

Phaser

Игровой движок для настольной и мобильной разработки на JS и TypeScript. Работает на основе PixiJS — использует его для визуализации сцен. Следовательно, опирается на тот же шустрый WebGL с возможностью отката на Canvas в устаревших браузерах.

Сейчас параллельно существуют две версии движка: Phaser 2 и Phaser 3. «Трешка» увидела свет 13 февраля 2018 года. По заявлению разработчиков, они полностью переписали движок, чтобы придать ему модульную структуру и сделать data-ориентированным. Знакомство с новой версией пока осложняется нехваткой документации и действующих примеров. Но работа в этом направлении идет полным ходом: уже есть базовое руководство, урок «Делаем первую игру на Phaser 3» и экспериментальная лаборатория примеров. Примеры пока с дисклеймером «Извините, может не работать». Поэтому когда люди сегодня говорят о Phaser, они обычно имеют в виду Phaser 2.

Песочница отличается фантастическим числом интерактивных примеров и заготовок — на момент написания статьи их 685! Это гораздо больше, чем у PixiJS и большинства других движков. Код можно быстро скачать в виде .zip- или .tar.gz-файлов или клонировать в GitHub. Также доступны такие фишки, как мобильный предпросмотр сцены и сменные темы оформления для редактора кода.

Игровая витрина с проектами пользователей — быстрый способ оценить возможности движка и вдохновиться на что-то свое. Можно отдельно вывести игры с пометкой STAFF PICK («Выбор команды [Phaser]»).

Исходники: на GitHub.

Сообщество: большое и активное. Для общения есть каналы в Slack и Discord, а также ветки по Phaser 2 и 3 на форуме HTML5GameDevs. Новости можно узнавать в Twitter и из еженедельной рассылки. На русском языке уроков и статей хоть и не море, но больше, чем о PixiJS. Например, на хабре есть любопытные статьи «Разработка браузерной онлайн-игры» и «Обучающая игра за неделю, или попытка таймкиллера по английскому».

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

Минусы: последняя версия — Phaser 3 — еще сырая. Плагины и утилиты к движку стоят в среднем 20$ и поддерживают только Phaser 2. У второй версии движка есть неочевидные настройки, которые трудно изменить — например, скорость движения объектов автоматически подстраивается под FPS (см. статью «История участия в Game Jam» на хабре).

Вебинар GB: «Создание игр на JavaScript с помощью Phaser».

Babylon.js

Для разработки браузерных 3D-игр этот фреймворк так же значим, как Pixi — для 2D. Работа с мешами, освещением, материалами, физикой, позиционным звуком — вот это все — продумано, задокументировано, снабжено интерактивными примерами. С Babylon можно делать игры для Android, iOS и десктопных браузеров. Наряду с JS поддерживается TypeScript.

Движок дружелюбен к новичкам, но без сюсюканья: вас не заманивают красивыми картинками. Первое, что радует глаз в разделе документации — интерактивный Get Started, который меняется в зависимости от выбора языка (JS/TS). Вы можете сходу оценить список возможностей и доступных расширений, поиграть с примерами, посмотреть видеоуроки — например, вводное занятие для начинающих (на английском с французским акцентом).

Для первого знакомства отлично подойдет пошаговый текстовый курс Babylon 101. Но это не для тех, кто хочет «мегаигру за 30 минут». Нужно быть готовым читать, вникать, экспериментировать.
У Babylon есть свой онлайн-редактор 3D-сцен, который подробно описан в разделе Resources (тег Editor). Там же вы узнаете, как подружить Babylon.js с Unity, Blender, Ionic Angular и ReactJS.

Песочница: у движка очень удобный редактор кода (Playground) с мгновенным предпросмотром и прослушиванием (если речь о звуке, в том числе позиционном). Здесь можно писать с нуля или редактировать код примеров и заготовок. Еще одна фишка песочницы — компонент Inspector для быстрой отладки кода.Также есть Sandbox — онлайн-просмотрщик 3D-сцен и моделей, куда можно перетаскивать файлы с жесткого диска.

Игровая витрина на главной странице движка содержит более 100 красочных сцен, игр и демонстраций.

Исходники: на GitHub.

Сообщество: активное — новые сообщения на форуме появляются каждый час. В Рунете по движку много уроков, статей и переводов. Пример с хабра: «Создание шейдеров на основе Babylon.js и WebGL: теория и примеры».

Плюсы: мощный, бурно развивающийся движок со множеством онлайн-инструментов, готовых рецептов и ресурсов. Среди расширений — 60 заготовок для создания эффектов (огня, травы, частиц, меха и других), генерации ландшафта, работы с GUI и прочего. Команда регулярно фиксит баги, найденные сообществом.

Минусы: требует времени на изучение, бывают ошибки при импорте 3D-моделей из Blender и Autodesk 3ds Max.

Egret Engine

Если вы хотите делать игры для Facebook, знайте, что Egret — в числе официально рекомендованных для этого движков. Китайский фреймворк позволяет создавать кроссплатформенные 2D-игры, которые адаптируются под размер экрана.

Лично мне нравится, что документация, инструкции по установке, примеры и справка по API доступны с одной страницы. Все это, включая комментарии в коде, добросовестно переведено на английский. НО! Языковой ступор настигает при запуске среды Egret Launcher — интерфейс на китайском. Спасают англоязычные руководства.

Параллельно с развитием 2D-движка готовится к релизу Egret Engine 3D. Пока оценить работу с трехмерной графикой можно только по приглашениям в режиме закрытого бета-теста. Из громких обещаний 3D-версии — плагин, конвертирующий заготовки из Unity 4 и 5 в сцены HTML5.

Песочница: простая и удобная — с ~50 примерами, предпросмотром на экране смартфона, возможностью быстро скачать свой код или сбросить изменения. Каждый пример также доступен по QR-коду.

Игровая витрина: около 20 разношерстных проектов, которые открываются по клику или QR, плюс еще десятка красочных мобильных игр — только по QR. Все на китайском, но казуалки интуитивно понятны (например, «Веселая Кухня»), чего не скажешь о карточной игре, комиксе-слайдере и сюрреалистическом непонятно-чем.

Исходники: на GitHub.

Сообщество: По сведениям разработчиков, 75% китайских игроделов, работающих с HTML5, используют Egret. Среда выполнения Egret-приложений за время существования движка была установлена более чем на 500 миллионах мобильных устройств. В Twitter и Facebook новости движка появляются минимум пару раз в месяц. На GitHub можно наблюдать жаркие дискуссии участников проекта — на китайском.

Плюсы: регулярные обновления, совместимость с инструментами Egret (визуальным редактором кода Egret Wing, анимационной платформой DragonBones, менеджером игровых ресурсов ResDepot и другими). Есть архив старых версий движка с описанием изменений на английском.

Минусы: интерфейс лаунчера и игр-примеров — на китайском. Лаунчер для Windows работает только с 64-битными системами. Заготовки в песочнице — очень простенькие, пока нет поддержки 3D. Документация или подробное описание на русском отсутствуют — единственная статья вышла на хабре в 2015 году.

LayaAir

Еще один перспективный китайский движок с амбициозной задумкой. Позволяет создавать 2D-, 3D-, AR- и VR-игры для Android, iOS, ПК и даже консолей! Да, приложения виртуальной реальности на JS — это неплохо придумано. Кстати, для этого движка можно еще писать на TypeScript и ActionScript.

Фишка в том, что вы пишете код один раз и можете получить результат в виде HTML5, Flash или мобильного приложения. Движок умеет работать с векторной графикой, растровыми шрифтами, скелетной анимацией, частицами, физикой. Еще он совместим с упомянутой выше системой анимации DragonBones. Есть свои средства работы со звуком — на основе OpenAL и HTML5 Audio.

LayaAir использует свой формат 3D-моделей (.lm). На сайте разработчика есть плагин для конвертации игровых объектов Unity3D в .lm-файлы. Об устройстве и настройке 3D-сцены в LayaAir читайте здесь, а о переносе сцен из Unity — тут.

У LayaAir своя IDE со встроенными редакторами кода, UI, сцен, покадровой анимации, частиц. Также в LayaAirIDE есть средства для упаковки игры во Flash или нативное приложение. Минус в том, что часть пунктов интерфейса в среде разработки не переведена. Контекстные меню, некоторые подсказки и названия закладок автоматически переводятся на русский или другой основной язык вашей системы. Сообщения и предупреждения в отладочной консоли — на английском. В итоге получаем такую картинку:

Если вы изначально пишете для мобильных устройств, скачайте набор LayaNative SDK, где есть средства тестирования и пересборки HTML5 для запуска на планшетах и смартфонах.

Есть документация и справка по API на английском. От сайта впечатления неоднозначные — многое переведено, но не сразу находится. Совет: если перевода нет на сайте, ищите его на GitHub — и наоборот. Критически важные разделы, в том числе страница загрузки движка — переведены полностью.

Песочница — более сотни примеров (в основном простеньких). Можно редактировать код «на лету». Интерфейс большей частью переведен на английский, а вот комментарии в коде остались на китайском.

Игровая витрина —  в Википедии пишут, что на движке сделана минимум сотня игр. На сайте представлено около 30 мобильных игр в 2D и 3D. К сожалению (для меня), все они на китайском языке и доступны после регистрации в игровой секции одного очень популярного китайского портала. Но есть и хорошие новости. Для оценки производительности в вашем браузере — смотрите демо в 2D, 3D и VR. Также можно заценить простенький шмап.

Сообщество: китайские товарищи общаются на форуме, который работает по принципу «Вопрос–ответ» и более-менее переводится Гугляндексом.

Исходники: на GitHub. Обратите внимание, что свободен только движок LayaAir, а весь фреймворк LayaBox с тонной дополнительных инструментов и примочек имеет лицензию Freeware.

Плюсы: поддержка 3D, виртуальной и дополненной реальности. Возможность создавать нативные приложения. Совместимость с Unity. Набор бесплатных дополнительных инструментов. Движок активно развивается.

Минусы: IDE на китайском (но есть англоязычная справка по настройке), сайт переведен частично и сыроват. Иногда посреди английского мануала тебя направляют в китайскую секцию сайта, хотя есть переведенная. Раздел Developers Community на момент написания статьи не работал. Материалов для новичков маловато: платные онлайн-курсы на китайском не в счет. На русском пока вообще ничего нет.

Что еще почитать/посмотреть о создании игр на JS

Вебинар «Разработка 2D-realtime игры на JavaScript» — работа на чистом JS — без фреймворков.

Вебинар «Пишем HTML5-арканоид на чистом JavaScript и Canvas» — создание игры с нуля за 2 часа.

Статья «6 интересных багов, с которыми я столкнулся, пока делал игру для „ВКонтакте”» — что бывает, когда отказался от PixiJS для рендеринга.

Вебинар «Основы работы с Immutable.js» — как JS-библиотека для работы с иммутабельными данными помогает делать игры.

Вебинар «Разработка без бюджета: что нужно знать, чтобы не потратить год жизни впустую».

Статья «Создаем игру для самых маленьких на Phaser в Intel XDK» — подробно описывает первые шаги в работе с движком, дает советы, где брать ресурсы.

Статья «Трехмерная графика в вебе» — о WebGL и библиотеках для работы с ним.

Вебинар «Как придумать популярную игру?» — не только на JS.

Статья «Многопользовательский онлайн-шутер на WebGL и asyncio» — клиентская часть на BabylonJS, серверная — на Python.

Знакомьтесь, это Анатолий. Родился в Беларуси, переехал в Москву, закончил курсы в GeekBrains. Прошел путь от системного администратора до верстальщика и разработчика JavaScript. Мы поговорили с Анатолием о том, как строить карьеру, что читать перед собеседованием и куда бежать, если таск уже стоит, а ты не знаешь, что делать.

Карьера в IT: от админа до JS-разработчика

Все началось с колледжа в Беларуси, где я изучал языки С и Delphi. В разработку сайтов мы глубоко не погружались — да и сам я на тот момент не рассматривал эту сферу как свое будущее.

Мой путь в IT начался с верстки. Тогда я переехал в Москву и работал системным администратором в «ЖКО «Город». Однажды компании понадобилось, чтобы я сделал сайт — так я попал на курсы GeekBrains, после окончания которых разработал свой первый веб-сайт на Wordpress — jkogorod.ru.

Цель обучения была для меня совершенно конкретной — освоить необходимые навыки, чтобы сделать сайт для своего работодателя. Я прошел курсы по JavaScript, HTML и CSS — от них и стал отталкиваться, занимаясь версткой. Продолжил изучать JS уже самостоятельно. Обучаясь веб-разработке, в GeekBrains можно освоить PHP, Node, JavaScript, верстку... По выбранному направлению получаешь все необходимые знания в рамках одной учебной программы.

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

«Верстка хороша, когда ты только входишь в мир фронтенда»

В «ЖКО «Город» я проработал год и понял, что хочу заниматься веб-разработкой более серьёзно. Стал искать работу: ходил на собеседования, читал профессиональную литературу, стараясь «прокачать» свои навыки. Устроился в «Модульбанк»: на тот момент у меня не было портфолио как такового, но были знания и желание развиваться.

«За три месяца испытательного срока освоил многое»

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

Мне пришлось взять на себя его обязанности и быстро учиться: читал книги и статьи, смотрел вебинары. Много полезного можно найти на Habrahabr или в блоге GeekBrains, где каждую неделю выходит дайджест новостей о новейших технологиях. За три месяца испытательного срока я освоил многое. В итоге мы переписали сайт с asp.net и Angular на Keystone.js — это библиотека на express.js c готовым роутингом (сайт работал по принципу конструктора).

«Портфолио сыграло большую роль в трудоустройстве»

После года в «Модульбанке» я понял, что уже научился быстро верстать, а чтобы развиваться, нужно поработать в других компаниях. Верстка поднадоела, хотелось углубиться в разработку. Особенно интересовал язык Javascript. В течение трех месяцев я был фрилансером: сначала в «МКБ», потом в Boomstarter, где более плотно познакомился с JavaScript и React.js. Так я нарабатывал портфолио, которое сыграло большую роль в дальнейшем трудоустройстве. По крайней мере, больше мне не приходилось делать тестовых заданий.

Устроился в группу компаний «ПИК» frontend-разработчиком. Работодатель оценил мой бэкграунд: опыт разработки на JavaScript, навыки работы с React и Redux.

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

Собеседование в «ПИК» было четвертым — после трех неудачных. Эта закономерность прослеживается на протяжении всего моего карьерного пути: стоит пройти два-три неудачных интервью, чтобы четвертое оказалось на 100% успешным.

В «ПИК» я работал в команде, где было по четверо fronfend- и backend-разработчиков. Мы создавали личный кабинет и основной сайт компании. Здесь я погрузился в разработку и получил удовольствие от работы. Но по завершении основной части проекта понял, что впереди ждут однотипные задачи.

«За три года опыта вырос не только мой профессионализм, но и доход»

Перешел в молодую перспективную компанию — биржу криптовалют, где и работаю по сей день. Пополнившееся портфолио снова выручило при приёме на работу. На собеседовании задавали стандартные вопросы по JavaScript, которые не показались мне сложными. В очередной раз убедился, что самообразование всегда идет на пользу. Бывает и так: листаешь книгу по дороге на собеседование — и через полчаса интервьюер спрашивает именно по прочитанным темам! Могу посоветовать несколько пособий, которые пригодились мне:

• Джон Дакетт «Javascript и Jquery». Подойдет тем, кто лучше воспринимает информацию в графическом виде: в книге много подробных иллюстраций и наглядных схем;
• Этан Браун «Изучаем JavaScript». Хорошая книга с описанием стандартов ES6;
• Николас Закас «ECMAScript 6 для разработчиков»;
• Серия книг Кайла Симпсона «Вы не знаете JS»;
• Луис Атенсио «Функциональное программирование на JavaScript».

Сейчас мы разрабатываем веб-приложение: я делаю клиентскую часть на React JS и Redux, а ядро биржи — на C#. Познакомился с новыми технологиями и сегодня больше занимаюсь разработкой на JavaScript, чем версткой, — к чему и стремился все это время.

За три года опыта вырос не только мой профессионализм, но и доход: зарплата увеличилась с 60 до 140 тысяч рублей. В перспективе хочу стать fullstack-разработчиком, чтобы самостоятельно писать и серверную, и клиентскую части.

Верстка или JavaScript?

Как человек, который попробовал и верстку, и разработку, могу сказать: верстка хороша, когда ты только входишь в мир фронтенда. Со временем для меня это стало рутиной, захотелось писать логику на JS.

Считаю, что для разработчика больше перспектив открывается именно в IT-компаниях, где работа программистов структурирована лучше, чем на предприятиях из других сфер. Наиболее универсальным языком считаю JavaScript, ведь на нем можно писать и фронтенд, и серверную часть.

Советы начинающим

• Старайтесь постоянно расти и развиваться, осваивать новые направления. Не бойтесь менять работу, если понимаете, что стало скучно или надоели однотипные задачи. За три года я сменил три места работы: понимал, что надо двигаться вперед, приобретать новый опыт.
• Набивайте руку — cо временем придет и скорость. Раньше на разработку веб-ресурса у меня уходила неделя, сегодня могу сделать адаптивный сайт за день–два. Конечно, все зависит от конкретных задач. Но чтобы их решить, нужно постоянно развиваться самому. Не забывайте и про soft skills: особенно пригодится английский язык. Еще советую дружить с дизайнерами: им постоянно нужны люди, готовые заняться версткой.
• Нарабатывайте портфолио — это крайне важно в начале карьеры. Для этих целей подойдет фриланс, где зачастую работает принцип «сарафанного радио». Работайте с максимальной отдачей – и труды не пропадут зря.
• Правильно оценивайте время и трудозатраты. Заказчик частенько просит вносить правки. В итоге вы делаете гораздо больше работы, чем было оговорено на начальном этапе. Поэтому все нюансы лучше фиксировать заранее.

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