Tutorial Corona SDK

El tutorial tratará sobre Corona SDK el cual tuve el placer de aprender el año pasado en un curso y me gustaría compartir la experiencia conseguida con vosotros. Será mi primer tutorial por lo que seas compasivos y espero que les guste y les saquen provecho. Veamos que es lo que nos ofrece Corona SDK.

1. Introducción

Cuando se desarrolla una aplicación, normalmente, se agradece que las herramientas que estamos utilizando nos simplifiquen el proceso lo máximo posible. Uno de los mayores problemas hoy en día en cuanto a dispositivos móviles se refiere es la enorme heterogeneidad que hay y con ella su incompatibilidades. Por lo tanto una pregunta que podríamos hacer es, ¿y si la herramienta nos permite utilizar el producto que desarrollemos en plataformas heterogéneas?. Es normal en este caso sacrificar algunas funcionalidad que son exclusivas de un dispositivo para aprovechar la ventaja de minimizar el coste de desarrollo pues no hay que reescribir código y tener a diferentes equipos desarrollando para cada una de las plataformas móviles.

Pues bien, Corona SDK es precisamente esto, una herramienta o kit de desarrollo software desarrollada por Corona Labs Inc. multiplataforma. Permite desarrollar aplicaciones para los siguientes sistemas: iOS, Android (incluyendo Android TV), Kindle y Windows Phone 8.

Página web Corona

2. Corona SDK: Características y licencias

La principal pregunta cuando nos queremos elegir una herramienta de trabajo (ya sea de este tipo o cualquier otro) es, ¿que nos ofrece que otras no simplificando el proceso?. Pues bien Corona SDK responde muy bien a esta pregunta, empezando por el soporte a las principales plataformas móviles lo cual ya es mucho.

Otra característica fundamental por la que destaca es la rapidez de desarrollo en los proyectos. Esto es debido a la gran cantidad de librerías de las que dispone desde alguna básica para entorno gráfico hasta aquellas relacionadas con la monetización o redes sociales. Es por ello que es posible crear juegos y aplicaciones rápidamente pudiendo ver los cambios en el simulador del que dispone, Corona Simulator. El desarrollo se realiza en Lua, un lenguaje interpretado bastante ligero y fácil de aprender aunque según mi opinión demasiado simple en algunos aspectos. En el siguiente apartado veremos una pequeña introducción a él.

Corona SDK se basa en estándares de la industría incluyendo por ejemplo OpenGL, OpenAL, Box2D, Facebook, SQLite y otros mucho como se ven en la imagen. Como ejemplo Open GL es el motor gráfico en el cual se basa permitiendo increíbles efectos son  unas pocas lineas. En la figura de más abajo vemos algunos mas estándares.

También decir que la comunidad que hay detrás es bastante amplia por lo que se tiene gran cantidad de información, tutoriales y blog donde preguntar dudas y aprender. Esto aunque parece una tontería para mí es de lo más importante de una herramienta, que sea de confianza y podamos resolver los problemas que se vayan presentando.

Se trata de una herramienta la cual se especializa para el desarrollo de juegos aunque también se puede hacer aplicaciones. Por lo tanto dispondrá de muchas más ayuda para el desarrollo de videojuegos, como ejemplo comentar la nueva herramienta que presentaron hace poco (en fase beta) denominada Composer GUI orientada al diseño visual de escenarios, es decir sin necesidad de código directamente.

Antes de pasar al siguiente apartado comentar las licencias de Corona:

• Licencia gratis
• Licencia básica: es la que dispuse durante el curso que realice
• Licencia pro
• Licencia entreprise

Las limitaciones de cada una de las licencias es mejor verlas en su página Web en la sección de precios donde se muestra una tabla.

Licencias de Corona SDK

Para este tutorial usaremos la licencia gratis la cual nos permite construir aplicaciones con algunas limitaciones de ingresos y herramientas adicionales.

3. Instalación Corona SDK

La instalación es muy sencilla ya que solamente hay que acceder a la página web de Corona y en accediendo a Corona SDK ya podemos descargar la versión gratuita para el sistema operativo que tengamos ya sea OS X o Windows.

Descargar Corona SDK

Para la descarga es necesario haberse registrado en la pagina web de Corona ya que se nos pedirá iniciar sesión antes de descargar.

Una vez descargada la ultima versión seguimos el instalador como cualquier otro programa y lo tendremos listo.

Por último comentar que será necesario un editor, este puede ser cualquiera en principio no hay ningún requisito pero es verdad que un editor de Lua que permita incluir Corona SDK ayuda. Por lo tanto a recomendar estaría Sublime Text ya que Corona ha creado un plugin especial para él denominado Corona Editor, ZeroBrane (gratuito) y por último el que yo uso (ya que cuando yo empece el plugin no existía) LuaGlider (pago) el cual es muy completo.

Si todo ha ido correctamente si abrimos Corona SDK se verá algo similar a la foto siguiente:

Como vemos tendremos un apartado para crear un proyecto el cual crea plantillas (en blanco o de algún tipo) las cuales después se modificarán con el editor que elegido (el editor LuaGlider por ejemplo también puede generar proyectos en blanco). También podemos abrir un proyecto y componer las cuales son opciones poco utilizadas.  Por último destacar la parte de Documentos, Ejemplos, Foro y para aprender el cual es muy útil. Sobre todo la documentación es muy necesario consultarla ya que no nos sabremos de memoria todas las librerías y por otro lado los ejemplos nos muestran que podemos llegar a hacer.

4. Lua

En este apartado veremos una pequeña introducción a LUA para entender el ejemplo que vamos a realizar para terminar. Lua es un lenguaje de programación imperativo, estructurado y bastante ligero por lo que ha sido adoptado para el desarrollo de videojuegos.

En Lua las variables no tienen tipo, sólo los datos y pueden ser lógicos, enteros, número de coma flotante o cadenas. Como estructuras de datos tiene vectores, conjuntos, tablas has, lista y registros todas ellas representadas por la única estructura de datos existen en Lua, la tabla. La tabla es una de las características de Lua ya que su potencial, simpleza y  facilidad de uso lo hace muy potente.

La semántica de Lua puede ser extendida y modificada redefiniendo funciones de las estructuras de datos utilizando metatablas. Ofrece además soporte para funciones de orden superior  y recolector de basura. Resumiendo si combinamos todo lo anterior es posible utilizar Lua como un lenguaje orientado a objetos aunque a mi parecer rudimentario y algo complicado para iniciados.

Para no hacer muy larga esta parte la cual no es el objetivo del tutorial me centraré en analizar un pequeño ejemplo donde ver lo más importante y básico para hacernos una idea.

Aún así os dejo la página oficial donde podemos encontrar toda la información y un pdf que contiene un resumen a modo de introducción.

Página Oficial Lua

Introducción a Lua

El ejemplo en el que nos basaremos será el siguiente:

En el ejemplo vemos primeramente una función declarada como local la cual tiene dos parámetros y calcula la sumatoria entre dos límites. Dentro de ella se declara una variable sin tipo igualando la a un entero por lo que ahora este variable es de tipo entero pudiendo cambia a otro tipo en cualquier momento. A continuación un bucle sencillo para calcular la sumatoria y vemos que aparecen un ";" para acabar la sentencia por primera vez. Esto es por que por costumbre de otros lenguajes la he puesto pero no es algo obligatorio.  Por ultimo hacemos uso de de la función para mostrar la sumatoria entre 1 y 5 mediante un "print()".

En la segunda parte vemos algo más complejo, la gran potencia que proporcionan las tablas. La tabla "t" se declara (se reserva memoria para ella) y se crea una propiedad "name" que contiene un "string".   Esta parte podría alargarla explicando mucho más sobre las tablas pero es algo muy extenso. A continuación se añade una función a la tabla, ¡ si a la tabla!. De modo que ahora podemos hacer uso de la función desde la tabla, ¿no se parece a la programación orientada a objetos, métodos y propiedades?. Pues sí esta es la idea de como se introduce la orientación a objetos en Lua con unos matices adicionales algo más complejos.

Con este pequeño ejemplo solo quería mostrar algo de Lua y ver que es como otro lenguaje de programación con sus peculiaridades y semejanzas. Si se tiene curiosidad mirar los enlaces que he dejado ya que entran en mucho más detalle. De todos modos para el ejemplo no nos hará mucho conocimiento de Lua.

4. Ejemplo: ¡¡¡¡¡ Arkanoid !!!!!

Una vez hemos visto que nos ofrece Corona SDK vamos a realizar un ejemplo imitando el famoso Arkanoid, un arcade muy sencillo y adictivo.

Lo primero que vamos a hacer es crear un nuevo proyecto para ello abrimos  Corona SDK y le damos a New Project. Cuando le demos nos saldrá ventana parecida a la de la figura.

Lo primero que nos pide es el nombre del proyecto en mi caso le llamo Arkonoid. A continuación nos permite elegir entre una serie de plantillas:

• Blank: se trata de una plantilla básica con lo justo.
• Tabbed App: añade código para desarrollar una aplicación basada en un TabBarController que un tipo de widget para mostrar diferentes vistas.
• Game: se trata de una plantilla para juegos en la cual nos muestra como sería las transacciones entre las diferentes escenas como podría entre menú y la escena de juego.
• Ebook: para aplicaciones basadas en libros electrónicos.
• Composer Scene: plantilla para el uso del Composer, el cual es un programa visual para crear las diferentes escenas. Mi consejo es entender el código antes usar este tipo de programa ya que  si queremos hacer algo más complejo lo tendremos que hacer a mano.

Por último nos indica la resolución del dispositivo que vamos a tomar como referencia en mi casa he tomado la del iPhone5 el cual tiene una resolución de 640x1136px.

Para este tutoría elegiremos la plantilla Blank. Una vez elegida y puesta la resolución le damos a siguiente y nos pide el directorio donde se guardara el proyecto pudiendo ser el que se quiera.

A continuación abriremos el proyecto mediante el editor que hayamos elegido, en mi caso como ya dije LuaGlider. Una vez abierto nos encontramos con estos 3 archivos:

• main.lua: es el archivo principal del proyecto. Es lo primero que se ejecutará al iniciar la aplicación.
• config.lua: es el archivo de configuración de nuestro proyecto. Aquí establecemos la configuración para los diferentes dispositivos.
• build.settings: este es el archivo de configuración que usa Corona para crear la aplicación en las diferentes plataformas, como los permisos de las aplicaciones para Android.

Para nuestro simple Arkanoid nos bastara con modificar el archivo main.lua pero en caso de hacer una aplicación mucho más compleja puede que sea necesario introducir permisos para Android,  configuración adicional para los diferentes dispositivos etc.

Lo primero es descargar este fuente que usaremos para los texto ya que queda más divertido usar una fuente propia. Una vez descargada solamente ponerla en la carpeta del proyecto y ya podremos hacer uso de dicha fuente.

Fuente: Chalkduster.ttf
Nota: Instalarla en vuestro propio ordenador también, sino no se podrá visualizar y se verá la de por defecto.

Ya tenemos todo preparado para empezar a escribir código. Al final dejaré un enlace al proyecto terminado por si os quedáis atrancados en algún paso.

Dentro de nuestro editor abrimos el archivo main.lua y lo primero es borrar todo y dejarlo vacío en caso de que haya algo. Una vez borrado lo primero que vamos a poner es la librería que nos permite hacer uso del motor de físicas e iniciarlo:

En estas líneas lo primero que hacemos es añadir la librería e iniciar a continuación el motor de físicas llamando a la función "start()". A continuación ponemos las gravedad que usaremos siendo nula ya que en este tipo de juego no nos será necesaria. Y por último ponemos el modo hibrido ya que nos permitirá ver las físicas (las cuales en modo normal son transparentes) superpuestas con los objetos gráficos. En caso de haber terminado o querer visualizar normalmente solamente eliminamos dicha linea o la comentamos con "--" (doble guión) al principio. (Ej: --physics.setDrawMode("hybrid"))

A continuación para ser ordenado dejaremos la parte de arriba del archivo para declaración de constantes y funciones que nos serán necesarias. Y el resto del archivo para la creación de objetos y funciones.

El ejemplo lo dividiremos en 5 partes:

• Label para los puntos
• Creación de la paleta
• Creación de la malla o  bloques 
• Creación de la bola
• Limites y Colisiones

Recordad en caso de duda o ignorancia buscar que utilidad tienen funciones que pueden ir apareciendo ya que no podré detenerme en todas las posibilidades que tienen cada una de ellas.

Ayuda de Corona SDK: CoronaDocs

     Label para los Puntos

Lo primero para empezar con algo simple será obtener en unas constantes  el tamaño de pantalla y declarar las variables para los Label que mostrarán la puntuación. 

Lo primero que hacemos es tener en una variable el nombre del tipo de fuente que nos hemos descargado antes para poder usarla. Las siguientes variables que están en mayúscula contienen el ancho y alto de la pantalla del dispositivo, y las que están en minúscula contienen la mitad del ancho y alto. Por último añadimos dos variables que serán el espacio que dejemos por la parte de arriba y por la izquierda (no tienen mucha importancia).

Una vez hemos declarado pasamos a crear nuestros Label que mostrarán al usuario el puntos que vayamos obteniendo. 

En ellos podemos destacar que introducimos el tipo de fuente que usaran que el tamaña de fuente se calcula en función del espaciado superior (paddingUp). La posición donde se colocan ambos Label es en función de sus tamaños todo esto para que sea mucho más compatible con el resto de dispositivos. Por lo tanto es muy recomendable tener todo en función del ancho y alto del dispositivo así como los espaciados y tamaños.

Si ejecutamos el simulador de Corona que será abrir el archivo main.lua con el simulador o directamente desde el editor si el que has elegido te lo permite. En mi caso LuaGlider lo permite solamente necesita una pequeña configuración para decirle donde se encuentra instalado el simulador.

El resultado debería ser algo como:

       Creación de la Paleta

Del mismo modo que antes lo primero es establecer mediante constantes el tamaño de nuestra paleta la cual será la que tienen la interacción directamente con el usuario. Y por ultimo la variable que apuntará a la paleta.

A continuación la creamos y la situamos en pantalla, todo proporcionalmente recordad.

      

Las  sentencias del medio solamente son darle tamaño al borde y color. En cambio la última linea si tiene importancia la cual añade las físicas a la paleta de tipo estático (es un cuerpo que no se ve afectado por la gravedad) y le damos un rebote de 1 que sería como indicar el tipo de material que simula (1 de rebote significa que lo que colisiones con él no tiene perdidas).

¿Y si es mayor a 1? ¿y si es menor que 1?, ¿que utilidad puede tener?, las respuestas a estas preguntas espero que seáis capaces de contestarlas al final del ejemplo probandolo.

Bueno hasta ahora si ejecutamos tendremos la paleta situada pero sin poderla mover con los dedos por lo que el siguiente paso es este.

Para este paso será necesario crear nuestra primera función lo tanto el primer paso es declararla, por lo tanto no olvides poner al lado de las demás: local paletaMove.

Una vez hecho bajamos al a continuación del archivo y creamos la función tal que como se muestra en la figura. Esta función recibirá un parámetro por el cual se accede al objeto que se ha tocado, y a las fases (began, moved, ended y cancelled) y otras cosas.

Las sentencias que usan setFocus(target) sirven para establecer el objetivo de futuros toques así como eliminarlo poniéndolo a nil. Esto es algo un poco más avanzado y no le daremos importancia es más si lo quitamos esas lineas no se apreciara la diferencia.

Por último tenemos dos lineas una de ellas comentada. La primera añade un "listener", un "escuchador" de tipo "touch" que ejecutará la función al objeto Runtime. Es decir el toque se podrá realizar en cualquier punto de la pantalla y con ello mover la paleta. Por el contrario la otra opción es usar la de abajo la cual obligara a que el toque se realiza sobre la paleta siendo algo incomodó, podéis probarlo.

Con esto ya deberíamos poder mover nuestra paleta.

      Creación de la malla o  bloques

En este apartado crearemos los bloques con los que chocaremos. Crearemos dos tipos de bloques unos blancos que se eliminaron con un solo toque y otros verdes que necesitaran dos golpes. Para crearlos usaremos un tabla denominada grill que se rellanará mediante un bucle. 

Como ya sabemos las variables y constantes son en este caso:

Necesitaremos saber cuantas columnas y filas tendremos así como la altura y ancho de los bloques. En mi caso aunque calculo ambos al final uso solamente el ancho para todo haciéndolos cuadrados. 

Por último creamos la variable grill igualando la  a {} reservando memoria aunque este vacia por ahora.

El bucle que uso es solo un ejemplo ya que podéis buscaros otros modos para hacer niveles mas aleatorios y pensados colocando los bloques estratégicamente. 

     Creación de la Bola

La bola se deberá mover por si sola y rebotar con los bloques y la paleta además de tener forma circular por lo que varia un poco con respecto a lo que llevamos creado hasta ahora.

Lo primero como siempre definir las variables arriba. 

Ahora toca crear la bola usando en este caso la función .newCircle() y situamos la bola en función de la de la paleta para que este encima de ella. Por último le damos color, en este caso morado. 

A continuación añadimos físicas a la bola con diferencias con respecto a los demás objetos. En este caso la bola debe de ser de tipo dinámico ya que rebotará y a parte se especifica el radio para que tenga forma redonda el cuerpo físico. Probad a no ponérselo y veréis que ocurre, puede ser muy divertido. Por último le damos una velocidad inicial un poco aleatorio hacia arriba (fijaros que el eje X le damos velocidad 0 y ya que multiplicamos por 0).

     Límites y Colisiones

Hasta ahora si ejecutamos la bola rebotará con la paleta y los bloques pero sin eliminar. Además la bola se escapa de la pantalla ya que no hemos situados "paredes" o límites con los que choque.

Por lo tanto lo primero que haremos será colocar dichos límites que serán transparentes y por ello es necesario estar en el modo híbrido ya que así si podremos ver las físicas de estos límites aunque gráficamente sean transparentes. 

Como propiedad al límite inferior se le ha añadido una propiedades denominada ground (suelo) la cual usaremos para determinar cuando se ha perdido. 

Una vez puestos los límites solamente nos queda detectar las colisiones de la bola con los bloques así como cuando se ha perdido. 

Recordad declarar la función y el texto de gameOver (local toCollision y local gameOverText) al principio junto a las demás. En esta función se complica un poco ya que es una función que recibe un parámetro "self" (el mismo) y además event. Para buscar la respuesta debemos irnos a las dos últimas sentencias.

La primera de ella es es añadir a la propiedad collision la función. Y la siguiente es añadir un listaren de tipo "collision" a la bola, pasando como parámetro ella misma. 

Con esto hemos visto un pequeño ejemplo. Es normal que surjan dudas ya que es la primera vez y es algo extenso y con ciertas partes complejas que requieren tiempo para llegar a comprender. 

CONCLUSIÓN

CoronaSDK es una herramienta muy potente ya que permite una gran rapidez en la creación de aplicaciones siendo su fuerte en juegos. Además es multiplataforma. En este punto recordad que nos hemos basado en un iPhone5 pero probad a cambiar el dispositivos en el simulador de Corona y funcionará de la misma manera en los demás. 

Resumiendo os invito a que os probéis a hacer el ejemplo y hacer variaciones como podrían ser incluir un aumento de la dificultad, meter imágenes para la paleta, bloques y paleta dando un aspecto más visual, investigar sobre las escenas para hacer un menú o cualquier otra cosa que se os ocurra. PARA CUALQUIER DUDA sobre el tutorial o sobre alguna mejora que queráis hacer y no se os ocurra, o algo más complejo respecto a este tutorial o cualquier otra solamente dejármelas en los comentarios. (^_^)

Os dejo el link del projecto de GitHub: Arkanoid

Link de descarga directa: Arkanoid