HTML5 хорош, потому что он универсален — он не специфичен для одного случая использования. Что еще более важно, HTML5 вездесущ. Это на вашем ПК, вашем телефоне, вашем планшетном устройстве — насколько я знаю, это может быть даже на вашей кухонной технике.
Возьмите эти два свойства HTML5 — универсальность и повсеместность — и должно стать совершенно ясно, почему так много разработчиков вдохновляются этим. И, как гласит пословица: «Когда разработчики вдохновляются, они обычно пишут игры». (Хорошо, возможно, я только что придумал это.)
К счастью, статьи о разработке игр на HTML5 в настоящее время широко доступны. Вместо этого я хотел бы дать вам обзор того, что вы должны рассмотреть, прежде чем писать игру с использованием HTML5 и во время работы над ней.
Что вы узнаете в этой статье? Я расскажу о фреймворках для разработки игр на HTML5, о том, как вы можете привлечь больше людей, поддерживая смартфоны и планшеты, как вам следует управлять своим игровым состоянием, как решать проблемы с производительностью и как максимально эффективно использовать платформу. это ваш браузер.
Итак, без лишних слов, вот пять лучших рекомендаций по созданию HTML5-игр в действии! («В действии» добавлено для драматического эффекта).
Наилучшая практика # 1: Используйте каркас
Писать простые игры на HTML5 легко, но по мере того, как вы делаете ставку, вам нужно делать определенные вещи, чтобы ваша игра работала гладко.
Например, когда вы используете много изображений, звуковых эффектов и других ресурсов, вашему браузеру потребуется некоторое время для загрузки всего этого с вашего веб-сервера. Вас ждет сюрприз, если вы не примете это во внимание при написании своей игры. Поскольку изображения и звуковые файлы загружаются асинхронно, ваш код JavaScript начнет выполняться до того, как все ваши ресурсы будут загружены. Это часто приводит к «всплывающему» изображению (изображения появляются на ровном месте) и к тому, что звуковые эффекты не воспроизводятся, когда они должны. Хорошим решением для этого является создание предварительного загрузчика, который откладывает выполнение скрипта до тех пор, пока все ресурсы не будут загружены.
Другая проблема, с которой вы, вероятно, столкнетесь, заключается в том, что разные машины и / или браузеры будут запускать вашу игру на разных скоростях. Хотя вы ничего не можете с этим поделать, вы все равно должны убедиться, что скорость анимации и движения не зависят от частоты кадров, на которой работает ваша игра.
По сути, есть МНОГО стандартного кода, который необходим каждой игре для правильной работы. К счастью, вам не нужно писать весь этот код самостоятельно. В настоящее время существует множество фреймворков, которые позволяют вам сосредоточиться на игровой логике, не беспокоясь обо всех мелких (и больших) вещах, необходимых для бесперебойной работы вашей игры.
Единственное предостережение при использовании фреймворка заключается в том, что есть из чего выбирать. Фреймворки, такие как, например, ImpactJS , предназначены для помощи практически во всех аспектах процесса разработки игр, в то время как фреймворки, такие как EaselJS, ориентированы в основном на графическую сторону вещей. В конце концов, вам решать, какой каркас вам наиболее удобен. Это может показаться легким делом, но в мире JavaScript выбор фреймворка часто подразумевает выбор определенного стиля программирования.
ig.module ( «Монстр» ) .requires ( 'Impact.game', ) .defines (функция () { Monster = ig.Entity.extend ({ глаза: 42 }); });
Хорошим примером этого является ImpactJS, который не только предоставляет абстракции для отображения графики или воспроизведения звуковых эффектов, но также представляет свою собственную модель объекта и наследования, как показано выше.
Ascended Arcade выпустил три игры за три месяца с использованием инфраструктуры ImpactJS.
Хотя многие HTML5-игры в настоящее время полагаются на какую-то форму фреймворка, многие разработчики все еще идут по сложному пути, пытаясь сделать все сами. Несмотря на то, что это может быть отличным опытом обучения, если вы хотите, чтобы работа выполнялась в разумные сроки, использование фреймворков, безусловно, поможет. Хорошим примером этого является отличная работа Ascended Arcade, которой удалось выпустить три очень приятных (и несколько приветствуемых) игры всего за три месяца с использованием инфраструктуры ImpactJS.
Рекомендация № 2. Рассмотрим устройства с маленьким и сенсорным экраном
Возможно, одним из наиболее убедительных моментов продажи HTML5 является то, что он работает на настольных ПК, ноутбуках, планшетах и даже смартфонах (если вы еще не видели IE9, работающий на Windows Phone 7 Mango, посмотрите это видео ).
Эта уникальная кросс-платформенность (если принять во внимание словарь Вебстера!) Присуща HTML5 и часто требует от разработчика небольшой дополнительной работы. Тем не менее, есть несколько вещей, которые вы должны рассмотреть …
SpyChase работает на Windows Phone 7 Mango.
Прежде всего, размеры экрана могут сильно различаться в зависимости от категории устройства, как и разрешение экрана и соотношение сторон. Если вы хотите, чтобы ваши игры HTML5 хорошо работали на мобильных устройствах, вы должны убедиться, что они поддерживают несколько разрешений или не превышают размер кадра WVGA 800 × 480.
Кроме того, поскольку большинству мобильных устройств не хватает размера экрана для одновременной визуализации всей веб-страницы, они часто используют сложные методы масштабирования и панорамирования, которые могут быть контрпродуктивными при написании игр. Их можно отключить программно, используя метатег viewport . Следующий фрагмент кода приведет к тому, что область просмотра вашей игры займет всю доступную горизонтальную область экрана. Если для параметра «user-scaleable» установлено значение «no», мобильный браузер отключит масштабирование, которое в противном случае часто конфликтует с игровым управлением пальцами.
<meta name = "Окно просмотра" content = "width = device-width; user-scaleable = no; initial-scale = 1.0" />
Как только ваша игра будет хорошо отображаться на устройствах с маленьким экраном, вам также понадобится минута, чтобы подумать о вводе. Большинство сенсорных устройств имеют виртуальную клавиатуру, но они, как правило, занимают слишком много места на экране, чтобы быть полезными для управления игровыми персонажами. Если речь не идет о строго сенсорном вводе, вам следует создать ограниченную виртуальную клавиатуру, содержащую только те кнопки, которые необходимы для вашей игры (например, клавиши со стрелками). Однако лучше всего проявлять творческий подход, используя альтернативные средства управления игрой, которые не требуют дополнительных элементов на экране. Хорошим примером этого является игра Spy Chase , в которой вы управляете транспортным средством одним пальцем (то, что вы не должны пытаться делать в реальной жизни).
Лучшая практика # 3: автоматически сохранять прогресс игрока
Благодаря таким функциям, как закрепление сайтов , веб-браузеры пытаются придать веб-приложениям тот же статус, что и у обычных настольных приложений. Тем не менее, идея веб-сайтов, функционирующих как приложения, является довольно новой, как и концепция веб-страниц, содержащих состояние клиента. Вы могли бы подумать дважды, прежде чем закрывать экземпляр Microsoft Word, но вы можете быть не так осторожны с открытой веб-страницей. В большинстве случаев это не проблема — большинство веб-страниц либо не сохраняют состояние, либо хранят информацию о вас на сервере.
Браузерные игры, однако, немного другое зверь. Поскольку код JavaScript выполняется на клиенте, игры HTML5 обычно сохраняют свое игровое состояние во временной памяти (она же RAM). Закройте окно браузера, и ваш с трудом заработанный рекорд навсегда потерян.
Теперь вы можете утверждать, что разумный человек будет достаточно осторожен, чтобы не закрывать игру, в которую он играл в течение восьми часов, но аварии случаются, особенно когда задействованы несколько вкладок или батареи разряжены.
Короче говоря: при написании HTML5-игр абсолютно рекомендуется регулярно сохранять прогресс игрока и разрешать игрокам возобновлять игру, возвращаясь на закрытую веб-страницу.
Теперь, где вы должны следить за прогрессом игроков? В прошлом очевидным местом была либо база данных на стороне сервера, либо файл cookie на стороне клиента. Ни одно из решений не является особенно привлекательным. При серверном подходе HTTP-запросы должны выполняться всякий раз, когда информация должна храниться или извлекаться. Подход с использованием файлов cookie дает вам очень ограниченное пространство для работы, а срок службы файлов cookie сильно зависит от конфигурации браузера.
Гораздо более подходящим решением является использование HTML5 DOM-хранилища . Хранилище DOM позволяет сохранять несколько мегабайт данных на каждом веб-сайте с помощью интерфейса, напоминающего хранилище значений ключей (или JavaScript-объект расширения). Это очень удобно, но в контексте игр HTML5 вы можете также вспомнить сложные структуры данных — то, что хранилище DOM изначально не поддерживает.
К счастью, современные реализации JavaScript имеют встроенные механизмы, которые позволяют сериализовать объекты в компактную нотацию, известную как JSON . Используя этот подход, хранилище DOM также может использоваться для запоминания произвольной информации. Следующие две вспомогательные функции иллюстрируют, как состояние игры может храниться и извлекаться с использованием хранилища DOM HTML5 и функций JSON, встроенных в ECMAScript5:
функция saveState (state) { window.localStorage.setItem ("gameState", JSON.stringify (state)); } function restoreState () { var state = window.localStorage.getItem ("gameState"); if (state) { return JSON.parse (state); } еще { вернуть ноль; } }
Лучшая практика # 4: Используйте профилировщик
Одной из самых больших проблем при разработке игры является поддержание высокой частоты кадров при добавлении в нее все новых и новых функций.
Хорошая новость заключается в том, что браузеры в целом стали намного быстрее за последние пару лет, а игры на HTML5, работающие с постоянной частотой 60 кадров в секунду, уже стали реальностью.
Это было нелегко. Для Internet Explorer 9 это означало написание совершенно нового движка JavaScript, который может использовать несколько ядер ЦП, и полностью рендеринга с аппаратным ускорением на основе Direct2D. Другими словами: если вы потратили хорошие деньги на свою игровую установку, Internet Explorer 9 будет ее использовать.
Встроенный в Internet Explorer 9 профилировщик JavaScript помогает найти узкие места в производительности.
Для простых игр это означает, что вам не нужно беспокоиться о производительности. Но поскольку HTML5 не зависит от платформы, вы потенциально разрабатываете для целого ряда устройств и браузеров, некоторые из которых будут работать не так быстро, как хотелось бы. Даже если вы ориентируетесь только на высокопроизводительные ПК (что мы сказали, мы не будем делать, помните?), Производительность все равно может стать проблемой.
Если вы хотите, чтобы ваша игра работала со скоростью 60 кадров в секунду, у вас есть не более 16 миллисекунд для рендеринга любого отдельного кадра. За то время, которое у вас уходит на мигание, вы должны отрендерить как минимум 6 полных кадров. Теперь это может показаться сложной задачей … и с любой нетривиальной игрой это, безусловно, может быть.
К счастью, есть инструменты, которые могут вам помочь. В Internet Explorer 9 ( или 10 в этом отношении ), нажмите клавишу F12, чтобы открыть инструменты разработчика. Выберите вкладку «Профилировщик» и нажмите «Начать профилирование».
Теперь перейдите туда, где, по вашему мнению, производительность должна быть лучше, дайте профилировщику около 30 секунд для сбора данных, а затем нажмите «Прекратить профилирование». Вам будет представлен обзор того, сколько накопленного времени выполнения расходуется на каждую из функций вашего игра. В большинстве случаев вы обнаружите, что есть ряд функций, которые занимают большую часть общего времени выполнения. Оптимизация этих функций даст вам максимальную отдачу, и, когда вы анализируете свой код, медленные подпрограммы немедленно выпадут.
Не доверяйте своим инстинктам слишком вслепую, хотя код, который выглядит медленно, на самом деле может выполняться довольно быстро с современными механизмами JavaScript. Лучший подход к оптимизации состоит в том, чтобы часто менять профиль и всегда измерять, действительно ли изменения, которые вы вносите в свой код, оказывают положительное влияние на производительность.
Игры стали социальными: Warimals основан на HTML5 и позволяет играть вместе со своими друзьями на Facebook.
Лучшая практика № 5: Будьте креативны
Возможность писать игры, которые изначально запускаются в вашем браузере, довольно удивительна, но что еще круче, так это то, что HTML5 позволяет вам писать игры, которые запускаются в браузере! HTML5 не только интересен с технологической точки зрения, но и является идеальной платформой для игр.
Подумайте об этом … браузеры существуют на многих различных устройствах, они (почти) всегда онлайн, и они являются инструментом, который люди используют для связи друг с другом через электронную почту, чат и социальные сети. Как разработчик игр для браузеров, вы можете создавать забавные игры и собирать людей со всего мира.
Если вы новичок в разработке игр на HTML5, может быть заманчиво написать клоны игр, в которые вы играли в автономном режиме. В этом подходе нет абсолютно ничего плохого. Но если вы думаете, что ваша игра работает внутри «коммуникационного приложения», есть большая вероятность, что вы придумаете совершенно новые, очень креативные игровые идеи. Интересным примером этого является Warimals , одна из первых основанных на HTML5 игр для Facebook. В Warimals вы можете играть за собак или котят, а также приглашать друзей из Facebook играть вместе с вами. Что не нравится?
Подводить итоги…
Благодаря большой работе разработчиков фреймворков и пионеров JavaScript, HTML5 уже стал довольно зрелой платформой для написания игр. Это отличная новость, потому что Интернет — это единственная наиболее распространенная среда выполнения для приложений любого типа. С правильными инструментами (многие из которых удобно интегрированы в Internet Explorer 9 и 10 или могут быть загружены бесплатно ) и подходящей платформой, опыт разработки игр на HTML5 может быть приятным и очень полезным, особенно при создании связанного опыта в интересных и инновационных пути.