Preparando para Firefox OS

¡Firefox OS es un sistema operativo móvil completo construido alrededor de tecnologías web abiertas! El sistema operativo se ha creado desde cero para permitir que HTML5 y Javascript liberen todo el potencial del hardware del dispositivo. Siga leyendo para obtener más información sobre Firefox OS y cómo puede comenzar a migrar sus aplicaciones web existentes a la plataforma hoy.!

Firefox OS

Firefox OS es un sistema operativo móvil creado desde cero por Mozilla. Evolucionó de un repositorio de GitHub vacío a un sistema de código abierto completamente desarrollado en más de un año, lo que por sí solo es bastante impresionante. Construido desde la idea básica hasta el producto final, enviado por las empresas de todo el mundo. Veamos por qué esto es tan especial y por qué debería importarte..

Lo más importante de Firefox OS es la tecnología utilizada, es sólo ¡La web! Todos los desarrolladores front-end y los programadores de JavaScript ahora pueden crear fácilmente aplicaciones HTML5 directamente para la plataforma. La web móvil ahora tiene las tecnologías y el acceso al hardware que merece. Las API web le permiten "hablar" directamente con el hardware del dispositivo usando JavaScript, lo que hace posible tomar fotos, enviar mensajes o iniciar llamadas.

Seamos claros sobre el público objetivo: no es que Firefox OS combatirá directamente los dispositivos de gama alta con iOS y Android a bordo en países altamente desarrollados. El objetivo principal es proporcionar una experiencia de teléfono inteligente a aquellos que normalmente no tendrían la oportunidad de comprar un dispositivo de este tipo. Los teléfonos con Firefox OS serán una alternativa barata para aquellos que deseen cambiar los teléfonos con funciones y sumergirse en la web utilizando navegadores modernos. Hay una gran demanda de esto y Mozilla quiere llenar el vacío.!

Es el "nuevo y viejo" ecosistema, ya que las tecnologías web ya son conocidas por miles de programadores de JavaScript y desarrolladores front-end. No tienes que aprender un nuevo idioma o entorno de desarrollo. Todo lo que sabe sobre la web se puede usar para crear impresionantes aplicaciones de Firefox OS. Portar tu juego es muy simple y requiere un mínimo esfuerzo para lograrlo..

En este artículo, lo guiaré a través de todo el proceso desde tener solo un juego de HTML5 para dispositivos móviles, optimizarlo para el dispositivo con sistema operativo Firefox y publicar el resultado en el mercado de Firefox. Usaré a Captain Rogers como ejemplo..

Prueba de Firefox OS

Hay dos formas de probar tu juego para Firefox OS: usando un simulador de software o conectando el dispositivo real. Ambos son útiles y debes comenzar con el simulador para ver si el juego está funcionando. Después de eso, empujar el juego en el dispositivo finalmente lo pondrá a prueba y lo ayudará a deshacerse de todos los errores. Entonces puedes enfocarte en el proceso de publicación..

Simulador

Hay una manera de probar su juego o aplicación sin la necesidad de tener un dispositivo real en su mano. Es el Simulador de Firefox OS y simplemente puede instalarlo como un complemento en su navegador Firefox. No podrás probar los controles táctiles, pero al menos puedes ver si el juego funciona y se comporta como debería. Usando el simulador también puede empujar su aplicación directamente al dispositivo.

Dispositivos disponibles

Si realmente necesitas tu propio dispositivo, puedes obtenerlo desde Geeksphone. Están proporcionando dos teléfonos de vista previa para desarrolladores: Keon y Peak. Esos dos dispositivos son muy similares a los productos finales que se venderán en todo el mundo. Ya se anunciaron los primeros dispositivos comerciales: Movistar en España ofrece ZTE Open y Alcatel OneTouch Fire a un bajo precio de 69 euros (sin contrato, con tarjeta microSD de 4 GB y 30 euros para llamadas). Los siguientes en la lista son Polonia, Colombia y Venezuela, y pronto habrá más países.

Firefox Marketplace

Cuando ya tenga un sistema operativo en su dispositivo, sería bueno instalar algunas aplicaciones en él. Aquí es donde entra en juego Firefox Marketplace: la tienda de Mozilla que ofrece todo lo que necesita. La diferencia entre las tiendas de iOS o Android y Firefox Marketplace es que la última es abierta y gratuita. Todo el mundo puede administrar su propio mercado, no está limitado al único lugar para distribuir aplicaciones y juegos. Ni siquiera tiene que dirigir a la gente al mercado en sí mismo si desea que instalen su juego en su dispositivo. ¡Hay una API para eso! Usando la API de aplicación web abierta, puede crear un simple botón "instalar esta aplicación" usando un botón HTML que llame a unas pocas líneas de JavaScript. Los usuarios finales podrán instalar el juego directamente en su dispositivo..

Mercados para todos

Los operadores móviles proporcionarán mercados para sus propios clientes con las aplicaciones dirigidas especialmente para ellos. Esto también les dará la oportunidad de comenzar a ganar dinero nuevamente y dejar de ser solo los proveedores de datos. Es importante comprender que todos los jugadores en el espacio de Firefox OS pueden beneficiarse de la compatibilidad con el sistema.

Descubribilidad

Existe un enorme potencial en la forma en que se crean las aplicaciones web: puede buscar contenido dentro de ellos Sin necesidad de descargarlos. Como solo se trata de HTML, CSS y JavaScript, puede buscar cualquier cosa que le interese y no se limitará al título o la descripción; es indexable y se puede buscar al igual que cualquier sitio web ahora.

Ya disponible

Lo mejor es que ya puede agregar sus aplicaciones y juegos: el Mercado está saliendo de la etapa beta y se está abriendo para los clientes, pero ya estaba disponible para los desarrolladores desde hace algún tiempo. Ambas partes tuvieron tiempo de adaptarse al entorno y prepararse para la plataforma. Casi no hay competencia, he encontrado alrededor de 500 juegos en el Mercado. Es difícil incluso intentar compararlo con la App Store de Apple, donde puedes encontrar cientos de miles de aplicaciones. Ahora es el mejor momento para aprovechar la oportunidad, Firefox Marketplace está a la espera de su contenido.!

Estudio de caso - Capitán Rogers

Como mencioné anteriormente, le mostraré todo el proceso de conversión de su juego HTML5 normal al que funciona completamente, optimizado para el dispositivo Firefox OS y disponible de forma gratuita en Firefox Marketplace. El juego Captain Rogers fue creado usando ImpactJS y es muy simple: eres el valiente Captain Rogers y tienes que volar a través de un campo de asteroides para escapar de la malvada flota de Kershan. Fue creado como una colaboración entre Enclave Games (Andrzej Mazur - codificación) y Blackmoon Design (Robert Podgórski - gráficos). El objetivo principal era hacerlo pequeño y simple, pero completamente funcional y pulido..

Optimice su juego para Firefox OS

Hay muchas formas de optimizar su juego para la plataforma Firefox OS y la mayoría de ellas también se pueden aplicar a los juegos HTML5 normales: es la tecnología web, ¿no? A continuación, verá algunas de las técnicas básicas que acelerarán rápidamente el rendimiento, harán que el juego sea más flexible o simplemente lo harán ver mejor..

Opaco de moz

La forma más sencilla de acelerar la representación de lienzo del juego en Firefox OS es agregar el moz-opaco atribúyalo a ella:

 

Si su lienzo no es transparente o no tiene que mostrar nada detrás de él, simplemente configure este atributo y mejorará automáticamente los tiempos de representación..

CSS Transform Scaling

La ampliación del lienzo es importante cuando no conoce la resolución del dispositivo de destino. Se vería raro si el juego tomara solo un tercio de la pantalla, o peor, cuando veas solo la mitad. Este método no es para todos los tipos de juegos: si desea conservar un arte de píxeles, debe administrar la escala de manera diferente, pero para la mayoría de los juegos debería funcionar. Aquí está el código responsable de la escala:

 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 + ")";

Esto asegurará que su juego esté llenando todo el espacio disponible, pero preservará la escala para que el juego no se distorsione. Sin embargo, en dispositivos grandes, el juego se verá un poco borroso, así que recuerda tener cuidado con esto..

Representación del vecino más cercano

Si está trabajando en un juego de pixel art, es muy importante tener píxeles nítidos en lugar de borrosos. Desactive el suavizado con JavaScript y estará listo para comenzar.!

 var context = canvas.getContext ('2d'); context.webkitImageSmoothingEnabled = false; context.mozImageSmoothingEnabled = false; context.imageSmoothingEnabled = false;

Gracias a esto tendrás tus píxeles lo más nítidos posible, para que los jugadores puedan disfrutar plenamente de la imagen de píxeles en tu juego.

Otras tecnicas

Hay muchas más técnicas para explorar como usar lienzo fuera de pantalla, renderizado de píxeles completos, múltiples lienzos para capas y otros trucos geniales. Echa un vistazo a este artículo increíblemente útil sobre Mozilla Hacks escrito por Louis Stowasser y Harald Kirschner. Algunas de las técnicas cubiertas en ese artículo se usan en el motor de juego ImpactJS, por lo que ni siquiera tiene que implementarlo usted mismo..

Prepáralo para el Firefox Marketplace

Hay dos tipos de aplicaciones en Marketplace: empaquetadas y auto alojadas. El primer tipo es solo un .cremallera paquete que contiene todos los activos que se cargarán al Mercado. El segundo tipo, auto hospedado, es un enlace directo al juego que alojas en tu propio servidor. Las aplicaciones empaquetadas pueden obtener más acceso al hardware, ya que se entregan desde un servidor seguro y conocido de Mozilla, mientras que las aplicaciones auto alojadas son más fáciles de implementar y cambiar..

Archivo de manifiesto

Para ambos tipos de aplicaciones el archivo más importante es el
manifest.webapp que contiene toda la información necesaria. Un archivo de manifiesto es solo un objeto JSON simple desde el que se proporcionarán todos los datos para la configuración inicial de Firefox Marketplace:

 "name": "My App", "description": "Mi descripción va aquí", "launch_path": "/", "icons": "128": "/img/icon-128.png", "desarrollador": "nombre": "Su nombre u organización", "url": "http://su-nombre-de-página.org", "default_locale": "en"

Solo tiene que proporcionar información muy básica como el nombre de la aplicación, su descripción, los íconos que se muestran en el Mercado, información básica sobre usted como el nombre del desarrollador y la URL del desarrollador, y al final la configuración regional predeterminada (es decir, la aplicación). versión por defecto del idioma). Puede validar el archivo de manifiesto para asegurarse de que esté libre de errores.

Permisos

La principal diferencia entre aplicaciones empaquetadas y auto hospedadas son los permisos: las aplicaciones empaquetadas pueden ser privilegiadas o certificadas. Cuando necesite acceder al hardware del dispositivo, como la cámara o la lista de contactos, debe incluir todo en la sección de permisos.

 "permisos": "contactos": "descripción": "Requerido para completar automáticamente", "acceso": "readcreate", "alarmas": "descripción": "Requerido para programar notificaciones"

Las aplicaciones con privilegios tienen acceso a las API web que tienen más permisos para acceder al hardware y a los datos del usuario en el dispositivo y están en una jerarquía más alta que las aplicaciones web habituales. También existe el rango más alto llamado aplicaciones certificadas que tienen control sobre las funciones críticas del sistema como, por ejemplo, el marcador predeterminado: solo Mozilla y sus socios proporcionan ese tipo de aplicaciones.

Manifiestos auto alojados

Cuando no necesite acceder a las WebAPI en el dispositivo y desee tener actualizaciones fáciles e instantáneas, puede decidir hospedar el juego usted mismo. Hay algunas cosas que debes tener en cuenta para entregar tu juego sin ningún problema..

Almacena en caché todos tus archivos para permitir a los usuarios jugar el juego sin conexión y ahorrar en el tráfico en tu servidor. No caché el archivo de manifiesto aunque como esto podría llevar a problemas cuando quieres actualizar el juego. El archivo manifiesto debe tener una extensión. .Aplicación Web y tienen que ser servidos desde el mismo origen. los Tipo de contenido tiene que ser configurado para aplicación / x-web-app-manifest + json, Se recomienda la codificación UTF-8.

Cuando use Apache solo suelte esa línea en su .htaccess expediente:

 Aplicación AddType / x-web-app-manifest + json .webapp

En Nginix tienes que editar el mime.types archivo y añadir una línea similar:

 tipos //… aplicación / x-web-app-manifest + json webapp; 

Para probar su aplicación, también puede usar GitHub Pages para hospedar. Mozilla trabajó con GitHub para tener todas las configuraciones en su lugar, solo recuerda que el nombre del archivo de tu archivo de manifiesto finalice en .Aplicación Web.

Subiendo tu juego al mercado

Es hora de agregar nuestro juego al mercado para que la gente pueda encontrarlo fácilmente en Firefox OS. Tenemos nuestro juego listo para ser enviado a Firefox Marketplace: diríjase a Developer Hub e inicie sesión (o regístrese) para obtener acceso. Busque el botón "Enviar una nueva aplicación": esto lo llevará al formulario de envío.

Tendrás varias opciones para elegir, ya sea que tu aplicación sea gratuita o pagada, el juego esté alojado o empaquetado, también tendrás una lista de plataformas compatibles. En la parte inferior hay un validador de manifiestos que garantizará que el archivo de manifiesto sea 100% correcto. Otro paso es simplemente rellenar los detalles como capturas de pantalla, otros medios, información de soporte y detalles de la aplicación. Después de que hayas terminado, el juego fue enviado.!

Todo lo que tiene que hacer ahora es esperar a que su juego sea aceptado, no debería tomar más de unos pocos días. Después de que tu juego esté publicado y disponible para que todos lo vean y jueguen.!

Mirando a través del panel de administración, verá la página de estadísticas donde encontrará toda la información sobre las instalaciones. Otras opciones incluyen editar un juego ya enviado, administrar miembros del equipo, compatibilidad, pagos, estado y versiones. Mantenga un ojo en las opiniones de los usuarios, ya que son una gran fuente de comentarios!

Lecciones aprendidas

Como puedes ver, es muy fácil adaptar tu juego a Firefox OS y publicarlo en el Mercado. La documentación está lista, toda la información necesaria está esperando por usted. Fue muy divertido trabajar en Captain Rogers con Firefox OS en mente. Tengo mucha curiosidad por la forma en que Enclave Games se percibirá en el Mercado en comparación con otros desarrolladores. Si tiene alguna opinión sobre el juego en sí (o si quiere probarlo en su dispositivo y enviar comentarios), Firefox OS o el Mercado pueden discutirlo en los comentarios.!

Conclusión

Estás al borde del mercado móvil de rápido crecimiento con un enorme potencial donde los editores están aprendiendo rápidamente que HTML5 es la tecnología del futuro. Hay infinitas posibilidades, solo tienes que aprovechar la oportunidad, aprovechar la oportunidad y superar a la competencia.!

No se sabe cómo funcionará: realmente creo en la idea de tener un sistema operativo móvil HTML5, pero el futuro depende de la reacción del mercado junto con los clientes. De una forma u otra tendremos momentos emocionantes para el desarrollo móvil HTML5. Nada aquí es un esfuerzo inútil, ya que los juegos se ejecutan en todas las plataformas y obtienen acceso especial en Firefox OS. Incluso si Firefox OS falla, su trabajo sigue siendo compatible con la web en lugar de una sola plataforma..