Tutorial Corona SDK

Tutorial

-1-

Indice

1. Introducción al desarrollo con Corona SDK …………………………………… 3 Ejercicios tema 1……………………………… 1………………………………………………………………… ………………………………… 9 2. Empezar a proramar con !"# !" # …………………………………………………...13 …………………………………………………...13 Ejercicios tema 2 ………………………………………………………………..21 ………………………………………………………………..21 3. $ormas% im&enes ' te(to ………………………………………………………….23 ………………………………………………………….23 Ejercicios tema 3 ………………………………………………………………..3) ………………………………………………………………..3) *. E+entos e interacción ………………………………………………………….…...39 ………………………………………………………….…...39 Ejercicios tema * ……………………………………………………………......*, ……………………………………………………………......*, ). Timers ' animaciones …………………………………………………………...…)…………………………………………………………...…)Ejercicios tema ) ………………………………………………………………..) ………………………………………………………………..) /. 0otor $sico …………………………………………………………………………../1 …………………………………………………………………………../1 Ejercicios tema / ………………………………………………………………..,1 ………………………………………………………………..,1 ,. ardare ' multimedia ………………………………………………………….....,* ………………………………………………………….....,* Ejercicios tema , ………………………………………………………………..) ………………………………………………………………..) . 4estión de mapas ' 45S …………………………………………………………..9…………………………………………………………..9Ejercicios tema  ………………………………………………………………..9, ………………………………………………………………..9, 9. Dise6ando la inter7az de usuario ……………………………………………..…1-Ejercicios tema 9 ………………………………………………………………1-) ………………………………………………………………1-) 1-. Entrada ' salida ………………………………… …………………………………………………………….….…1- ………………………….….…1- Ejercicios tema 1- ………………………………… ……………………………………………………….….…1 …………………….….…11/ 1/ 11. Composer ' idet ……………………………… ……………………………………………………………….12 ……………………………….12-Ejercicios tema 11 ………………………………………………………..……13………………………………………………………..……1312. 0otor 7sico 7sic o 8 5arte 2 ……………………………………………………….…...13) ……………………………………………………….…...13) Ejercicios tema 12 ………………………………………………………..……1*2 ………………………………………………………..……1*2

-2-

Tema 1 Introducción al desarrollo con

Corona SDK • Corona es un kit de desarrollo de software que permite la creación de aplicaciones móviles para iPhone, iPad y dispositivos Android. • Su o!etivo es el de ahorrar el mayor tiempo posile desarrollando proyectos móviles al compartir códi"o entre los diferentes sistemas  • #iene una versión "ratuita para desarrollar que se puede descar"ar desde el si"uiente enlace$

https$%%developer.coronalas.com%downloads%corona&sdk

• 'l proceso de desarrollo con Corona S() es muy simple$ • (ise*amos los elementos de audio, v+deo, ima"en y animación con al"una herramienta destinada a ello Photoshop, Premiere, Audacity...-. Audacity...-. • /pido desarrollo de la aplicación haciendo uso del simulador multiplataforma para previsuali0ar nuestro proyecto en los diferentes dispositivos. • Pulicación con muy pocos clicks del resultado de nuestro proyecto en la App Store y en 1oo"le Play

• 'l len"ua!e de pro"ramación empleado para el desarrollo con Corona S() es 23A$

-3-

• 23A es un len"ua!e de pro"ramación imperativo se asa en estados de la aplicación que podemos ir modi4cando mediante sentencias-, estructurado y astante li"ero • Sólo funciona emeido en un cliente an4trión, este caso, el framework Corona • 5frece un uen soporte para la pro"ramación orientada a o!etos, pro"ramación funcional y pro"ramación orientada a datos

Corona SDK  !"# • A trav6s del uso de funciones C, 2ua puede ser aumentado para aarcar un amplio ran"o de diferentes diferent es dominios, creando as+ len"ua!es de pro"ramación personali0ados. • 23A es software lire y se proporciona sin "arant+as, "arant+ as, tal y como especi4ca su manual de referencia en el sitio o4cial www.lua.or" www.lua.or"..

Caractersticas de Corona • Posee un motor 5pen12&'S propio que nos permite reali0ar "randes manipulaciones "r/4cas de manera muy sencilla • (estaca por por su desarrollo multiplataforma. Permite Permite crear aplicaciones aplicaciones tanto para i5S iPhone y iPad-, como para Android. • Cuenta con controles nativos para el acceso al dispositivo y a los diferentes elementos hardware como c/mara, acelerómetro, 1PS... etc. • 2as aplicaciones creadas con Corona se pueden optimi0ar para ocupar el menor espacio posile. A partir de 788ks.

-4-

Instalación de Corona SDK • Para otener la versión "ratuita del framework, con la que podremos crear aplicaciones de manera ilimitada, tendremos que crearnos una cuenta de desarrollador en la we o4cial de Corona

http$%%www.coronalas.com%

• (eemos descar"arnos e instalar la aplicación correspondiente a nuestro sistema operativo 9ac 5S : o 9icrosoft ;indows-

-5-

• Con la instalación otendremos una carpeta carpet a en nuestra m/quina con las si"uientes aplicaciones

-6-

• Contamos con tres aplicaciones para poder acceder al Simulador de Corona Corona Simulator, Simulator, Corona #erminal y deu""er• 2as tres nos dan acceso al mismo simulador, sólo que las dos
Simulador Corona SDK • (esde la ventana principal de la aplicación simulador podremos acceder a todos nuestros proyectos, as+ como crear uno nuevo o e!ecutar cualquiera de los e!emplos que nos vienen dentro del directorio director io SampleCode

• Si arimos cualquier proyecto, e!ecutaremos e !ecutaremos autom/ticamente la vista del simulador, simulador, la cual podemos camiar para reali0ar las prueas pertinentes en los diferentes dispositivos.

-7-

• Para editar el códi"o de nuestro proyecto se usar/ el editor de te=to que ten"amos de4nido por defecto en nuestra m/quina. Para camiar esto tendremos que camiar la aplicación asociada a los archivos de tipo .lua • Al salvar un 4chero .lua correspondiente al proyecto activo act ivo en el simulador, 6ste nos pre"untar/ si deseamos volver a car"ar la aplicación para poder oservar los camios en el dispositivo. 'sta opción se puede desactivar.

-8-

Ejercicios Tema 1 Ejercicio 1 >amos a reali0ar la instalación completa de Corona S() y comproaremos su correcto funcionamiento en nuestra m/quina, para as+ poder afrontar el resto de temas sin prolemas. Para comen0ar con la instalación, deemos acceder a la we o4cial de Corona para darnos de alta como desarrolladores https$%%developer.coronalas.com%user%re"ister -

3na ve0 estemos correctamente re"istrados e iniciemos sesión en la p/"ina, podemos descar"arnos el sdk desde la propia we, distin"uiendo el sistema operativo sore el que vamos a traa!ar https$%%developer.coronalas.com%downloads%corona&sdk https$%%developer.coronalas.com%downloads%corona&sdk--

-9-

Procedemos a instalar el e!ecutale que hemos descar"ado de la we y tendremos acceso a la carpeta con las herramientas de Corona S(), en el directorio donde hayamos especi4cado durante la instalación. 2os e!ecutales que se han instalado en nuestra nues tra m/quina son los si"uientes$

- 10 -

Si hacemos dole click sore la aplicación Corona Simulator, Simulator, arimos la interfa0 principal para desarrollar con Corona S()

- 11 -

'n el men< de la aplicación podemos acceder a ?ile &@ 5pen.. y si accedemos a la carpeta Sample Codes del directorio direct orio donde hemos instalado Corona S(), podemos oservar un "ran n
#mpliación 1 Camia el tipo de simulador en el que se e!ecuta la aplicación accediendo al men< de Corona S() en ;indow &@ >iew AsB

Ejercicio 2 'n ve0 de e!ecutar la aplicación Corona Simulator, Simulator, vamos a e!ecutar la aplicación Corona #erminal. #erminal. Pruea a se"uir los mismos pasos que el e!ercicio anterior y oserva los mensa!es que van apareciendo en el terminal. Para acceder al códi"o que se est/ e!ecutando sólo hay que arir el men< de la aplicación en la ruta ?ile &@ 5pen pro!ect in 'ditor...

- 12 -

Tema 2 'mpe0ar a pro"ramar con 23A

!"# • 2ua es un len"ua!e de pro"ramación e=tensile el cual dee funcionar dentro de un pro"rama contenedor o simplemente an4trión. • Se pretende que 2ua sea usado como un len"ua!e de script potente y li"ero para cualquier pro"rama que lo necesite. • 2os pro"ramas en 2ua no son interpretados directamente, sino compilados a códi"o ytecode, que es e!ecutado por la m/quina virtual de 2ua. • 'l proceso de compilación es normalmente transparente transparent e al usuario y se reali0a en tiempo de e!ecución, pero puede hacerse con anticipación para aumentar el rendimiento y reducir el uso de la memoria al prescindir del compilador.

!"# :aria;les • 2os nomres de las variales pueden ser de4nidos con cualquier cominación de letras, d+"itos y caracteres de surayado underscoresiempre y cuando no comiencen por un d+"ito. • 'n 2ua hay diferencia entre may'SI5 e!$  D>'SI5-• 2ua es un len"ua!e din/micamente tipado, es decir, decir, las variales no tienen tipo, sólo tienen tipo los valores. o e=isten de4niciones de tipo en el len"ua!e ya que cada valor almacena su propio tipo. - 13 -

• '=isten E tipos /sicos en 2ua$ nil, boolean, number, string, function, userdata, thread y table • 'l tipo nil nil es  es el valor nulo, cuya principal función es la de ser diferente a cualquier otro valor  • oolean oolean es  es el tipo de los valores true true verdadero verdadero- o false falso falso-• #anto #anto nil como false hacen que una condición sea falsa, cualquier otro valor  la hace verdadera • numer  representa  representa n
- 14 -

• 2as variales pueden ser de tres tipos$ locales, "loales y campos de tala • Por defecto todas las variales son de tipo "loal a no ser que sean declaradas e=pl+citamente como locales, con la palara reservada local local.. • 2as variales locales tienen un /mito scope- de4nido. Se puede acceder a ellas desde dentro de las funciones de4nidas en su mismo /mito.

!"# Ta;las • 2as talas son variales utili0adas para almacenar dentro otros valores. Ser+a el tipo equivalente a lo que conocemos como arrays en otros len"ua!es de pro"ramación. • Para iniciali0ar nuestras talas tenemos dos posiilidades$

miTabla miTabla = {} miTabla miTabla = { 1, 4, “Test” “Test”,, true true}}

creamos una tabla vacía en este caso le asignamos directamente 4 elementos nada más crearla. Los índices son de tipo numrico

miTabla = { latitud = !"."# !"."#,, longitud = $!."% $!."%,, direccion = “&' (rueba 1)!”} 1)!”} Tambin asignamos directamente los valores, pero en este caso los índices no son de tipo numrico

- 15 -

• Para acceder a los valores almacenados en una tala tami6n podemos proceder de varias maneras$

miTabla = { 1, 4, “Test” “Test”,, true true}} miTabla miTabla *!+

accedemos al valor de la tabla situado en la posicin !, en este caso Test

miTabla = { latitud = !"."# !"."#,, longitud = $!."% $!."%,, direccion = “&' (rueba 1)!”} 1)!”} miTabla.latitud

en este caso accedemos accedemo s al valor de la tabla cu-a clave es latitud. n este caso, !"."#

!"# Ta;las Ta;las <7unciones= < 7unciones= • Podemos conocer el tama*o de una tala con el operador F miTabla = { 1, 4, “Test” “Test”,, true true}}

la sentencia #miTabla nos devolverá el tama/o de la tabla. n este caso 4

• Con la función ta;le.sort ordenamos los valores de la tala i"norando las claves. 2a ordenación se asa en el al"oritmo quicksorttabla&iudades tabla&iudades = {0arago2a0 0arago2a0,, 03arcelona0 03arcelona0,, 0adrid0 0adrid0,, 05alencia0 05alencia0,, 06lmeria0 06lmeria0}} table.sort 7tabla&iudades8 7tabla&iudades8 9or i=1, :tabla&iudades, 1 do print 7tabla&iudades*i+8 7tabla&iudades*i+8 end

 Nos muestra el siguiente resultado en el Terminal:  Almeria  Barcelona  Madrid  Valencia  Zaragoza - 16 -

• 2a función ta;le.concat reco"e una tala de strin"s o de n
• Con tale.remove eliminamos el
• Para recorrer una tala en 2ua, tenemos diferentes opciones. 2a primera y m/s sencilla es usando un ucle 7or  a  a partir de la lon"itud de la tala tabla&iudades = {0arago2a0, 03arcelona0, 0adrid0, 05alencia0, 06lmeria0} 9or i=1, :tabla&iudades :tabla&iudades do print 7tabla&iudades *i+8 end

 ;esultado en el Terminal<  arago2a  3arcelona  adrid  5alencia  6lmeria

• 5tra forma para recorrer la tala, oteniendo el mismo resultado es utili0ando la estructura 7or ... inpairs… 9or i, ciudad in ipairs7tabla&iudades8 do print7ciudad8 end

 &ada iteracin del bucle, la  variable ciudad toma el valor de la tabla correspondiente

- 17 -

!"#  Control de >ujo i7 ?condicion@ tAen else B elsei7 ?condicion@ • 2a sentencia if compruea la condición y e!ecuta la parte del then si esta condición se cumple, si no, se e!ecuta la parte del else, la cual es opcional

i9 a  " t>en a=" end

i9  a  a  " t>en a=" else a = )" end

 Ai el valor de la variable a es menor Bue cero, se le  asigna el valor cero. Ai es ma-or Bue cero, no se  >ace nada

 Ai el valor de la variable a es menor Bue cero, se le  asigna el valor cero. Ai es ma-or Bue cero, se le  asigna el valor )"

• Para evaluar distintas condiciones, utili0aremos la sentencia if anidada utili0ando elsei7  i9  n  n == 1 t>en print 7“? es 1”8 elsei9  n  n == ) t>en print 7“? es )”8 elsei9  n  n == ! t>en print 7“? es !”8 end

 Cependiendo del valor de ?,  obtendremos el mensaDe  correspondiente a travs del Terminal

Aile ?condicion@ do • Se e!ecuta el proceso incluido dentro del ucle hasta que la evaluación de la condición devuelva false n=) @>ile n1" @>ile  n1" do print7n8

 ientras Bue la variable n sea menor Bue 1",  mostrará en el terminal el valor de n - 18 -

n = nE1 end

• (eemos controlar en el interior del ucle la condición de salida para evitar que la e!ecución del ucle sea in4nita

ucle 7or  • 'l ucle for, puede ser de4nido de varias maneras$ • 2a formula m/s com
7or  Gvalor  Gvalor inicialH, Gvalor 4nalH, GaumentoH do end 9or i=", 9or  i=", 1", 1 do print 7i8 end

n este eDemplo mostraremos en el terminal los nGmeros del " al 1"

• 5tra de las formas de reali0ar un for y que suele ser de astante utilidad en el recorrido talas es$  i, v in ipairsa- do 7or  i,

end local tabla = {“nero” { “nero”,, “Febrero” “Feb rero”,, “ar2o” “ ar2o”,, “6bril”} 9or i, 9or  i, mes in ipairs ipairs7tabla8 7tabla8 do print 7mes8 end

- 19 -

ste eDemplo nos mostrará a travs del Terminal todos los elementos de la tabla, en este caso, 4 meses

!"# 8 $unciones • 2as funciones son una a"rupación de sentencias y declaraciones de variales que cumplen un o!etivo com
7unction nomre?uncion parametro, parametrosJ... parametroGreturn valor(evueltoH

end • 3na de las "randes venta!as de las funciones en 2ua es que pueden devolver varios valores.

- 20 -

Ejercicios Tema 2 Ejercicio 1  ola 0undo !ua Para comen0ar con los e!ercicios, vamos a arrancar la aplicación Corona S(), teniendo en cuenta que esco"emos la opción que nos permite visuali0ar el terminal. 'n el men< de la aplicación, accedemos a ?ile &@ ew Pro!ect y completamos los datos que nos piden$ &App ame$ Kola9undo &Choose #emplate$ Llank &Screen Si0e$ Phone preset M ;idth$ NJ8 M Kei"ht$ 7E8 &(efault 5rientation$ 3pri"ht 3na ve0 creado el proyecto y seleccionado el directorio donde lo vamos a "uardar, "uardar, seleccionamos arir el editor, para poder modi4car nuestro códi"o. 'n este momento, tendremos al"o as+, en nuestro 4chero main.lua$ &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& && && main.lua  O &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& & our code here

Para terminar nuestro primer proyecto 2ua, podemos a"re"ar la si"uiente l+nea de códi"o$ &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& && && main.lua  O &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& & our code here - 21 -

print QKola mundo 2uaQ-

Salvamos el 4chero main.lua y autom/ticamente, el simulador detecta camios y nos refresca la vista del modelo de móvil que ten"amos seleccionado. Para poder oservar el mensa!e que hemos pro"ramado, deemos acceder al #erminal. ermina l.

Ejercicio 2  A partir de la si"uiente tala$ local mi#ala mi#ala R TPa!aroU, TPerroU, T#iurónU, TPulpoUV Crea un m6todo que recia como par/metro un n
Ejercicio 3 Crea un m6todo que recia como par/metro un n
- 22 -

Tema 3 ?ormas, Im/"enes y #e=to

$ormas 4eomtricas &sicas • (esde la API de Corona tenemos la posiilidad de acceder a una serie de m6todos que nos permiten mostrar elementos "eom6tricos en nuestros dispositivos. • 2os elementos que podemos representar mediante m6todos de 2ua en el simulador son$ l+neas, rect/n"ulos, c+rculos, elipses y rect/n"ulos redondeados

displa'.ne!ine < (1% '1% (2% '2= • Con el m6todo new2ine podemos especi4car una l+nea recta entre dos puntos • 2os par/metros =, y- indican el punto de inicio de la recta. 2os par/metros =J, yJ- indican el punto 4nal de la recta. • 'l color por defecto es el lanco

displa-.ne@Line7 1)", 1"", !"", 1)"8

• Podemos especi4car el color y el tama*o de la recta con el m6todo setColor  y el atriuto width • 2os colores deen especi4carse con valores espec+4cos para el o!o, >erde >erde y A0ul. 'l n
- 23 -

local recta = displa-.ne@Line7 1"",#", )%",!#" 8 recta = H

displa'.neFect
displa-.ne@;ect 7 )"", )#", 1#", #"8

- 24 -

• Si almacenamos la creación de nuestro rect/n"ulo en una variale, podemos modi4car el relleno y el tra0o.

local mi;ect = displa-.ne@;ect71%#, )#", )"", 1""8 mi;ect.stroIeJidt> = H mi;ect
• Con el m6todo stroGeHidtA especi4camos el tama*o del tra0o del rect/n"ulo • Con set$illColor  de4nimos  de4nimos el color de relleno del rect/n"ulo r ect/n"ulo • 'l m6todo setStroGeColor  de4ne  de4ne el color del tra0o • 2os colores se de4nen indicando los valores de o!o, >erde y A0ul A0ul con n
displa'.neFoundedFect< displa'.neFoundedFect< le7t% top% idtA% AeiAt% cornerFadius = • ?unciona como el m6todo anterior, sólo que en este le tenemos que especi4car el radio de curvatura en las esquinas del rect/n"ulo con el
local mi;ound;ect = displa-.ne@;ounded;ect71!#, )"", 1#", 1#", )"8 mi;ound;ect.stroIeJidt> = ! mi;ound;ect
displa'.neCircle< (Center% 'Center% radius = • 'ste m6todo nos permite diu!ar un c+rculo especi4cando el punto central del c+rculo =Center, yCenter- y el radio radius-

local mi&irc = displa-.ne@&ircle7 1#", )"", 1"" 8

Im&enes displa'.neImae< displa'.neImae< lename ?%center(% center'@ = • Con este m6todo podemos situar en nuestra aplicación im/"enes. Para ello deemos incluir las im/"enes en el directorio de nuestra aplicación y a trav6s del par/metro 4lename deemos especi4carle la ruta e=acta donde poder encontrarlas. • 9ediante top y left, que son par/metros opcionales, podemos especi4car las coordenadas donde vamos a situar la ima"en. Si no especi4camos coordenadas, el centro de la ima"en se sit
- 26 -

displa-.ne@Kmage 70img'corona.Dpg0, )"", )#"8

local imaen J displa'.neImae< imLcorona.jp = imaenMtranslate< imaenMtranslate< -% 2-- = • Creamos una ima"en y con translate t ranslate le asi"namos una nueva posición.

imaenMset$illColor< imaenMset$illColor< 1% -% - = • Se le asi"na un color de relleno a la ima"en, si"uiendo la asi"nación de valores para o!o, >erde y A0ul valores entre 8 y JWW-.

imaen.is:isi;le imaen.is:isi;le J true • Propiedad de la ima"en para mostrarla true- u ocultarla false- dentro de la vista donde se encuentra

imaenMremo+eSel7<=

Carando im&enes remotas - 27 -

displa'.loadFemoteImae < url% metAod% listener% listener% dest$ilename ?% ;aseDir@ ?% (% '@ = • Accedemos, Accedemos, a trav6s de este m6todo a una ima"en alo!ada en un servidor de internet para mostrarla en nuestra aplicación. • 9ediante el par/metro url le especi4camos la dirección donde se encuentra alo!ada la ima"en. • Con el par/metro metAod  indicamos cómo se va a reali0ar la petición sore la ima"en. #iene #iene dos valores posiles, 1'# valor por defecto- y P5S# • 'n el par/metro listener  tenemos  tenemos que especi4car el nomre de un m6todo en el que vamos a poder tratar la respuesta de la petición al servidor  • 'l m6todo que especi4quemos en el par/metro listener  se  se llamar/ una ve0 se complete la petición http para la descar"a de la ima"en. • 'n este m6todo tendremos acceso a un o!eto de tipo event dentro del cual podremos acceder a N propiedades diferentes$  event.response & un strin" que contiene la ruta de destino del 4chero creado. event.tar"et & el nuevo o!eto creado una ve0 se descar"a la ima"en. event.is'rror & un valor de tipo ooleano que indica si se ha producido un error de red true- o no false-. • 'n el par/metro dest$ilename indicamos cual ser/ el nomre de la ima"en descar"ada dentro del sistema de archivos propio de nuestro dispositivo. • 'l par/metro ;aseDir , que es opcional, nos sirve para indicar dónde vamos a "uardar la nueva ima"en dentro del sistema de archivos de nuestro dispositivo. • Podemos de4nir las coordenadas e=actas donde vamos a situar nuestra ima"en, con los par/metros opcionales ( e '.

- 28 -

local 9unction net@orIListener7 event 8 i9 7 event.isrror 8 t>en print 7 0rror en la red $ Fallo en la descarga0 8 end end displa-.load;emoteKmage7 0>ttp<''developer.anscamobile.com'demo'>ello.png0, 0T0, net@orIListener, 0>ello&op-.png0, s-stem.CocumentsCirector-, 1H",)""8

• 'stamos lan0ando una petición 4ET sore la url indicada para que nos devuelva la ima"en. 2a respuesta de esta ima"en la estamos tratando en el m6todo netorG!istener  y  y le indicamos que se "uarde en el directorio de documentos por defecto con el nomre helloCopy.pn". helloCopy.pn". 2a situamos en el punto X8,J88- dentro de nuestra vista.

0anipulando im&enes • Contamos con una serie de m6todos que nos permiten modi4car las propiedades m/s importantes de nuestras im/"enes$ - 29 -

local img = displa-.ne@Kmage 70img'corona.Dpg08 img.M = )"" img.- = !""

• Podemos modi4car la posición de una ima"en accediendo a sus atriutos ( e' • Con el atriuto alpha, podemos especi4car la transparencia de la ima"en. 'l valor que se indica var+a entre 8 y 

local img = displa-.ne@Kmage 70img'corona.Dpg0, )"", 1%#8 img.alp>a = ".H

• Podemos de4nir la escala en la que se muestra la ima"en accediendo a los atriutos (Scale e 'Scale.

- 30 -

local img = displa-.ne@Kmage 70img'corona.Dpg0, 1H",)!"8 img.MAcale = ! img.-Acale = #

• Podemos modi4car la rotación de la ima"en creada modi4cando el atriuto rotation. 'l valor se dee especi4car en "rados.

local img = displa-.ne@Kmage 70img'corona.Dpg0, )"", 1%#8 img.rotation = %"

• Para modi4car el tama*o de la ima"en tenemos los atriutos idtA anchoy AeiAt alto-

- 31 -

local img = displa-.ne@Kmage 70img'corona.Dpg0, 1N",1%#8 img.@idt> img.@idt> = )#" img.>eig>t = #"

0&scaras so;re im&enes rapAics.ne0asG< lename = • Con este m6todo podemos crear m/scaras a partir de una ima"en, la cual de4nimos a trav6s de 4lename, para aplic/rselas a otras im/"enes diferentes. • 2a ima"en que act
áscara

Kmagen sobre la Bue se aplica la máscara

- 32 -

local img = displa-.ne@Kmage 70img'corona.Dpg0, 1%#,)""8 img.@idt> = 1N" img.>eig>t = 1N" local masI = grap>ics.ne@asI grap>ics.ne@asI 70img'circlemasI.png08 70img'circlemasI.png08 img
0anejando Te(to displa'.neTe(t< strin% Ncenter% Ocenter% ?idtA% AeiAt%@ 7ont% size = • Con el m6todo new#e=t new#e=t podemos mostrar una cadena de te=to strinsituada en las coordenadas Ncenter , Ocenter , de la vista que lo contiene. • Como par/metros opcionales, podemos de4nir el tama*o t ama*o del te=to que vamos a mostrar con idtA y AeiAt • A trav6s del par/metro 7ont podemos de4nir la fuente que vamos a usar para el te=to. Se puede especi4car las fuentes del sistema por defecto con native.systemFont  y  y native.systemFontBold • Para otener una lista con todas las fuentes disponiles, podemos e!ecutar el códi"o si"uiente, con la llamada al m6todo nati+e.et$ontPames<= local 9uentes = native.getFont?ames78 9or i=1, :9uentes, 1 do print 79uentes*i+8 end

- 33 -

• Con el par/metro si0e, especi4camos el tama*o del te=to, de4nido en p+=eles local m-TeMt = displa-.ne@TeMt70Oello JorldP0, 1H", 1"", native.s-stemFont, !H8

- 34 -

Ejercicios Tema 3 Ejercicio 1  A partir de lo aprendido en el tema N, vamos a diu!ar un rect/n"ulo marrón en un nuevo proyecto de Corona

local rect R display display.newect .newect W8,N88,X8,88rect$set?illColor 8.WX,8.NN,8.W-

 Ahora vamos a 4nali0ar nuestra ora maestra d/ndole un toque de naturale0a al diu!o. a a que tenemos el tronco, vamos a diu!ar la copa del /rol. Para diu!ar pol+"onos m/s comple!os, Corona nos ofrece la posiilidad de utili0ar las llamadas 5ol'lines. Podemos diu!ar una l+nea con los m6todo ya conocidos y posteriormente, a"re"arle, todos los puntos que queramos mediante un par de coordenadaspara completar todos los v6rtices del pol+"ono que queramos crear. local copaArol R display.new2ine J8, JW8, Y8, JN8copaArol$appendE8,J88, 88,W8, Z8,78, JJ8,J88, E8,JW8, J8,JW8copaArol$setColor 8, , 8-

- 35 -

'l pol+"ono creado para la copa del /rol no se puede rellenar sin usar comple!os al"oritmos en los que no vamos a entrar de momento. #rata de completar el e!ercicio para otener un diu!o como el de la ima"en

- 36 -

Ejercicio 2 Intenta reali0ar el si"uiente diu!o. o utilices coordenadas asolutas para ello. Puedes usar las coordenadas =, y- y las propiedades width y hei"ht de cada o!eto para situar los dem/s. 5#A$ 5#A$ con display.content;idth display.content;idth y display.contentKei"ht display.contentKei"ht puedes otener el ancho y el alto del dispositivo

Ejercicio 3 'n este
[

- 37 -

Para ello, podemos usar la función de la lirer+a "raphics new1radient. local g = grap>ics.ne@radient grap>ics.ne@radient77 color1, color) * , direction+ direction+ 8

color y colorJ son dos talas que determinan el color de inicio y el color de 4n '!$ ,,Vdirection determina la dirección del "radiente TupU, TdownU, TleftU, Tri"htUel "radiente creado se le puede a*adir a un rect/n"ulo a trav6s de su función setColor 

- 38 -

Tema * 'ventos e interacción

Detectando e+entos • 2os 'ventos son la principal fuente de información desde la cual podemos reco"er datos y as+ crear una interacción con el usuario de nuestra aplicación. • '=isten muchas maneras para detectar los 'ventos. Por e!emplo, cada uno de los elementos de nuestra aplicación puede ser tratado como un otón interactivo. 'sto nos ofrece una "ran e=iilidad a la hora de estructurar nuestras interfaces "r/4cas. • (urante este tema, aprenderemos cómo a"re"ar diferentes eventos sore los o!etos mostrados en nuestra vista, as+ como la forma de mane!ar eventos de tipo "loal, como puede ser la orientación de nuestro dispositivo.

2a función addE+ent!istener  5!etoMaddE+ent!istener < e+entPame% listener= • Con esta función vamos a poder indicar qu6 evento vamos a re"istrar sore un o!eto en concreto y cómo vamos a proceder a tratarlo. • 'n este caso, Q;jeto  se tratar+a de la entidad sore la que vamos a reco"er  el evento en el que estamos interesados. Puede ser cualquier elemento que ten"amos situado en la vista de nuestra aplicación. • Con el par/metro e+entPame podemos especi4car el tipo de evento que vamos a reco"er. • 'n listener  deemos  deemos especi4car el nomre de la función que vamos a e!ecutar una ve0 ten"a lu"ar el evento que estamos capturando. • Para de!ar de escuchar un evento concreto sore un o!eto, deemos usar el m6todo remo+eE+ent!istener 

- 39 -

E+entos 4lo;ales • Kalamos de 'ventos 1loales cuando hacemos referencia a ese tipo de eventos que no est/n directamente relacionados con nin"
enter$rame • 'ste evento se lan0a cada ve0 que se actualice la vista de nuestra aplicación. Por defecto son N8fps, pero este valor se puede modi4car si accedemos al archivo config.lua que config.lua que se crea en la carpeta de nuestro proyecto. • Capturando este evento podr+amos, por e!emplo modi4car el contenido de nuestra pantalla en tiempo real en función de las acciones del usuario. 9unction capturarvento 7event8 print 7event.name8 print 7event.time8 end ;untime
S'stem • 'ste evento se lan0a para avisar a nuestra aplicación de eventos e=ternos, como cuando la aplicación tiene que entrar en suspenso por la entrada de una llamada telefónica.

- 40 -

• Podemos acceder a la propiedad type del evento para saer qu6 se est/ lan0ando. 2os diferentes tipos para el evento system son$ applicationStart  &  & 5curre cuando la aplicación se lan0a y todo el códi"o en main.lua se ha e!ecutado. applicationExit & Se captura cuando el usuario cierra la aplicación. applicationSuspend  &  & 5curre cuando la aplicación dee suspenderse por la entrada de una llamada o porque el dispositivo entra en inactividad por falta de uso. 9ientras que la aplicación est/ suspendida no recie eventos de nin"en print 706caba de arrancar la aplicacion08 end end ;untime
Qrientation • Con este tipo de evento podemos detectar los camios en la orientación de nuestro dispositivo. Sólo estar/ disponile para tel6fonos que ten"an soporte para acelerómetro. • 2os diferentes tipos event.type- de orientación a los que podemos acceder son$ portrait, son$ portrait, landscapeLeft, landscapeRight, landscapeRight, portraitpside!o"n, portraitpside!o"n, facep, face!o"n. face!o"n. • Si accedemos a la propiedad delta del evento, otenemos la diferencia - 41 -

entre la orientación inicial y la 4nal.

local label = displa-.ne@TeMt7 0portrait0, 1"", )"", nil, !" 8 local 9unction onQrientation&>ange7 onQrientation&>ange7 event 8 label.teMt = event.t-pe local ne@6ngle = label.rotation label.rotation $ event.delta event.delta transition.to7 transition.to7 label, { time=1#", rotation=ne@6ngle rotation=ne@6ngle } 8 end ;untimeange 8

accelerometer  • 'l evento de acelerómetro nos permite capturar movimientos repentinos de nuestro dispositivo y determinar su orientación en relación a la "ravedad. • 'ste evento sólo puede ser tratado por dispositivos con soporte para acelerómetro. • Podemos capturar la aceleración del dispositivo de dos maneras, en relación a la "ravedad, con los par/metros (4ra+it', '4ra+it' y z4ra+it', o la aceleración instant/nea con los par/metros del evento (Instant, 'Instant y zInstant. • Si el par/metro del evento isSAaGe es verdadero, nos indica que el usuario est/ a"itando el dispositivo.

local label = displa-.ne@TeMt7 0n reposo0, 1"", )"", nil, !" 8 local 9unction detecta6celerometro7 detecta6celerometro7 event 8 i9 7event.isA>aIe 7event.isA>aIe == true8 t>en label.teMt = 06gitado0 end end ;untime
eadin • 'n este caso vamos a ser capaces de detectar los eventos "enerados por la r
local 9unction detecta3ruDula7 event 8 print 7event.magnetic8 7event.magnetic8 end ;untimeeading0, detecta3ruDula 8

memor'Harnin • 'ste evento sólo est/ disponile para i5S • Se e!ecuta cuando reciimos un aviso por al"
- 43 -

ToucA E+ents • Cuando el usuario toca la pantalla se "enera un evento de toque sore el o!eto que ha sido pulsado. 'l evento puede ser interceptado y tratado por cualquier o!eto disponile en nuestra vista. • 2os eventos se propa"an entre todos los o!etos con capacidad para tratarlo hasta que uno de ellos lo capture y e!ecute el códi"o correspondiente para mane!arlo. • 2a propa"ación del evento se reali0a si"uiendo la !erarqu+a de disposición de los o!etos en nuestra vista, es decir, el primero en reciirlo ser/ el que se encuentre encima de todos los dem/s. • Si el evento no ha sido capturado por nin"uno de los o!etos de nuestra vista, se propa"a como un evento "loal para poder ser capturado por el o!eto untime

ToucA • (etectamos cuando el usuario pulsa sore el o!eto al que le hemos asi"nado el listener. listener. • Cuando se produce el toque, se lan0a una secuencia de estados que podemos capturar para poder reali0ar diferentes acciones en cada una de las fases. • 2as propiedades del evento a las que podemos acceder son las si"uientes$ s i"uientes$  event.= & es la posición = de las coordenadas del toque dentro de la pantalla event.y & es la posición y de las coordenadas del toque dentro de la pantalla  

event.=Start & se trata de la coordenada = donde ha comen0ado el toque event.yStart & la coordenada y donde ha comen0ado el toque event.phase & 2as diferentes fases del toque touch

- 44 -

• 2os diferentes estados a los que podemos acceder dentro del evento de toque son los si"uientes$  e"an & nos indica que un dedo empie0a a tocar la pantalla del dispositivo  moved & un dedo se desli0a por la pantalla  ended & un dedo de!a de tocar la pantalla  cancelled & el sistema cancela el se"uimiento del toque

local img = displa-.ne@Kmage7 0img'imagina.Dpg0, 1"", )""8 local 9unction capturaventoToBue7event 8 i9 7event.p>ase == 0began08 t>en print 70&omien2a el toBue08 elsei9 7event.p>ase == 0moved08 t>en img.M = event.M img.- = event.elsei9 7event.p>ase == 0ended08 t>en print 70Fin del toBue08 end return true end img0, capturaventoToBue 8

toucA 0 8

- 45 -

• 3na ve0 ten"amos esto activado, cuando se recian m
Creación de e+entos propios • 'n Corona podemos crear eventos propios y asi"n/rselos para su captura sore o!etos de nuestra aplicación o sore el propio o!eto untime • 'n cualquiera de los dos casos, se dee asi"nar el evento sore el o!eto que lo captura, utili0ando el si"uiente m6todo$ obDectvent7event8

• 'l par/metro event  dee  dee ser una tala donde se especi4que el identi4cador del evento name- y el o!eto que ser/ el encar"ado de reciir dicho evento tar"et-

$$ &reamos un obDeto para poder asignarle el evento local imagen = displa-.ne@Kmage70img'imagina.Dpg0,1"",1"" 8

$$ &onRguramos el listener local m-Listener m-Listener = 9unction7 event 8 print7 0vento 0 .. event.name 8 print7 0Target tiene un anc>o de< 0 .. event.target.contentJidt> 8 end imagenvent7 event

- 46 -

'!ercicios '!ercici os #ema #ema 7 Ejercicio 1 >amos a crear un otón que nos permita mostrar una ima"en. Para ello vamos a diu!ar un otón en nuestra vista

local rect R display.newoundedect display.newoundedect X8, W8, 88, W8, J8rect$set?illColor , 8, 8-

ecesitamos capturar el evento de toque sore el otón que acaamos de crear$ rect$add'vent2istener QtouchQ, listener -

Por
- 47 -

local function listenereventif event.phase RR Qe"anQ then local im" R display.newIma"e Qcorona.pn"Q, 8,8im".width RJ88 im".hei"ht R J88 im".= R W8 im".y R N88 end return true end

Ejercicio 2  A partir del si"uiente dise*o que dees crear en tu proyecto$

- 48 -

(ees detectar los camios de orientación del dispositivo, para or"ani0ar el contenido de la si"uiente manera$

Puedes usar los m6todos rotate y translate de los o!etos para situarlos dependiendo de la orientación.

- 49 -

Tema ) #imers y Animaciones

Timer  • 9uchas veces puede ser de utilidad para nuestra aplicación e!ecutar cierta función en el futuro en ve0 de inmediatamente. • Para ello tenemos la lirer+a timer  que  que nos provee de varios m6todos para poder llevar a cao esta tarea.

timer.per7ormHitADela'< dela'% listener ?% iterations@ = • Con el m6todo perform;ith(elay de la lirer+a timer podemos e!ecutar una función, la cual especi4caremos a trav6s del par/metro listener  con  con un retraso de los se"undos que le asi"nemos mediante el par/metro dela'. • 'l par/metro opcional iterations podemos usarlo para concretar el nolaundo78 print7 0SOola undoP0 8 end timer.per9ormJit>Cela-7 #""", >olaundo, # 8

• 'n este e!emplo vamos a e!ecutar e !ecutar la función hola9undo W veces. Cada e!ecución se lan0ar/ pasados W se"undos con respecto a la anterior. • Como el se"undo par/metro del m6todo especi4ca que se dee usar un o!eto de tipo funcion, funcion, podemos utili0ar una función anónima para especi4car  el códi"o que queremos e!ecutar cada : tiempo. • 3na función anónima es aquella que no tiene nomre, es decir, que no queda li"ada a nin"una variale.

- 50 -

• 'l códi"o a continuación reali0a las mismas acciones que el primer e!emplo que hemos e=puesto. timer.per9ormJit>Cela-7 #""", 9unction78 print7 0SOola undoP0 8 end, # 8

• 'l par/metro listener sólo acepta como valor la referencia a una función, es decir, decir, su nomre, es por ello que, directamente no podemos pasarle par/metros cuando pro"ramamos su e!ecución a trav6s trav 6s de timer. • 'sto podemos solucionarlo !untando en un solo e!emplo las dos maneras que hemos aprendido para e!ecutar el m6todo perform;ith(elay local function hola9undo ar", ar"J local 9unction >olaundo7 arg1, arg) 8 print7 0SOola undoP0, arg1, arg) 8 end timer.per9ormJit>Cela-7 #""", 9unction78 >olaundo7 0primero0, 0segundo0 8 end, # 8

Timer  Qtras 7unciones • A parte de poder lan0ar funciones f unciones cada cierto tiempo, la lirer+a timer t imer nos ofrece otros m6todos para poder interactuar con las e!ecuciones futuras que realicemos$

timer.pause < timerId = • 'ste m6todo se encar"a de pausar un timer timerId- creado con perform;ith(elay. perform;ith(elay. (evuelve un umer que representa r epresenta el tiempo que le falta al timer 

timer.resume < timerId = • Con este m6todo podemos volver a arrancar la e!ecución de un timer - 51 -

timerId- sore el que anteriormente hui6ramos e!ecutado el m6todo pause

timer.cancel < timerId = • Se cancela la e!ecución de un timer timerId- que hui6ramos creado con timer.perform;ith(elay-

Transitions • 3na de las caracter+sticas m/s valoradas de Corona, es que todos los o!etos que mostremos en nuestras vistas pueden ser animados. • 2as animaciones se reali0an mediante la "eneración de una secuencia de frames que van pasando suavemente de unos a otros. • 'l t6rmino t"een hace t"een hace referencia a cómo estas transiciones se van a "enerar. "enerar. #ami6n #ami6n es usado en ocasiones para indicar que la propiedad de un o!eto va a ser modi4cada. • 2a lirer+a Transitions nos permite crear animaciones con una
Transitions transition.to
- 52 -

# params.time & params.time & especi4ca el la duración de la transición   enmilise"undos # params.transition & params.transition & por defecto la transición es lineal # params.delay  &  & indica el retardo hasta que comience la transición # params.delta & params.delta & se trata de un valor ooleano que indica si los par/metros animales son tomados como valores 4nales o como como camios sore lo que ya e=ist+a. # params.onStart  &  & función que se e!ecuta cuando comien0a la   animación. # params.on$omplete & params.on$omplete & función e!ecutada cuando se completa la   animación

• 'l si"uiente códi"o nos muestra cómo reali0ar una simple animación. 9ostramos un cuadrado en nuestra vista modi4camos sus par/metros.

local @,> = displa-.contentJidt>, displa-.contentOeig>t local sBuare = displa-.ne@;ect7 ", ", 1"", 1"" 8 sBuare = displa-.contentJidt>, displa-.contentOeig>t transition.to7 transition.to7 sBuare, { time=1#"", alp>a=", M=7@$1""8, -=7>$1""8, @idt>=)"", >eig>t=)"" } 8 transition.to7 transition.to7 sBuare, { time=#"", dela-=)#"", alp>a=1." } 8

• Con este m6todo facilitamos mucho el proceso para la creación de animaciones. Comparamos estos dos m6todos de animar un rect/n"ulo$

- 53 -

9ovieclips • 9ovieclip es una lirer+a e=terna que nos permite crear animaciones de tipo t ipo sprite una serie de im/"enes que e!ecutadas en serie crean una animación• 'sta solución es una manera muy sencilla y poco pesada de desarrollar animaciones muy vistosas. os ayuda tami6n para importar a Corona contenido ya e=istente en ?lash. • Para usar la lirer+a 9ovieclip, deemos descar"arla desde el si"uiente enlace$

0o+ieclips • Antes de poder usar la lirer+a en nuestros proyectos, deemos importarla a nuestro códi"o, de la si"uiente manera$ local movieclip = reBuire 7“movieclip”8 7“movieclip”8

• Con esto declaramos que vamos v amos a usar una lirer+a llamada movieclip.lua, la cual dee estar locali0ada en el mismo directorio que el archivo .lua donde la estemos importando.

mo+ieclipMne#nim mo+ieclipMne#nim <7rames= • Con este m6todo creamos la animación a partir de un array de im/"enes - 54 -

que ser/n, en el orden que ocupen, las encar"adas de conformar nuestro movieclip. m-6nim = movieclip.ne@6nim{ 0img1.png0 0img1.png0,, 0img).png0 0img).png0,, 0img!.png0 0img!.png0,, 0img4.png0 0img4.png0 }  }

• Si no especi4camos una ruta concreta dentro de nuestro proyecto, las im/"enes contenidas en el array que da forma a la animación deen estar en la misma ruta que el 4chero .lua que conten"a el movieclip.

mo+ieclipMpla'<= • (a comien0o a la animación en el orden or den insertado en la creación del movieclip. • Si se ha pausado la animación en al"
mo+ieclipMpla' R start$rame J N% end$rame J O% O% loop J % remo+e J true  • (e esta manera determinamos que comience la animación indic/ndole el frame de comien0o start?rame-, el frame de 4n end?rame-, el n
mo+ieclipMre+erse <= • Arranca la animación pero en sentido contrario al estalecido en su creación. • 3na ve0 alcance el primer pr imer frame, volver/ autom/ticamente al primero y reanudar/ el movieclip.

mo+ieclipMre+erse R start$rame J N% end$rame J O% O% loop J % remo+e J true  • Al i"ual que con play podemos indicar el frame de comien0o, el de 4nali0ación, el n
eliminar una ve0 terminada.

mo+ieclipMne(t$rame mo+ieclipMne(t$rame <= • Aplicado Aplicado sore una animación, detiene su e!ecución y muestra el si"uiente frame en el orden indicado en la creación del movieclip.

mo+ieclipMpre+ious$rame mo+ieclipMpre+ious$rame <= • (etiene cualquier movieclip sore el cual se e!ecute e !ecute la función y muestra el frame anterior con el orden indicado en su creación.

mo+ieclipMstop <= • (etiene la animación en el frame que se encuentre si"uiendo el orden inicial.

mo+ieclipMstop#t$rame mo+ieclipMstop#t$rame <7rame= • (etiene la aplicación en el frame indicado. • Podemos usarlo se"uido de una llamada al m6todo play y conse"uiremos que la animación pase autom/ticamente al frame que necesitemos se"
mo+ieclipMsetDra • Convierte cualquier o!eto de4nido con movieclip a un o!eto con capacidades para ser arrastrado por nuestra vista. • Podemos utili0ar una serie de par/metros para de4nir limitar el o!eto. (e4niendo la propiedad dra J true indicamos que el o!eto puede ser arrastrado. (e la misma manera, podemos usarlo con false para quitarle esa propiedad. • Con limitN  y limitO de4nimos los l+mites en el e!e de las = y en el e!e de las y hasta donde vamos a poder arrastrar nuestra animación. • 'l par/metro ;ounds de4ne los l+mites del o!eto que nos permiten - 56 -

arrastrarlo. 'st/ de4nido como left, top, width, hei"htV movieclip$set(ra" • 2os par/metros on5ress, onDra y onFelease, nos indican los m6todos que se deen e!ecutar una ve0 se capturen esos tres eventos pulsar, arrastrar y de!ar de pulsar-

m-6nim
- 57 -

Ejercicios Tema ) Ejercicio 1 'n este primer e!ercicio vamos a tratar con una ima"en de tipo sprite para sprite para reali0ar diferentes operaciones aprendidas en este tema. ecesitamos, para crear nuestro sprite una ima"en de este tipo,

2a cual podemos dividir dividir en im/"enes simples y, al ponerlas en serie muestren al"
Para poder usar la lirer+a, el 4chero movieclip.lua, contenido dentro del proyecto que nos hemos descar"ado, dee situarse en el mismo directorio donde ten"amos el archivo main.lua del nuevo proyecto pro yecto que estamos creando. 'l si"uiente paso es crear nuestra animación a partir de las im/"enes que hemos a"re"ado tami6n al mismo directorio del proyecto$ local animacion R movieclip.newAnim Tsonic.pn"U, TsonicJ.pn"U, TsonicN.pn"U, Tsonic7.pn"U, TsonicW.pn"U, TsonicX.pn"U, TsonicZ.pn"U, TsonicE.pn"U, sonicY.pn"UV

Podemos situar nuestra animación y posteriormente iniciarla.

- 58 -

animacion.= R display.content;idth % J animacion.y R display.contentKei"ht % J animacion$play-

'n este momento hemos situado nuestra animación en el centro de la pantalla y hemos iniciado su reproducción

uestro si"uiente paso en el e!ercicio ser/ crear una serie de otones, los cuales e!ecutar/n una serie de transiciones t ransiciones sore la animación que hemos creado. local otono!o R display.newoundedect display.newoundedect X8,788,Y8,N8,8otono!o$set?illColor ,8,8local oton>erde R display d isplay.newoundedect .newoundedect X8,788,Y8,N8,8oton>erde$set?illColor oton> erde$set?illColor 8,,8local otonA0ul R display display.newoundedect .newoundedect JX8,788,Y8,N8,8otonA0ul$set?illColor 8,8,otono!o$add'vent2istener QtouchQ, pulsarLotono!ooton>erde$add'vent2istener oton> erde$add'vent2istener QtouchQ, pulsarLoton> pulsarLoton>erdeerdeotonA0ul$add'vent2istener QtouchQ, pulsarLotonA0ul- 59 -

Se dee rellenar los tres m6todos que capturan los eventos, si"uiendo las si"uientes pautas$ &9ientras que se manten"a pulsado el otón ro!o, la animación dee desaparecer. desaparecer. 3na ve0 se de!e de pulsar, la animación dee volver a aparecer. &Si mantenemos pulsado el otón verde, la animación se dee despla0ar hasta la parte superior de nuestra vista. 3na ve0 de!emos de pulsar, pulsar, la animación volver/ a su uicación ori"inal. &Pulsando el otón a0ul, la animación dee rotar rot ar sore su e!e. Cuando de!emos de pulsar, dee volver a su posición ori"inal.

#05!I#CIUP Para este e!ercicio vamos a crear una lluvia de o!etos. Cada : tiempo crearemos un o!eto y simularemos la animación para que recorra la pantalla de arria aa!o, simulando una lluvia. (eemos usar para esto los timer y sus funciones relacionadas aprendidas en este tema. 5#A$ 5#A$ Para poder hacer que cada o!eto se "enere en una posición aleatoria, podemos usar el m6todo math.random

- 60 -

Tema / 9otor ?+sico • Corona facilita el uso de propiedades f+sicas con los elementos que dispon"amos en las distintas vistas de nuestra nuestr a aplicación. • Cualquier o!eto, ima"en o sprite puede sprite puede ser tratado como una Tunidad f+sicaU y autom/ticamente empe0ar a interactuar con otros o!etos dentro de la simulación. • Corona traduce autom/ticamente las unidades t+picas de medición que usamos para colocar nuestros o!etos p+=eles-, a una unidad m6trica de medición metros-. • #odas #odas las posiciones se especi4can en p+=eles, pero internamente se traducen en metros con una conversión de N8 p+=eles por metro.

0otor $sico -sics local  p>-sics = reBuire 0p>-sics0

• 'l uso de las propiedades f+sicas en Corona se pueden hailitar y deshailitar en función de las diferentes necesidades de la aplicación. Incluso se puede pausar la utili0ación del motor f+sico. • 2os si"uientes m6todos sirven para mane!ar el uso del motor f+sico durante nuestra aplicación.

pA'sics.start <= • 'l m6todo start iniciali0a o restaura el modelo f+sico de la aplicación. Se dee llamar a este m6todo antes que cualquier otra función, para poder contar con las propiedades f+sicas de los o!etos.

- 61 -

pA'sics.stop <= • 'l m6todo stop destruye el mundo f+sico de la aplicación.

pA'sics.pause <= • 3tili0amos este m6todo para pausar el motor f+sico en cualquier punto de la e!ecución de nuestra aplicación.

pA'sics.set4ra+it' <( % '= • os permite modi4car el valor de la "ravedad especi4cando los valores en el e!e = y en el y. • Para simular la "ravedad terrestre podemos usar los si"uientes valores$ p>-sics.setravit- 7",N.V8

pA'sics.et4ra+it' <= • (evuelve el valor = e y del vector "loal de la "ravedad, en m%sJ gM, g- = p>-sics.getravit- 78

• Podemos de4nir la "ravedad de nuestra aplicación as/ndonos en la inclinación del dispositivo con una simple función que determine este movimiento utili0ando el acelerómetro. local 9unction onTilt7 9unction onTilt7 event 8 p>-sics.setravit-7 1" W event.Mravit-, $ 1" W event.-ravit- 8 end ;untime
- 62 -

pA'sics.setScale <(= • eali0ando una llamada a este m6todo podemos de4nir el coe4ciente de conversión entre las coordenadas en p+=eles con las que de4nimos nuestros o!etos y las coordenadas f+sicas simuladas por Corona. • 'l valor por defecto es N8, lo que si"ni4ca que los valores f+sicos situados entre 8.m y 8m estar+an cuiertos entre las coordenadas N y N88 de nuestra vista, apro=imadamente.

pA'sics.setDra0ode
- 63 -

Detección de Colisiones • 2as colisiones entre eventos f+sicos en nuestra aplicación, deen ser tratados mediante la captura de una serie de eventos que controlan esta caracter+stica. • Para colisiones "en6ricas, deemos capturar el evento %collision& . • 'ste evento incluye fases incluye diferentes fases, Te"anU y TendedU, las cuales hacen referencia al momento de inicio de la colisión y al momento de 4n, respectivamente. • Aparte del evento "eneral de colisión, disponemos de otros dos eventos para poder controlar la colisión$ %pre$ollision&  &  & evento lan0ado en el momento anterior de comen0ar la interacción. %post$ollision&  &  & evento lan0ado !usto cuando termina la interacción entre los o!etos presentes en la colisión. Se trata del
Detección de Colisiones  E+entos 4lo;ales • Cuando reali0amos la detección a nivel "loal, el evento incluye event.ob'ect( y event.ob'ect( y event.ob'ect) , los cuales contienen las propiedades de los dos o!etos incluidos en la colisión. • Como saemos, Corona trata los o!etos como talas 23A, por lo que podremos a"re"ar, a nuestros o!etos las propiedades que nos interesen a la hora de tratarlos en el códi"o. • Por e!emplo, podemos a*adir un nomre a una ima"en que queramos mostrar en nuestra vista$ local img1 = displa-.ne@Kmage7 0imagen.png0, 1"", )"" 8 img1.mi?ombre img1.mi?ombre = 0Kmagen10 - 64 -

local p>-sics = reBuire 70p>-sics0 local p>-sics 70p>-sics088 p>-sics.start78 local suelo = displa-.ne@Kmage7 0suelo.png0 local suelo 0suelo.png0,, 1%#, 4#" 8 p>-sics.add3od-7suelo, 0static08 suelo.m-?ame = 0suelo0 local bloBue1 = displa-.ne@Kmage7 0bloBue.png0 local bloBue1 0bloBue.png0,, 1"", )"" 8 p>-sics.add3od-7 p>-sics.add3od-7 bloBue1, { densit- = 1.", 9riction = ".!, bounce = ".) } 8 bloBue1.m-?ame bloBue1.m-?ame = 0bloBue10 local bloBue) = displa-.ne@Kmage7 0bloBue.png0 local bloBue) 0bloBue.png0,, 1"", 1)" 8 p>-sics.add3od-7 p>-sics.add3od-7 bloBue), { densit- = 1.", 9riction = ".!, bounce = ".) } 8 bloBue).m-?ame bloBue).m-?ame = 0bloBue)0 local 9unction on&ollision7 9unction on&ollision7 event 8 i9  7  7 event.p>ase == 0began0 0began0 8  8 t>en print7 0began< print7 0began< 0 .. 0 .. event.obDect1.m-?ame event.obDect1.m-?ame .. 0 X 0 .. 0 .. event.obDect).m-?ame event.obDect).m-?ame 8 elsei9  7  7 event.p>ase == 0ended0 8 t>en print7 0ended< 0 .. 0 .. event.obDect1.m-?ame event.obDect1.m-?ame .. 0 X 0 .. 0 .. event.obDect).m-?ame event.obDect).m-?ame 8 end end ;untime
- 65 -

Detección de Colisiones  E+entos !ocales • 'n este caso podemos acceder a los o!etos participantes en la colisión mediante self  y  y event.other  ... local bloBue1 = displa-.ne@Kmage7 0bloBue.png0 local bloBue1 0bloBue.png0,, 1"", )"" 8 p>-sics.add3od-7 p>-sics.add3od-7 bloBue1, { densit- = 1.", 9riction = ".!, bounce = ".) } 8 bloBue1.m-?ame bloBue1.m-?ame = 0bloBue10 local bloBue) = displa-.ne@Kmage7 0bloBue.png0 local bloBue) 0bloBue.png0,, 1"", 1)" 8 p>-sics.add3od-7 p>-sics.add3od-7 bloBue), { densit- = 1.", 9riction = ".!, bounce = ".) } 8 bloBue).m-?ame bloBue).m-?ame = 0bloBue)0 local 9unction on&ollision7 9unction on&ollision7 event 8 i9  7  7 event.p>ase == 0began0 0began0 8  8 t>en print7 0began< print7 0began< 0 .. 0 .. sel9.m-?ame .. 0 X 0 .. 0 .. event.ot>er.m-?ame 8 elsei9  7  7 event.p>ase == 0ended0 8 t>en print7 0ended< 0 .. 0 .. sel9.m-?ame .. 0 X 0 .. 0 .. event.ot>er.m-?ame 8 end end bloBue1.collision = onLocal&ollision onLocal&ollision bloBue1
Detección de Colisiones 8 $uerzas - 66 -

• Cuando termina una colisión podemos otener la fuer0a directa entre los dos o!etos, as+ como la fuer0a lateral entre los mismos, la cual es una fuer0a de fricción. • Podemos acceder a la fuer0a directa y la lateral dentro del evento  post$ollision,  post$ollision, recuperando las propiedades e+ent.7orce y e+ent.7riction.

local 9unction on(ost&ollision7 event 8 i9 7 event.9orce Y 1." 8 t>en print7 0Fuer2a Cirecta< 0 .. event.9orce .. 0 Friccin< 0 .. event.9riction 8 end end ;untime
Detección de Colisiones  Collision Cateories • Podemos determinar qu6 o!etos pueden colisionar entre si utili0ando las cate"or+as y las m/scaras. • 'n este caso se deen especi4car en inario utili0ando su notación not ación decimal , J, 7, E, X, NJ...• Cada tipo de o!eto que de4namos en nuestra aplicación podr/ tener un 4ltro diferente en el que de4niremos los valores de cateor'its cate"or+a a la que pertenece- y masGits cate"or+as con las que puede colisionarcollisionFilter collisionFilter = { categor-3its categor-3its = 1, masI3its = H } $$ &on este 9iltro, colisionará con los obDetos Bue tengan categor-3its 4 o ) local red3od- = { densit-=".), 9riction=", bounce=".N#, radius=4!.", 9ilter=collisionFilter local red3od9ilter=collisionFilter } red3alloon = displa-.ne@Kmage7 0redZballoon.png0 0redZballoon.png0 8  8 p>-sics.add3od-7 red3alloon, red3od- 8

- 67 -

• Para poder determinar los valores de m/scara que deemos usar para cada uno de los 4ltros, podemos usar la si"uiente tala de colisiones$

• 'n la primera l+nea determinamos la cate"or+a que le asi"namos a cada uno de los o!etos de nuestra aplicación. 'n la se"unda especi4camos con qu6 otros o!etos puede colisionar. • 'n la
Cuerpos $sicos • 3na de las caracter+sticas principales del motor f+sico de Corona es que nosotros podemos representar todos los o!etos que necesitemos y Corona se encar"ar/ de re presentarlos f+sicamente en nuestra aplicación y devolvernos las propiedades caracter+sticas de cada uno de ellos. • Cuando a*adimos un o!eto al motor f+sico usando pA'sics.addod', no otenemos un o!eto nuevo, si no que ampliamos las propiedades del mismo. • Podremos se"uir accediendo a las propiedades del o!eto antes del camio pero, en este caso, el o!eto estar/ su!eto a todas las propiedades f+sicas proporcionadas por el motor de Corona, como puede ser la "ravedad.

Cuerpos $sicos 8 pA'sics.addod'

- 68 -

• Con esta función transformamos un o!eto simple de Corona en una simulación f+sica del mismo capa0 de interactuar con el motor f+sico de la aplicación. • 2os cuerpos f+sicos tienen N propiedades principales$  density$ es multiplicada por el /rea del o!eto para determinar su masa. friction$ indica la resistencia del o!eto con respecto a los dem/s  ounce$ hace referencia a la capacidad de reote del o!eto. 'l valor por defecto es 8.J. >alores por encima de .8 tendr/n t endr/n comportamientos indeterminados

• Por defecto, este constructor asume que el o!eto creado es rectan"ular. local bloBue = displa-.ne@Kmage7 0bloBue.png0, 1"", )"" 8 p>-sics.add3od-7 bloBue, { densit- = 1.", 9riction = ".!, bounce = ".) } 8

• 2a tala con las propiedades f+sicas puede ser declarada fuera y usada en varios componentes. local bloBue1 = displa-.ne@Kmage7 displa-.ne@Kmage7 0bloBueKmagina.png0, 0bloBueKmagina.png0, 1"", )"" 8 local bloBue) = displa-.ne@Kmage7 displa-.ne@Kmage7 0bloBueKmagina 0bloBueKmagina.png0, .png0, 1V", )V" 8 local material3loBue material3loBue = { densit- = 1.", 9riction = ".!, bounce = ".) } p>-sics.add3od-7 p>-sics.add3od-7 bloBue1, material3loBue material3loBue 8 p>-sics.add3od-7 p>-sics.add3od-7 bloBue), material3loBue material3loBue 8

• 2os cuerpos circulares requieren un par/metro adicional radius. 's muy -sics.add3od-7 p>-sics.add3od-7 roca, { densit- = 1.", 9riction = ".!, bounce = ".), radius = 4" } 8

- 69 -

• Para crear pol+"onos m/s comple!os, deemos especi4car cada uno de los v6rtices como un par de coordenadas mediante la propiedad shape. 'stas coordenadas deen declararse si"uiendo el orden de las a"u!as del relo!. • 'l m/=imo n
p>-sics.add3od-7 p>-sics.add3od-7 pentagon, { densit-=!.", 9riction=".V, bounce=".!, s>ape=pentagonA>ape s>ape=pentagonA>ape } 8

• Podemos declarar un o!eto que act-sics.add3od-7 rect, 0static0, { i"Sen"or = true } 8

- 70 -

Ejercicios Tema / Ejercicio 1 Para este primer e!ercicio vamos a crear una estructura mediante la cual podamos apreciar, apreciar, sin salir de la aplicación, de los diferentes modos que tenemos a nuestra disposición dentro del motor f+sico para representar los diferentes o!etos dentro de nuestra aplicación. Para nuestro proyecto vamos a necesitar N im/"enes, las cuales vamos a de!ar a merced de la simulación "ravitatoria que nos ofrece el motor f+sico de Corona para oservar su comportamiento. osotros vamos a utili0ar las si"uientes$

2o primero que vamos a hacer es importar la lirer+a para mane!ar o!etos f+sicos en Corona e iniciali0arla$ local physics R require QphysicsQphysics.start-

3na ve0 iniciali0ada la lirer+a, vamos a crear todos los o!etos dentro de nuestra vista, las im/"enes, el suelo, para que no se pierdan los o!etos en el in4nito y N otones que nos van a permitir alternar entre las diferentes opciones para mostrar estos o!etos dentro del motor f+sico$ local suelo R display display.newect .newect 78,NY8,788,N8physics.addLody suelo, QstaticQlocal lo"o R display display.newIma"e .newIma"e Qlo"ocorona.pn"Q, E8,&88physics.addLody lo"o, ounceR8.N, frictionR 8.7Vlocal icuadernos R display.newIma"e Qicuadernos.pn"Q, 88,&88physics.addLody icuadernos, ounceR8.N, frictionR 8.7V- 71 -

local idiotify R display.newIma"e display.newIma"e Qidiotify.pn"Q, EW,&88physics.addLody idiotify, ounceR8.N, frictionR 8.7V-

&& Creamos los otones local rectan"uloo!o R display.newoundedect WW,7JW,88,78, J8rectan"uloo!o$set?illColor , 8, 8local rectan"ulo>erde R display.newoundedect X8,7JW,88,78, J8rectan"ulo>erde$set?illColor rectan"ulo> erde$set?illColor 8, , 8local rectan"uloA0ul R display.newoundedect JXW,7JW,88,78, J8rectan"uloA0ul$set?illColor 8, 8, && A*adimos A*adimos estos otones al motor f+sico para poder verlos en los diferentes modos physics.addLody rectan"uloo!o, QstaticQ,  densityR.8Vphysics.addLody rectan"ulo>erde, QstaticQ,  densityR.8Vphysics.addLody rectan"uloA0ul, QstaticQ,  densityR.8V&& A"re"amos A"re"amos los eventos que controlar/n cuando pulsemos un otón rectan"uloo!o$add'vent2istener QtouchQ, pulsarLotono!orectan"ulo>erde$add'vent2istener rectan"ulo> erde$add'vent2istener QtouchQ, pulsarLoton> pulsarLoton>erdeerderectan"uloA0ul$add'vent2istener QtouchQ, pulsarLotonA0ul-

Si e!ecutamos nuestra aplicación oservaremos nuestras N im/"enes cayendo desde lo m/s alto de nuestra vista hasta el suelo que hemos colocado como tope. uestro si"uiente paso ser/ rellenar los m6todos que controlan los eventos de pulsación de los otones$ local function pulsarLotono!o eventif event.phase RR Qe"anQ then print Q('L31Qphysics.set(raw9ode Qdeu"Qend end

Con este m6todo controlariamos el oton o!o. Fellena los otros 2

mtodos para cam;iar entre los modos restantes. Si utili0amos los modos Tdeu"U o ThyridU para par a oservar nuestra aplicación - 72 -

podemos anali0ar los diferentes estados f+sicos de los o!etos representados con diferentes colores$ &aran!a$ o!etos f+sicos en movimiento &1ris$ o!etos en reposo &>erde$ &>erde$ o!etos est/ticos, como el suelo o los otones.

#05!I#CIUP 9odi4ca las im/"enes del e!ercicio y utili0a al"una que sea de tipo c+rcular, adaptando el o!eto f+sico para que se adapte a la forma de la nueva ima"en.

Ejercicio 2 9odi4ca el e!ercicio anterior para reali0ar un T4ltroU de los o!etos. Cada uno de los o!etos cumplir/ un comportamiento determinado$ &'l primer o!eto no colisionar/ ni con el suelo ni con los otones, por lo que se perder/ en el in4nito de nuestra aplicación &'l se"undo o!eto no colisionar/ con el suelo, pero s+ con los otones. &'l tercer o!eto colisionar/ con el suelo 'n todo caso, muestra en la consola el estado de las colisiones y los o!etos que participan en ellas.

- 73 -

Tema , Kardware y 9ultimedia

In7ormación del dispositi+o • Corona nos ofrece una serie de lirer+as y m6todos para poder acceder a la información del sistema donde se est/ e!ecutando e !ecutando nuestra aplicación. • Puede sernos de "ran utilidad para poder mostrar determinada información en función del modelo de dispositivo donde estemos est emos e!ecutando la aplicación. • Aparte podemos acceder a los diferentes componentes que ten"a nuestro dispositivo disponile, como puede ser el acelerómetro, el sistema de 4cheros interno, el sistema de locali0ación... Información del dispositivo

s'stem.in7o
- 74 -

 Tplatform>ersionU & otenemos la versión de la plataforma donde e!ecutamos la aplicación.  TversionU & la versión de Corona  Tte=ture9emory3sedU & nos devuelve el uso de memoria de la aplicación en ytes.  Tma=#e=tureSi0eU  Tma=#e=tureSi0eU & otenemos el m/=imo ancho y alto de te=tura que  podemos usar en nuestra aplicación.

s'stem.etTimer s'stem.etTimer <= • 'sta función nos devuelve, en milise"undos, el tiempo que ha pasado desde que se ha e!ecutado la aplicación.

s'stem.open"F!
s'stem.patA$or$ile s'stem.patA$or$ile <lename ? %;aseDirector'@= • 1enera la ruta asoluta donde podemos encontrar el 4chero 4lename. Se le puede especi4car un directorio ase a partir del cual "enerar esa ruta.

s'stem.+i;rate <= • 'mite una viración en nuestro dispositivo

Directorios del sistema

- 75 -

• 'n todos los dispositivos tenemos una serie de directorios de4nidos por el sistema a los cuales podemos acceder con las si"uientes constantes$ system.DocumentsDirectory 

• 's el directorio que utili0amos para traa!ar con 4cheros que deen "uardarse incluso cuando termine la sesión en la que estamos traa!ando. system.TemporaryDirectory

• Se trata de un directorio temporal. 2a persistencia de los 4cheros "uardados en este directorio, no se ase"ura que se manten"a una ve0 terminada la sesión. system.ResourceDirectory 

• Se trata del directorio donde tenemos empaquetados todos los contenidos de la aplicación. unca se deen "uardar 4cheros propios en este directorio.

Sistema de #udio • 'l sistema de audio de Corona nos ofrece la posiilidad de acceder a las caracter+sticas m/s avan0adas de la lirer+a 5penA2 API multiplataforma de audio N( empleada mayoritariamente en !ue"os• 'l n
audio.loadSound <le= - 76 -

• Con este primer m6todo, car"amos el audio entero en memoria y as+ lo tenemos disponile a la hora de reproducirlo. eali0a un "ran uso de memoria, por lo tanto es el m6todo menos aconse!ale para aplicaciones con prolemas de rendimiento.

audio.loadStream <le= • 'n este caso, el audio es preparado para su lectura en peque*os tro0os, se"
• o se deen car"ar varias instancias de un mismo sonido a trav6s de loadSound. Ser+a una p6rdida de memoria. • Por el contrario, si el m6todo utili0ado para la reproducción de nuestro sonido es loadStream, hay que tener en cuenta que una instancia sólo puede ser reproducida simult/neamente por cada canal. • Por lo tanto, si queremos lan0ar varias reproducciones a la ve0, utili0ando loadStream, deemos crear varias instancias que mane!en los diferentes sonidos. local musica1 = audio.loadAtream 70musica1.@av08 local musica) = audio.loadAtream 70musica).@av08 audio.pla- 7musica18 audio.pla- 7musica)8

- 77 -

• Al utili0ar los streams, la car"a en memoria es m/s reducida que de la manera que hemos visto anteriormente.

audio.pla'
audio.stop
audio.pause
audio.resume
audio.stopHitADela' audio.stopHitADela'
audio.set:olume <+olumen ?% options@= • 'stalece el volumen para la reproducción repr oducción en activo. 'l valor del par/metro volume va desde 8.8 a .8. • 'n el par/metro options podemos especi4car una tala para especi4car el canal al cual le vamos a camiar el volumen. '!. channelR:V

audio.seeG
:deo media.pla':ideo media.pla':ideo
local 9unction termina5ideo 7event8 print 70terminado08 end media.pla-5ideo media.pla-5ideo 70videoDemplo.mp40, true, termina5ideo8

- 80 -

Captura de im&enes • 'n casi todos los dispositivos de nueva "eneración tenemos disponile una c/mara con la que se pueden capturar tanto im/"enes como v+deos. • 'sta captura de contenido multimedia puede ser usado dentro de nuestra aplicación y por eso, Corona nos ofrece un API para mane!ar todo lo relacionado con la c/mara. • 'ste API no se puede utili0ar en el simulador de Corona para ;indows, as+ que la aplicación si se desarrolla sore ese sistema operativo, dee ser proada directamente en el dispositivo.

media.sAo
settings = { android = { uses(ermissions uses(ermiss ions = { 0android.permission.&6;60,   0android.permission.J;KTZT;?6LZATQ;60, 0android.permission.J;KTZT;?6LZATQ;60, }, }, } - 81 -

• Para el caso especi4co de desarrollar para el i5ad, necesitamos especi4car  dos par/metros adicionales. • A la llamada de media.sAo deemos a"re"ar los valores de$  ori"in & el rect/n"ulo a partir del cual se va a mostrar el popover para seleccionar la foto. 2o m/s normal es usar el otón desde el cual lan0amos la selección de im/"enes. '!$ myLutton.contentLounds-

 permittedArrow(irections & un array arra y opcional indicando las posiles direcciones hacia las cuales se e=tender/ el popover. 2os valores admitidos son$ TupU, TdownU, TleftU, Tri"htU, TanyUV • 9ediante el par/metro mediaSource de la llamada al m6todo, vamos a especi4car de dónde vamos a otener la ima"en. Puede contener al"uno de los si"uientes valores$  media.Photo2irary media.Camera media.SavedPhotoAlum

• (eemos indicar el m6todo que se va a hacer car"o de "estionar el 4nal del evento de captura de im/"enes a trav6s del par/metro listener . • 'ste m6todo recuperar/ el o!eto e+ent.taret donde quedar/ almacenada la ima"en que hayamos seleccionado para su uso. • Si no reali0amos nin"una modi4cación sore la ima"en capturada, captur ada, esta se mostrar/ en la parte superior i0quierda de nuestra vista. • Por
- 82 -

• Si utili0amos este m6todo, ya no reciiremos el o!eto event.tar"et en el m6todo listener. listener. • 'l formato de la tala para el par/metro 4letale es$ + base!ir , filename -, type/

local 9unction on&omplete7event8 on&omplete7event8 local p>oto = event.target p>oto.M = H# p>oto.- = )#" i9  p>oto  p>oto t>en print7 print7 0p>oto @,> = 0 .. 0 .. p>oto.@idt> p>oto.@idt> .. 0,0 0,0 ..  .. p>oto.>eig>t 8 end end local button local  button = displa-.ne@;ect71)" displa-.ne@;ect71)",, )4" )4",, V" V",, %" %"88 local 9unction 9unction tomar(>oto7  tomar(>oto7 event 8 $$&omprobamos si el dispositivo tiene cámara i9  media.>asAource   media.>asAource 7media.&amera8 t>en media.s>o@7 media.&amera, on&omplete 8 end end buttonoto 8

"so del #celerómetro • 'l acelerómetro es uno de los componentes disponile en la mayor+a de los dispositivos de
eventos lan0ados por el acelerómetro en el m6todo indicado para ello. ;untime
• 'n el listener donde capturamos el evento, podemos acceder a diferentes valores$ • Para poder otener los diferentes valores se"
e+ent.z4ra+it' • 9ediante el uso de e+ent.isSAaGe saremos si el movimiento que ha reali0ado el dispositivo es una a"itación. • Con e+ent.deltaTime e+ent.deltaTime podremos acceder a los se"undos que han transcurrido desde el
- 84 -

Ejercicios Tema , Ejercicio 1 >amos a practicar con la API para el mane!o de sonidos que nos ofrece Corona, creando un peque*o reproductor de audio como el que podemos ver  en la si"uiente captura$

2o primero que vamos a hacer es colocar los diferentes o!etos que tenemos en nuestra vista$ local content;idth R display.content;idth local contentKei"ht R display.contentKei"ht local te=to R display.new#e=t display.new#e=t Q'l audio est/ paradoQ, content;idth%J, contentKei"ht O W8local otonPlay R display.newIma"e QotonStart.pn"Q, 88, contentKei"ht O W8otonPlay.width R W8 otonPlay.hei"ht otonPlay .hei"ht R W8 local otonPause R display.newIma"e QotonPause.pn"Q,X8, contentKei"ht O W8otonPause.width R W8 otonPause.hei"ht R W8 local otonStop R display display.newIma"e .newIma"e QotonStop.pn"Q, JJ8, contentKei"ht & W8otonStop.width R W8 - 85 otonStop.hei"ht R W8

Si e!ecutamos nuestra aplicación podremos oservar los N otones y el te=to que nos servir/ de indicador para mostrar el estado de la canción. 2o si"uiente que haremos ser/ crear el audio que vamos a reproducir$ local musica R audio.loadStream Qmusic.mpNQ-

Car"amos el audio que vamos a usar en la variale musica para poder acceder a ella a trav6s de los diferentes eventos que capturaremos al interactuar con los otones. 'l si"uiente paso es crear los eventos para los otones y, en función de la acción de cada uno se dee completar el códi"o que falta$ local function pulsarPlay event&& C59P2'#A && eproduce el audio && Si el audio est/ pausado, lo contin
 Aparte, en cada uno de los m6todos, deemos actuali0ar el estado del te=to para indicarnos en qu6 situación est/ la reproducción. Para 4nali0ar el e!ercicio, vamos a especi4car el tiempo que llevamos reproducido y el tiempo total del audio. Para ello deemos crear una variale var iale - 86 -

para llevar la cuenta del tiempo reproducido, as+ como el te=to donde pondremos los detalles$ local tiempo#ranscurrido R 8 local te=to#iempo R display.new#e=t Q#otal reproducido Q.. tiempo#ranscurrido%888-.. tiempo#ranscurrido%8 88-.. Q % Q..audio."et(urationmusica-%888-, Z8,NJ8-

3samos el m6todo audio.etDuration que nos devuelve el tiempo total del audio que le pasemos por par/metro. Como el n
 A trav6s de este timer, cada se"undo, vamos incrementando la variale que controla el tiempo de nuestra aplicación, actuali0amos act uali0amos el te=to y comproamos si el audio si"ue reproduci6ndose, es decir, no ha lle"ado al 4nal para reiniciarlo. Por
EVEFCICIQ 2 >amos a me0clar en este e!ercicio dos de los temas aprendidos hasta la fecha, la reproducción de audio vista vist a en este tema y el mane!o de colisiones del motor f+sico de Corona. Se dee crear una interfa0 como la si"uiente$

#odos los o!etos de la interfa0 se podr/n arrastrar a lo lar"o de la vista, e=cepto el c+rculo ro!o que ser/ nuestro o!eto master. Cada uno de los cuadrados representar/ un tipo diferente de audio y un canal diferente. Si uno de los rect/n"ulos entra en contacto con el c+rculo, dee empe0ar a sonar en loop su sonido asociado. 3na ve0 lo separemos dee parar de - 88 -

sonar.

5#AS$ &ecuerda que, a los o!etos que creamos se le pueden a*adir par/metros se"
EVEFCICIQ 3 eali0ar una aplicación que nos permita capturar una ima"en a trav6s de la c/mara del dispositivo. 3na ve0 capturada, mostrarla en un tama*o reducido. Permitir, Permitir, al tocar la ima"en capturada, que esta, se amplie ocupando todo el ancho y alto de la pantalla.

- 89 -

Tema  1estión de 9apas y 1PS

0apas • 2a funcionalidad 9ap>iew, 9ap>iew, permite al desarrollador incorporar uno o m/s mapas de 1oo"le en su aplicación. • Permite a su ve0 reali0ar diferentes tipos de acciones utili0ando la información proveniente del mapa y compar/ndola con diferentes par/metros del dispositivo, como puede ser su situación. 9apas • Se pueden marcar puntos de inter6s en el mapa e incluso utili0ar herramientas de geocoding  traducción  traducción de coordenadas de latitud% lon"itud en la dirección f+sica m/s cercana. • 9ap>iew sólo est/ disponile para su uso en dispositivos y, y, por lo tanto, no funciona sore el simulador. • Para poder proar esta caracter+stica se dee hacer sore un dispositivo con sistema operativo i5S, sore el simulador del :Code o sore un dispositivo Android. 9apas • Para poder proarlo sore Android, se deen de4nir los permisos de Internet y de locali0ación el 4chero uild.settin"s de nuestro proyecto.

- 90 -

settings = { android = { uses(ermissions = { $$ ;eBuired b- t>e ap5ie@ to 9etc> its contents contents 9rom t>e oogle aps servers. 0android.permission.K?T;?T0, $$ Qptional permission used to displa- current location via t>e (A. 0android.permission.6&&AAZFK?ZLQ&6TKQ?0, $$ Qptional permission used to displa- current location via JiFi or cellular service. 0android.permission.6&&AAZ&Q6;AZLQ&6TKQ?0, }, usesFeatures usesFeatur es = { $$ K9 -ou set permissions 06&&AAZFK?ZLQ&6TKQ?0 and 06&&AAZ&Q6;AZLQ&6TKQ?0 above, $$ t>en -ou ma- @ant to set up -our app to not reBuire location services as 9ollo@s. $$ Qt>er@ise, devices t>at do not >ave location sevices 7suc> as a (A8 @ill be unable $$ to purc>ase t>is app in t>e app store. { name = 0android.>[email protected] 0android.>[email protected],, reBuired = 9alse }, { name = 0android.>[email protected] 0android.>[email protected],, reBuired = 9alse }, { name = 0android.>ar 0android.>[email protected] [email protected]@orI0 on.net@orI0,, reBuired = 9alse }, }, }, }

m$ap = nati%e&ne'$apVie'( )center, *center, 'idth, height +

• 9ediante esta instrucción, creamos una vista de mapa en nuestra aplicación situada centrada en las coordenadas especi4cadas :center, :center, center- y con el tama*o indicado width, hei"ht• 'ste constructor nos devuelve un o!eto Corona, el cual puede ser tratado como cualquier otro dentro de nuestra vista. • Con estas caracter+sticas podemos conse"uir funcionalidades no permitidas dentro de las aplicaciones nativas de Apple, como mover el mapa o transformarlo en un o!eto f+sico.

- 91 -

#tri;utos del 0apa m$ap&mapTpe = "tandard . "atellite . hbrid  hbrid

• 9odi4cando el atriuto map#ype, podemos ele"ir entre las diferentes vistas de mapa que tenemos disponiles. • 'n este caso, contamos con tres opciones. 2a vista de mapa normal standard-, la ima"en desde el sat6lite satellite- o la me0cla de los dos estilos hyrid-. • 'l estilo por defecto es standard.

m$ap&i"/oomnabled = true . al"e

• 9odi4cando esta propiedad del mapa determinamos si es posile reali0ar las acciones "estuales pinch- para ampliar y reducir la vista del mapa. • 'l valor por defecto es true.

m$ap&i"Scrollnabled = true . al"e

• 'sta propiedad nos indica si le permitimos al usuario hacer scroll sore la vista del mapa. • 'l valor por defecto es true.

m$ap&i"2ocationpdating = true . al"e

• Con esta opción indicamos si se muestra o no la posición actual del usuario. • Cuando activamos esta propiedad este valor se ir/ actuali0ando constantemente en el mapa se"
• 'l valor por defecto es false.

i"Vi"ible = m$ap&i"2ocationVi"ible

• Se trata de una propiedad de solo lectura la cual nos indica si la posición del usuario se encuentra dentro de la re"ión que estamos mostrando en ese momento en nuestra vista del mapa. • 'ste valor est/ asado en una apro=imación, por lo que puede llevar a errores cuando la posición est6 en los l+mites del mapa.

$unciones del 0apa latitude, longitude = m$apget5ddre""2ocation (6ireccin a bu"car+

• Con esta función otenemos las coordenadas lon"itud y latitud- de la dirección que pasemos por par/metro. • 'stas coordenadas se otienen a trav6s de una petición K##P sore 1oo"le maps. • Aparte de direcciones, podemos usar como par/metros sitios destacados y el servicio de 1oo"le se encar"ar/ de locali0arlos #orre #orre 'i^el, 2ierty Statue-. • 'sta información nos puede servir para colocar un marcador en el mapa, para volver a centrar el mapa en la locali0ación deseada o para llevar a cao cualquier función que incluya el uso de un par de coordenadas.

m2ocation = m$apget"er2ocation (+

• 'sta sentencia contiene una tala con la información detallada de la posición del usuario. • 2os valores que podemos encontrar dentro de esta tala son los si"uientes$ - 93 -

longitude . latitude . altitude . accurac . time . "peed . direction . i"pdating

• 'l
• 9ovemos la parte visile de nuestro mapa a una nueva locali0ación declarada por los par/metros latitude y lon"itude. • Con los valores de latitudeSpan y lon"itudeSpan de4nimos el nivel de 0oom sore el centro de nuestra re"ión. • 'l
m$ap"et9enter (latitude, longitude, i"5nimated+

• 9ediante esta función movemos la re"ión actual de nuestro mapa a una nueva cuyo centro es el par de coordenadas latitude y lon"itudeque introducimos por par/metro. • 'l
m$apadd$ar:er (latitude, longitude, { title = Titulo Titulo,, "ubtitle = Subt;tulo!+

• 9ediante el uso de esta función a"re"amos un marcados en las coordenadas indicadas. • 2a tala que usamos como tercer par/metro, nos indica el t+tulo y el sut+tulo del popup que saldr/ al hacer click sore el marcador en el mapa.

m$apremo%e5ll$ar:er"(+

• ?unción para eliminar todos los marcadores que ten"amos dentro de nuestra vista de mapa.

- 94 -

4eocodin • 3n par de coordenadas de latitud%lon"itud pueden ser transformadas, en una dirección apro=imada. • Para ello, internamente, nos conectaremos a los servidores de 1oo"le para transformar esta información. • 'sta cone=ión no depende de nosotros, por lo que, el rendimiento de nuestra aplicación puede verse resentido dependiendo del estado de los servidores de 1oo"le. • Para utili0ar esta funcionalidad dentro de los mapas, lo primero que deemos hacer es poner nuestra aplicación a escuchar el evento map0ddress. map0ddress. • Con el uso de la función m$apneare"t5ddre"" (latitude, longitude, re"ult
• otendremos una llamada de tipo as+ncrono as+ ncrono sore la función que hayamos ha yamos de4nido en result*andler . • 2os par/metros devueltos por el evento son los si"uientes$ e%ent&"treet - el nombre de la calle e%ent&"treet6etail e%ent&"treet6e tail - el nGmero de la calle 7u otros datos sobre la locali2acin8 e%ent&cit - la ciudad o el pueblo e%ent&cit6etail - in9ormacin adicional sobre la ciudad e%ent®ion - el estado o la provincia e%ent®ion6etail - la regin por debaDo del estado o la provincia e%ent&po"tal9ode - el cdigo postal e%ent&countr - el nombre del país e%ent&countr9ode - la abreviacin estándar del país - 95 -

e%ent&i"rror - indica si la coneMin nos devuelve algGn tipo de error

• 3n e!emplo para la captura del evento ser+a el si"uiente$

local 9unction map6ddressOandler7 9unction map6ddressOandler7 event 8 i9 event.isrror t>en native.s>o@6lert70rror0 native.s>o@6lert70rror0,, 0map5ie@ rror< 0 .. 0 .. event.erroressage , {0Q[0 {0Q[0}8 }8 else native.s>o@6lert70&orrecto0 native.s>o@6lert70&orrecto0,, 0La locali2acin está en< 0 .. 0  .. event.cit- .. 0, .. 0, 0 .. 0 .. event.countrevent.countr- , {0Q[0 0Q[0}8 }8 end end m-ap
- 96 -

Ejercicios Tema  Ejercicio 1 'n este e!ercicio vamos a utili0ar los mapas nativos "racias a la funcionalidad f uncionalidad 9ap>iew que nos ofrece Corona. 'n muy pocas lineas podremos utili0ar mapas completamente funcionales en nuestra aplicación. Kay que se*alar que Corona trata los mapas como otro o!eto m/s de nuestra aplicación por lo que podremos aplicarle si queremos cualquier funcionalidad t+pica de tratamiento de im/"enes como rotar r otar el mapa o moverlo por la pantalla. Con la si"uiente l+nea crearemos y mostraremos mostr aremos un mapa$ local mapa R native.new9ap>iew 8, 8, NJ8, 7J8 -

2os parametros de la funcion new9ap>iew son los puntos de posición del mapa y su tama*o. 'n nuestro caso lo colocariamos en el punto de ori"en 8,8- con un tama*o de NJ8,7J8Para comproar los distintos modos de vista que poseen nuestros mapas vamos a crear tres otones en la parte inferior de nuestra aplicación. local rectan"uloo!o R display.newoundedect X8,7JW,E8,78, J8rectan"uloo!o$set?illColor , 8, 8local rectan"ulo>erde R display.newoundedect X8,7JW,E8,78, J8rectan"ulo>erde$set?illColor rectan"ulo> erde$set?illColor 8, , 8local rectan"uloA0ul R display.newoundedect JX8,7JW,E8,78, J8rectan"uloA0ul$set?illColor 8, 8, -

3na ve0 creados los otones, les a*adiremos los mane!adores para controlar  los eventos de pulsado, y estos controladores camiaran el tipo de vista del mapa. local function pulsarLotono!oeventifevent.phase RR Qe"anQ- then mapa.map#ype mapa.map# ype R QstandardQ end end local function pulsarLotonA0uleventifevent.phase RR Qe"anQ- then - 97 mapa.map#ype mapa.map# ype R QsatelliteQ end end

local function pulsarLoton> pulsarLoton>erdeeventerdeeventifevent.phase RR Qe"anQ- then mapa.map#ype mapa.map# ype R QhyridQ end end && A"re"amos A"re"amos los eventos que controlar/n cuando pulsemos un otón rectan"uloo!o$add'vent2istener QtouchQ, pulsarLotono!orectan"ulo>erde$add'vent2istener rectan"ulo> erde$add'vent2istener QtouchQ, pulsarLoton> pulsarLoton>erdeerderectan"uloA0ul$add'vent2istener QtouchQ, pulsarLotonA0ul-

#mpliación 1 Como ampliación vamos a reutili0ar los otones ya creados cr eados para comproar otras de las funciones que nos ofrecen los mapas nativos. 3no de los otones deer/ centrar el mapa en la re"ión en la cual nos situemos. 5tro deer/ colocar una marca en el centro del mapa. 'l
Ejercicio 2 5tra opción para mostrar mapas es utili0ar la 1oo"le 9aps app. Para utili0ar este servicio, es tan f/cil como llamarlo de la si"uiente manera$ system.open32Qcom"oo"lemaps$%%Q-

5tra de las principales cualidades de 1oo"le 9aps es el conocido Street >iew al cual podriamos llamar de la si"uiente manera$ system.open32Qcom"oo"lemaps$%%_ centerR78.ZXWEY,& ZN.YZWEXX`0oomR7`viewsRtraffic`mapmodeRstreetviewQ- 98 -

Para ase"urarnos de que 1oo"le 9aps no va a de!arnos col"ados por cuestiones a!enas a nuestra aplicación, podemos ase"urarnos de que "oo"le maps ha funcionado, y en caso de fallo rediri"ir a Apple 9aps de la si"uiente manera$ local did5pen1oo"le9aps Rsystem.open32Qcom"oo"lemaps$%%_ daddrRSan]?rancisco, ]CA`saddrRcupertinoQif  did5pen1oo"le9aps RR false - then &&defer to Apple 9aps   system.open32Qhttp$%%maps.apple.com%_daddrRSan]?rancisco, ]CA`saddrRcupertinoQend

#mpliación 2 Pruea a modi4car las direcciones para crear tus propios recorridos y mostrarlos al pulsar un otón. 'sto suele ser muy aplicado a la hora de querer mostrar al pulico como lle"ar a ciertos eventos o o4cinas.

- 99 -

Tema 9 (ise*ando la interfa0 de usuario

Inter7aces • 9ediante podemos acceder a diferentes caracter+sticas nativas del dispositivo donde estemos e!ecutando nuestra aplicación.  • Podemos acceder con una simple l+nea de códi"o a las alertas del dispositivo, campos para creación de formulario, vistas de car"a... etc. Interfaces

#cti+it' Indicator  nati%e&"et5cti%itndicator ("tate+

• 9ediante esta función indicamos si el indicador de actividad o indicador de car"a est/ activo o no true o false respectivamente-.  • 'ste indicador no se activar/ hasta que el loque donde est6 contenida la llamada al m6todo se haya e!ecutado por completo.  • #odos #odos los eventos de toque se anulan una ve0 mostremos el indicador ya que quedar/ por encima de todos los o!etos contenidos en nuestra vista.  • Para su me!or funcionamiento, se aconse!a hacer las llamadas para mostrar%ocultar el indicador desde m6todos diferentes.

native.set6ctivit-Kndica native.set6ctivit-Kndicator7 tor7 true 8 $$ oculta el indicador despus de ) segundos timer.per9ormJit>Cela-7 )""", 9unction78 native.set6ctivit-Kndicator7 9alse 8 end, 18

- 100 -

#lertas nati%e&"ho'5lert (title, me""age >, button2abel" >,li"tener??+

• 9ediante la llamada a este m6todo mostramos una alerta, del tipo de4nido en el dispositivo, con el t+tulo y el mensa!e pasados por par/metro title title,, message-. message-.  • 9ientras se muestra la alerta, el pro"rama si"ue en e!ecución en bac1ground , pero todas las interacciones del usuario quedan loqueadas hasta que no se oculte la alerta.  • buttonLabels se buttonLabels se trata de una tala donde de4nimos cada uno de los otones que aparecer/n en la alerta. Se dee incluir al menos uno.  • 'l primer otón de4nido estar/ resaltado y ser/ tomado como el otón por defecto. • 'l m/=imo n
local 9unction on&omplete7 event 8 i9 0clicIed0 == event.action t>en local i = event.indeM i9 1 == i t>en $$ ?o >acemos nada, se cierra la alerta elsei9 ) == i t>en $$ 6brimos una \;L cuando se pulsa el segundo botn s-stem.open\;L7 0>ttp<''vivea>ora.travel0 8 end end - 101 -

end local alert alert = native.s>o@6lert7 native.s>o@6lert7 05ive 05ive 6>ora0, 06gencia de viaDes0, { 0Q[0, 0ás 0ás Kn9o0 }, on&omplete 8

nati%e&cancel5lert (alert+

• Cancelamos la alerta pasada por par/metro en este función. • Por e!emplo, podr+amos ocultar una alerta, pasado un tiempo determinado.

$uentes nati%e&ne'@ont (name >,"iAe?+

• Creamos un o!eto de tipo fuente, el cual puede ser posteriormente asi"nado a un campo de te=to nativo o a una ca!a de te=to.  • #ami6n #ami6n se puede usar como par/metro en el momento de la creación de o!etos de te=to con display.ne"4ext23. display.ne"4ext23.  • 'l par/metro name especi4ca name especi4ca el nomre de la fuente alo!ada en el dispositivo nativo. Se puede otener una lista de todas las fuentes disponiles e!ecutando el m6todo native.getFont5ames23 native.getFont5ames23..  • Aparte podemos usar constantes como native.system?ont y nati+e.s'stem$ontold.

Campo de Te(to nati%e&ne'TeBt@ield ()center, *center, 'idth, height >,li"tener?+

• Crea un campo de te=to de una sola l+nea para introducir te=to en las coordenadas espec+4cas con el tama*o indicado. • 2as propiedades que se pueden modi4car de un campo de te=to son$ • o!ect.ali"n & puede puede ser cualquier de de los valores TleftU, TcenterU o   Tri"htU. • o!ect.font & la fuente para el campo de te=to - 102 -

• o!ect.hasLack"round & es true cuando el campo de te=to tiene fondo y false si es transparente. • o!ect.si0e & el tama*o del te=to. • o!ect.te=t & cadena que contiene el te=to del campo. • 'n el par/metro listener  podemos  podemos especi4car la función para mane!ar cuando el usuario introduce te=to en el campo. • #ami6n #ami6n podemos mane!ar el campo de te=to aparte, capturando sore el o!eto el evento %user6nput&. local de9aultField local 9unction teMtListener7 teMtListener7 event 8 i9 event.p>ase == 0began0 t>en elsei9 event.p>ase == 0ended0 t>en elsei9 event.p>ase == 0ended0 or event.p>ase == 0submitted0 t>en elsei9 event.p>ase == 0editing0 t>en end end de9aultField = native.ne@TeMtField7 native.ne@TeMtField7 1#", 1#", 1V", !" 8 de9aultField
Campo de Te(to 0ultilnea nati%e&ne'TeBtCoB ()center, *center, 'idth, height+

• Creamos un campo de te=to multil+nea con scroll para mostrar te=to. • #enemos #enemos disponiles las mismas propiedades y los mismos m6todos que usamos para los campos de te=to.

He; 5opups nati%e&"ho'DebPopup nati%e&"ho'DebP opup (B, , 'idth, height, url >,option"?+

• Con este componente podemos incorporar a nuestra aplicación peque*as vistas a p/"inas we.  • (e4nimos la coordenada de nuestra vista donde se va a crear  x   y 3 y  x  y  3 y - 103 -

el tama*o que ocupar/ "idth "idth,, height  • 'n el par/metro url de4nimos la p/"ina we que vamos a car"ar en el contenedor cont enedor..

- 104 -

Ejercicios Tema 9 Ejercicio 1 Para este primer e!ercicio, el primer paso va a ser crear una aplicación como la si"uiente$ Para ello creamos un fondo lanco, colocamos una ima"en a "usto en el centro de la aplicación y un te=to a pie de pantalla para indicar la acción que dee reali0arse. 'l códi"o para esto ser+a el si"uiente$ local content;idth R display.content;idth local contentKei"ht R display.contentKei"ht local fondoRdisplay fondoRdisplay.newectcontent;idth%J,contentKei"ht%J,NE8,7E8.newectcontent;idth%J,contentKei"ht%J,NE8,7E8fondo$set?illColor,,local lo"oRdisplay lo"oRdisplay.newIma"eQima"ina.!p"Q,content;idth%J,contentKei"ht%J.newIma"eQima"ina.!p"Q,content;idth%J,contentKei"ht%Jlocal cuenta R display.new#e=tQbbbP+nchameQ,content;idth%J display.new#e=tQbbbP+nchameQ,content;idth%J , contentKei"ht%J- ] Y8,nil,JWcuenta$set?illColor8,8,8-

3na ve0 ten"amos esto hecho pasaremos a asociarle a la ima"en un m6todo mane!ador del evento TtouchU como hemos aprendido en temas anteriores y a dicha acción le diremos que e!ecute una Alerta. Alerta. uedar+a de la si"uiente forma$ local function pulsar2o"oeventnative.showAlertQAlertaQ,Quieres que te rediri!amos a la we_Q, QSiQ,QoQV,yesPressedend lo"o$add'vent2istener QtouchQ, pulsar2o"o-

Como podemos ver, ver, solo hemos dado opción para par a dos otones . 'l otón ToU , no har/ nada, y el de TS+U arir/ una p/"ina we en nuestro nave"ador predeterminado. 'l m6todo listenerAlert deer/ controlar que otón ha sido pulsado y actuar en consecuencia.

- 105 -

local function yesPressedeventifQclickedQRRevent.action- then local i R event.inde= if i RR J- then &¬hin" elseif i RR - then system.open32 Qhttp$%%www.ima"inaformacion.comQ end end end

 A continuación, para a*adir refor0ar los conocimientos aprendidos, vamos a utili0ar un Activity Indicator para crear un tiempo de espera. Para saer cuanto falta, utili0aremos el te=to ya creado anteriormente donde indicaa p+nchame para e=presar en se"undos el tiempo restante para poder interactuar. 'l códi"o ser+a el si"uiente$ local car"ando R display display.new# .new#e=tQCar"ando...Q,YW,88,nil,JWe=tQCar"ando...Q,YW,88,nil,JWcar"ando$set?illColor8,8,8- native.setActivityIndicatortruetimer.perform;ith(elay888,functioncuenta.te=tRQ...JBQ endtimer.perform;ith(elayJ888,functioncuenta.te=tRQ...BQ endtimer.perform;ith(elayN888,functionnative.setActivityIndicatorfalsecar"ando.te=tRQQ cuenta.te=tRQbbbPinchameQ end-

#mpliación 1  A*ade un campo de te=to dea!o de la ima"en donde coloques la dirección a car"ar por el Popup, en caso de no haer escrito nin"
- 106 -

#mpliación 2 Crea una nueva aplicación con un campo de te=to multil+nea y un otón imprimir por consola. 'l funcionamiento de la aplicación ser/ el si"uiente. Al Al pulsar el otón imprimir se deer/ comproar que el campo de te=to, ten"a te=to. 'n caso de no tener, tener, se emitir/ una alerta avisando al usuario. 'n caso de tener te=to deer/s imprimir el te=to del campo por consola.

- 107 -

Tema 1'ntrada y Salida

$icAeros • #odos #odos los documentos relacionados con la aplicación se encuentran "uardados en directorios internos de la propia aplicación a los cuales no se puede acceder desde otras aplicaciones. • 'n determinados directorios de la aplicación, tenemos permisos de lectura y escritura, por lo que podemos almacenar y recuperar datos de estos 4cheros se", ba"e6irector?+

• os devuelve la ruta del 4chero especi4cado como primer par/metros. • Podemos de4nir en el se"undo par/metro a partir de qu6 directorio ase se crear/ la ruta solicitada.

• Por lo "eneral, los 4cheros deen estar almacenados en al"uno de estos N directorios$ • s'stem.DocumentsDirector' & directorio usado para aquellos 4cheros que dean permanecer almacenados entre las diferentes e!ecuciones de la aplicación. • s'stem.Temporar'Director' & los 4cheros almacenados en este directorio no ase"uran se"uir "uardados en si"uientes e!ecuciones de la aplicación. • s  s'stem.FesourceDi 'stem.FesourceDirector' rector' & es el directorio donde se encuentran todos los 4cheros relacionados con la aplicación im/"enes, sonidos...-. - 108 -

• Para la lectura de cAeros utili0aremos la lirer+a io provista por 2ua. • 'sta lirer+a nos permite arir 4cheros especi4c/ndole la ruta en la que se encuentran. • '!emplo para leer un 4chero situado en nuestro directorio de documentos.

local pat> = s-stem.pat>ForFile7 0data.tMt0 0data.tMt0,, s-stem.CocumentsCirector- 8 local 9ile local  9ile = io.open = io.open77 pat>, 0r0 0r0 8  8 i9  9ile  9ile t>en -- nil if no file found  local contents local  contents = 9ile .. 0]n0 0]n0 ..  .. contents 8 io.close77 9ile 8 io.close end

• Ase"uraos de colocar el 4chero de te=to en el directorio correcto. • 'n el e!emplo anterior hemos otenido la ruta del 4chero el cual vamos a leer, leer, especi4cando el nomre del 4chero y el directorio ase donde poder encontrarlo. • 9ediante la función io.open procedemos a arir el 4chero para su lectura. • 'sta función, aparte de reciir la ruta con el 4chero, podemos indicarle el modo de apertura de ese 4chero. 2as opciones son$ “r” $ modo lectura. s el de9inido por de9ecto “@” $ modo escritura. “a” $ escribe, pero a/adiendo el contenido al -a eMistente en el 9ic>ero. “rE” $ modo actuali2acin. Todos los datos anteriores se guardan “@E” $ modo actuali2acin. Todos los datos anteriores son borrados “aE” $ modo actuali2acin. Todos los datos anteriores se guardan - slo se puede escribir al 9inal del 9ic>ero.

• '!emplo para escriir en un 4chero situado en nuestro directorio de documentos.

- 109 -

local pat> = s-stem.pat>ForFile7 0data.tMt0 0data.tMt0,, s-stem.CocumentsCirector- 8 -- io.open opens a file at path. returns nil if no file found  local 9ile = io.open7 pat>, 0r0 pat>, 0r0 8  8 i9 9ile t>en -- read all contents of file into a string local contents local  contents = 9ile .. 0]n0 0]n0 ..  .. contents 8 io.close77 9ile 8 io.close else -- create file b/c it doesn't exist yet  9ile = io.open7 pat>, 0@0 0@0 8  8 local numbers = {1,),!,4,#,H,%,V,N} 9ile<@rite7 0S6limntame con datos ]n0,, numbers*1+, numbers*)+, 0]n0 ]n0 0]n0 8  8 9or Z,v 9or  Z,v in ipairs7 numbers 8 do 8  do 9ile<@rite7 v, 0 0 8 0 8 end 9ile<@rite7 0]nS?o Buedan datos ]n0 8 ]n0  8 io.close7 9ile 8 end

• 'n el e!emplo anterior hemos se"uido los mismos pasos que para leer de 4chero, solo que esta ve0 v e0 hemos utili0ado el m6todo write. • Con el m6todo system.path?or?ile seleccionamos el directorio donde se crear/ o modi4car/ nuestro 4chero. • 's muy importante no crear c rear,, modi4car o escriir 4cheros en el directorio esource(irectory pues cuando la aplicación se lan0a se compruea la inte"ridad de la aplicación. 'n caso de fallo de inte"ridad tu app no se lan0ar/ a e!ecución y ser/ detectado detect ado como malware. • Para escriir un salto de linea se utili0ar/ el car/cter especial TnU 5peraciones de manipulación impl+citas$ • io.closeG4leH- equivalente a 4le$close -, si no especi4camos un 4chero cerrar/ el 4chero de salida por defecto - 110 -

• io.ush - equivalente a 4le$ush, liera los uses de escritura en un 4chero • io.inputG4leH- llamado con el nomre de un 4chero, are dicho 4chero en modo te=to y lo lo asocia al mane!ador por defecto, llamado llamado con el mane!ador  de 4chero simplemente simplemente asocia dicho mane!ador al de4nido de4nido por defecto. 'n caso de error esta función propa"a el error en ve0 de devolver un códi"o de   error. • io.linesG4lenameH- are el 4chero en modo lectura y devuelve un iterador  con el cual podremos recorrer todas las lineas de dicho 4chero. A continuación un e!emplo$ 9or line 9or  line in  in io.lines79ilename8 io.lines79ilename8 do do bod bod- end

• io.open4lename G, modeH- e=plicado anteriormente. • io.outputG4leH- similar a io.input pero opera sore la salida. • io.popenpro" G,modeH- e!ecuta el pro"rama pro" en un proceso separado y devuelve un mane!ador mane!ador para leer o escriir los datos de de dicho pro"rama. 'sta función es dependiente dependiente del sistema por lo que no esta disponile en todas las plataformas. • io.read...- equivalente a io.input -$read • io.tmp4le - devuelve un mane!ador para un 4chero temporal que es aierto en modo modi4car. modi4ca r. • io.typeo!- compruea si el o!eto es un mane!ador valido. (evuelve el strin" T4leU si es un mane!ador aierto aierto , Tclosed 4leU si est/ cerrado y TnilU si no lo es. • io.write...- equivalente a io.output -$write.

5peraciones de manipulación e=pl+cita$ • 4le$close - cierra los 4cheros. • 4le$ush - liera los uses de escritura en un 4chero • 4le$lines - are el 4chero en modo lectura y devuelve un iterador con el cual podremos recorrer todas las lineas de dicho 4chero. • 4le$read...- lee del 4chero de acuerdo a los formatos$ • n lee un n
• 4le$seekGwhenceH G, o^setH- modi4ca y otiene la posicion del 4chero mediante el strin" whence y el despla0amiento o^set, siendo los posiles valores de whence$ • set inicio del 4chero • cur posicion actual • end 4nal del 4chero

• 4le$setvufmode G, si0eH- modi4ca el modo de u^erin" para un 4chero de salida. Kay tres modos de u^erin"$ • no $ sin u^erin", el resultado de cualquier operación de salida se e!ecuta inmediatamente. • full $ u^erin" completo, el u^er se descar"a cuando se llena o cuando se le pide mediante ush. • line $ u^erin" por lineas, el u^er se descar"a despu6s de la entrada de una nueva linea. • 4le$write...- escrie el valor de sus ar"umentos en el 4chero. 2os ar"umentos deen deen ser strin"s o n
VSQP • 2as funciones de mane!o de datos mediante gS5 est/n inte"radas en Corona • ecuerda que para utili0ar una lireria inte"rada en corona solo hace falta utili0ar require T!sonU y almacenar su valor v alor en una variale local. • gS5 es muy similar a una estructura de talas de 2ua. 3n e!emplo a continuación$ { 0name0< 0^acI 7]03ee]08 ?imble0, ?imble0, 09ormat0< { 0s>ape0< 0rect”,, 0rect” 0@idt>0< 1N)" 1N)",, 0>eig>t0< 1"V" 1"V",, 0inter9ace0< 9alse, 9alse, 09ramerate0< )4 } } - 112 -

• Si tu gS5 esta almacenado en un 4chero .!son que tienes en tu directorio, deer/s leer dicho 4chero y almacenarlo en una variale, para ello te aconse!amos que utilices una función como la que te mostraremos a continuación$

$$ DsonFile78 loads Dson Rle X returns contents as a string local DsonFile = unction7 Rlename, base 8 $$ set de9ault base dir i9 none speciRed i not base then base = s-stem.;esourceCirector-_ end $$ create a Rle pat> 9or corona i'o local pat> = s-stem.pat>ForFile7 Rlename, base 8 $$ @ill >old contents o9 Rle local contents $$ io.open opens a Rle at pat>. returns nil i9 no Rle 9ound local Rle = io.open io.open77 pat>, 0r0 8 i  Rle  Rle then $$ read all contents o9 Rle into a string  contents = Rlee 9ile a9ter using it io.close end return contents end

• Si tu gS5 esta almacenado en un strin", necesitas decodi4carlo, que es otra manera de decir, transformar6 mi gS5 en una tala 2ua. • Para ello utili0aremos una función llamada decode • 3tili0ando la función anterior podemos decodi4car el valor de un archivo gS5 a una tala 2ua con el si"uiente códi"o$ local Dson = reBuire 0Dson0

- 113 -

local t = Dson.decode7 DsonFile7 0sample.Dson0 8 8

• Si tienes una tala 2ua y quieres transformarla en gS5 solo tienes que utili0ar la función inversa de decode, es decir, encode. A continuación un e!emplo$ local DsonAtring = Dson.encode7 m-LuaTable 8

• 'n caso de necesitar otener los gS5 de un ordenador remoto o un servicio we, el proceso ser/ el mismo que el e=plicado, solo que oviamente har/ que descar"arlos primero.

ase de datos • Corona incluye soporte en todas las plataformas para ases de datos S2ite. • 2a API que provee las funciones para utili0ar ases de datos S2ite estan disponiles en luafor"e.net%pro!ects%luasqlite% as+ como la documentación se puede leer en luasqlite.luafor"e.net%lsqliteN.html. • ecuerda que al proveer el directorio a la funcion open - te ase"ures de utili0ar system.path?or?ile -. Si intentas arir directamente con el nomre de la ase de datos, por e!emplo TaseDdeDdatos.dU no funcionar/ correctamente. • A continuación os mostraremos un e!emplo de como arir una ase de datos "uardada en memoria, crear una nueva tala, a*adir datos y 4nalmente mostrar dichos datos en pantalla. reBuire 0sBlite!0 local db local  db = sBlite!.openZmemor-78 db
local t = displa-.ne@[email protected], local t displa-.ne@[email protected], 1#" 1#",, 1)" 1)" W  W [email protected], null, 1H 1H88 t
• A continuación os mostraremos un e!emplo de como arir una ase de datos "uardada en 4chero y comproar si una tala e=iste antes de crearla. Importante acordarse de cerrar la cone=ión con la ase de datos al salir 

--Include sqlite require "sqlite3"  --Open data.db. If the file doesn't exist exist it will be created  created  local  path  path = syste.path!or!ile "data.db"  "data.db"   # syste.$ocuents$ire syste.$ocuents$irectory% ctory% db = sqlite3.openpath% sqlite3.openpath% local function local  function on&yste(e on&yste(ente(en nte(ent% t% if e(ent.type e(ent.type == "applicationxit"   % then  % then db)close% db)close % end  end --&etup the table if it doesn't exist  local tablesetup = **+, 0 I! 1O 2I&& test id I1, 4,I5,6 76# content# content8%9::  print tablesetup% tablesetup% db)exec tablesetup % --dd rows with a auto index in 'id'. 6ou don't need to specify a set of (alues because we're  populating all of of the local test(alue = ;< test(alue*  : = '>ello'  test(alue* 8 : = '?orld'  '?orld'  local  tablefill  tablefill =**I1&, = **I1&, I1O test @0A& 1A00# ':: ..test(alue*:.. **'#':: **'#'::..test(alue*8:.. ..test(alue*8:.. **'%9 :: local  tablefill8  tablefill8 =**I1&, =**I1&, I1O test @0A& 1A00# ':: ..test(alue*8:.. **'#':: **'#'::..test(alue*:.. ..test(alue*:.. **'%9 :: db)exec tablefill % db)exec tablefill8 % --setup the syste listener to catch applicationxit  ,untie)add(ent0istener "syste"  # on&yste(en on&yste(entt %

- 115 -

Ejercicios Tema 1Ejercicio 1 >amos a practicar lo aprendido en entrada%salida de 4cheros. Para ello haremos e!ercicios utili0ando la lirer+a io. Primero vamos a crear un 4chero en el que escriir. Para ello deemos de crear un path en el cual le indicaremos el nomre del 4chero de la si"uiente manera$ local path R system.path?or?ileQmi?ichero.t=tQ, system.(ocuments(irectory-

2ue"o vamos a escriir al"o en dicho 4chero$ local 4le R io.open path, QwQ 4le$write Q'ste es mi primer 4chero.nQio.close 4le -

Si ahora compro/is el 4chero ver6is que contiene lo que le hemos puesto.  A continuación vamos a a*adir m/s te=to al 4chero$ 4le R io.open path, QaQ 4le$write QSi"o escriiendo en mi 4chero, cómo me "usta mi 4chero.nQio.close4le-

 por
u6 pasar+a si en ve0 de usar el modo TaU usara el TwU la se"unda ve0 que escriimos_gue"a con los modos de acceso y compruea todas las posiilidades.

- 116 -

#mpliación 1 Si solo quisiera leer las lineas pares hasta el 4nal del te=to, cómo podr+a conse"uirlo_ Implem6ntalo. Pista$ utili0a la funciones line para recorrer el contenido.

Ejercicio 2 'n este e!ercicio vamos a crear una tala 2ua y a partir de ella vamos a otener un archivo gS5. Para ello lo primero es crear nuestra tala , por e!emplo esta $ local tala#raa!ador tala#raa!adoresR esR nomreRQPacoQ,puestoRQ2impiadorQ,salarioRQW88QV, nomreRQ?ulanoQ,puestoRQAdministrativoQ,salarioRQE88QV, nomreRQPericoQ,puestoRQInform/ticoQ,salarioRQW888QV, nomreRQ9en"anoQ,puestoRQgefe de ventasQ,salarioRQW88QVV

 Ahora deeremos transformar nuestra tala lua a un valor gS5 , y para ello utili0amos la función encode que nos proporciona Corona. local !son R require Q!sonQ local !sonStrin" R !son.encodetala#raa!a !son.encodetala#raa!adoresdores-

Por
#mpliacion 2  Ahora que ya saemos crear 4cheros .!son a partir de talas lua vamos a - 117 -

hacer el paso contrario. 3tili0ando un .!son cualquiera, el que ha6is creado antes o cualquiera que descar"u6is de Internet, decodi4carlo a una tala lua y lue"o mostrarlo por consola.

Ejercicio 3 'n este e!ercicio vamos a crear una ase de datos y a insertar unas 4las. Para ello primero creamos la ase de datos y la tala en caso de no e=istir. require QsqliteNQ local path R system.path?or?ileQmiLase(e(atos.dQ, system.(ocuments(irectoryd R sqliteN.open path local function onSystem'vent event if event.type RR Qapplication'=itQ - then d$closeend end local talesetup R GGC'A#' #AL2' #AL2' I? 5# ':IS#S tala#raa!adores id I#'1' PI9A )', )', nomre, puesto, salario-HH printtalesetupd$e=ec talesetup -

 Ahora introduciremos en la ase de datos unas 4las$ local paco RGGIS'# I#5 tala#raa!adores >A23'S >A23'S 322, QPacoQ, Q2impiadorQ,Q788Q -HH local manolo RGGIS'# RGG IS'# I#5 tala#raa!adores >A23'S >A23'S 322, Q9anoloQ, QLecarioQ,Q2as "raciasQ -HH d$e=ec paco d$e=ec manolo -

Por
#mpliación 3 'n la si"uiente ampliación deer6is eliminar solo a uno de los traa!adores y editar el otro traa!ador modi4cando su puesto y su salario. 9ostrar el contenido de la ase de datos para comproar que las instrucciones sore la ase de datos se han e!ecutado correctamente.

- 119 -

Tema 11 Composer y ;id"et

Composer  • 2a API de Composer es una herramienta muy potente y e=ile. • 2a estructura de los Composer se asa en crear varias 'scenas y encadenarlas mediante funciones para lo"rar la estructura estruct ura nave"acional deseada. • Por defecto, las escenas de nuestro Composer no se eliminan cuando hay una transición de escena. Sin emar"o, "racias a las lirer+as ofrecidas por Corona podemos eliminar las escenas en cada uno de los camios. Composer  • Para ase"urarnos de que cada escena es eliminada en su transición, en el archivo principal, principal, main.lua main.lua ele"iremos la opción opción rec'cleQnSceneCAane a true. • Para camiar de una escena a otra hay que utili0ar el m6todo Composer."otoScene Composer."otoScene • ecordar que para utili0ar la lirer+a Composer hay que iniciali0arla local composer = reBuire 0composer0 composer.rec-cleQnAcene&>ange = true

• ecesitaremos un 4chero .lua para cada una de las escenas a mostrar. • Para crear la nueva escena deeremos importar la lirer+a composer como hemos comentado anteriormente y crear crear la escena con el m6todo composer.newScene composer.newScene • Cada escena deer/ implementar los m6todos controladores de eventos para poder via!ar entre escenas correctamente.

- 120 -

local composer = reBuire 0composer0 local scene = composer.ne@Acene78 $$ setup 9unction< 9unction sceneen scene is unloaded.0 8 end scene
• 2os diferentes eventos que se producen en las transiciones de escenas son los si"uientes • create $  create $ cuando la escena aun no e=iste • sho"  $  $ al entrar la escena en pantalla, tiene dos fases$ • "ill  $  $ cuando va a entrar  • did  $  $ al entrar  • hide $ hide $ al salir la escena de la pantalla, tiene dos fases$ • "ill  $  $ cuando va a salir  • did  $  $ al salir  • destroy $ al destruir la pantalla • overlayBegan $ overlayBegan $ cuando se llama a la escena mediante el metodo composer.show5verlay composer.show5verlay • overlayEnded  $  $ cuando se esconde la pantalla mediante el metodo composer.hide5verlay composer.hide5verlay -

• 2as funciones /sicas para moverse entre escenas ser+an las si"uientes • composer.otoScene< composer.otoScene< scenePame ?% options@ = la cual nos traslada a la escena cuyo nomre coincida con las opciones de transición ele"idas - 121 -

• 2as posiles transiciones pueden ser las si"uientes$ •fade •0oom5utIn •0oom5utIn?ade •0oomIn5ut •0oomIn5ut?ade •?lip •?lip?ade5utIn •0oom5utInotate •0oom5utIn?adeotate •0oomIn5utotate •0oomIn5ut?adeotate •fromi"ht over ori"inal scene•from2eft over ori"inal scene•from#op over ori"inal scene•fromLottom over ori"inal scene•slide2eft pushes ori"inal scene•slidei"ht pushes ori"inal scene•slide(own pushes ori"inal scene•slide3p pushes ori"inal scene•cross?ade

• 5tras funciones /sicas son$ • composer.et5re+ious< = devuelve el nomre de la anterior escena

composer.etScene< scenePame = devuelve la escena cuyo nomre • composer.etScene< coincida con el parametro sceneame • composer.etCurrentScenePame< composer.etCurrentScenePame< = devuelve el nomre de la escena   actual

- 122 -

Hidet • 2os wid"ets son elementos interactivos incluidos dentro de la lirer+a ;id"et • Son elementos muy
• 2os primeros wid"ets a mostrar ser/n el on%o^ Switch, adio Lutton y CheckLo=, los cuales son especiali0aciones del wid"et "en6rico switch ;id"et

• Como siempre recordar que para utili0ar una lireria primero hay que importarla • 'l códi"o para implementar el controlador de un switch ser+a el si"uiente local function onSwitchPress( event  local switch ! event"target  local res#onse ! switch"id""$ is on: $""tostring( switch"is%n  #rint( res#onse  end

- 123 -

• Para crear un Checko= ser+a el si"uiente$ local c>ecIboM = @idget.ne@A@itc> { le9t = H", top = )!", st-le = 0c>ecIboM0, id = 0- c>ecIboM @idget0, initialA@itc>Atate = 9alse, on(ress = onA@itc>(ress } $$TeMt to s>o@ t>e on'o99 s@itc> state c>ecIboM.teMt = displa-.ne@TeMt7 tostring7 c>ecIboM.isQn 8, ", ", native.s-stemFont3old, 1V 8 c>ecIboM.teMt.M = c>ecIboM.M c>ecIboM.teMt.- = c>ecIboM.- $ c>ecIboM.teMt.contentOeig>t

• Para crear un adio utton ser+a el si"uiente$ local radio3utton = @idget.ne@A@itc> { le9t = 1#", top = )!", st-le = 0radio0, id = 0- radio button @idget0, initialA@itc>Atate = 9alse, on(ress = onA@itc>(ress } $$TeMt to s>o@ t>e on'o99 s@itc> state radio3utton.teMt = displa-.ne@TeMt7 tostring7 radio3utton.isQn 8, ", ", native.s-stemFont3old, 1V 8 radio3utton.teMt.M = radio3utton.M radio3utton.teMt.- = radio3utton.- $ radio3utton.teMt.contentOeig>t

- 124 -

• Para crear un 5n%5^ Switch ser+a el si"uiente$ local onQ99A@itc> = @idget.ne@A@itc> { le9t = )#", top = )!", id = 0- on'o99 s@itc> @idget0, initialA@itc>Atate = true, on;elease = onA@itc>(ress }

• Para controlar manualmente cualquier switch utili0aremos el m6todo setState s@itc>
• 5tro wid"et astante recurrente es el utton • (eeremos crear un mane!ador de los eventos para el otón como el que veremos a continuación local 9unction on3uttonvent7 event 8 local p>ase = event.p>ase local target = event.target i9 7 0began0 == p>ase 8 t>en print7 target.id .. 0 pressed0 8 targetase 8 t>en print7 target.id .. 0 released0 8 targete label end return true end

- 125 -

• 2a implementación del otón quedar+a de la si"uiente manera local m-3utton = @idget.ne@3utton { le9t = 1", top = V", label = 0Ce9ault0, 0Ce9ault0, label6lign = 0center0, 9ont = 06rial0, 9ontAi2e = 1V, label&olor = { de9ault = {1"",1"",1""}, over = {)##,)##,)##}}, onvent = on3uttonvent } m-3utton.baseLabel = 0Ce9ault0

• 'l ta ar es otro elemento muy com
• 2a implementación de los diferentes otones del ta ar ser+a as+ local tab3uttons = { { id = 0Tab10, label = 0Tab10, label&olor = { de9ault = {",","}, over = {1,1,1} }, on(ress = on(ress, selected = 9alse }, { id = 0Tab)0, label = 0Tab)0, label&olor = { de9ault = {",","}, over = {1,1,1} }, on(ress = on(ress, selected = true }, $$more tabs can 9ollo@ } - 126 -

• Para colocar el ta ar en pantalla, podemos utili0ar el si"uiente códi"o local tab3ar = @idget.ne@Tab3ar { le9t = #", top = 1#", @idt> = )4", >eig>t = H", buttons = tab3uttons }

• Para seleccionar que ta dee estar seleccionado tenemos la función MsetSelectediew, >iew, pero hay ha y muchos m/s wid"ets que os animamos a se"uir estudiando est udiando en las APIs de Corona

• 'l wid"et #ale >iew visualmente ser+a como podemos oservar en la ima"en de la i0quierda. 3na tala con diferentes 4las , las cuales podemos seleccionar y pinchar. pinchar.

- 127 -

• Para utili0ar un #ale #ale >iew necesitaremos crear un mane!ador tanto de la tala como de las 4las local widget ! re&uire( $widget$  '' isten for ta)leView events local function ta)leViewistener( event   local #hase ! event"#hase  local row ! event"target   #rint( event"#hase  end '' *andle row rendering local function on+ow+ender( event  local #hase ! event"#hase local row ! event"row local rowTitle ! dis#la,"newTe-t( row. $+ow $ "" row"inde-. /. /. nil. 01  rowTitle"- ! 02/ rowTitle", ! 03 rowTitle:setTe-t4olor( /. /. /  end '' *andle touches on the row local function on+owTouch( event  local #hase ! event"#hase if $#ress$ !! #hase then #rint( $Touched row:$. event"target"inde-  end end

- 128 -

• A la hora de crear la tala, primero deeremos crear la tala t ala como tal, y lue"o a*adiremos las 4las a dicha tala. $$ &reate a table5ie@ local table5ie@ = @idget.ne@Table5ie@ { top = 1"", @idt> = !)", >eig>t = !HH, masIFile = 0assets'masI$!)"M!HH.png0, 0assets'masI$!)"M!HH.png0, listener = table5ie@Listener, on;o@;ender = on;o@;ender, on;o@Touc> on;o@Touc> = on;o@T on ;o@Touc>, ouc>, } $$ &reate 1"" ro@s 9or i = 1, 1"" do local is&ategor- = 9alse local ro@Oeig>t = 4" local ro@&olor = { de9ault = { 1, 1, 1 }, } local line&olor = { ","," } $$ aIe some ro@s categories i9 i == )# or i == #" or i == %# t>en is&ategor- = true ro@Oeig>t = )4 ro@&olor = { de9ault = { ".#N, ".H!, ".%1, 1 }, } end $$ Knsert t>e ro@ into t>e table5ie@ table5ie@t = ro@Oeig>t, ro@&olor = ro@&olor, line&olor = line&olor, } end

- 129 -

Ejercicios Tema 11 Ejercicio 1 'n este e!ercicio vamos a crear una aplicación mediante storyoards que deer/ tener un aspecto similar al si"uiente. Para ello utili0aremos adem/s de los storyoards un ta ar con las im/"enes que ad!untamos en el campus. Primero crearemos el main.lua indicando que utili0aremos storyoads y wid"ets. local stor,)oard ! re&uire $stor,)oard$ local widget ! re&uire $widget$ stor,)oard"#urge%nScene4hange stor,)oard "#urge%nScene4hange ! true stor,)oard"gotoScene( stor,)oard "gotoScene( $scene0$. $fade$. 1// 

 Ahora crearemos el ta ar !usto despu6s de indicar el camio de escena, todo lo que vaya despu6s de un camio de escena se quedar/ en e!ecución y no variar/ por dicho camio.

$$ lo Bue pongamos por debaDo de la transicin no será a9ectado a9ectado por ella local tab3uttons = { { @idt> = !), >eig>t = !), de9aultFile de9aultFi le = 0icon1.png0, overFile = [email protected] [email protected], 0,

label = 03otn 10, selected = true, - 130 -

}, { @idt> = !), >eig>t = !), de9aultFile de9aultFi le = 0icon).png0, overFile = 0icon)[email protected] 0icon)[email protected], 0,

label = 03otn )0, }, } $$ una ve2 creados los botones, creamos el tab3ar - asociamos los botones local tab3ar = @idget.ne@Tab3ar { top = displa-.contentOeig>t $ #", @idt> = displa-.contentJidt>, bacIgroundFile = 0tabbar.png0, tabAelectedLe9tFile tabAelectedL e9tFile = 0tab3arZta 0tab3arZtabAelectedLe bAelectedLe9t.png0, 9t.png0, tabAelectediddleFile tabAelected iddleFile = 0tab3ar 0tab3arZtabAelectedi ZtabAelectediddle.png0, ddle.png0, tabAelected;ig>tFile tabAelected; ig>tFile = 0tab3arZt 0tab3arZtabAelected;ig abAelected;ig>t.png0, >t.png0, tabAelectedFrameJidt> tabAelectedFr ameJidt> = )", tabAelectedFrameOeig>t tabAelectedFr ameOeig>t = #), buttons = tab3uttons }

 Ahora que hemos creado el main, deeremos crear tantos 4cheros como escenas queramos en nuestra aplicación. Para nuestro caso crearemos N escenas las cuales camiar/n al pinchar en la ima"en. Solo mostraremos el códi"o de una de ellas, pues visto el funcionamiento de una escena, vistas las dem/s. local composer = reBuire7 0stor-board0 8 composer.rec-cleQnAcene&>ange = true local scene = composer.ne@Acene78 local image, 9ondo

Creamos el evento controlador de la ima"en, para que al pinchar en ella vayamos a la escena J local 9unction onAceneTouc>7 sel9, event 8 i9 event.p>ase == 0began0 t>en composer.gotoAcene7 0scene) 0scene)0, 0, 0slideLe9t 0slideLe9t0, 0, V"" 8

- 131 -

return true end end

 Ahora a*adimos los controladores para mane!ar los eventos producidos por los camios de escenas 9unction scene = onAceneTouc>

scrreen sc eenr rou oup< p
teMt1 = displa-.ne@TeMt7 0(ulsa en la imagen para continuar0, )", )", native.s-stemFont3old, 1) 8 teMt1 W ".#, #" screenroupo@7 event 8 print7 01< enterAcene event0 8 image0, image 8 end 9unction scene
Por ultimo indicamos que controladores estan asociados a los eventos producidos sceneo@0, scene 8 scene
- 132 -

#mpliación 1 'n esta ampliación deer6is a*adir el resto de controladores para los eventos lan0ados por los camios de escena, y sacar por consola el estado en el que se encuentra en cada momento, para as+ comprender me!or cuando se producen estos eventos. Pruea tami6n a modi4car las diferentes transiciones entre estados.

Ejercicio 2 'n este e!ercicio vamos a crear una interfa0 como la si"uiente$ 3tili0ando la lirer+a wid"et podemos crear componentes visuales de forma muy r/pida y sencilla con un uen acaado visual.  Al pinchar en los diferentes otones camiaremos el color de fondo de nuestra aplicación al color que indica la lael de cada otón.

Para crear un wid"et lo primero siempre es importar la lirer+a como vemos en el códi"o. local wid"et R require Qwid"etQ

3na ve0 importada la lirer+a crearemos el fondo lanco de nuestra aplicación. local 9ondo = displa-.ne@;ect7",",!)",4V"8

 para a*adir cada uno de los otones necesitaremos el controlador del otón

- 133 -

local 9unction on3utton on3uttonvent62ul7 vent62ul7 event 8 local p>ase = event.p>as event.p>ase e local target = event.target i9 7 0began0 == p>ase 8 t>en print7 target.id .. 0 pressed0 8 targetase 8 t>en print7 target.id .. 0 released0 8 targete label 9ondo
3na ve0 creado el controlador podemos declarar el otón como vemos a continuación. local m-3utton = @idget.ne@3utton { le9t = %", top = V", label = 062ul0, label6lign = 0center0, 9ont = 06rial0, 9ontAi2e = 1V, label&olor = { de9ault = {",","}, over = {",",)##} }, onvent = on3uttonvent62ul }

Crea el resto de otones y compruea su funcionalidad. gue"a con las propiedades que ofrecen los wid"ets y pruea diferentes cominaciones.

#mpliación 2 Crea en una nueva aplicación un adio Lutton, Lutt on, un Check Lo= y un 5n%5ff Switch y a*/deles la funcionalidad que veas oportuno.

- 134 -

Tema 12 9otor ?+sico & Parte J

0otor $sico  5arte 2 • 'n este tema, vamos a entrar en detalles m/s comple!os sore el motor f+sico de corona  • a a hemos visto como construir cuerpos sencillos y detectar sus colisiones, siendo capaces de tratarlas adecuadamente, pero Corona nos permite la construcción de cuerpos mas comple!os utili0ando varios cuerpos simples.  • Al crear un cuerpo comple!o a partir de cuerpos sencillos podemos de4nir caracter+sticas distintas para cada parte. Por e!emplo si construy6ramos un l/pi0, la "oma seria un cuerpo distinto con un reote mayor que el resto del cuerpo.  • Adem/s puesto que cualquier forma simple dee ser cóncava, cualquier forma conve=a deer/ formarse con m-sics.add3od-7displa-QbDect, bDect, *bod-T-pe, *bod-T-pe, + , bod-lement1, bod-lement1, bod-lement),...8 bod-lement),...8  • p>-sics.add3od-7displa-Q

 • Cada ody element tendr/ sus propias propiedades, !unto con su forma de4nida para detectar las colisiones. local p>-sics = reBuire local p>-sics reBuire 7  70p>-sics0 0p>-sics088 p>-sics.start78 local car = [email protected] local car displa-.ne@Kmage7 0bigZredZcar.png088 roo9A>ape = { $)" $)",,$1" $1",, )" )",,$1" $1",, )" )",,1" 1",, $)" $)",,1" 1" }  } >oodA>ape = { ",$!# $!#,, !% !%,,!" !",, $!%  $!%,,!" !" }  } trunIA>ape = { ",$!% $!%,, !% !%,,$1" $1",, )! )!,,!4 !4,, $)!  $)!,,!4 !4,, $!% $!%,,$1" $1" }  } p>-sics.add3od-7 car, 0d-namic0 0d-namic0,, { densit-= !." !.",, 9riction=".# 9riction=".#,, bounce=".) bounce=".),, s>ape=roo9A>ape }, { densit-= H." H.",, 9riction=".H 9riction=".H,, bounce=".4 bounce=".4,, s>ape=>oodA>ape }, { densit-= 4." 4.",, 9riction=".# 9riction=".#,, bounce=".4 bounce=".4,, s>ape=trunIA>ape } 8

- 135 -

• 3n sensor es un cuerpo simple o comple!o que produce colisiones pero no interact-sics.add3od-7 p>-sics.add3od-7 rect, { isAensor = true true }  } 8

• 2os cuerpos pueden ser eliminados como cualquier otro o!eto de display m-3od-
• #ienen #ienen una lista de propiedades que pueden ser modi4cadas • body.is0"a1e indica body.is0"a1e indica si esta despierto y en simulación • body.isBody0ctive indica body.isBody0ctive  indica si estan activos, la diferencia entre despierto y activo, activo, es que un cuerpo dormido se despierta despierta por una interacción interacción pero uno inactivo no interacciona con nada • body.isBullet  si  si es una TalaU se tratar/ como tal y se detectar/n colisiones de forma forma continua evitando que que por la velocidad del o!eto o!eto eviten al"una colisión. • body.isSensor  indica  indica si el o!eto es un sensor  • body.isSleeping0llo"ed  body.isSleeping0llo"ed  indica  indica si tiene permitido entrar en estado dormido, no suele ser necesario pues el estado despierto despierto dormido dormido camia deido a las interacciones con otros o!etos • body.isFixedRotation indica body.isFixedRotation  indica si es capa0 de "irar sore si mismo o verse afectado por este tipo de fuer0as

- 136 -

• body.angular7elocity  indica  indica con un valor num6rico su velocidad   an"ular 

• body.linear!amping  indica  indica con un valor num6rico su valor de amorti"uamiento lineal • body.angular!amping  indica  indica con un valor num6rico su valor de amorti"uamiento an"ular  • body.body4  b ody.body4ype ype indica  indica con un strin" el tipo de cuerpo que simula. • %static&  no  no se mueve ni es afectado por el resto de elementos • %dynamic&  es  es afectado por la "ravedad y las colisiones • %1inematic&  son  son como los est/ticos pero pueden ser movidos por  fuer0as diferentes de la "ravedad. 2os o!etos que se pueden pueden arrastrar, suelen ser TkinematicU al menos durante el tiempo en el que se e!ecute el arrastre

• Al"unos m6todos muy
• Cuando hay colisiones "loales con o!etos comple!os se devuelven valores adicionales enteros indicando cual es el elemento simple que ha reciido la colisión

- 137 -

event.element1 event.element)

• Cuando la colisión es local se crean dos campos adicionales event.sel9lement event.ot>erlement

• 2os !oints o articulaciones son o!etos que sirven como unión para o!etos comple!os a partir de cuerpos r+"idos. Por e!emplo, con !oints se podr+an crear cadenas o marionetas.  • Kay varios tipos t ipos /sicos de !oints, los mas sencillos son los pi+ot joint con los cuales puedes unir dos o!etos en un mismo punto de unión. un e!emplo ser+a una cadena.  • 2os distance joint los cuales unen dos cuerpos mediante una distancia 4!a.  • 2os piston joint  une dos cuerpos mediante un e!e de movimiento, como los pistones del motor de un coche.  • 2os Aeel joint cominan el piston y el pivot !oint de manera que aunque siempre est/n a la misma distancia amos cuerpos se mueven con liertad.

• 'l pivot !oint como hemos e=plicado antes une dos cuerpos por un determinado punto. m-^oint = p>-sics.ne@^oint7 p>-sics.ne@^oint7 0pivot0, cuerpo6, cuerpo3, )"",!"" 8

• Por defecto, los !oint motors tienen una rotación m/=ima as+ como una velocidad de motor. motor. m-^oint.isotornabled m-^oint.isotornabled  7boolean8 m-^oint.motorApeed m-^oint.motorT m-^oint.moto rTorBue orBue $$ 7get$onl-8 7get$onl -8 - 138 -

m-^oint.maMotorT m-^oint.maMoto rTorBue orBue $$ 7set$onl-8 7set$on l-8

• Si se desea podemos restrin"ir restr in"ir el /n"ulo de rotación para simular me!or determinados procesos. m-^oint.isLimitnabled m-^oint.isLimitnabled = true  7boolean8 m-^oint
• 'l distance !oint une dos cuerpos a una distancia 4!a. m-^oint = p>-sics.ne@^oint7 0distance0, cuerpo6, cuerpo3, cuerpo6.M,cuerpo6.-, cuerpo3.M,cuerpo3.cuerpo3.M,cuerpo3.- 8

• #iene tres propiedades /sicas • len"th es la distancia entre los puntos de altura • frequency es la frecuencia de amorti"uación • dampin"atio es un valor entre 8 y  siendo 8 sin amorti"uacion y  amorti"uación cr+tica

• 'l piston !oint une dos cuerpos mediante un e!e de movimiento restrin"ido. m-^oint = p>-sics.ne@^oint7 0piston0, cuerpo6, cuerpo3, cuerpo6.M,cuerpo6.-, aMisCistance,aMisCistanceU 8

• Pueden tener un motor como el pivot !oint solo que este es lineal m-^oint.isotornabled m-^oint.isotornabled  7boolean8 m-^oint.motorApeed m-^oint.motorApeed $$ 7linear speed, in units o9 piMels per second8 m-^oint.motorFor m-^oint.motorForce ce $$ 7get$onl-8

- 139 -

m-^oint.maMotorFor m-^oint.maMotorForce ce $$ 7set$onl-8

• Se puede especi4car tami6n los ran"os de movimiento lineal m-^oint.isLimitnabled m-^oint.isLimitnabled = true  7boolean8 m-^oint
• 'l wheel !oint comina el piston y el pivot !oint. 2a principal diferencia con el piston !oint es que los o!etos pueden rotar. m-^oint = p>-sics.ne@^oint7 0@>eel0, cuerpo6, cuerpo3, cuerpo6.M,cuerpo6.-, aMisCistance,aMisCistanceU 8

• #ami6n #ami6n dispone de unos motores lineales y rotacionales m-^oint.isotornabled m-^oint.isotornabled  7boolean8 m-^oint.motorApeed m-^oint.motorApeed $$ 7linear speed, in units o9 piMels per second8 m-^oint.motorFor m-^oint.motorForce ce $$ 7get$onl-8

• 2os l+mites de ran"o de movimiento se puede editar  m-^oint.isLimitnabled m-^oint.isLimitnabled = true  7boolean8 m-^oint
• 'l touch !oint conecta un cuerpo simple con el punto actual de toque en la pantalla y a*ade una fuer0a hacia dicho punto arrastrale. touc>^ount = p>-sics.ne@^oint7 0touc>0, cuerpo, cuerpo.M, cuerpo.- 8

• Kay varios atriutos a tener en cuenta, entre ellos la fuer0a m/=ima, la frecuencia de amorti"uación, y el ratio de amorti"uación. m-^oint.maMForce = 1"""" 9orce = m-^oint.maMForce

- 140 -

m-^oint.9reBuenc- = #" 9reBuenc- = m-^oint.9reBuencm-^oint.9reBuencm-^oint.damping;atio m-^oint.damping;atio = ".) damping = m-^oint.damping;atio

- 141 -

Ejercicios Tema 12 Ejercicio 1 Para este e!ercicio vamos a crear un nunchaku el cual podremos mover pinchando sore este. Para ello lo primero ser/ iniciar el motor f+sico y crear las paredes de nuestra aplicación, quedando al"o similar a la ima"en. Para crear las paredes utili0aremos el si"uiente códi"o

local p>-sics = reBuire70p>-sics08 p>-sics.start78 local suelo = displa-.ne@;ect7",4)",!)",4H"8 p>-sics.add3od-7suelo, p>-sics.a dd3od-7suelo,0static 0static0,{9riction=".H}8 0,{9riction=".H}8 local paredK2B = displa-.ne@;ect displa-.ne@;ect 7$1"", ", 1"1, displa-.contentOeig>t8 local paredCer = displa-.ne@;ect 7displa-.contentJidt>, ", 1"", displa-.contentOeig>t8 local tec>o = displa-.ne@;ect 7", $1"", displa-.contentJidt>, 1"18   p>-sics.add3od-7paredK2B,0static0, {bounce=".1,9riction=".1}8   p>-sics.add3od-7paredCer,0static0, {bounce=".1,9riction=".1}8 p>-sics.add3od-7tec>o p>-sic s.add3od-7tec>o,0static ,0static0,{bounce=".1,9riction 0,{bounce=".1,9riction=".1}8 =".1}8

3na ve0 ya tenemos creadas las paredes vamos a proceder a crear las cadenas y las uniones entre ellas, para lo cual el tipo de !oint que me!or nos viene es el pivot !oint.

- 142 -

local cadena^oin cadena^oints={} ts={} local linI ={} 9or i=1,# do linI*i+ = [email protected] linI*i+.M = 1"" linI*i+.- = #H E 7iW)48 p>-sics.add3od-7linI*i+,{densi p>-sics.a dd3od-7linI*i+,{densit-=).", t-=).", 9riction=".!, bounce="}8 i97iY18 t>en prevLinI = linI*i$1+ cadena^oints*:cadena^oin cadena^oin ts*:cadena^oints ts E 1+ = p>-sics.ne@^oint70piv p>-sics.n e@^oint70pivot0,prevLinI, ot0,prevLinI,linI*i+,1"",4H linI*i+,1"",4H E 7iW)488 end end

 Ahora crearemos los man"os de nuestro nunchaku, para ello utili0aremos el si"uiente códi"o local nunc>aIu={} nunc>aIu*1+ = displa-.ne@;ect71"",!!,)",##8 nunc>aIu*1+-sics.add3od-7nunc>aI p>-sics.a dd3od-7nunc>aIu*1+,{densit-=1.", u*1+,{densit-=1.", 9riction=".!,bounce=".!}8 cadena^oints*:cadena^oin cadena^oint s*:cadena^ointsE1+ tsE1+ = p>-sics.ne@^oint70piv p>-sics.n e@^oint70pivot0,linI*1+,nunc>aI ot0,linI*1+,nunc>aIu*1+,1"",##8 u*1+,1"",##8 nunc>aIu*)+ = displa-.ne@;ect71"",))),)",##8 nunc>aIu*)+-sics.add3od-7nunc>aI p>-sics.a dd3od-7nunc>aIu*)+,{densit-=1.", u*)+,{densit-=1.", 9riction=".!,bounce=".!}8 cadena^oints*:cadena^oin cadena^oint s*:cadena^ointsE1+ tsE1+ = p>-sics.ne@^oint70piv p>-sics.n e@^oint70pivot0,linI*#+,nunc>aI ot0,linI*#+,nunc>aIu*)+,1"",)""8 u*)+,1"",)""8

Con esto, tendremos creado nuestro nunchaku, pero no seremos capaces de arrastrarlo ni moverlo, para lo"rar el movimiento tendremos que crear dos touch !oint, y para mane!ar los touch !oint, necesitamos su controlador. 'l controlador quedar+a de la si"uiente manera local 9unction drag3oddrag3od-7event8 7event8 local bod- = event.target local p>ase = event.p>ase local stage = displa-.get&urrentAtage78 i9 7p>ase == 0began08 t>en

- 143 -

stageen  bod-.temp^oint = p>-sics.ne@^oint70touc>0, bod-,bod-.M,bod-.-8 else  bod-.temp^oint = p>-sics.ne@^oint70touc>0,bod-,event.M,event.-8 end bod-.temp^oint.maMForce = ".%Wbod-.temp^oint.maMForce elsei9 bod-.isFocus t>en i9 7p>ase == 0moved08t>en  bod-.temp^ointase == 0ended0 or p>ase == 0cancelled08 t>en  stage
'l touch !oint tiene astantes par/metros con los que !u"ar que har/n que nuestro nunchaku se comporte de una manera distinta. Pruea a variar los par/metros utili0ados o incluso a*adir nuevos par/metros de los e=plicados en la teor+a. Para 4nali0ar lo aIu*1+0,drag3od-8 nunc>aIu*)+0,drag3od-8

#mpliación 1 Ka0 una aplicación con la cual seas capa0 de disparar un ca*ón o una ala mediante el pulsado de un otón. Para ello deer/s utili0ar los m6todos ;od'Mappl'!inearImpulse o ;od'Mappl'$orce y compruea como varia su comportamiento.

- 144 -

#mpliación 2  Aprovechando la aplicación anterior coloca una diana est/tica en la pantalla y utili0ando los wid"ets que creas oportunos eli"e la dirección y la fuer0a que aplicar/s a la ala para intentar acertar a la diana.

- 145 -