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.

1 comment:

  1. Boom beach!!! migren el juego de "BOOM BEACH" si es que pueden u.u

    ReplyDelete