Что такое html5 игры
Путеводитель по играм HTML5 без слёз
Перевод: Влад Мержевич
Итак, вы хотите сделать игру с помощью Canvas и HTML5? Следуйте этому руководству и окажетесь на пути в кратчайший срок. Руководство предполагает, что у вас, по меньшей мере, средний уровень знаний по JavaScript.
Вы можете вначале сыграть в игру или перейти непосредственно к статье и просматривать исходный код игры.
Создание холста
Чтобы начать рисовать, нам нужно создать холст. Поскольку это путеводитель без слёз, то будем использовать jQuery.
Для имитации плавного и непрерывного игрового процесса мы хотим обновлять игру и перерисовать экран быстрее, чем это воспринимает человеческий разум и глаз.
Пока мы можем оставить методы update и draw пустыми. Главное знаем, что setInterval() периодически их вызывает.
Здравствуй, мир
Совет. Не забудьте запустить ваше приложение после внесения изменений. Если что-то пойдёт не так, то гораздо проще отследить, когда есть всего несколько строк.
Это очень классно для стационарного текста, но поскольку у нас уже имеется цикличность игры, мы должны легко заставить двигаться текст.
Теперь, когда у вас есть некоторый движущийся по экрану текст, вы на полпути к реальной игре. Осталось добавить управление, улучшить геймплей, подправить графику. Ладно, может быть, 1/7 пути к реальной игре.
Создание игрока
Создаем объект для хранения данных игрока ответственный за вещи вроде рисования. Здесь мы создаём объект player с помощью простого литерального объекта для хранения всей информации.
Мы используем простой цветной прямоугольник для представления игрока в данный момент. Когда мы рисуем игру, то очищаем холст и рисуем игрока.
Управление клавишами
Использование jQuery Hotkeys
Плагин jQuery Hotkeys намного упрощает обработку клавиш в разных браузерах. Вместо того, чтобы плакать над кроссбраузерной расшифровкой кода клавиш keyCode и charCode, мы можем сделать привязку клавиш следующим образом.
Это большой выигрыш, что не нужно беспокоиться о деталях, какая клавиша какой код имеет. Мы просто имеем возможность сказать вроде «когда игрок нажимает стрелку вверх что-то сделать». jQuery Hotkeys делает это хорошо.
Движения игрока
В JavaScript обработка событий клавиатуры возложена на механизм событий. Это означает, что нет встроенного события для проверки какая клавиша нажата, так что нам придётся использовать собственное событие.
Вы можете спросить: «Почему бы просто не использовать механизм событий для обработки клавиш?». Да потому что величина опроса клавиатуры зависит от системы и не привязана ко времени цикла игры, так что геймплей меняется от системы к системе.
Хорошая новость в том, что я включил 16-строчный интерфейс на JavaScript, который делает доступным события запросов. Он называется key_status.js и вы можете запросить статус клавиши в любой момент проверив keydown.left и др.
Теперь, когда у нас есть возможность запросить нажатые клавиши, вы можете использовать этот простой метод update для перемещения игрока.
Идите и подвигайте его.
Вы можете заметить, что игрок может выйти за пределы экрана. Ограничим позицию игрока, чтобы держать его в рамках. Кроме того, игрок кажется медленным, так что заодно повысим ему скорость.
Добавление большего числа клавиш довольно легко, так что добавим каких-нибудь снарядов.
Добавляем больше игровых объектов
Снаряды
Теперь добавим снаряды для реальности. Вначале нужна коллекция для их хранения:
Далее нам нужен конструктор для создания экземпляра пули.
Когда игрок стреляет, мы должны создать экземпляр пули и добавить его в коллекцию пуль.
Финальный шаг отрисовывает пули.
Враги
Теперь пришло время добавить врагов тем же способом, каким мы добавили пули.
Загрузка и рисование изображений
Конечно круто наблюдать, как все эти коробки летают, но изображения для всего этого будут ещё лучше. Загрузка и отображение изображения на холсте, как правило, связано с печальным опытом. Во избежании этой боли и страданий мы можем использовать простой полезный класс.
Обнаружение столкновения
У нас есть все эти летающие штучки на экране, но они не взаимодействуют друг с другом. Чтобы каждый знал, когда надо взорваться, нужно добавить нечто для обнаружения столкновения.
Будем использовать простой прямоугольный алгоритм определения столкновений:
Есть несколько видов столкновений, которые надо проверить:
Теперь нужно добавить метод explode к игроку и врагам. Это будет флаг их для удаления и добавления взрыва.
Чтобы завершить опыт, добавим некоторые приятные звуковые эффекты. Звуки, подобно изображениям, могут вызвать боль при использовании в HTML5, но спасибо нашей магической бесслёзной формуле sound.js, звуки можно делать суперпросто.
Хотя API теперь без слёз, добавление звуков в настоящее время самый быстрый способ разрушить ваше приложение. Для звуков не редкость привести к зависанию или вылету вкладок браузера, так что готовьте ваши платочки.
На прощанье
Надеюсь, вам понравилось обучение основам создания простой игры в JavaScript и HTML5. При программировании на должном уровне абстракции мы можем оградить себя от наиболее сложных частей API, а также быть устойчивыми перед лицом будущих изменений.
Топ 10 HTML5 игр
В последние годы HTML5 и JavaScript активно набирают популярность среди разработчиков инди-игр. Причина такого выбора очевидна — потенциал двух приложений в производстве игр. HTML5 теперь считается серьезной игровой платформой. Дальше для примера приведены 10 топовых игр с использованием HTML5.
1. A Grain of Truth
Игра была разработана братьями Рудовски (Польша). Суть игры проста — юная путешественница в поисках мага. Это игра жанра «point-and-click» (квест) полна приключений, с очень красивой графикой полностью погружает геймеров в игровой мир. Игра написана с помощью JQuery, что в очередной раз показывает, что данный фреймворк можно использовать не только для создания сайтов, но и для развлечений.
Простая приключенческая игра, в которой Вы — спасатель. С помощью вертолета Вам нужно спасти выживших за определенный промежуток времени, подобрав их на борт вертолета. По истечению времени (если не все бедняги спасены), Ваш спасательный вертолет взорвется.
Игра была создана на открытом игровом движке Turbulenz на HTML5. Движек Turbulenz предоставляет широкий выбор функций и сервисов для создания игр (отказоустойчивость, асинхронная загрузка, масштабируемость). Вообщем — движок для создания игр, использующих веб-технологии, а не нативный код. Turbulenz — игровой движок для социальных игр, использующий HTML5, WebGL JavaScript. Его возможности позволяют делать захватывающие реалтайм 3D игры, с физикой.
Runfield — специфическое название, простой, но немного странной игры. Геймер примеряет роль гипер — прыгучей лисы. Кликаете — прыгаете, перепрыгиваете препятствия… словом играете). Игра была разработана Ilmari Heikkinen, графика создана с использованием canvas, одного из элементов HTML5.
Перереж веревку — накорми зверюшку-лягушку. Создана студией разработки игр в России, ZeptoLab в 2010 году. Головоломка, которая пришлась по душе многим геймерам со всего мира. Суть такова — лягушонка нужно накормить разноцветными конфетами на веревках, которые нужно «правильно» перерезать. Сюжет, правда, забавный. На каждом следующем уровне добавляется количество веревок, мыльные пузырьки, ракеты… собираются звездочки, открываются новые локации… что писать — лучше раз сыграть) (заняло некоторое время разобраться, где именно на сайте кнопочка «играть» — внизу «Give it a fry»)
5. Robots are People Too
Robots are People Too (роботы тоже люди?) игра на canvas/WebGL, многопользовательская игра (на любителя), разработана с использованием HTML5 canvas. Она отличается от остальных игр, сложная и одновременно с этим интересная, ведь нужно учиться играть двумя руками. Нужно управлять двумя роботами. Управление W-A-S-D для одного робота (синего) и стрелки (влево-вправо-вверх-вниз) для другого (красного) робота.
Многопользовательская RPG игра, BrowserQuest. Для создания графики игры использован тот же — HTML5 canvas. Так как игра создана на HTML5/JavaScript, то она доступна через большинство браузеров и платформ. Сюжет игры: молодой разведчик посещает разные опасные места в поисках приключений и острых ощущений. Использованы такие технологии как web worker (определяет API для создания фоновых скриптов в веб-приложениях при этом не блокируя сам процесс игры), localStorage (сохраняет историю игры).
Игра Sumon известна среди геймеров. Головоломка Sumon от ideateca, нативное приложение, которое также разработано с помощью веб-технологии HTML5. Более интересной ее делает использование фреймворка CocoonJS (компилит HTML5 приложения). Платформа Ludei уже была использована при разработке более 500 игр, эта игра не исключение). Графика Sumon создана с использованием HTML5 сanvas.
Игра — аркада, которая превратит Вас в пирата. Нужно ударить противника с пушки ядром, рассчитав угол и мощность. Графика игры были разработаны и созданы в Flash, а затем были перенесены на HTML5. К сожалению, игра запускается не во всех браузерах (заходить в Lux Ahoy нужно браузером Google Chrome).
Convergence — игра похожа на Robots are People Too. Одиночная игра, которая требует одновременно координировать двух героев. Для графики был использован HTML5 сanvas.
Это многопользовательская, в режиме реального времени игра. Используются веб сокеты.
Пишем HTML5-игру за 20 минут, или введение в Phaser framework
Эта статья посвящена разработке стильных, модных и молодежных HTML5 приложений с помощью нового фреймворка Phaser. В ней описан процесс установки библиотеки и создание классической игры Pong.
Введение
Установка библиотеки и локального веб-сервера
Итак, начнем. Для запуска и тестирования приложений нам необходимо установить локальный веб-сервер. Все примеры из комплекта библиотеки используют PHP, поэтому и сервер нужен соответствующий. Я использовал MAMP для MacOS, для Windows подойдет отечественный Denwer или любой другой аналог.
После установки веб-сервера необходимо скачать последнюю версию Фазера c GitHub: https://github.com/photonstorm/phaser. В данный момент (13 октября 2013 года) рекомендую качать dev ветку, так как эта версия содержит в себе ряд очень полезных изменений по сравнению с основной, в том числе и больший объем документации. Для тех, кто не использует GitHub, доступна прямая ссылка на архив: https://github.com/photonstorm/phaser/archive/dev.zip.
Чтобы убедиться, что все настроено правильно, можно запустить небольшое приложение-пример Hello Phaser. Создайте папку hellophaser в директории вашего веб-сервера, предназначенной для сайтов, и скопируйте туда три файла из папки Docs/Hello Phaser:
Запустите свой любимый браузер и откройте URL со скопированными файлами (в моем случае http://localhost:8888/hellophaser/). Если все хорошо, вы увидите вращающийся симпатичный логотип, такой как на скриншоте ниже:
Разработка игры
Подготовка необходимых файлов
Теперь можно приступать к разработке нашей первой игры. Создайте для нее папку phaser-pong на вашем веб-сервере и скопируйте туда файл phaser.js из папки build с исходниками фреймворка. Также создайте в ней папку assets, где мы будем хранить все ресурсы, относящиеся к игре, и файл index.html (собственно, здесь и будет наша игра).
Скопируйте в папку assets изображения шарика, ракетки и фона. Можно взять следующие файлы (в качестве фона я взял звездное небо из примеров Фазера), а можно нарисовать что-то свое. Главное — это убедиться, что вы загружаете в игру нужные картинки с корректными именами и подходящими размерами. Также не стоит выбирать слишком большие изображения, с их отрисовкой могут возникнуть проблемы. Поэтому перед использованием фотографии своего кота уменьшите ее до, скажем, 480х640 (разрешение нашей игры), и все будет хорошо. 
В результате содержимое папки phaser-pong будет таким:
А в папке assets будет три картинки:
Создание главного объекта игры, загрузка ресурсов
Наконец-то все подготовительные этапы выполнены, и начинается собственно разработка. Откройте index.html и вставьте туда следующий код:
Откройте в браузере адрес новой игры (у меня это http://localhost:8888/phaser-pong/) и вы увидите ее окно с нарисованным фоном
Игровые объекты
Сейчас перейдем к самому интересному — наполним нашу игру логикой. После объявления переменной game и перед функцией preload() объявим объекты с ракетками игрока и компьютера, мячиком, а также укажем скорости их движения:
Для создания ракеток напишем функцию createBet(x, y) :
Метод создает спрайт с указанными координатами и добавляет его в игру. Поле anchor отвечает за точку отсчета координат спрайта, устанавливаем его по центру изображения ракетки. body содержит в себе элементы для работы с физикой. Здесь мы ограничиваем движение ракетки пределами игрового пространства, задаем силу «отскока» и указываем, что при столкновении с объектами ракетка не будет отлетать в сторону.
Добавим два вызова этой функции в create(), сразу после создания фона. Ракетки будут добавлены в игру после фонового изображения, поэтому мы будем их видеть на экране:
Аналогичным образом создадим шарик, дописав следующий код сразу после вызовов функции createBet() в create() :
В результате увидим, что в нашей игре появились две ракетки и мячик, пока неподвижные:
Логика
Картинка получилась симпатичной, но думаю, стоит ее слегка оживить.
Добавляем переменную, отвечающую за состояние шарика и функцию, которая будет его запускать:
Функция проверяет, что шарик еще не запущен, и в таком случае задает ему скорость с помощью поля velocity.
Вызов функции повесим на нажатие кнопки мышки, написав следующую строку в create():
Теперь клик мышкой запускает шарик, и он отскакивает от границ игры. Добавим движения и ракеткам, отредактировав функцию update() :
Вся суть игры заключается в отбивании шарика ракетками, поэтому нужно организовать проверку столкновений шарика с ракетками. К счастью, в Фазере уже есть соответствующий функционал, поэтому нам достаточно его использовать.
Допишем следующие три строки в конец update() :
Метод collide проверяет столкновение двух объектов (первые два параметра) и вызывает указанную в третьем функцию для выполнения каких-либо действий над столкнувшимися спрайтами. Эта функция выглядит так:
При столкновении шарик меняет направление своего движения в зависимости от того, на какую часть ракетки попадает.
Осталось только добавить проверку на пропущенный гол. Если кто-то его пропустил, ставим шарик в изначальную позицию по центру поля.
checkGoal() вызывается постоянно, поэтому копируем ее в конец update() :
Все! Открываем браузер, наслаждаемся фантастическим и современным геймплеем нашей игры, радуемся жизни и свежеприобретенным навыками программирования.
Заключение
Естественно, игре не хватает еще многого, как минимум подсчета очков и определения победителей. Но мне кажется, что для введения в разработку с Phaser достаточно показанных вещей. Движок поддерживает много других классных функций, которые я собираюсь показать на примере новой игры, чуть более сложной и непосредственно относящейся к Хабру, чтобы было интереснее.
Стей тьюнед.
В ходе разработки я активно использовал код из примера breakout.php. Кроме этого примера, в папке с Фазером есть и другие игры, поэтому тем, кому не терпится использовать новый фреймворк, рекомендую в первую очередь посмотреть на содержимое папки examples.
Update от 20.10.2013: fessnecro добавил частицы при столкновении шарика с ракетками и новые уровни, за что ему спасибо. Эти изменения находятся в основном бренче. Оригинальная версия, описанная в статье, находится в ветке gh-pages.
Как перенести игру на HTML5: подводные камни, ошибки, нюансы
Всё больше разработчиков социальных игр переносят свои проекты с Flash на HTML5. Однако это не такой простой процесс, как кажется. Какие подводные камни могут всплыть при портировании? Какие ошибки рискует допустить разработчик? Можно ли отдать портирование на аутсорс? Разбираемся вместе с техническим специалистом Stark Games.
Для создания этого материала мы поговорили со старшим разработчиком Stark Games. В портфолио студии входит «Ёлочка», которая каждый год стабильно попадает в топ самых популярных игр в «Одноклассниках» и «ВКонтакте». Впервые компания перенесла свою игру на HTML5 в 2019 году, набив по пути ряд шишек. Мы попросили поделится опытом человека, напрямую ответственного за портирование.
Почему HTML5?
Компании в целом часто выбирают HTML5. Наш собеседник объясняет это низким порогом входа в платформу и доступностью библиотек и движков.
Нет необходимости покупать API, заключать контракты. В том же Unity надо платить при определённых оборотах. Также HTML5 работает на всех браузерах без всяких плагинов, не надо ничего ставить.
Аналогичный аргумент приводит Ольга Хоменко, сооснователь PlaytoMax, студии-разработчика игр на HTML5:
Главный плюс — универсальность. Платформа работает на ПК, смартфонах, планшетах, Smart-TV и так далее.
Другой фактор, сработавший в пользу HTML5, — смартфоны стали гораздо мощнее, а вокруг платформы появилось больше технологий, инструментов и гайдов. Если ещё 3–4 года назад бюджетные устройства не справлялись с игрой на HTML5, а начинающий разработчик с трудом находил ответы на свои вопросы, то теперь всё иначе.
Стало больше информации: например, кто-то столкнулся с проблемой, написал об этом на том же «Хабре» или Stack Overflow. Если ты джуниор, то нет проблемы писать на HTML5 что хочешь — просто что-то спрашиваешь, открываешь и делаешь. В целом, HTML5 позволяет сейчас делать то же, что и на флеше. Так что лучше оптимизировать HTML5-версию, чем тянуть флеш.
Поэтому HTML5 планомерно захватывает площадки, в том числе социальные сети. Например, недавно «Одноклассники» отчитались, что за первые пять месяцев 2020 года выплатили разработчикам HTML5-игр около 360 миллионов рублей. Это на 80% больше, чем за аналогичный период 2019-го.
Трудности при портировании игры на HTML5
Какие главные подводные камни ждут студию, которая решила перенести свою игру с Flash на HTML5? По словам эксперта, могут возникнуть три проблемы: необходимость переписать код, оптимизировать игру и разобраться с командой.
Сперва придётся разобраться с кодом.
Есть конвертеры, которые могут это сделать, но для этого код должен быть просто идеальный. За всю свою профессиональную деятельность я такого не встречал.
Оптимизация игры
Вторая проблема — вам надо будет подумать, как оптимизировать игру. Если просто перенести проект с Flash на HTML5, то есть вероятность, что он будет тормозить. Особенно на слабых телефонах.
В целом, «флеш» позволяет больше. Поэтому при портировании на HTML5 надо учитывать нюансы. Например, человек может открыть игру на iPhone 5, а этот аппарат не умеет грузить текстуры выше определённого разрешения. И если вы поставите текстуру больше этого размера, то она либо не загрузится, либо вообще что-нибудь упадёт. Если у вас громоздкий интерфейс — его надо облегчить. На мобильном нельзя уместить всё, что у вас есть на десктопе. Все эти рюшечки, красивости, дополнительные кнопки можно убрать. Также у нас работает lazy loading ресурсов. То есть игроку в первую очередь показывают главные сцены, наиболее важное. Остальное не грузится, пока он сам не нажмёт.
О важности оптимизации интерфейса рассказывает и Ольга Хоменко из PlaytoMax:
Всегда помните, что на смартфонах экраны маленькие и все ваши 400 кнопок вы не внесёте.
Не исключено, что ради оптимизации придётся лезть в код движка и править его под свои нужды.
Если будете рендерить на Pixi.JS, то там четвёртая версия значительно отличается от пятой. И я знаю команды, которые, работая с четвёртой версией, исправляли код этого движка, чтобы картинка нормально отображалась на слабых девайсах. Это особенно актуально для разработчиков игр, где есть элементы казино и так далее.
Оптимизация команды
Наконец, финальная проблема — если у вас игра на Flash, то и специалисты заточены под эту платформу. Они могут не знать, как работает HTML5. Поэтому надо думать, что делать с командой. В целом, есть два подхода: либо нанимать дополнительных людей, которые знают HTML5, либо портировать игру своими силами. В первом случае, как отмечает эксперт, стоимость и сроки разработки могут сильно вырасти, к тому же непонятно, что делать с работниками после портирования. Во втором случае специалисты могут попросту не справиться с задачей.
Наш собеседник из Stark Games пошёл по второму пути.
Команду можно не менять, если вы переходите на язык программирования TypeScript. Считаю, что хороший Flash-разработчик с ним справится. Просто надо познакомиться с языком, почитать о его особенностях и так далее. У меня это заняло примерно неделю — после этого я помог «перейти» остальной команде.
Также эксперт отметил, что если у вас достаточно сложная игра, то лучше прокачать текущую команду, чем брать нового человека и объяснять ему, как устроен ваш продукт.
Мы так и делали, потому что у нас на изучение технологии уходит неделя-другая, а на введение нового человека в проект — около месяца.
Какие ошибки можно допустить при портировании игры на HTML5?
Очевидно, что игры у всех разные. При их портировании могут всплыть любые нюансы. Всё зависит от используемого движка, библиотек и так далее. Поэтому не факт, что ошибки, допущенные нашим собеседником, выскочат у остальных разработчиков. Однако опыт Stark Games может пригодится коллегам по цеху.
В первую очередь — мы ошиблись с распределением ресурсов. Мы решили тянуть сразу две версии: HTML5 и Flash. Поскольку у нас не было специалиста по HTML5, нам показалось, что силами нескольких разработчиков мы всё сделаем. Реальность оказалась сложнее. В итоге мы справились, но с трудом. Когда запускали следующую «Ёлочку», то ограничились только HTML5-версией.
— рассказал старший разработчик Stark Games.
Вторая ошибка — эксперт признался, что не сразу подумал об упрощении интерфейса.
В мобильной версии 19-й «Ёлки» был сложный интерфейс, который значительно нагружал смартфоны и распылял внимание пользователя. Пришлось его оптимизировать: выкидывать лишние кнопки, оставшиеся укрупнять, вводить специальные всплывающие окна и так далее. По-хорошему, это надо было сделать сразу.
Наконец, несколько мелких промахов. Наш собеседник рассказал, что на старте одна из версий «Ёлок» отправляла от игроков сверхподробные логи.
От пользователей иногда шли логи по 500 Мб. Сервера у нас чуть прилегли, да и самим игрокам едва ли понравилось, что ушло столько трафика. К счастью, это было только во «ВКонтакте» — первый билд мы выкатываем именно туда, потому что в «Одноклассниках» у нас игроков в разы больше, перед ними ошибаться совсем не хочется. В целом, исправили косяк за пару дней.
Стоит ли отдавать портирование на HTML5 на аутсорс?
Получается, что портирование игры на HTML5 — не такое простое дело. Может, тогда лучше воспользоваться услугами сторонних команд? Например, есть компания IceStone, которая конвертирует Flash-игры на HTML5.
Как утверждает наш эксперт, есть свои плюсы и минусы обращения к таким командам. Из преимуществ он называет точные сроки и, конечно, тот факт, что вам не придётся заниматься портированием самому. Из недостатков — переход обойдётся дороже и надо будет тратить время на встречу со специалистами и заключение договоров. Наконец, студии могут просто не сразу взять ваш проект — вдруг у них в очереди уже десяток таких же.
Всё зависит от задач. Если у вас несколько простеньких Flash-игр, они приносят какую-то копеечку, но вы ими не занимаетесь — можно отдать на аутсорс. Если же вы хотите дальше их развивать, выпускать апдейты, то лучше портировать самому. Я как разработчик сам бы этим занимался.