Как использовать html5 в игровом браузере

Обновлено: 21.11.2024

itch.io поддерживает загрузку HTML-игр в дополнение к загружаемым играм Flash, Unity и Java. Чтобы начать, просто перейдите на страницу «Новая игра» или «Редактировать игру» и выберите «HTML-игра» в списке Вид игры.

Начало работы

itch.io поддерживает игры HTML5, встраивая iframe, указывающий на вашу игру, на собственной игровой странице itch.io. Все активы вашей игры размещены у нас, поэтому вам не нужно беспокоиться о загрузке игры где-либо еще. Все, что вам нужно сделать, это предоставить размеры вашей игры вместе с файлами игры. Есть два способа загрузить игру HTML5:

Загрузите ZIP-файл, содержащий все файлы игр, включая файл index.html, который будет точкой входа в игру.
Загрузите один HTML-файл, содержащий всю вашу игру.

ZIP-файл

Мы рекомендуем загружать ZIP-файл, если ваша игра состоит из множества разных файлов.

ZIP-файл должен содержать файл с именем index.html . Это то, что люди увидят, когда будут играть в вашу игру. ZIP-файл должен содержать все файлы, необходимые для запуска вашей игры. Имена файлов чувствительны к регистру.

Ваш ZIP-файл может содержать любой файл, необходимый для вашей игры. Обязательно используйте относительные пути при разработке игры, чтобы обеспечить правильную загрузку ресурсов. Если вы допустили ошибку или выпустили новую версию игры, загрузите новый ZIP-файл и удалите старый.

HTML-файл

Для небольших игр вы также можете напрямую загрузить файл .html.

Вся игра должна быть в одном файле HTML. Ваша игра не сможет ссылаться на какие-либо другие файлы, которые вы загрузили на странице редактирования проекта itch.io. Если вам нужно несколько файлов, мы рекомендуем вместо этого загрузить ZIP-файл.

Просмотр вашей игры

После настройки размеров игры и загрузки ZIP-файла вы можете предварительно просмотреть игру на itch.io. При первой загрузке страницы игры itch.io потребуется некоторое время для обработки архива.

Тем временем вы можете настроить страницу своей игры так же, как и любую другую игру на itch.io.

Могу ли я принимать платежи с помощью игры HTML5?

В настоящее время все игры HTML5 на itch.io настроены только на прием платежей в качестве пожертвований. Однако вы можете продать доступ к своей игре, установив для параметра Вид игры значение Загружаемый. Если вы хотите, чтобы itch.io поддерживала приобретаемые игры HTML5, свяжитесь с нами.

Требования к ZIP-файлу

Есть несколько требований к ZIP-файлам, чтобы предотвратить злоупотребление и обеспечить удобную работу для людей, запускающих ваш проект в своем браузере:

ZIP-файл не должен содержать более 1000 отдельных файлов после извлечения.
Максимальная длина имени файла, включая путь, не должна превышать 240 символов.
Размер всего извлеченного контента не должен превышать 500 МБ.
Размер любого извлеченного файла не должен превышать 200 МБ.
Имена файлов чувствительны к регистру и должны быть закодированы как UTF-8

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

Почему у нас есть ограничения? Хотя многие игровые движки позволяют вам экспортировать что угодно в качестве проекта HTML5, часто вам нужно учитывать, каким будет взаимодействие пользователя с игрой. Вы можете думать о проекте HTML5 как о веб-сайте: многие из тех же рекомендаций по оптимизации производительности все еще применимы. У нас есть эти ограничения по умолчанию, чтобы побудить разработчиков задуматься о том, как распространяются их игры, тем более, что в наши дни так легко добавлять сборные ресурсы из магазинов ресурсов, которые значительно увеличивают размер загружаемой игры.

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

Настройка встроенной игры

На странице редактирования вашего проекта вы можете настроить способ встраивания вашей HTML5-игры на страницу itch.io.

Воспроизведение по клику. По умолчанию для запуска вашего проекта требуется щелчок. Это гарантирует, что ваша игра не замедлит работу браузера зрителя при первоначальной загрузке страницы itch.io. Если у вас небольшой проект, вы можете отключить Нажмите для воспроизведения, и ваш проект запустится при загрузке страницы. Имейте в виду, что при использовании автозапуска в некоторых браузерах звук может быть отключен.
Кнопка полноэкранного режима. Мы можем автоматически создать полноэкранную кнопку для вашего проекта, если используемая вами система не предоставляет ее автоматически.
Размеры области просмотра. У вас есть несколько вариантов настройки размера области просмотра.Самый простой способ — указать размеры вручную. Для некоторых игровых движков мы поддерживаем автоматическое определение размеров. Если вы хотите, чтобы ваша игра всегда занимала максимальный размер экрана, вы можете использовать Нажмите для запуска в полноэкранном режиме.
Полосы прокрутки. Некоторые проекты спроектированы таким образом, чтобы они превышали размер окна просмотра. Включение полос прокрутки позволит зрителям прокручивать внутри iframe. По умолчанию они скрыты.

Визуальная настройка

Для проектов, использующих Click to play, вы можете настроить внешний вид области просмотра перед запуском игры. Вы можете найти эти параметры в редакторе темы проекта.

Фоновое изображение — изображение, занимающее размер области просмотра, расположенной за кнопкой Воспроизвести.
Градиент. Цвет градиента может быть наложен на область просмотра, чтобы помочь вам соответствовать цветовой схеме вашей страницы.

Поддержка мобильных игр HTML5

Многие игровые движки HTML5 поддерживают игры через мобильный веб-браузер. Если вы знаете, что ваш проект работает в мобильном браузере, вы можете выбрать опцию Mobile Friendly в настройках встраивания для вашего проекта.

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

Если вы не включили Mobile Friendly, зрители увидят предупреждение о том, что игра может не работать, но они все равно могут попытаться ее запустить.

Обнаружение игрового движка

Когда вы загружаете свою игру HTML5, мы автоматически сканируем файлы, чтобы определить используемый игровой движок. Это поможет разместить ваш проект на наших страницах обзора. Вот несколько примеров игр HTML5, использующих определенные движки.

Если вы считаете, что нам не хватает движка, вы можете предложить новый.

Распространенные ошибки

Вот некоторые распространенные проблемы, с которыми сталкиваются люди при загрузке своего проекта. Если вы собираетесь что-то загрузить или у вас возникла проблема, сначала прочитайте список.

Экспорт игры для itch.io

При экспорте игры для itch.io мы рекомендуем использовать шаблон или разметку, которые позволяют холсту вашей игры подстраиваться под размер окна, в котором находится окно. При использовании полноэкранной кнопки размер окна просмотра будет динамически подстраиваться под размер окна. размер экрана зрителя. Кроме того, при запуске игры HTML5 на мобильном устройстве область просмотра будет иметь динамическое соотношение сторон и разрешение, соответствующие устройству пользователя.

Вот некоторые рекомендуемые ресурсы:

Если у вас есть другие рекомендуемые ресурсы или советы по настройке, отправьте их в службу поддержки.

Сжатие

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

Если содержимое файла определяется как сжатое с помощью gzip, заголовок кодирования содержимого в gzip . Заголовок типа содержимого файла будет обнаружен и установлен расширением, при необходимости удалив .gz.
Если имя файла заканчивается расширением .br, мы предполагаем, что содержимое сжато Brotli, а для кодировки содержимого будет задано значение br . Затем заголовок файла Content-Type будет обнаружен и установлен расширением после удаления .br . (Примечание: кодировка Brotli не может быть обнаружена, как gzip, поэтому мы должны зависеть от расширения .br). Этот подход обычно используется при экспорте Unity 2020 WebGL.

Типы сжатых файлов

Чтобы сократить пропускную способность и сократить время загрузки, CDN itch.io будет автоматически применять сжатие GZIP к следующим типам файлов, если они предоставляются без сжатия.

Если мы не можем сопоставить по расширению, если мы видим в файле следующий тип содержимого, мы также попытаемся сжать его:

Существует множество способов создания игр на HTML5, а также довольно много материалов по техническим аспектам каждого из них, поэтому в этой статье я предоставлю более широкий обзор разработки игр на HTML5. Чем «HTML5» может быть лучше нативного, с чего начать процесс разработки, куда идти, если вы застряли, и как монетизировать и распространять игры.

Большая часть аудитории уже видит ценность HTML5, но я хочу повторить, почему вам следует создавать игру HTML5. Если вы просто ориентируетесь на iOS для своей игры, напишите игру на Objective-C, минусы перевешивают преимущества в этом сценарии… но если вы хотите создать игру, которая работает на множестве платформ, HTML5 — это то, что нужно.

Кроссплатформенность

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

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

Уникальное распространение

Большинство игр HTML5, которые были разработаны на данный момент, построены так же, как Flash и нативные мобильные игры. В какой-то степени это имеет смысл, но что упускается из виду, так это реальные преимущества Интернета как платформы. Это похоже на то, как если бы разработчик iOS создал игру, в которой не используются преимущества сенсорного экрана и мыши, или если бы в Doodle Jump использовались клавиши со стрелками в нижней части экрана, а не акселератор устройства.

Очень легко впасть в мысль делать то, что работало в прошлом, но это душит инновации. Это ловушка, в которую я попал — пытаясь на 100% подражать тому, что было успешным на iOS, Android и Flash — и только в чате с бывшим сотрудником Mozillian Робом Хоуксом я полностью это осознал. В то время как подражание тому, что работало в прошлом, в определенной степени необходимо, Open Web — это другой инструмент для игр, и инновации могут происходить только тогда, когда вы рискуете и пробуете что-то новое.

Распространение HTML5-игр часто считается недостатком, но это только потому, что мы рассматривали его в том же смысле, что и нативные мобильные игры, где рынок — единственный способ найти игры. С играми HTML5 у вас есть невероятно мощная гиперссылка. Ссылки можно так легко распространять через Интернет и мобильные устройства (подумайте, сколько ссылок вы нажимаете в приложениях Facebook и Twitter), и это, конечно, не должно ограничиваться только главной страницей игры. Эта технология предназначена для того, чтобы иметь возможность подключиться к вашей игре и делать более интересные вещи, например, переходить к определенному моменту в игре, пытаться побить счет друга или играть в реальном времени против этого друга — используйте это в своих интересах!< /p>

Внимательно посмотрите на то, как работает вирусность веб-сайтов, и примените те же принципы к своим играм.

Ускоренный процесс разработки

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

Игровые движки — это еще один уровень абстракции, который решает несколько наиболее утомительных задач разработки игр. Большинство заботится о загрузке ресурсов, вводе, физике, звуке, картах спрайтов и анимации, но они сильно различаются. Некоторые движки довольно просты, а некоторые (например, ImpactJS) доходят до того, что включают редактор 2D-уровней и инструменты отладки.

Решите, нужен ли вам игровой движок

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

Простые игры действительно несложно создать с нуля (при условии, что у вас есть опыт работы с JavaScript и вы понимаете, как работают игры). Например, Slime Volley (источник) был создан без игрового движка, и ни один из компонентов не был ракетостроением. Конечно, Slime Volley — очень простая игра, создание RPG с нуля, скорее всего, приведет к еще большему надрачиванию волос.

Выбор между «движком игры» и «разработчиком игр»

Большая часть типичной аудитории Mozilla Hacks, вероятно, склонится к использованию игрового движка или созданию с нуля, но есть также альтернатива использованию «Game Maker», такого как Construct 2. Использование Game Maker означает, что вы выиграли на самом деле не писать на JavaScript; вместо этого вы создаете кодоподобные события в редакторе. Это компромисс между простотой использования и быстротой прототипирования/разработки по сравнению с настройкой и контролем над конечным результатом. Я видел несколько очень впечатляющих игр, созданных с помощью любого из них, но как разработчик я предпочитаю писать с нуля или использовать движок.

Поиск подходящего игрового движка/разработчика игр

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

Чтобы получить более полный список движков (это означает, что может быть какой-то мусор, который нужно просеять), вам лучше всего подойдет этот список на GitHub.

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

Технические руководства

содержит множество ссылок на технические руководства и ресурсы. — похож на jsGameWiki, но немного легче усваивается. за разработку игры для мобильных устройств. относительно старый (2,5 года), но по-прежнему является очень хорошим инструментом обучения, если вы не используете игровой движок.

Учебники по дизайну игр

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

Удержание пользователей, монетизация и многое другое

Сделать игру функциональной — это лишь часть уравнения. Вы также хотите, чтобы игроки играли дольше, возвращались, рассказывали об этом своим друзьям и, возможно, даже что-то покупали. Общими элементами в играх, ориентированных на эти области, являются такие функции, как учетные записи пользователей, рекорды, достижения, социальная интеграция и внутриигровые платежи. На первый взгляд, большинство из них обычно достаточно просты в реализации, но часто упускается из виду множество межплатформенных проблем и сложностей. Также полезно иметь центральную службу, которая запускает их во многих играх — например, игроки действительно заботятся о достижениях в Xbox Live, потому что им важен Gamescore.

- учетные записи пользователей, рекорды, достижения, внутриигровые платежи, аналитика, раздача и многое другое. – аналогично предыдущему.

Инструменты разработки

– Монитор производительности JavaScript. Отображает частоту кадров и производительность с течением времени. – связь клиент-сервер в реальном времени (если вы собираетесь иметь бэкэнд для своей игры). - Механизм рендеринга холста и WebGL. – Улучшена производительность игр HTML5 на iOS и Android за счет ускоренного холста, привязанного к OpenGL ES.

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

js13kGames

js13kGames — это соревнование, которое проводилось на момент написания этой статьи. У вас есть время до 13 сентября 2013 года на разработку HTML5-игры, размер которой в сжатом виде не превышает 13 КБ.

Игра Mozilla включена

Каждый год с декабря по февраль компания Mozilla проводит соревнование по играм с фантастическими призами. В прошлом году это была полностью оплаченная красная дорожка в Сан-Франциско на GDC 2013.

Clay.io «Есть игра?»

Clay.io (полное раскрытие информации, я основатель) проводит ежегодный конкурс разработчиков игр HTML5 для студентов. Прошлый год был первым, и мы представили более 70 игр. Следующий конкурс запланирован на февраль/март 2014 года.

Лудум Дэйр

Ludum Dare не предназначена для материальных призов и не предназначена для игр HTML5, но в ней участвует множество разработчиков HTML5.

Одна игра в месяц

Одна игра в месяц — это не столько соревнование, сколько инструмент ответственности. Это не ограничивается играми HTML5, но многие участники работают с HTML5. Цель — выпускать по одной игре в месяц. Я бы не рекомендовал это в долгосрочной перспективе, так как одного месяца слишком мало для создания великолепной игры, но это хорошо, когда вы учитесь заставлять себя разрабатывать и заканчивать простые игры.

HTML5GameDevs быстро стало самым активным сообществом разработчиков игр HTML5. Большинство людей очень дружелюбны и готовы помочь с любыми проблемами, с которыми вы столкнетесь.

Внутриигровые покупки

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

Лицензирование

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

Существует бесчисленное множество "Порталов Flash-игр", которые получают органический мобильный трафик, но не могут монетизировать его с помощью Flash-игр, которые у них есть. Их решение состоит в том, чтобы пойти и найти HTML5-игры, чтобы купить неисключительные лицензии (право размещать игру на своем сайте, часто с небольшими изменениями), чтобы предложить их мобильным посетителям.

Обычно неэксклюзивные лицензии на игры HTML5 (что означает, что вы можете продавать их более чем одному сайту) стоят от 500 до 1000 долларов США в зависимости от игры и издателя. Некоторые издатели вместо этого используют модель распределения доходов, при которой вы получаете долю в размере 40–50 % от любого дохода от рекламы, но без предоплаты.

Лицензирование — это самый безопасный способ заработать деньги прямо сейчас, но предел ограничен: максимальная сумма, которую вы собираетесь заработать на одной игре, находится в диапазоне от 5000 до 6000 долларов, но достичь этой отметки легче, чем с внутриигровыми платежами или рекламой.

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

Обычно используемые рекламные сети – это LeadBolt для мобильных устройств и CPMStar для компьютеров. Вы также можете использовать Clay.io, который немного упрощает размещение рекламы и пытается максимизировать доход за счет использования различных рекламных сетей в зависимости от используемого устройства и других факторов.

Заключительный этап разработки игры — распространение. Игра готова, теперь вы хотите, чтобы люди играли в нее! К счастью, в HTML5 есть множество мест для вашей игры (многие из которых часто остаются неиспользованными).

В наши дни все больше и больше торговых площадок принимают игры HTML5 как есть. Каждый из них имеет свои собственные требования (Facebook требует SSL, большинству требуется файл манифеста в другом формате и т. д.), но время, необходимое для изучения каждого из них, обычно составляет менее 30 минут. Если вы хотите уменьшить это еще больше, Clay.io поможет автоматически сгенерировать файлы манифеста и рекламные изображения, которые вам понадобятся (а также позаботится о требовании SSL) — документация по этому вопросу здесь.

Некоторым торговым площадкам вам потребуется собственная оболочка для вашей игры, в первую очередь iOS App Store и Google Play. Обертка, такая как PhoneGap, является одним из вариантов, но собственные веб-просмотры имеют довольно ужасные движки JavaScript, поэтому на данный момент вам лучше использовать такие инструменты, как CocoonJS и Ejecta.

Теперь вы должны пойти дальше и создать великолепную инновационную веб-игру. Я с нетерпением жду, что появится на горизонте в ближайшие месяцы и годы!

Об Остине Хэллоке

Остин Хэллок – генеральный директор компании Clay.io, поставщика высокоуровневых инструментов и дистрибутивов для разработчиков игр HTML5.

О Роберте Наймане [почетном редакторе]

Спасибо! Пожалуйста, проверьте свой почтовый ящик, чтобы подтвердить подписку.

Если вы ранее не подтверждали подписку на информационный бюллетень, связанный с Mozilla, возможно, вам придется это сделать. Пожалуйста, проверьте папку "Входящие" или спам-фильтр на наличие писем от нас.

18 комментариев

Я определенно рекомендую Node-Webkit для случаев использования, когда вам нужны загружаемые исполняемые файлы. Обычно это «просто работает» :)

Как вам удалось создать загружаемый исполняемый файл с помощью Node-Webkit?

Я думал, что у меня есть курс Udacity в разделе "Средства обучения", но, похоже, я случайно его пропустил.

На самом деле я пытался связаться с Goo, чтобы узнать, что связь с Остином, штат Техас, есть (указана в профиле Твиттера), но ничего не ответила. Написать мне письмо? austin@clay.io

Вовсе нет, даже наоборот. игры живы и здоровы, тем более, что WebGL получает все больше и больше поддержки, а поставщики браузеров продолжают улучшать свои движки JavaScript.

«подумайте, сколько ссылок вы нажимаете в приложениях Facebook и Twitter»… мммм, никогда!

Думаю, у меня не должно быть таких нагруженных предложений ;) Дело в том, что многие люди нажимают ссылки на Facebook и Twitter.

Планирует ли Mozilla разрешить нам выбирать тип эмулируемого процессора и объем оперативной памяти в симуляторе FFOS?

Это интересный вопрос. Прямо сейчас я не знаю никаких прямых планов на этот счет, но со временем это определенно может оказаться интересным вариантом.

Я бы также посоветовал «Gamemaker: Studio» от «YoYo Games», это, возможно, самый визуальный гейммейкер, с комнатами для 2D-объектов, и он хорошо работает, если вам нужны продвинутые вещи — мощный скрипт, поддержка моддинга и теперь поддерживает шейдеры! Но это стоит немного — 300 долларов за все функции, 500 долларов за все экспортные модули, но, в отличие от всех других производителей игр, этот может автоматически портировать вашу игру на любую известную человечеству платформу! (кроме телефонов с Java)

Хорошо бы игры, созданные на HTML5, поддерживаться на старых мобильных устройствах и ОС (например, на старых версиях Android). ?

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

Комментарии к этой статье закрыты.

Если не указано иное, контент на этом сайте находится под лицензией Creative Commons Attribution Share-Alike License v3.0 или любой более поздней версии.

Создайте собственную игру с помощью HTML5 и JavaScript. Узнайте об игровых циклах, анимации и спрайтах, обнаружении столкновений, физике и пользовательском вводе. Следуйте этой серии руководств и создайте собственную базовую игру HTML5.

Что такое игра HTML5?

Эта серия руководств посвящена созданию игры HTML5. Но что именно это означает? Ну, когда люди говорят об играх HTLM5, они в основном используют это как модное слово, потому что вы не можете создать приличную игру, используя просто HTML5. Вот почему:

HTML5 – это язык разметки (HTML означает язык гипертекстовой разметки, версия 5 – последняя версия).
Он описывает только структуру и содержание веб-страницы и связывает ее с таблицей стилей.
Это не настоящий язык программирования

Это означает, что HTML5 не подходит для написания логики, необходимой для создания игры. Тогда что такое HTML5-игра? Это название игры, созданной с использованием набора новых веб-технологий, включая HTML5, а также CSS3 и JavaScript.

На самом деле большую часть времени вы будете иметь дело с JavaScript. JavaScript является настоящим языком программирования, и на нем можно писать игровую логику. Вы будете использовать HTML5 для создания чертежной доски и JavaScript для рисования на ней своей игры.

Короче говоря, всякий раз, когда люди говорят об игре HTML5, они на самом деле имеют в виду игру HTML5, CSS3, JavaScript.

Чего ожидать от этой серии руководств?

В этой серии руководств вы создадите простую игру HTML5, которая позволит вам управлять игроком с помощью пользовательского ввода. Эта серия проведет вас через следующие этапы:

Вот краткий обзор того, что вы собираетесь сделать по пути:

Узнайте, как создать собственную игру

Цель этой серии руководств — дать вам представление о программировании игр на HTML5 и о программировании игр в целом. Если вы не делали этого раньше, это требует нового мышления. Вы не просто запускаете фрагмент кода один раз, вы будете делать это много раз в секунду внутри игрового цикла, и для этого требуется совершенно новый подход.

Не ждите следующей игры Call of Duty. Это всего лишь базовая серия руководств, которые помогут вам начать работу. Вы начнете с нуля и создадите свою игру с нуля.

Вы узнаете, как реализовать распространенные приемы программирования игр и как избежать типичных ошибок. Вы получите базовое понимание принципов разработки игр.

Что случилось с Adobe Flash?

Пришло время для краткого урока истории, чтобы лучше понять роль HTML5 в мире браузерных игр. Потому что HTML5 не всегда был рядом. До выпуска HTML5 люди создавали браузерные игры с помощью Adobe Flash.

Flash отлично подходил для создания таких вещей, как анимация и игры , и в то время не было другого способа создавать подобный контент для Интернета. Кроме того, вам, как разработчику, не нужно было учитывать различные веб-браузеры при разработке, Flash Player позаботился об этом.

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

Спустя годы основные браузеры прекращают поддержку Flash Player. В конце 2020 года Adobe прекратит обновление и распространение Flash Player. Это будет окончательный конец эры флеш-игр. Так что пришло время HTML5 занять это место.

Расцвет HTML5

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

Легче сказать, чем сделать, потому что в то время было не так просто создать приличную игру с HTML5. Внезапно вам как разработчику пришлось учитывать разные браузеры и устройства. И потребовалось некоторое время, прежде чем все функции HTML5 были оптимизированы и стандартизированы для всех браузеров. Казалось бы, простые вещи, например воспроизведение звуков, были большой проблемой. Вещи, которые Flash раньше упрощал реализацию.

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

Даже в Adobe Flash было обновление для создания анимации и игр HTML5, и оно было переименовано в Adobe Animate, чтобы избавиться от печально известной репутации Flash.

Преимущества HTML5

Одним из самых больших преимуществ HTML5 по сравнению с Flash является возможность запуска контента на мобильных устройствах. Это не означает, что с HTML5 каждая игра будет автоматически запускаться на любом устройстве.В частности, такие вещи, как звуки и масштабирование, могут потребовать некоторого внимания, но вы можете заставить это работать. И когда вы это сделаете, вы сможете продемонстрировать свою игру всем, у кого есть мобильный телефон. Так вот примерно. все.

Начнем с вашей собственной игры!

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

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

Интернет нужен для многих вещей, но почти всегда он был для игр. И хотя времена культовых флеш-игр, таких как Line Rider и The Helicopter Game, остались позади, новый мир HTML5-игр закрепился. Лидером в разработке HTML5-игр для компьютеров и мобильных устройств стал Phaser — бесплатная двухмерная платформа для создания увлекательных браузерных игр нового поколения.

Фазер, созданный Photon Storm в 2013 году, представлял собой игровую среду HTML5 с открытым исходным кодом, которая позволяла разработчикам и новичкам создавать собственные интерактивные, привлекательные и увлекательные браузерные игры. До Phaser существовало множество игровых фреймворков HTML5, но команда Photon Storm сосредоточилась на разработке фреймворка, который одинаково хорошо работал как в мобильных браузерах, так и на настольных компьютерах, задействовав все более расширяющийся мобильный рынок. Таким образом, любые игры, которые вы разрабатываете с помощью Phaser, будут эффективно работать на настольных и мобильных платформах и даже могут быть скомпилированы в приложения для iOS и Android!

Чтобы начать работу с Phaser, вам нужно знать только основы HTML и JavaScript. Это связано с тем, что Phaser — это библиотека JavaScript, которая позволит вам добавить интерактивность и графику на веб-страницу в виде веселой и захватывающей игры! Чтобы визуализировать визуально красивые игры, Phaser использует две технологии: Canvas и WebGL. Canvas — это элемент HTML, поддерживаемый всеми современными браузерами, который позволяет создавать в браузере графику, основанную на инструкциях, часто предоставляемых в JavaScript. Сочетая Canvas с WebGL, мощным JavaScript API для рендеринга интерактивной графики, Phaser может помочь вам создать визуально приятную среду для игры геймеров.

Phaser нравится разработчикам игр в Интернете за простоту использования и разнообразие функций. Для создания динамичных игр Phaser может обрабатывать несколько вариантов ввода, включая клавиатуру, мышь и мультитач, с поддержкой отслеживания до 10 независимых точек контакта! А когда дело доходит до внутриигровой физики, которая определяет, как персонажи и объекты двигаются и взаимодействуют, Phaser предлагает несколько встроенных опций, включая классическую аркадную физику и физику ниндзя, а также позволяет настраивать физику для создания мира вашего воображения.< /p>

Готовы ли вы создавать свои собственные увлекательные игры с помощью Phaser? Начните работу с Phaser, настроив среду для разработки, а затем узнайте, как создать свою первую игру Phaser!

Ищете вдохновение? Ознакомьтесь с популярными играми Phaser на itch.io или рекомендуемыми играми от Phaser, в некоторые из которых вы, возможно, уже играли.

Если вы хотите освежить свои навыки HTML и JavaScript, прежде чем погрузиться в разработку игр с Phaser, ознакомьтесь с нашим Путем веб-разработки!

Читайте также: