Firefox OS — это целая мобильная операционная система, построенная на открытых веб-технологиях! Операционная система была построена с нуля, чтобы позволить HTML5 и Javascript раскрыть весь потенциал аппаратного обеспечения устройства. Читайте дальше, чтобы узнать больше о Firefox OS и о том, как вы можете начать перенос существующих веб-приложений на платформу уже сегодня!
Firefox OS
Firefox OS — мобильная операционная система, созданная Mozilla с нуля. Он превратился из пустого репозитория GitHub в полноценную систему с открытым исходным кодом за более чем год, что само по себе весьма впечатляет. Построен от голой идеи до конечного продукта, поставляемого компаниями по всему миру. Давайте посмотрим, почему это так необычно и почему вас это должно волновать.
Самое важное в Firefox OS — это используемая технология — это просто Интернет! Все разработчики внешнего интерфейса и программисты JavaScript теперь могут легко создавать приложения HTML5 непосредственно для платформы. У мобильного Интернета теперь есть технологии и аппаратный доступ, которого он заслуживает. Веб-API позволяют вам «общаться» напрямую с оборудованием устройства с помощью JavaScript, что позволяет делать фотографии, отправлять сообщения или инициировать вызовы.
Давайте проясним ситуацию с целевой аудиторией — дело не в том, что Firefox OS будет напрямую сражаться с высококлассными устройствами с iOS и Android на борту в высокоразвитых странах. Основная цель — предоставить смартфон опыт тем, у кого обычно не было бы возможности купить такое устройство. Телефоны с ОС Firefox станут дешевой альтернативой тем, кто хотел бы переключиться с функциональных телефонов и погрузиться в Интернет с помощью современных браузеров. Существует огромный спрос на это, и Mozilla хочет заполнить пробел!
Это «новая старая» экосистема, так как веб-технологии уже известны тысячам программистов на JavaScript и фронт-эндов. Вам не нужно изучать новый язык или среду разработки. Все, что вы знаете о сети, можно использовать для создания потрясающих приложений для Firefox OS. Портирование вашей игры очень просто и требует минимальных усилий для достижения.
В этой статье я проведу вас через весь процесс, начиная с обычной мобильной игры HTML5, оптимизируя ее для устройства с операционной системой Firefox и публикуя результаты в Firefox Marketplace — я буду использовать Captain Rogers в качестве примера.
Тестирование Firefox OS
Есть два способа проверить вашу игру на Firefox OS — используя программный симулятор или подключив реальное устройство. Оба полезны, и вы должны начать с симулятора, чтобы увидеть, работает ли игра. После этого загрузка игры на устройство в конечном итоге протестирует его в бою и поможет избавиться от всех ошибок. Тогда вы можете сосредоточиться на процессе публикации.
имитатор
Существует способ протестировать вашу игру или приложение без необходимости иметь фактическое устройство в руке. Это симулятор Firefox OS, и вы можете просто установить его как плагин в браузере Firefox. Вы не сможете протестировать сенсорное управление, но, по крайней мере, сможете увидеть, работает ли игра и ведет себя ли она так, как должна. С помощью симулятора вы также можете перенести приложение прямо на устройство.
Доступные устройства
Если вам действительно нужно ваше собственное устройство, вы можете получить его с Geeksphone . Они предоставляют два телефона для разработчиков — Keon и Peak. Эти два устройства очень похожи на конечные продукты, которые будут продаваться по всему миру. Первые коммерческие устройства уже анонсированы: ZTE Open и Alcatel OneTouch Fire предлагаются компанией Movistar в Испании по низкой цене 69 евро (без контракта, с картой памяти microSD 4 ГБ и 30 евро для звонков). Следующими в списке стоят Польша, Колумбия и Венесуэла, и скоро появятся новые страны.
Firefox Marketplace
Если на вашем устройстве уже установлена операционная система, было бы неплохо установить на нее некоторые приложения. Именно здесь появляется Firefox Marketplace — магазин Mozilla, в котором есть все, что вам нужно. Разница между магазинами iOS или Android и Firefox Marketplace заключается в том, что последний является открытым и бесплатным. Каждый может управлять своим собственным рынком, вы не ограничены единственным местом распространения приложений и игр. Вам даже не нужно направлять людей на сам рынок, если вы хотите, чтобы они установили вашу игру на свое устройство — для этого есть API! Используя API Open Web App, вы можете создать простую кнопку «установить это приложение», используя кнопку HTML, вызывая несколько строк JavaScript. Конечные пользователи смогут установить игру прямо на свое устройство.
Торговые площадки для всех
Мобильные операторы предоставят своим клиентам торговые площадки с приложениями, предназначенными специально для них. Это также даст им возможность снова начать зарабатывать деньги и перестать быть просто поставщиками данных. Важно понимать, что все игроки в пространстве Firefox OS могут получить выгоду от поддержки системы.
Понятность
В создании веб-приложений есть огромный потенциал — вы можете искать контент внутри них, не загружая их. Так как это всего лишь HTML, CSS и JavaScript, вы можете искать все, что вам интересно, и вы не будете ограничены заголовком или описанием — он индексируется и доступен для поиска, как и любой другой веб-сайт.
Уже доступны
Лучше всего то, что вы уже можете добавлять свои приложения и игры — Marketplace выходит из стадии бета-тестирования и открывается для покупателей, но уже некоторое время он был доступен для разработчиков. У обеих сторон было время, чтобы приспособиться к окружающей среде и подготовиться к платформе. Конкуренции почти нет — я нашел около 500 игр на торговой площадке. Трудно даже сравнить его с Apple App Store, где можно найти сотни тысяч приложений. Сейчас самое подходящее время, чтобы воспользоваться этой возможностью, Firefox Marketplace ждет вашего контента!
Пример из практики — Капитан Роджерс
Как я упоминал ранее, я покажу вам весь процесс преобразования вашей обычной HTML5-игры в полностью рабочую, оптимизированную для устройства с операционной системой Firefox и доступную бесплатно на торговой площадке Firefox. Игра Captain Rogers была построена с использованием ImpactJS и очень проста — вы храбрый Капитан Роджерс и вам нужно пролететь через астероидное поле, чтобы сбежать из злого флота Кершан. Он был создан в сотрудничестве между Enclave Games ( Blackmoon Design ( Роберт Подгорски — графика). Основной упор делался на то, чтобы сделать его небольшим и простым, но в то же время полностью функциональным и отполированным.
Оптимизируйте свою игру для Firefox OS
Существует множество способов оптимизировать вашу игру для платформы Firefox OS, и большинство из них можно применить и к обычным играм HTML5 — ведь это веб-технология, верно? Ниже вы увидите некоторые основные приемы, которые позволят быстро повысить производительность, сделать игру более гибкой или просто сделать ее лучше.
Мос-непрозрачным
Самый простой способ ускорить рендеринг холста игры в Firefox OS — добавить к нему атрибут moz-opaque :
|
1
|
<canvas id=»mycanvas» moz-opaque></canvas>
|
Если ваш холст не прозрачен или вам не нужно ничего показывать за ним, просто установите этот атрибут, и он автоматически улучшит время рендеринга.
CSS Transform Scaling
Масштабирование холста важно, когда вы не знаете разрешение целевого устройства. Было бы странно, если бы игра занимала только одну треть экрана, или хуже, когда вы увидите только половину экрана. Этот метод подходит не для всех типов игр — если вы хотите сохранить пиксельную графику, вам нужно по-разному управлять масштабом, но для большинства игр он должен работать. Вот код, отвечающий за масштабирование:
|
1
2
3
4
5
|
var scaleX = canvas.width / window.innerWidth;
var scaleY = canvas.height / window.innerHeight;
var scaleToFit = Math.min(scaleX, scaleY);
stage.style.transformOrigin = «0 0»;
stage.style.transform = «scale(» + scaleToFit + «)»;
|
Это гарантирует, что ваша игра заполняет все доступное пространство, но сохранит масштаб, чтобы игра не была искажена. На больших устройствах игра будет выглядеть немного размытой, поэтому не забывайте об этом.
Рендеринг ближайшего соседа
Если вы работаете над игрой в пиксельном искусстве, очень важно иметь четкие пиксели вместо размытых — отключите сглаживание с помощью JavaScript, и вы готовы к работе!
|
1
2
3
4
|
var context = canvas.getContext(‘2d’);
context.webkitImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
|
Благодаря этому ваши пиксели будут максимально четкими, чтобы игроки могли в полной мере насладиться пиксельной графикой в вашей игре.
Другие техники
Есть много других методов, таких как использование закадрового холста, рендеринг целого пикселя, несколько холстов для слоев и другие интересные трюки — ознакомьтесь с этой невероятно полезной статьей о Mozilla Hacks, написанной Луи Стоуассером и Харальдом Киршнером . Некоторые из методов, описанных в этой статье, используются в игровом движке ImpactJS, поэтому вам даже не придется реализовывать его самостоятельно.
Подготовьте его для Firefox Marketplace
В Marketplace есть два типа приложений — упакованные и размещенные самостоятельно. Первый тип — это просто пакет .zip , содержащий все ресурсы, которые будут загружены на Торговую площадку. Второй тип, self hosted, — это прямая ссылка на игру, которую вы размещаете на своем собственном сервере. Упакованные приложения могут получить больший доступ к оборудованию, так как они доставляются с безопасного, известного Mozilla сервера, тогда как автономные приложения легче развертывать и изменять.
Файл манифеста
Для обоих типов приложений наиболее важным файлом является
manifest.webapp, содержащий всю необходимую информацию. Файл манифеста — это простой объект JSON, из которого будут предоставлены все данные для первоначальных настроек Firefox Marketplace:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
{
«name»: «My App»,
«description»: «My description goes here»,
«launch_path»: «/»,
«icons»: {
«128»: «/img/icon-128.png»
},
«developer»: {
«name»: «Your name or organization»,
«url»: «http://your-homepage-here.org»
},
«default_locale»: «en»
}
|
Вам просто нужно предоставить очень основную информацию, такую как название приложения, его расшифровку, предоставить значки, которые будут отображаться в Marketplace, основную информацию о себе, такую как имя разработчика и URL-адрес разработчика, и в конце локаль по умолчанию (т. Е. Приложение). языковая версия по умолчанию). Вы можете проверить файл манифеста, чтобы убедиться, что он не содержит ошибок.
права доступа
Основное различие между упакованными и самодостаточными приложениями заключается в разрешениях — упакованные приложения могут быть привилегированными или сертифицированными. Когда вам нужен доступ к оборудованию устройства, например, к камере или списку контактов, вы должны перечислить все в разделе разрешений.
|
1
2
3
4
5
6
7
8
9
|
«permissions»: {
«contacts»: {
«description»: «Required for autocompletion»,
«access»: «readcreate»
},
«alarms»: {
«description»: «Required to schedule notifications»
}
}
|
Привилегированные приложения имеют доступ к веб-API, которые имеют больше разрешений для доступа к оборудованию и данным пользователя на устройстве и имеют более высокую иерархию, чем обычные веб-приложения. Существует также наивысший рейтинг, называемый сертифицированными приложениями, которые контролируют критические системные функции, такие как, например, программа набора номера по умолчанию — только Mozilla и партнеры предоставляют такие приложения.
Самостоятельные манифесты
Если вам не нужен доступ к WebAPI на устройстве и вы хотите легко и быстро получать обновления, вы можете сами принять игру. Есть некоторые вещи, которые вы должны иметь в виду, чтобы доставить свою игру без проблем.
Кэшируйте все свои файлы, чтобы пользователи могли играть в игру в автономном режиме и сэкономить трафик на своем сервере. Не кэшируйте файл манифеста, так как это может привести к проблемам при обновлении игры. Файл манифеста должен иметь расширение .webapp и должен обслуживаться из того же источника. Тип Content-Type должен быть установлен на application/x-web-app-manifest+json , рекомендуется кодировка UTF-8.
При использовании Apache просто .htaccess эту строку в ваш файл .htaccess :
|
1
|
AddType application/x-web-app-manifest+json .webapp
|
В Nginix вы должны отредактировать файл mime.types и добавить аналогичную строку:
|
1
2
3
4
|
types {
// …
application/x-web-app-manifest+json webapp;
}
|
Для тестирования вашего приложения вы также можете использовать GitHub Pages для хостинга. Mozilla работала с GitHub, чтобы все настройки были на месте, просто не забывайте, чтобы имя файла манифеста заканчивалось на .webapp .
Загрузка вашей игры на рынок
Пришло время добавить нашу игру на рынок, чтобы люди могли легко найти ее в Firefox OS. Наша игра готова к отправке в Firefox Marketplace — зайдите в Центр разработчиков и войдите (или зарегистрируйтесь), чтобы получить доступ. Нажмите кнопку «Отправить новое приложение» — это приведет вас к форме отправки.
У вас будет несколько вариантов выбора — бесплатное или платное приложение, игра размещена или упакована, у вас также будет список поддерживаемых платформ. Внизу находится средство проверки манифеста, которое обеспечит правильность файла манифеста на 100%. Еще один шаг — заполнение таких деталей, как снимки экрана, другие медиа, информация о поддержке и сведения о приложении. После этого все готово — игра была представлена!
Все, что вам нужно сделать сейчас, это ждать, пока ваша игра будет принята — это не займет больше времени, чем несколько дней. После этого ваша игра публикуется и доступна для просмотра и игры!
Просматривая панель администратора, вы увидите страницу статистики, где вы найдете всю информацию об установках. Другие варианты включают редактирование уже представленной игры, управление членами команды, совместимость, платежи, статус и версии. Следите за отзывами пользователей, так как они являются отличным источником отзывов!
Уроки выучены
Как вы можете видеть, очень легко адаптировать вашу игру к Firefox OS и опубликовать ее в Marketplace. Документация готова, вся необходимая информация уже ждет вас. Было очень весело работать над Captain Rogers, имея в виду Firefox OS. Мне очень любопытно, как Enclave Games будут восприниматься на Marketplace по сравнению с другими разработчиками. Если у вас есть мнение о самой игре (или вы хотите протестировать ее на своем устройстве и оставить отзыв), Firefox OS или Marketplace не стесняются обсуждать это в комментариях!
Вывод
Вы находитесь на грани быстро растущего рынка мобильных устройств с огромным потенциалом, когда издатели быстро узнают, что HTML5 — это технология будущего. Есть бесконечные возможности, вам просто нужно воспользоваться шансом, использовать эту возможность и обогнать конкурентов!
Неизвестно, как это будет работать — я искренне верю в идею иметь мобильную операционную систему HTML5, но будущее зависит от реакции рынка наряду с клиентами. Так или иначе, у нас будут захватывающие времена для мобильной разработки HTML5. Ничто здесь не является потраченным впустую усилием, поскольку игры работают на всех платформах и получают специальный доступ на Firefox OS. Даже если Firefox OS дает сбой, ваша работа по-прежнему совместима с сетью, а не только с одной платформой.