Migrar fácilmente juegos móviles en HTML5 a Ubuntu Phone (por Alan Pope)

Este artículo es una traducción del post de Alan Pope, disponible aquí en Inglés.

Me gusta jugar en el móvil y en la tablet y quería añadir algunos juegos más a Ubuntu. Con poco trabajo se 'migran' fácilmente juegos a Ubuntu Phone. He puesto la palabra 'migrar' entre comillas porque en algunos casos es muy poco esfuerzo, por lo que llamarlo 'migrar' puede aparentar que es más trabajo del que realmente es.

Actualización: Algunos usuarios me preguntaron por qué alguien quedría hacer esto, pudiendo simplemente crear un marcador en el navegador. Mis disculpas si no dejé esto claro. La gran ventaja es que el juego es cacheado offline. Con la ventaja que tiene esto en muchas situaciones, por ejemplo en viajes o con mal acceso a Internet. Por supuesto, no todos los juegos pueden ser completamente offline, este tutorial no será de gran ayuda para juegos online, como Clash of Clans. Sin embargo, sí será útil para muchos otros. También se hace uso del confinamiento de aplicaciones en Ubuntu, por lo que la aplicación/juego no tendrá acceso exterior a su directorio de datos.

Invertí algunas tardes y fines de semana con sturmflut, quien también plasmó su experiencia en el artículo Panda Madness.

Nos divertimos mucho migrando algunos juegos y quiero compartir qué hicimos, para que facilite la tarea de otros desarrolladores. Creé una plantilla básica en Github que puede usarse como punto de partida, pero quiero explicar el proceso y los problemas que tuvimos, para que otros puedan migrar más aplicaciones y juegos.

Si tienes alguna duda, déjame un comentario, o si lo prefieres, también puedes escribirme por privado.

Prueba de concepto


Para demostrar que podemos migrar fácilmente juegos existentes, distribuí un par de juegos de Code Canyon. Tienda donde desarrolladores pueden distribuir sus juegos, a la vez que otros desarrolladores aprenden de ellos. Comencé con un pequeño juego llamado Don't Crash el cual es un juego HTML5 creado con Construct 2. Podría distribuir más juegos, e incluso hay más tiendas de juegos, pero esto es sólo un buen ejemplo para mostrar el proceso.


1
Apunte: Construct 2 de Scirra es una herramienta que sólo funciona en Windows, es popular, potente y rápida, para el desarrollo multiplataforma de aplicaciones y juegos HTML5. Es usado por muchos desarrolladores indie para crear juegos que se ejecutan en navegadores de escritorio y dispositivos móviles. En desarrollo está Construct 3, el cual será más compatible y también estará disponible para Linux.

Antes de distribuir Don't Crash comprobé que funcionaba bien en Ubuntu Phone usando la demo que hay en Code Canyon. Tras verificar que funcionaba, pagué y recibí los ficheros con el 'código' de Construct 2.

2
Si eres un desarrollador de tus propios juegos, puedes saltarte este paso, porque ya tendrás el código a migrar.

Migrando a Ubuntu

Lo mínimo que se necesita para migrar un juego son algunos ficheros de texto y el directorio que contiene el código fuente. Algunas veces hacen falta un par de trucos para los permisos y bloquear la rotación, pero en líneas generales, Simplemente Funciona (TM).

Yo estoy usando un ordenador con Ubuntu para todo el empaquetado y pruebas, pero para este juego necesité un ordenador con Windows para exportarlo desde Construct 2. Los requisitos pueden variar, pero si no tienes Ubuntu, puedes instalarlo en una máquina virtual como VMWare o VirtualBox, y sólo tendrás que añadir el SDK como se detalla en el developer.ubuntu.com.

Este es el contenido entero del directorio, con el juego en la carpeta www/

alan@deep-thought:~/phablet/code/popey/licensed/html5_dontcrash⟫ ls -l
total 52
-rw-rw-r-- 1 alan alan   171 Jul 25 00:51 app.desktop
-rw-rw-r-- 1 alan alan   167 Jun  9 17:19 app.json
-rw-rw-r-- 1 alan alan 32826 May 19 19:01 icon.png
-rw-rw-r-- 1 alan alan   366 Jul 25 00:51 manifest.json
drwxrwxr-x 4 alan alan  4096 Jul 24 23:55 www


Creando el metadata

 Manifiesto

Contiene los detalles básicos acerca de la aplicación, como el nombre, descripción, autor, email y alguna cosa más. Aquí están los mios (en el manifest.json) de la última versión de Don't Crash. Los campos a rellenar son aclaratorios por sí mismos. Por lo que sustituye cada uno de ellos con los detalles de tu propia aplicación.

{
    "description":  "Don't Crash!",
    "framework":    "ubuntu-sdk-14.10-html",
    "hooks": {
        "dontcrash": {
            "apparmor": "app.json",
            "desktop":  "app.desktop"
        }
    },
    "maintainer":   "Alan Pope ",
    "name":         "dontcrash.popey",
    "title":        "Don't Crash!",
    "version":      "0.22"
}


Apunte: "popey" es mi nombre de desarrollador en la tienda, tienes que sustituirlo por el mismo nombre que usas en tu página del portal de desarrollador.

3

 Perfil de seguridad

El fichero app.json, detalla qué permisos necesita la aplicación para ejecutarse:

{
    "template": "ubuntu-webapp",
    "policy_groups": [
        "networking",
        "audio",
        "video",
        "webview"
    ],
    "policy_version": 1.2
}


Fichero Desktop

Define cómo se lanza la aplicación, cual es el icono utilizado y algunos otros detalles:

[Desktop Entry]
Name=Don't Crash
Comment=Avoid the other cars
Exec=webapp-container $@ www/index.html
Terminal=false
Type=Application
X-Ubuntu-Touch=true
Icon=./icon.png


De nuevo, cambia los campos Name y Comment, y practicamente hemos finalizado.

Construyendo el paquete click

Con los ficheros creados y un icono icon.png, compilamos para crear el paquete .click que subiremos a la tienda. Este es el proceso entero:

alan@deep-thought:~/phablet/code/popey/licensed⟫ click build html5_dontcrash/
Now executing: click-review ./dontcrash.popey_0.22_all.click
./dontcrash.popey_0.22_all.click: pass
Successfully built package in './dontcrash.popey_0.22_all.click'.



En mi portátil apenas se compila en un segundo.

Ten en cuenta la salida del comando, la cual realiza comprobaciones de validez de paquetes .click al compilar, asegurándose de que no haya fallos que lo rechacen en la Tienda.

Comprobación en un dispositivo Ubuntu

Comprobar el paquete .click en un móvil es muy fácil. Copia el fichero .click desde el PC con Ubuntu vía USB, usando adb para instalarlo:

adb push dontcrash.popey_0.22_all.click /tmp
adb shell
pkcon install-local --allow-untrusted /tmp/dontcrash.popey_0.22_all.click


Vete al scope de aplicaciones y arrastra hacia abajo para que refresque, pulsa en el icono y prueba el juego.

4
¡Conseguido! :)

5

Configurando la aplicación

En este punto, para alguno de los juegos ví algunas mejoras, que las expondré aquí:

Cargar localmente los ficheros

Construct 2 indica que "Los juegos exportados no funcionarán hasta que los subas por un popup ("When running on the file:/// protocol, browsers block many features from working for security reasons") que se muestra en javascript. Borré esas líneas de js que comprueban que el index.html y el juego funcionan adecuadamente en nuestro navegador.

Orientación del dispositivo

Con la reciente actualización OTA de Ubuntu siempre podemos activar la orientación del dispositivo, lo cual significa que algunos juegos pueden rotarse y no ser jugables. Podemos bloquear los juegos en modo vertical u horizontal mediante el fichero .desktop (creado previamente) con simplemente añadir esta línea:

X-Ubuntu-Supported-Orientations=portrait

Obviamente cambiar "portrait" por "landscape" si el juego usa el modo horizontal. Para Don't Crash no lo hice porque el desarrollador tenía la deteción de la rotación por código y dice al jugador que rote el dispositivo a la posición necesaria.

Enlaces Twitter

Algunos juegos tenían enlaces de Twitter embebidos, mediante los cuales los jugadores pueden publicar su puntuación. Desafortunadamente la versión web móvil de Twitter no admite eso, por lo que no debería de haber un enlace que contiene "Check out my score in Don’t Crash". Por el momento, quité los enlaces a Twitter.

Cookies

Nuestro navegador no soporta cookies locales. Algunos juegos las usan. Para Heroine Dusk cambié las cookies a Local Storage.

Publicando en la tienda

Publicar paquetes .click en la Tienda de Ubuntu es rápido y fácil. Simplemente accede a http://myapps.developer.ubuntu.com/dev/click-apps/ , identificate, pulsa en "New Application" y sigue los pasos para subir el paquete click.

6

¡Esto es todo! Seguiré publicando algunos juegos más en la tienda. Mejorasa la plantilla de Github son bienvenidas.

Artículo original de Alan Pope. Traducido por Marcos Costales.

Driving with my Ubuntu Phone [video]

uNAV is a turn-by-turn GPS navigation for Ubuntu Phone, 100% GPL powered by OpenStreetMap and OSRM.

I could show you a few screenshots and I could tell you how it is working...
Or I could show you to me driving a random route :)) Click for watch it and use fullscreen for the details:

Driving with Ubuntu Phone

Install uNAV into your phone from the Ubuntu Store (You have to update to OTA5!). 

I want to thank you:
David Planella, who helped me a lot with the development of this application |o/
Sergi Quiles Pérez, who helped me a lot with ideas, feedback and testing in this last version.
Carla Sella, Ilonka O., Morgane & Jonathan Wiedemann, Nathan Haines and Paco Molinero for the voices.
José Fernández Calero for this video.
And to all of you that you helped me in one way or another in these months :) Thanks!

BQ E4.5 | BQ E5 | Meizu MX4 - ¿Cual comprar?

Cada vez disponemos de más móviles para comprar con Ubuntu Phone.
He tenido la suerte de poder probar los 3 modelos. Dispones de las reviews correspondientes aquí: BQ E4.5, BQ E5 y Meizu MX4.

Con esta perspectiva, ¿Qué modelo comprar?


E5 | MX4 | E4.5


El BQ E4.5 es el que tiene el sistema operativo más fluido y es que salir 5 meses antes que los otros dos influye.

Yo personalmente compraría el MX4 por un sólo motivo: Su extraordinaria cámara. También sobresale por su pantalla con una resolución envidiable.

Si se busca duración de batería, el E5 es el que mejor resultado obtiene, pues su procesador es igual que el E4.5 pero con más mAh de batería.

Por precio, compraría el E5, por 30€ más se obtienen muchas más prestaciones que el E4.5.


E5 | MX4 | E4.5


Por diseño: MX4
Por pantalla: MX4
Por cámara trasera: MX4
Por cámara delantera (para selfies): E5
Por conectividad de datos: MX4
Por batería: E5
Por precio: E4.5
Por almacenamiento: E5
Por potencia (CPU+RAM): MX4

Este última valoración por potencia, puede que sea importante a medio plazo, para usar el móvil como CPU con un monitor.

Fotografías por David Castañón bajo licencia CC BY 3.0.

Review Meizu MX4 Ubuntu Edition - The beast!

Un móvil que lo defino con sólo una palabra: IMPRESIONANTE.

Meixu MX4 Ubuntu Edition

En una sobria caja blanca se presenta el móvil más potente gobernado por Ubuntu: El Meizu MX4.

Caja


La primera vez que lo coges sorprende su diseño, muy elegante, de líneas redondeadas y con un peso de sólo 147gr. para un tamaño de 144 x 75,2 x 8,9mm.

Diseño


Lo que más llama la atención es su portentosa pantalla de 5,36", con resolución 1920 x 1152 (418PPI) y cristal: Gorilla Glass 3. Esta pantalla ofrece una calidad extraordinaria. Se ve muy bien y una vez que te habitúes a este tamaño, te aseguro que no querrás un móvil más pequeño.

Pantalla

Es el único móvil Ubuntu con 4G. En mis móviles anteriores sólo disponía de 3G. El 4G se nota y mucho: Cualquier página o aplicación que use datos cargará en el acto.

Conectividad

Pero lo que personalmente más aprecio es su excepcional cámara trasera, no sólo por sus 20,7 mp protegidos también por un cristal Gorilla Glass 3, si no por el contraste, definición y color conseguido en sus fotografías.

Cámara
 Este es un ejemplo que disparé este fin de semana:

Ejemplo de calidad fotográfica

La batería tiene mucha capacidad: 3100mAh, aunque aún tiene que afinarse por parte de Canonical.


More than better!


El resto de hardware habla por si sólo: CPU dual quadcore (ARM A17 2.2GHz x 4 + ARM A7 1.7GHz x 4), RAM de 2 GB y 16GB de almacenamiento interno (no dispone para expansión por microSD).

MX4

Su precio: 299€. Nada caro para ser un gama alta y actualmente, el buque insignia de Ubuntu.

Puedes comprar el Meizu MX4 aquí.

Fotografías por David Castañón bajo licencia CC BY 3.0.

¿Por qué comprar un Ubuntu Phone? Léase, ventajas de un Ubuntu Phone

En la review del BQ E5, un lector me hacía una pregunta tan concisa como interesante: ¿Qué ventajas tiene un móvil con Ubuntu?

Lo cierto es que no lo había pensado detenidamente. Llevo usando Ubuntu Phone durante 5 meses porque personalmente prefiero que Ubuntu sea el sistema operativo en mi móvil y ese para mi, es un factor de peso más que suficiente.


 
Meizu MX4 Ubuntu Edition



Tras pensarlo un rato, en mi opinión, Ubuntu Phone destaca por estos motivos:

  • Servicios, no aplicaciones: Ubuntu Phone está enfocado a que usemos servicios y no tanto las aplicaciones. ¿Cómo? Mediante los scopes, que marcan una disrupción original y única en los sistemas operativos móviles actuales. Lo mejor es ver este vídeo, para entender qué son los scopes y su potencial:
Scopes
  • Libertad: Un sistema operativo 100% libre y la gran mayoría de aplicaciones, también libres.
  • Ubuntu en tu bolsillo: Un sistema operativo 100% Linux, sin emulaciones.
  • Cierra el círculo: Podrás usar Ubuntu en Desktop + Servidor + Nube + Móvil.
  • Evitar al Gran Hermano en los que se convirtieron Google y Apple: Y la NSA que añadió posteriormente la guinda al pastel.
  • Diseño sencillo, a la vez que elegante. Aunque para gustos, colores :)
  • Sin fragmentación: Con actualizaciones OTA mensuales para todos los móviles.
  • Un "Ubuntu" Phone: Canonical está totalmente volcada en Ubuntu Phone y la sensación es de que tienes un móvil de Ubuntu, más que tener un móvil BQ o Meizu.
  • Gestos: Unity muestra todo su potencial táctil. Sencillo, rápido e intuitivo.
  • Desarrollo: Un buen SDK y muchísimas posibilidades de desarrollo: QML, HTML5 (incluído cordova), webapps... Y una buena tienda (¡por fin!) desde donde descargarlas/descubrirlas.

BQ Ubuntu Edition


Obviamente no todo es perfecto. Echo en falta:
  • Aplicaciones: Hay muchas, pero faltan aplicaciones importantes para muchos usuarios.
  • tethering: Recordemos que Android lo sacó en la versión 2.2
  • bluetooth: No funciona aún como debería.
 
Cada usuario es un mundo. Pero yo estoy totalmente satisfecho con mi Ubuntu Phone :)

Review BQ E5 Ubuntu Edition

Desde hace casi medio año uso el BQ E4.5 Ubuntu Edition. Narré el acto de presentación, la entrevista a su CEO, una review a su hardware, al sistema operativo, a las aplicaciones, calidades de foto y batería, funda e incluso a la percepción en el día a día y tras un mes de uso.

Pero la apuesta de BQ no sólo ha quedado en ese modelo. La empresa española sigue apostando muy fuerte por nuestro sistema operativo móvil favorito, en esta ocasión con su buque insignia, el BQ E5, un móvil con una de las mejores calidades/prestaciones/precio del mercado.


Presentación

El modelo E5 se nos presenta en una caja muy parecida a la del E4.5. Las letras rojas sobre negro ya nos indica qué joya alberga en su interior.
Exteriormente el móvil tiene líneas simples y elegantes, de tacto suave.
Internamente disponemos de doble SIM (podemos usar 2 números de teléfono simultáneamente) y soporte para ampliar el almacenamiento interno de 16GB con una microSD de hasta 32GB.


Muy buen diseño: sobrio y elegante
Su pantalla de 5" HD 720 x 1280 (294 HDPI) sobresale especialmente y es muy útil porque disponemos de un teclado más ancho para escribir más fácil. Tras probar el E5 una semana, al volver al E4.5 me parecía pequeño...

La pantalla, por resolución y tamaño es la mejor característica del dispositivo
La cámara de 13 Mp es mejor que la del E4.5. No sólo por más resolución, si no por más calidad de foto en color, contraste y luz:

Cámara

Este par de fotos están hechas en el mismo sitio y a la misma hora:

BQ E4.5 Ubuntu Edition BQ E5 Ubuntu Edition



Su batería de 2500 mAH se nota y mucho. Dando para más horas que la del E4.5.


Pesa poco para la gran batería que tiene

¿Cual comprar? ¿E4.5 ó E5?
El E4.5 cuesta 169,9€ y el E5 cuesta 199,9€.
Si prefieres pagar lo mínimo y un móvil con pantalla normal tirando a grande y batería normal, el E4.5 te será perfecto.
Yo personalmente compraría el E5. Por sólo 30€ de diferencia, la calidad y tamaño de pantalla, cámara, batería y almacenamiento interno, merece la pena.

BQ E5

Puedes comprar el BQ E5 aquí. Puedes comprar el BQ E4.5 aquí.

Fotografías por David Castañón bajo licencia CC BY 3.0.

Create a webapp with "navigation controls" for Ubuntu Phone in 5' and without SDK

Thanks to Oliver Grawet, we have available this template:
    bzr branch lp:~ogra/junk/alternate-webapp-container
for generating something like this in our webapps:
 
Navigation control

Awesome right? Do you want to adapt your webapp to this? It's really easy, fast and useful for the user! Let's go!

Intro:
By example, our app will be this blog, then, the data will be:
    Web: http://thinkonbytes.blogspot.com/
    Title: Less is more than more
    Allowed subdomains: http://thinkonbytes.blogspot.com/*
    Internal webapp name: thinkonbytes
    Developer: costales
We'll work with the Oliver's template now.


Icon:
Overwrite the alternate-webapp-container/icon.png with a new PNG icon with this size: 256x256.



Replace in the files:
alternate-webapp-container/qml/Main.qml:
   applicationName: "thinkonbytes.costales"

alternate-webapp-container/app.desktop:
   Name=Less is more than more
 
alternate-webapp-container/config.js:
    var webappName = "thinkonbytes.costales"
    var webappUrl = "
http://thinkonbytes.blogspot.com/"
    var webappUrlPattern = "
http://thinkonbytes.blogspot.com/*"

alternate-webapp-container/manifest.json:
    {
    "description": "
thinkonbytes webapp",
        "framework": "ubuntu-sdk-14.04",
        "hooks": {
            "
thinkonbytes": {
            "apparmor": "app.json",
            "desktop": "app.desktop"
        }
    },
        "maintainer": "Marcos Costales <marcos.costales@gmail.com>",
        "name": "
thinkonbytes.costales",
        "title": "
thinkonbytes",
        "version": "0.2"
    }



 

Generate the installer .click:
 

cd alternate-webapp-container
click build .



Test it!
Copy it to your phone and in a Terminal install it with this command:

pkcon install-local --allow-untrusted /<path>/<file>.click

Refresh your apps (dropdown the apps scope) and you'll see your new app. Launch it and check all works fine.



Upload to the Store:
Upload the file .click to the Store as you can see here in this web.


It's done :) If you have any doubt, ask in the comments. Cheers!