Iniciando en Lua y el Corona SDK

En éste tutorial, aprenderás las bases del lenguaje de programación Lua y te ayudaré a que comiences a escribir aplicaciones para iOS y Android. ¿Emocionado? Comencemos.

Introducción

En éste tutorial, observaremos el Corona SDK y el lenguaje de programación Lua. Aunque Lua no es difícil de aprender, se recomienda tener algo de experiencia en otros lenguajes, como JavaScript, PHP, Java o Ruby. Cubriremos lo básico del Corona SDK y Lua para que te familiarices con el desarrollo de la plataforma Corona. Verán que implica muy poco esfuerzo y código para tenerlo funcionando. Estoy listo cuando tu lo estés.

1. Presentación de Lua y el Corona SDK

En el pasado, desarrolladores para dispositivos móviles enfrentaron un predicamento difícil. ¿Deberían desarrollar aplicaciones para iOS o para Android? La mayoría de los desarrolladores para iOS usan Objective-C, mientras que los desarrolladores para Android usan Java. Afortunadamente, tenemos el Corona SDK y el lenguaje de programación Lua, que permite el desarrollo multiplataforma para dispositivos móviles. Para ponerlo simple, significa que puedes desarrollar una aplicación una vez y compilarla para iOS, Android, Kindle y Nook.

El lenguaje de programación que usamos cuando desarrollamos con el Corona SDK es Lua, que significa Luna en Portugués. Uno de los principales beneficios de Lua, especialmente en combinación con el Corona SDK, es que Lua es multiplataforma pues el leneguaje está escrito en C. Lua no es difícil de aprender como lo descubrirás en éste tutorial. Lua fue creado en 1993 por un pequeño grupo de personas en la Universidad Católica Pontificia de Río de Janeiro, Brasil. Lua es software de código abierto así que puedes usarlo gratuitamente en tus proyectos. Es distribuído bajo la licencia de MIT.

El Corona SDK es desarrollado y mantenido por Corona Labs y es una plataforma comercial. Hay varios planes tarifarios para elegir. Hay un plan básico gratuito y planes de pago desde $19 al mes.

Para éste tutorial, sin embargo, usaremos el plan básico. Aunque puedes desarrollar aplicaciones Corona en varias plataformas, en éste tutorial te mostraré cómo crear aplicaciones usando Windows y crearemos para la plataforma Android.

2. Instalando Lua y el Corona SDK

¿Estás listo para comenzar con el desarrollo multiplataforma para dispositivos móviles? Visita el portal de desarrollador del Corona SDK, crea una cuenta, y descarga el Corona SDK. Como mencioné, en éste tutorial usaré Windows, pero lo puedes seguir en OS X también. Después de la instalación del Corona SDK, abre el menú Start y navega a Corona SDK > Corona Simulator. Deberías ver dos ventanas como se muestra abajo.

3. Editores de Texto

Ahora que tenemos el simulador Corona funcionando, necesitamos tener un editor de texto para escribir y editar Lua. Recomiendo Sublime Text 2, que es de descarga gratuita. Es un magnífico y popular editor de texto que soporta resaltado sintáctico y cargado de otras características útiles. Ésto es especialmente útil si vas a escribir aplicaciones largas y complejas. Soporta Lua junto con otros 43 lenguajes de programación. ¿Te dije que Sublime Text está disponible para Windows, OS X y Linux? No puedes estar equivocado con Sublime Text 2.

4. Escribir una aplicación Hello World

Regresa al simulador Corona, presiona New Project, y elige un directorio para guardar los archivos de tu proyecto. Selecciona Blank como la plantilla del proyecto, Phone Preset para Upright Screen Size, y Upright como la Default Orientation (Orientación Predeterminada). Da click en OK para finalizar la configuración del proyecto y navega al directorio donde creaste tu nuevo proyecto. Deberías encontrar tres archivos, build.settings, config.lua y main.lua. El único archivo que necesitaremos editar es Main.lua. Abre éste archivo con tu editor preferido y remplaza el contenido del archivo con el fragmento de código de abajo.

1

print("Hello World!");

Guarda los cambios presionando Ctrl+S y abre la ventana del simulador Corona. Espera un minuto. Nada ocurrió. Es absolutamente normal. Necesitamos verificar la otra ventana que parece una línea de comandos. Debería desplegar Hello World! como se muestra abajo.

La razón de por qué el texto fue solo desplegado en la Terminal de Corona y no en el Simulador es porque el comando print solo se usa para el lenguaje de programación Lua. No puede usarse para desplegar las palabras en la pantalla del simulador o de un dispositivo físico. Sin embargo, el comando básico print aún será útil cuando desarrollemos una aplicación, especialmente para fines de depuración.

5. Hello World-Toma 2

Vamos a crear otra aplicación Hello World!. Sin embargo, ésta vez, haremos que muestre las palabras en el mismo simulador Corona. Borra el contenido de main.lua y remplázalo con el fragmento de código de abajo.

1

display.newText("Hello World!", 0, 0, native.systemFont, 16);

Te pudiste haber dado cuenta que éste fragmento de código era un poco más largo que el previo. Veamos lo que hace éste fragmento de código por nosotros.

• display es el objeto al que estamos hablando.
• newText es la función que usamos para desplegar el texto en la pantalla.
• "Hello@ World!" es el texto que queremos mostrar.
• 0,0, son la coordenadas x y y respectivamente.
• native.systemFont es la fuente que usamos para el texto y 16 es el tamaño de la fuente.

Si guardas los cambios y relanzas el simulador Corona, deberías ver lo siguiente.

6. Variables y Matemáticas

¿Y si querías guardar un número como una variable para usarlo más tarde? El siguiente fragmento de código muestra cómo las variables son declaradas en Lua.

1

local num1 = 3 + 3;

• local es la palabra reservada para declarar una variable.
• num1 es el nombre de la variable.

Si combinamos ésto con el fragmento de código anterior, tenemos lo siguiente.

1

local num1 = 3 + 3;

2

display.newText(num1, 0, 0, native.systemFont, 32);

El simulador Corona debería ahora desplegar el número 6, que es el resultado de sumar 3 y 3. Hagamos otro ejemplo utilizando matemáticas. Usando el siguiente fragmento de código, el simulador Corona debería desplegar el número 18.

1

local num1 = 3 + 3;

2

display.newText(num1 * 3, 0, 0, native.systemFont, 32);

Como puedes ver, es perfectamente posible realizar operaciones matemáticas en una variable. En el fragmento de código de arriba, multiplicamos num1 por 3 usando *3. Estoy seguro que has descubierto que el asterisco es el operador de multiplicación en Lua.

• +  para suma
• - para resta y números negativos
• * para multiplicación
• / para división

7. Imágenes

Desplegar imágenes tampoco es difícil. Para mostrar una imagen, necesitamos agrega la imagen al directorio donde se ubica main.lua. Es bueno crear un subdirectorio para mantener separados y organizados los recursos del proyecto. Hagamos eso ahora. Crea un nuevo directorio en tu directorio del proyecto y nómbraro images (imágenes). Usa el directorio images para guardar las imágenes de tu proyecto. La imagen que quisiera usar para éste tutorial es logo1.png y la he colocado en en directorio images que creamos hace un momento.

Como puedes ver en el siguiente fragmento de código, mostrar una imagen es casi tan sencillo como mostrar texto. Me atrevo a decir que incluso es más fácil pues no necesitas especificar una fuente.

1

local photo1 = display.newImage("images/logo1.png", 0, 0);

8. Barra de Estado

Si observas detenidamente la captura de pantalla anterior, te darás cuenta que hay una barra de estado en la parte superior de la pantalla mostrando el carrier (la compañía telefónica), la carga de la batería, etc. ¿Alguna vez notaste eso, que cuando abres una aplicación, juegos particularmente, la barra de estado automáticamente desaparece? Ocultar la barra de estado es tan simple como agregar una línea de código a main.lua. Es tan simple como eso. Actualiza tu proyecto y observa el resultado en el simulador Corona.

1

display.setStatusBar(display.HiddenStatusBar);

Es útil saber que la barra de estado puede tener diferentes estilos. Los nombres de los estilos hablan por sí mismos. Para muchas aplicaciones, especialmente juegos, usar HiddenStatusBar es más adecuado.

1

display.setStatusBar(display.DefaultStatusBar);

1

display.setStatusBar(display.DarkStatusBar);

1

display.setStatusBar(display.TranslucentStatusBar);

9. Rectángulos, Bordes y Colores

Continuemos con sombras. La primera sombra que mostraremos es un rectángulo. Veamos lo que es necesario para mostrar un rectángulo en la pantalla.

1

local rect1 = display.newRect(10, 20, 150, 50);

• local rect1 declara una variable para el rectángulo.
• display.newRect crea la forma del rectángulo.
• (10, 20, 150, 50) define las coordenadas x y y y la anchura y altura respectivamente.

Agreguemos algo de color al rectángulo.

1

rect1:setFillColor(51, 255, 0);

Hmmm. ¿Qué significa ésto?

• rect1 es la variable que declaramos anteriormente.
• setFillColor es el método que usamos para rellenar de color un rectángulo.
• (51, 255, 0) especifica el valor rojo (51), verde (255), y azul (0) del color que usamos.

Expandamos éste ejemplo con un borde o contorno como se muestra en el siguiente fragmento de código.

1

rect1.strokeWidth = 8;

2

rect1:setStrokeColor(80, 200, 130);

• rect1.strokeWidth = 8 establece la propiedad strokeWidth del rectángulo en 8.
• rect1.setStrokeColor (80, 200, 130) establece la propiedad strokeColor del rectangulo al color especificado por los valores 80, 200 y 130 como lo vimos previamente.

10. Comentarios

Los comentarios pueden parecer triviales e incluso obsoletos, pero son importantes y lo son todavía más cuando trabajas en equipo. Los comentarios son muy útiles para documentar código y ésto aplica tanto para tí como para tus colegas. Mejora la legibilidad del código para otras personas en tu equipo. En Lua, los comentarios son fáciles de usar. Observa el siguiente ejemplo.

1

--this is a comment

Los comentarios no tienen efecto en tu aplicación en términos de como funciona. Están solo ahí para el desarrollador. El siguiente fragmento de código no imprimirá Hello World! en la terminal.

1

--print("Hello World!")

También puedes escribir comentarios que se extienden varias líneas, lo cual es útil si necesitas explicar como funciona un fragmento particularmente complejo de código o si quieres escribir una introducción a una aplicación o proyecto.

1

--[[

2

This is comment

3

spans

4

several lines.

5

]]

Conclusión

En éste tutorial, has aprendido las bases de Lua y del Corona SDK. Instalamos y configuramos el Corona SDK, descargamos y usamos un editor de texto para editar Lua, escribimos varias aplicaciones, y las ejecutamos en el simulador Corona. También aprendimos como usar variables para guardar datos, desplegar imágenes en pantalla, configurar la barra de estado, y dibujamos formas en la pantalla. Y al último, pero no menos importante, vimos como usar los comentarios y por qué deberías utilizar comentarios en tu código. Espero que éste tutorial haya sido útil para tí. Mantente en sintonía para aprender más.

Si quisieras aprender más del Corona SDK, te recomiendo visitar el sitio web para desarrolladores de Corona Labs. Está lleno de recursos y guías para el proceso de iniciación. También puedes explorar las aplicaciones de ejemplo que están incluídas en el Corona SDK que descargaste e instalaste previamente.

El lenguaje de programación Lua también tiene su propio sitio web. Contiene todo lo que necesitas saber sobre el lenguaje, incluyendo una guía de iniciación y un muy, muy detallado manual. Asegúrate de visitar el sitio web de Lua si decides continuar con el desarrollo en Corona.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!