arsus

10 советов для разработчиков игр на HTML5

Стратегия Брайана Мак Харга по успешной разработке кросс-браузерных, кросс-платформенных игр на HTML5.

HTML5: законный наследник престола флеш игр. По-настоящему кросс-платформенная разработка позволяет однажды написанную программу запустить и на ПК, и на планшете и смартфоне, она также будет работать и на Smart TV, и на настольных и мобильных устройствах, и в том числе на игровых консолях типа Xbox360 или PlayStation 3 через встроенные в них браузеры. Понятное дело, что это – очень привлекательно для тех, кто хочет разрабатывать игры для как можно большего количества устройств и платформ.

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

Для разработчиков это – коллективное существительное для множества различных технологий: JavaScript, WebSockets, WebAudio, Canvas, CSS3 и WebGL – это лишь некоторые из них, каждая с собственными стандартами, сильными слабыми ограничениями от платформы к платформе.

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

ПК против мобильноq кросс-платформенности

Сейчас всем нам известны фантастические примеры игр на HTML5, которые запускаются в браузерах ПК. Часто они создаются авторами браузеров, чтобы продемонстрировать особенно сильные стороны собственного программного обеспечения, или для конкретных API, которые им хотелось бы видеть ратифицированными в спецификации HTML5.

Такие игры, как Cutthe Rope и Contre Jour для Internet Explorer или некоторые из превосходных экспериментов для браузера Chrome, как Jam или Racer, – отличные тому примеры. Если вас интересует потенциал на будущее, посмотрите такие библиотеки, как three.js, недавно выпущенный опен-сорс Turbulenz, или Epic HTML5 на движке Unreal Engine.
Unreal Engine
Тем не менее, попробуйте взглянуть на один из этих примеров на Android с установленной OS2.3 (Gingerbread), и вы увидите совершенно другую картинку, а в некоторых случаях не увидите совершенно ничего. Да, этой операционной системе почти три года, но она до сих пор установлена на трети всех устройств на базе Android, и эта цифра может быть даже выше в зависимости от вашей целевой аудитории. И так происходит не только на старой версии Android. То же самое вы можете увидеть на устройствах Apple, работающих с системой iOS 5, или на менее мощных устройствах типа Kindle Fire. В самом деле, сейчас вы не найдете ни одного мобильного устройства, на котором будет корректно отображаться любая из вышеупомянутых программ.

Как уже упоминалось ранее, большинство клиентов выбирают HTML 5 для того, чтобы их браузерная игра была по-настоящему кросс-платформенной. Если вы разрабатываете игры только для ПК, то Unity и Flash – отличные варианты, на которые стоит обратить внимание. У обоих – отличная поддержка браузеров и возможность экспорта на устройства в виде отдельных приложений, благодаря чему они могут быть перенесены на смартфон или планшет с тем самым кодом, который вам необходим.

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

Чтобы получить представление о том, сколько существует вариантов, просто запустите один из многих тестов JavaScript для тестирования производительности устройства. К примеру, передача 100 кадров через Canvas будет воспроизводиться относительно хорошо на 60 кадрах в секунду на таких устройствах, как iPhone 4S или 5, Galaxy S3, Nexus 7 или Lumia 820. Но попробуйте тот же самый код на других устройствах типа HTC Desire (19 fps), Galaxy Ace (7 кадров) или IPad 1 (9 fps), и вам придется очень постараться, чтобы получить хоть что-то наподобие жизнеспособной игры.

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

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

Выберите свои битвы

В Чанк вот уже два года разрабатывает кросс-платформенные игры на HTML5 для вещательных компаний и брендов, и создали на основе браузера мобильные игры для клиентов типа BBC и Disney, которые запускаются на всех устройствах, от HTC Desire до iPad4, от Nexus 7 до Xbox 360.
Choose your battles
Как разработчикам, им было бы здорово определиться с тем, насколько глубоко стоит внедряться в этот процесс, но это определяется их целевой аудиторией и теми устройствами, которыми они пользуются. Во время работы над детскими брендами им часто приходилось обнаруживать себя в рамках ограничений типа старых телефонов, или недорогих и маломощных устройств, но при этом тщательно прорабатывать дизайн и оптимизировать многие другие моменты, поэтому они до сих пор верят, что можно разрабатывать впечатляющие игры для мобильного интернета.

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

1. Определитесь с аудиторией

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

2. Определяйтесь с дизайном с точки зрения технологии

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

3. Подружитесь с caniuse.com

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

4. Используйте устройства, а не только симуляторы

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

5. Будьте в курсе изменений

Спецификация HTML5 постоянно меняется, так же, как и поддержка устройств, поэтому вам надо быть постоянно в курсе изменений в этих областях. Это особенно актуально в таких сферах, как звук, где функции типа API WebAudio могут радикально изменить возможности.

6. Будьте гибкими в течение всего времени развития

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

7. Масштабируйте функциональность

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

8. KISS (Keep It Simple, Stupid) – Не усложняйте себе жизнь, глупенькие

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

9. Определитесь с продолжительностью жизни ваших разработок

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

10. Последний совет?

Ах да. Проверяйте свои игры на всех доступных устройствах как можно чаще!

Гладиатор, ты поедешь по моему второму сигналу

HTML5, похоже, будет неофициальной основной технологией для разработки кросс-платформенных игр для разных браузеров, в этом нет ни малейшего сомнения. В данный момент – это не самое надежное пространство, но это нормально для технологий в зачаточном состоянии. Чтобы проверить возможности браузеров, стоит ознакомиться с сайтами типа caniuse.com. Регулярно проверяйте свои игры на как можно большем количестве доступных вам устройств, и будьте прагматичны с игровым дизайном. Это поможет вам избежать проблем не только сейчас, но и оказаться в более выигрышном положении, когда улучшится поддержка устройств, что неизбежно.

По материалам: creativebloq.com.