Вы уже знаете, что HTML5 отлично подходит для разработки игр, верно? Возможно, лучше всего то, что он дает вам возможность разрабатывать кроссплатформенные приложения, эффективно сокращая время, необходимое для тестирования браузера. Тем не менее, разработка HTML5-игры не всегда легкая задача. В этой статье я поделюсь некоторыми советами по разработке качественной кроссплатформенной игры HTML5.
Первый Приоритет: Мобильный
Политика в отношении мобильных устройств — это то, что я игнорировал в своем первом игровом проекте HTML5. Отныне я никогда не буду недооценивать количество мобильных игроков. Я игрок игры. Мне нравится играть в Angry Birds на рабочем столе, и я ценю тот факт, что я могу играть на своем устройстве Android, когда не дома.
Если бы я понял это раньше, я бы потратил больше времени и энергии на оптимизацию мобильных игр, вместо того чтобы сосредоточиться на использовании браузера для настольных компьютеров в моей первой игре на HTML5. Хотя я принял это во внимание, мобильное воспринималось только как вторичная игровая среда. Сделайте оптимизацию мобильной игры приоритетом.
Думай о кроссплатформенности рано
Возьмем Zynga’s CityVille в качестве примера. Я играл в CityVille раньше, а также в CityVille Hometown (мобильная версия) на моем Android-устройстве. Честно говоря, игровые впечатления совсем другие. CityVille Hometown вращается вокруг совершенно другого игрового процесса.
С точки зрения разработчика игр, CityVille не подходит для мобильной платформы — его придется существенно изменить. Его меню слишком большое и сложное для экрана iPhone; Именно поэтому Zynga опубликовала отдельные версии CityVille Hometown для iOS и Android. Стоит подумать о ваших кроссплатформенных непредвиденных обстоятельствах на ранней стадии разработки.
Мультиплатформенное обнаружение
Как только вы начнете разрабатывать игру HTML5, вы можете захотеть показать разные стили и формы контента (например, разные пользовательские интерфейсы) для игроков на разных платформах. Это может стать довольно сложным, потому что на каком бы языке вы ни специализировались, разные устройства всегда имеют разные уровни поддержки JavaScript, CSS3 и так далее.
Использование JavaScript
JavaScript довольно популярен у большинства разработчиков игр. В следующем фрагменте кода свойство JavaScript navigator.userAgent
<script type="text/javascript">// <![CDATA[ var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windowssce|palm/i.test(navigator.userAgent.toLowerCase())); if (mobile) { document.location = "http://www.yoursite.com/mobile.html"; } // ]]></script>
Проблема заключается в том, что многие мобильные устройства (в настоящее время) не поддерживают JavaScript, и использование одного сценария JavaScript для обнаружения всех типов браузеров может создать кошмар производительности страницы для ваших пользователей.
Использование CSS @media запросов
Медиа-запросы являются хорошим способом отображения стилей CSS для мобильных устройств. Вы просто создаете одну страницу и две таблицы стилей — первая для экрана рабочего стола, а вторая для мобильных устройств. Вам просто нужно сохранить одну страницу игры, и таблица стилей определяет, как она выглядит.
Давайте предположим, что размер экрана составляет 800 пикселей в ширину. Мы можем использовать медиазапросы, чтобы скрыть или переместить элементы пользовательского интерфейса, которые не важны для отображения на мобильных устройствах:
экран @media и (max-width: 800px) {
/ * Какой бы CSS вы ни хотели здесь * /
}
Использование PHP, JSP, ASP и т. Д.
Другой метод использует серверный язык (PHP, JSP, ASP и т. Д.) Для определения типа браузера. Он не зависит от языка сценариев или CSS, который не используется мобильным устройством. Простой код PHP для обнаружения может выглядеть следующим образом:
<? if ( stristr($ua, "Windows CE") or stristr($ua, "AvantGo") or stristr($ua,"Mazingo") or stristr($ua, "Mobile") or stristr($ua, "T68") or stristr($ua,"Syncalot") or stristr($ua, "Blazer") ) { $DEVICE_TYPE="MOBILE"; } if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") { $location='mobile/index.php'; header ('Location: '.$location); exit; } ?>
Поддерживайте свои знания CSS
Изучите и улучшите свой CSS. Разработка игр для настольных компьютеров, iOS и Android требует большого знания CSS. Теперь CSS3 настолько мощен, что вы можете делать игры полностью с ним. В моей команде есть парень, отвечающий за всю работу, связанную с CSS, и он создает динамически меняющиеся размеры меню в зависимости от мобильного устройства. При разработке кросс-платформенных игр HTML5 значительная часть вашей работы может быть связана с CSS.
Тест с DOM
Когда я начал разработку игр на HTML5, я подумал, что это хорошая идея для рендеринга игры с использованием Canvas, потому что она весьма полезна для настольных компьютеров. Но на такой платформе, как iPhone 3GS, это становится головной болью. Производительность игры отстой; изображения рендерились со скоростью менее 5 кадров в секунду. Мне пришлось создавать движки рендеринга, один за другим.
В настоящее время я полагаюсь на DOM (объектную модель документа). Он определяет способ, которым мои приложения построены из элементов HTML и селекторов CSS3, а не то, как они отображаются в Canvas. Преимущество использования DOM заключается в том, что игра может быть намного быстрее и более отзывчивой благодаря аппаратному ускорению. Важно проверять вашу игру снова и снова, и я лично считаю, что использование DOM — лучший выбор, чем Canvas.
Разобраться с проблемами со звуком
Встраивание звуков в игру жизненно важно. К сожалению, самой большой проблемой при разработке кроссплатформенной игры HTML5 является звук. В разработке игр на HTML5 Canvas имеет хорошую поддержку, видео постоянно улучшается, но аудио все еще довольно нестабильно. Игры не могут воспроизводить звук и музыку одновременно. Исходя из этого, HTML5 не обязательно является идеальной альтернативой Flash!
Другие проблемы со звуком включают в себя:
- Различные браузеры поддерживают разные форматы звука (mp3, wav, ogg и т. Д.)
- iPhone и iPad позволяют загружать и воспроизводить только один звук mp3
- Android имеет ограниченную поддержку тега <audio> и аудио API JavaScript
Есть несколько способов решения этих проблем:
- Что касается формата, я дублирую все звуки игры в двух форматах (OGG и MP3), которые охватывают большинство браузеров.
- Для платформы iOS я сохраняю звук и музыку в настольной версии игры, и только музыку в мобильной версии.
- Что касается Android, потому что он поддерживает воспроизведение аудио Flash, поэтому я использую jPlayer для обработки автоматического перехода аудио HTML5 / Flash.
Однако все это должны быть временные меры. Реальное решение проблем, связанных со звуком HTML5, заключается в том, что W3C работает с разработчиками приложений и браузеров, чтобы создать хороший стандарт, которому может следовать каждый.
Вывод
Я надеюсь, что эти советы помогут вам в разработке кроссплатформенной игры HTML5. Хотя это непростая задача и все еще существуют проблемы, такие как интеграция аудио, нет никаких причин не разрабатывать игру, которая может работать на нескольких платформах и донести ваш игровой опыт до широкого круга пользователей.