Советы по публикации HTML5 игр в Интернет
Seryiza
опубликовал в
Construct 2
Шаблоны для экспорта
Когда Вы экспортируете игру в HTML5, Вам предлагается выбрать шаблон. Их несколько, и каждый из них отвечает за различное отображение игры в браузере (что, позволяет их использовать в разных ситуациях). Также эти шаблоны меняют отображение игры в режиме полного экрана (Fullscreen).Normal style (Нормальный стиль) — полноэкранные игры занимают все предоставленное место в браузере. Не-полноэкранные игры располагаются в верхней части окна, по горизонтали игра центрируется. Пример:
Advert bar style (дословно — панель объявлений) имеет сходство с Normal style. Игра в этом шаблоне показывается во фрэйме (frame, из HTML). Полноэкранные игры используют все пространство фрэйма (за исключением боковых сторон), а не-полноэкранные игры появляются сверху и по середине горизонтально (имеется внутри фрэйма). Т.к. одна из сторон всегда зарезервирована, ее можно использовать, чтобы показать какой-нибудь HTML контент, например рекламу, навигацию и т.д.. Использование HTML или интеграция рекламы выходит за рамки этого руководства; этот шаблон ориентирован на опытных пользователей, которые помимо самой игры хотят видеть некоторый HTML код. Панели (по-другому: бары, bars) могут быть в любой части экрана и иметь определенный размер. Пример, панель имеет размер 150 пикселей, расположение сверху. Маленький белый текст над игрой — как раз и есть пользовательский HTML:
Embed style (стиль встраивания) просто-напросто удаляет все отступы и скроллбары из браузера, получается так, что игра будет находиться в верху слева. Это делает игру хорошо встраиваемой для iframe фиксированного размера. На заметку: использование полноэкранной игры в этом шаблоне равноценно использованию Normal style: в обоих шаблонах окно браузера используется полностью. Embed style наиболее полезен для не-полноэкранных игр. Простой пример:
Запуск экспортированных игр
Обычно, игры не работают в браузере после экспорта, если их запустить с диска. Если дважды кликнуть на index.html, то браузер откроет игру в протоколе "file:///", а не «http://», т.к. игра находится на локальном компьютере, а не на сервере. По соображениям безопасности, браузеры имеют некоторые жесткие ограничения на локальные файлы ("file:///"). Это, обычно, не позволяет игре запуститься. Лучшим вариантом рабочего процесса является тестирование игры с помощью предварительного просмотра, а затем немедленная загрузка на сервер. Если запустить игру локально, Вы увидите сообщение, напоминающее что запустить игру нельзя («exported games won't work until you upload them»). Если необходимо проверить работу игры на мобильном устройстве, то можно использовать просмотр-через-WiFi, вместо того, чтобы экспортировать -> загружать на сервер по нескольку раз.В Google Chrome возможно обойти это ограничение, и попробовать запустить игру с диска. Для начала закройте все копии Chrome, далее откройте диалог «Выполнить» (клавиши: Windows + R), и введите в нем:
chrome --allow-file-access-from-filesВ таком режиме Chrome в состоянии открыть экспортированный проект. Сообщение о том, что игру нельзя запустить локально все ровно еще будет, но им можно пренебречь. Также можно отметить, что некоторые функции не будут работать, такие как AJAX запросы к Интернет серверам. В принципе, использование такого режима может вообще не потребоваться, но все же может возникнуть потребность быстро проверить игру перед загрузкой в Интернет. Обратите внимание, если планируете запускать игру на компьютере локально, то Node-WebKit является лучшим решением.
Загрузка в Интернет
Конечно, лучше всего иметь свой собственный сервер для загрузки туда игр. Но в то же время можно воспользоваться бесплатным хостингом игры, например DropBox, но они, как правило, ставят ограничение на пропускную способность. Вы ведь не хотите, чтобы Ваша игра стала недоступной, как только она станет популярной! Дешевый статический хостинг будет значительно лучше. Также, загрузка игры на хостинг может быть различной, поэтому лучше позаботиться об этом заранее. Наиболее распространенные способы загрузки это загрузка файлов через FTP, веб-формы на хостинге или удаленный рабочий стол.Если вы делаете небольшие демо для показа друзьям, то бесплатного хостинга должно хватить с головой. Вот несколько руководств-советов для справки:
Загрузка игры на DropBox
Загрузка игры на Google Drive
Добавление игры в Scirra Arcade (обратите внимание, если вы будете загружать игру в Scirra Arcade, то при экспорте нужно выбрать соответствующий пункт, а не HTML5)
После загрузки, вы имеете ссылку на саму игру и теперь можете везде рассказать о ней! Также, если Вы сделали игру с сенсорным управлением и поддержкой множества размеров экрана, игра должна хорошо работать в мобильных браузерах.
Советуем сделать проверку на ошибки после загрузки игры. Если забыть загрузить файл или папку, игра будет работать некорректно. В случае ошибки будет выведено полезное уведомление (напр., «myfile.png returned 404 not found», которое говорит о том, что файл myfile.png не загружен на сервер).
Установки сервера
Если у Вас собственный сервер, то для того, чтобы игра работала должным образом, должны работать следующие MIME типы:.appcache -> text/cache-manifest
.ogg files -> audio/ogg
.m4a files -> audio/mp4
Если они установлены неправильно, то звук может не работать или не будет оффлайн поддержки. Если Вы используете бесплатный хостинг, то, скорее всего, Вам не о чем беспокоиться — все уже настроено. Если же видите не нормальное поведение игры, но ошибки браузера нет, то, возможно, это ошибка хостера. Обратитесь в службу поддержки, чтобы решить эту проблему.
Встраивание
Этот шаг необходим если Вы захотите встроить игру на другую Интернет-страницу. Лучшим способом для этого является iframe (элемент HTML). Вот примерный код:
<iframe src="http://www.mywebsite.com/mygame" width="600" height="400" />Этот HTML код создаст iframe фиксированного размера (600x400), внутри которого будет находиться игра. Если игра будет полноэкранной, то она будет автоматически масштабироваться под указанные размеры. Если же у игры фиксированный размер, то в iframe следует задавать те же размеры.
Обратите внимание, что если игра будет находиться на другом домене (который отличается от «родного»), то появятся кроссдоменные ограничения безопасности, что может повлиять на работу игру. Например, AJAX запросы должны отправляться на тот же домен, где и находится игра, в другом случае браузер будет блокировать этот запрос. Чтобы обойти это, нужно использовать HTTP заголовок Access-Control-Allow-Origin.
Все хорошо, но что если Вам захотелось помимо встроенной игры, иметь в ней кнопку «Переключить на полный экран»? Нужно использовать соответствующее действие объекта «Browser», и добавить к нашему HTML коду еще один атрибут:
<iframe src="http://www.mywebsite.com/mygame" allowfullscreen="true" width="600" height="400" />Исходя из новых особенностей HTML5, чтобы сделать код более правильным, можно включить другие атрибуты:
<iframe src="http://www.mywebsite.com/mygame" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" msallowfullscreen="true" width="600" height="400" />И вуаля, теперь Ваша игра может «вырваться» из фрэйма на полный экран!
0 комментариев