895666Guia Iniciacion App Inventor

7/25/2019 895666Guia Iniciacion App Inventor

1/67

GUA DE INICIACIN

A APP INVENTOR


2/67

Gua de iniciacin a APP INVENTOR (2015)1

Tabla de contenidoGUA DE INICIACIN A APP INVENTOR

Objetivo

Qu es AppInventor?Sesin #1

ObjetivosCrear una cuenta GoogleInstalar App Inventor 2Configurar el idiomaEmpezamos!Instalar MIT AI2 Companion en el dispositivo Android, o conocer elemuladorEmpezamos a programar!

Incluir un botn en la pantallaAadir un sonidoAhora a vibrarConocer la pgina web de App Inventor (tutoriales, ejemplos, guas etc.)Ideas para profundizar nosotros mismos

Sesin #2Crear una aplicacin para dibujarCoordenadas x e yCambiar el tamao del pincel con un DeslizadorGuardar un archivo con el dibujo que hemos hechoIdeas para mejorar la aplicacin

Sesin #3Objetivos para hoyQu nmero est pensando?Definimos la interfaz del juegoGeneramos un nmero aleatorioGuardamos el nmero en una variablePedimos un nmero al jugadorHacemos comparaciones con la instruccin si-entoncesComparamos los nmerosBloque tomar para conocer el valor de una variable, texto o etiqueta

Bloque poner para guardar el valor de una variable, texto o etiquetaBucles si-entonces anidadosUso de un reloj para calcular el tiempoOtras propuestas de mejora para la aplicacinMejoras en la interfaz de usuario

Sesin #4Objetivos para hoyComponentes ImageSprite y PelotaDefinicin del escenario de juegoProporciones y lmites. Matemtica aplicadaDefinir el objetivo del juego

El movimiento de la pelotaCrear los bichos a aplastar

Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver unacopia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.


3/67


Manejo de los enemigosProcedimiento para tareas definidas y repetitivasImplementar la mecnica del juegoGestin del marcadorReorganizando los bloques de cdigo

Limitar el tiempo para crear tensinCundo termina el juego?Fin del juegoCongelando el tiempoAadir un botn para empezar de nuevoUn ltimo detalleIdeas para mejorar el juego

Comentarios finales



4/67


ObjetivoA pesar de ser un recurso muy til para iniciarse en el mundo de la programacin, noparece haber demasiados tutoriales o guas de App inventor en castellano. Estedocumento pretende facilitar un poco las cosas a los hispanohablantes que quieren

acercarse al apasionante mundo de la programacin a travs de la fantsticaherramienta que es App Inventor.

El documento est organizado en sesiones de trabajo, slo con el fin de estructurarmnimamente los proyectos y clarificar los objetivos. Las sesiones no tienen unaduracin determinada, y cada uno puede avanzar a su propio ritmo. Es muyconveniente que el estudiante se desve del guin principal cuando lo considereinteresante, y desarrolle sus propias ideas, para volver de nuevo al guin al principio dela siguiente sesin. La programacin es una artesana, y la creatividad, la libertad, y laimaginacin son fundamentales.

Este documento fue escrito inicialmente para utilizarlo como gua durante las sesionesde iniciacin a App Inventor que se desarrollan cada tarde del sbado en el Coder Dojodel centro MediaLab Prado de Madrid, en Espaa. Las posibilidades de App Inventorson extenssimas, y la intencin es simplemente que sirva de ayuda en los primerospasos, para que el estudiante pueda despus continuar por s mismo, buscando msrecursos de aprendizaje en la web, y llevado a cabo sus propias ideas.

Muy gustosamente atender las preguntas, dudas, comentarios o ideas a travs delcorreo electrnico [email protected] , o la cuenta de Twitter @raulconm

Feliz programacin!

Ral C.

mailto:[email protected]


5/67


Qu es AppInventor?App Inventor parte de una idea conjunta del Instituto Tecnolgico de Massachusetts yde un equipo de Google Education. Se trata de una herramienta web de desarrollopara iniciarse en el mundo de la programacin. Con l pueden hacerse aplicaciones

muy simples, y tambin muy elaboradas, que se ejecutarn en los dispositivos mvilescon sistema operativo Android.App Inventor es un lenguaje de programacin basado en bloques (como piezas de unjuego de construccin), y orientado a eventos. Sirve para indicarle al cerebro deldispositivo mvil qu queremos que haga, y cmo.Es por supuesto muy conveniente disponer de un dispositivo Android donde probar losprogramas segn los vamos escribiendo.

Sesin #1

Objetivos

1. Crear una cuenta Google2. Instalar App Inventor 23. Instalar MIT AI2 Companion en el dispositivo Android, o conocer el emulador4. Crear una aplicacin e instalarla en el mvil5. Conocer la pgina web de App Inventor (tutoriales, ejemplos, guas etc.)

Crear una cuenta GoogleEs necesario crear una cuenta Google porque App Inventor es un trabajo conjuntoentre Google y el MIT ( http://web.mit.edu/). Recurdese que Android es de Google.Abrir el navegador. OJO, tiene que ser Google Chrome, Safari o Firefox. InternetExplorer an no es compatible con App Inventor.Ir a la pgina https://accounts.google.com/Utilizar una cuenta ya existente o crear una nueva. Nos har falta para usar AppInventor.Seguir las instrucciones de la pgina de Google para crear una nueva cuenta.

Instalar App Inventor 2Buscamos App Inventor en el buscador de Google.Hacer clic sobre Front Page | Explore MIT App Inventor.

https://accounts.google.com/https://accounts.google.com/http://web.mit.edu/


6/67


Se abrir la siguiente pgina:

Hacemos clic sobre el botn Create. Si no hemos abierto sesin en Google, el

navegador nos pedir que lo hagamos ahora.



7/67


Al acceder a la cuenta de Google veremos nuestra pgina en App Inventor.

Configurar el idioma

App Inventor nos muestra inicialmente el interfaz en ingls, sin embargo, podemosutilizarlo tambin en castellano. La eleccin del idioma se hace pulsando sobre el iconode la bola del mundo situado en la esquina superior derecha de la pgina de AppInventor.



8/67


El interfaz est traducido al castellano, pero podemos an encontrar algunos textos

genricos de ayuda en ingls. En todo caso, sern muy pocos, y no deberamosencontrar problemas para trabajar con la herramienta sin saber ingls.

Empezamos!

Una vez configurado en castellano pulsamos el botn Comenzar un proyecto nuevo...

y le damos a nuestro proyecto el nombre MiauEsto nos lleva a la ventana principal de App Inventor.

La pantalla que estamos viendo se divide en partes:

- A la izquierda estn los objetos que vamos a usar para disear la pantalla de nuestraaplicacin. Botones, imgenes, dibujos, etc. Es como la paleta de un pintor- Despus explicaremos la parte derecha- Qu es la pantalla del centro? Representa la pantalla del mvil, y sirve para DISEARel aspecto de la aplicacin. La llamaremos Visor

Arriba a la izquierda hay un botn importante: Conectar. Para poder probar cmofunciona lo que vamos haciendo necesitamos transferirlo a un mvil, o usar elemulador incluido en App Inventor (esta opcin es menos recomendable).



9/67


Para conectar App Inventor con el mvil hacer clic en Conectar, y elegir la opcin AICOMPANION. Se abrir una pantalla como esta:

Instalar MIT AI2 Companion en el dispositivo Android, o conocer el emuladorPara poder utilizar nuestro dispositivo como banco de pruebas tenemos quedescargarnos de Google Play Store una aplicacin que se llama AI2 Companion.Buscarla en Google Play Store con ese nombre y descargarla ahora. Ocupa poco, y slohar falta descargarla una vez.

Abriremos ahora en el mvil la aplicacin que hemos descargado, haciendo clic sobreel icono MIT AI2 Companion. Puede estar en la pgina principal o dentro del grupo deAplicaciones.

Cuando se abra, elegiremos Connect with code (color naranja), y escribiremos elcdigo de letras y nmeros (alfanumrico) que aparece en la pantalla del ordenador.Quien pueda leer cdigos QR puede hacerlo desde la pantalla ahora pulsando en elbotn azul scan QR code. Para que esto sea posible el ordenador y el dispositivo debenestar en la misma red, es decir, que deben tomar la IP del mismo rango, tpicamentedel mismo enrutador (router). Si no disponemos de WIFI podremos utilizar elemulador, o una conexin USB (ver detalles para USB en la web de App Inventor).

Para abrir el emulador, haremos clic sobre Conectar y elegiremos la opcin Emulador.

No hay que hacer nada ms, tarda un poco, pero una vez que cargue se ver la pantallaen blanco de nuestra aplicacin.



10/67


Una vez establecida la conexin entre App Inventor y el mvil veremos una pantalla enblanco con el ttulo Screen1.

Empezamos a programar!Antes de nada, para este ejercicio necesitamos dos recursos que tenemos quedescargar en nuestro ordenador:

Kitty.png Miau.mp3

Podemos descargarlos del siguiente contenedor:

http://coderdojo-medialabprado.4shared.com

Haremos clic con el botn izquierdo sobre el archivo que queremos descargar. Seabrir una pantalla mostrando el archivo.

Pulsaremos entonces sobre el botn Descargar.

Saldr una pantalla mostrndonos el tiempo que tendremos que esperar para quecomience la descarga gratuita.

Al pulsarDESCARGA GRATIS el servidor nos pedir que le autoricemos a usar una

cuenta. Le autorizaremos a usar la de Google+, ya que la hemos creado antes.



11/67


Comenzar entonces la descarga del archivo. En algunos casos puede que el navegadorabra directamente el archivo de imagen que hemos descargado. En ese caso bastarque hagamos clic con el botn derecho y seleccionemos la opcin Guardar imagencomo para que quede almacenado en nuestro disco. Repetiremos este proceso paralos dos archivos mencionados.

Incluir un botn en la pantalla

En la parte izquierda hacemos clic en el tipo de objeto Botn, y sin soltar arrastramoshasta el visor. Si todo funciona bien se ver en el visor, y tambin en la pantalla delmvil, o del emulador.

Un botn es un objeto sobre el que podemos hacer clic, y puede tener diferentesaspectos.

Para que el botn tenga la imagen del gato hacemos clic en el botn, y en la partederecha de App Inventor, en Propiedades, y bajo la propiedad

Imagen, hacemos clic enNinguno

Elegimos la opcin Subir archivo, y despus Seleccionar archivo



12/67


Elegimos el archivo del gato en nuestro disco duro y pulsamos Aceptarpara subirlo a lapgina de nuestro proyecto en App Inventor. Se ver el gato como imagen del botn,que ahora ser ms grande.

Para quitar el texto Texto para el Botn1 que aparece por debajo del gato hay queborrar el valor de una propiedad Texto del botn, en la parte derecha de la ventana.



13/67


Si no vemos la cara del gato entera en la pantalla del dispositivo deberemos cambiarlos valores de las propiedades Ancho y Alto del botn por Ajustar al contenedor,para que se ajusten al tamao mximo disponible en la pantalla del dispositivo.

Para incluir una etiqueta debajo del gato que ponga Hola, soy Kitty arrastramos un

componente Etiqueta hasta el visor, y la soltamos debajo del gato.

Investiguemos ahora para descubrir cmo cambiar el texto Texto para Etiqueta1 porHola, soy Kitty. Una pista: hay que seleccionar la etiqueta en el visor, y luego cambiarsus propiedades en la parte derecha de la ventana de trabajo de App Inventor.

Aadir un sonido

Ahora aadiremos un sonido a nuestra aplicacin, arrastrando hasta el visor el iconoSonido, que est dentro del grupo Medios, en la Paleta. Ojo, este objeto no se ver enel mvil o en el emulador, porque no es una imagen, ni un botn, ni una etiqueta. Por

eso aparece debajo del visor, en el apartado Componentes no visibles.

Investiguemos ahora de nuevo para saber cmo asociar a este objeto que hemoscreado el sonido Miau.pm3 que hemos descargado. De nuevo hay que usar el panelde propiedades para este componente. No es difcil, haremos clic sobre el valor de lapropiedad Origen del componente Sonido1 y subiremos el archivo descargado.

Con esto hemos terminado de disear el aspecto de nuestra aplicacin Ahora viene lamagia, tenemos que programar cmo se comportar la aplicacin. Eso es programar!

Hacemos clic en el botn Bloques situado en la esquina superior derecha.



14/67


Esto abre la ventana de programacin con bloques. La parte ms amplia, ahora enblanco, es el Editor, donde colocaremos los bloques de nuestros programas.

Vamos a hacer que suene el sonido del gato cada vez que hagamos clic sobre la imagendel gato (botn).

Hacemos clic en Botnpara que se muestren los bloques de colores disponibles paraescribir nuestro cdigo, el programa. Se abre un cajn de herramientas con todos losbloques que podemos utilizar. Arrastramos hasta el editor el que dice Botn1.Clic.



15/67


Los bloques color mostaza son los manejadores o gestores de sucesos. Indican qu hayque hacer cuando sucede algo en la aplicacin. En este caso, el manejador nospermitir decirle al ordenador qu debe hacer cuando hagamos clic sobre el gato.

Ahora hacemos clic sobre nuestro componente Sonido1para abrir su cajn. Entoncesarrastramos la instruccin Llamar.Sonido1.Reproducir hasta encajarla dentro delmanejador que hemos creado para el botn.

Enhorabuena por la primera aplicacin!

Ya podemos probarla en el mvil, pero la perderemos si cerramos la aplicacin AI2 quenos conecta con el ordenador. Para instalarla en el mvil permanentemente, comocualquier otra aplicacin, podemos generar un cdigo QR.

Para ello hacemos clic en

Generar

y elegimos la opcin

App (generar cdigo QR para elarchivo .apk).



16/67


Esto tomar un poco de tiempo, despus del cul aparecer un cdigo QR quepodremos capturar en nuestro mvil. La aplicacin quedar descargada entonces ennuestro telfono/Tablet, para ejecutarla siempre que queramos.

Ahora a vibrarPodemos mejorar la aplicacin, haciendo que el telfono vibre a la vez que el gatomalla. Una pista: hay que buscar dentro del cajn de bloques del objeto Sonido1.

El bloque que hace que el mvil vibre es Llamar.Sonido1.Vibrar. Este bloque, adiferencia del anterior, tiene un encajador por el lado derecho. Sirve para indicarcunto tiempo tiene que vibrar el dispositivo, en milisegundos.

Para poner aqu un valor de tiempo hay que abrir el cajn Matemticas y arrastrar elbloque de arriba hasta el encajador libre a la derecha del bloqueLlamar.Sonido1.Vibrar, donde indica milisegundos.

Ahora cambiamos el valor 0 por el valor 500, para que vibre durante medio segundo.Los bloques quedarn as

Qu pasa si ponemos 2500 en el bloque azul? Vibrar durante 2,5 segundos. Paracambiar el valor hay que hacer clic sobre el nmero, y escribir el nuevo valor.

Ahora volveremos al Diseador y aadiremos un objeto Acelermetro, que seencuentra en la Paleta, dentro del cajn Sensores. Se quedar bajo la ventana delvisor, porque no se refiere a un objeto visible en nuestra interfaz de usuario.

Ahora, en el editor de bloques, elegiremos en la ventana de bloques el objeto

Acelermetro1 que hemos creado. De su cajn elegiremos el bloque mostazacuando.Acelermetro1.Agitar



17/67


Ahora copiamos el bloque Llamar.Sonido1.Reproducir de arriba, haciendo clic con elbotn derecho sobre l y seleccionando Duplicar.

Una vez duplicado lo encajaremos con el bloque mostaza que hemos creado. El editorde cdigo aparecer como en la siguiente figura.

Qu va a ocurrir? El gato tambin maullar cada vez que agitemos el mvil. Elacelermetro es el sistema que detecta que el mvil se mueve, o cambia deorientacin vertical a horizontal. Es muy til para muchas aplicaciones.

Aqu hay dos EVENTOS distintos, y le estamos indicando al mvil, a travs de esteprograma, qu debe hacer cuando suceda cada uno de estos eventos.

POR ESO SE DICE QUE APP INVENTOR ES PROGRAMACIN ORIENTADA A EVENTOS

(EVENT-DRIVEN PROGRAMMING).

Intentemos ahora generar nosotros mismos el cdigo QR para esta nueva aplicacin.

Conocer la pgina web de App Inventor (tutoriales, ejemplos, guas etc.)

Podemos entrar en la web de App Inventor haciendo clic en el icono del androide de laesquina superior izquierda, y dar un paseo por los recursos que hay en la pgina deApp Inventor.



18/67


Ideas para profundizar nosotros mismosConocer otros componentes de la pantallaInvestigar cmo renombrar los objetos que hemos creado.Descubrir dnde estn los recursos Medios que vamos agregando.

Comprobar cmo se eliminan objetos del editor de bloques, arrastrndolos a lapapelera.



19/67


Sesin #2

Crear una aplicacin para dibujar

Una vez que hemos visto el manejo ms bsico de las pantallas, el Diseador, y elEditor de Bloques de App Inventor, ya estamos listos para hacer algo ms avanzado.Comenzaremos haciendo clic en el desplegable Proyectos, y eligiendo la opcinComenzar un proyecto nuevo...

Una vez dentro, cambiaremos el nombre de la pantalla Screen1 por Dibujar(en lapropiedad Ttulo del componente Screen1).

ATENCINEs importante siempre utilizar nombres descriptivos para los objetos que vamoscreando. Al principio, cuando nuestras aplicaciones son pequeas, es fcil recordarcada objeto, pero a medida que los programas van hacindose ms complejos esfundamental saber para qu sirve cada objeto, cada variable, y slo podremos hacerlosi le hemos dado un nombre que describe qu es o para qu sirve.



20/67


Ahora crearemos por nuestra cuenta un botn, y cambiaremos su propiedad TextoporRojo, y finalmente pondremos en rojo su propiedad ColorDeFondo. Adelante,solamente hay que jugar con las propiedades del botn.

Cambiaremos el nombre del botn Botn1 por boton_rojo en el cuadro de

componentes del Diseador. En lugar de usar un espacio utilizaremos un signo desubrayado, y no emplearemos tildes, porque el sistema entiende que es un carcterespecial no vlido (esto an est en ingls ).

Crearemos despus otro botn verde, y finalmente otro azul, y haremos lo mismo quehemos hecho con el rojo, cambiaremos su nombre, el color de fondo, y el texto queaparece en el botn.



21/67


Como queremos que los botones queden en una misma lnea horizontal, vamos arecolocarlos en la pantalla aadiendo un componente DisposicinHorizontal. Loarrastramos desde el cajn Disposicinhasta el Visor. Este objeto aparecer en el Visorcomo un cuadro vaco.

Para que se ajuste al ancho de la pantalla del visor qu haremos? En su propiedad

Ancho elegiremos la opcin Ajustar al contenedor...

Ahora, en el Visor, arrastraremos los tres botones dentro de DisposicinHorizontal1. Sino nos gusta este nombre podemos cambiarlo por MarcoHorizontal, por ejemplo. Paraque la altura del marco se ajuste al tamao de los botones podemos decir que suAlturasea automtica. As siempre se adaptar al tamao del componente ms alto detodos los que contiene.

Ahora aadimos el lienzo, arrastrando al Visor el componente Lienzo, que se encuentradentro del cajn Dibujo y animacin de la Paleta. Lo colocamos justo debajo, fuera delMarcoHorizontal. Lo ms cmodo es definir que su anchura (propiedad Ancho) seaautomtica, para que se extienda hasta los bordes izquierdo y derecho del Visor. Encuanto a su altura, mejor experimentar con diferentes tamaos hasta que ocupe elespacio que queremos.

El tamao se especifica en

pixels, es decir, en puntos de la pantalla. Cada lnea de lapantalla tiene un nmero de pixels. El nmero de ellos que haya, en lneas y columnas,



22/67


define la resolucin de la pantalla. Podemos probar con 300 pixels, y modificarlo mstarde si vemos que no es el mejor tamao.

Ahora vamos a definir el comportamiento del programa, a decir cmo tiene quefuncionar. Vamos entonces al editor de bloques.

Arrastraremos el bloque

cuando.Lienzo1.Tocar desde el cajn del objeto

Lienzo1 hastael editor. Esto indica que cada vez que toquemos el lienzo con el dedo tendr queocurrir lo que digamos dentro de este bloque mostaza.

Ahora arrastraremos el bloque morado (de accin) llamar.Lienzo1.DibujarCrculo

hasta encajarlo dentro del bloque mostaza. Veremos que para funcionar necesita quele asociemos a la derecha tres bloques de informacin adicional (x, y, r).

Coordenadas x e yEl pensador Ren Descartes invent hace tiempo un sistema para definir la posicin deun objeto sobre un plano. En su honor, este sistema se conoce como CoordenadasCartesianas. Para conocer ms sobre este tema visitemos la pginahttp://es.wikipedia.org/wiki/Coordenadas_cartesianas

Nosotros vamos a utilizar el sistema de Descartes para referirnos a un punto cualquieradentro de nuestro

Lienzo1. Siempre que toquemos con el dedo dentro del lienzo, el

http://es.wikipedia.org/wiki/Coordenadas_cartesianas


23/67


bloque mostaza guardar cul es el valor de la coordenada x y la coordenada y delpunto que estamos tocando, porque seguro que lo necesitaremos. App Inventor utilizael sistema cartesiano para determinar la posicin de un punto determinado dentro deun lienzo. La x aumenta desde la izquierda a la derecha, y la y lo hace desde arribahacia abajo.

Precisamente para saber dnde dibujar el crculo, el bloque morado deber saber quesaber qu x e y tiene el punto de la pantalla que estamos tocando. Lo tomaremos delbloque mostaza.

Al dejar quieto el puntero del ratn sobre el icono de la xdel bloque mostaza nos

saldr una ventanita en la que aparecer un pequeo bloque

tomarx de color naranja.Tenemos que arrastrarlo hasta encajarlo con el hueco superior del bloque moradollamar.Lienzo1.DibujarCrculo.

Haremos lo mismo con la y. Esto har que el crculo se dibuje sobre la x y la y queestamos tocando, y no en cualquier otro punto de la pantalla.

Nos falta definir la r. Qu es? Indica el tamao del crculo que vamos a dibujar, suradio (de ah la r). Para definir el tamao, el radio, abrir el cajn Matemticas de lazona de bloques y arrastrar el bloque azul que indicar el valor 0 (cero) hasta el hueco rde nuestro bloque morado.



24/67


Queremos que los crculos se vean bien, as que le asignaremos a r el valor 10. El radiodel crculo ser 10.

Ahora podemos tocar dentro del lienzo, en la pantalla del mvil o el emulador, para vercmo se dibujan pequeos crculos. Pero para que los crculos sean rojos, verdes oazules en lugar de negros, hay que decirle al mvil que lo haga creando nuevosbloques. Una pista: hay que utilizar un bloque mostaza del objeto botn_rojo. Yahemos usado este tipo de bloque mostaza en el programa del gato.

Utilizaremos el bloque cuando.boton_rojo.Clic. Lo arrastramos hasta el editor debloques.

Qu tiene que ocurrir cuando hagamos clic sobre el botn rojo? Tiene que cambiarsea rojo el color del pincel que usamos en el lienzo. Dnde tendremos que definir eso?Una pista: el color del pincel es una caracterstica del Lienzo1, as que tendremos quebuscar la manera de hacerlo usando algn bloque del cajn del objeto Lienzo. Otrapista: es un bloque de color verde oscuro.

Es el bloque poner.Lienzo1.ColorDePintura.como. Lo arrastraremos hasta encajarlodentro del bloque mostaza cuando.boton_rojo.Clic.

Falta indicar que queremos que sea el color rojo. Para ello escogeremos el pequeobloque que identifica a este color de entre los colores que hay en el cajn Colores de laPaleta de App Inventor.

Haremos lo mismo con los botones para color verde y color azul. Lo mejor es hacerlo

duplicando el bloque mostaza que hemos creado para el color rojo. Una vez hecho, enel nuevo bloque mostaza, podemos desplegar la lista del nombre de los botones y



25/67


elegir el del color verde. Entonces slo tendremos que cambiar el bloque rojo por elverde, y listo. Lo mismo con el botn para el azul.

Cuando probemos el resultado se nos ensuciar el lienzo enseguida, as que hay queponer un botn para dejar el lienzo en blanco de nuevo. Cmo se har? Varias pistas:

Crear DisposicinHorizontal1debajo del lienzo

Meter dentro un nuevo botn y llamarlo Limpiar Cambiar el texto del botn por Limpiar Poner los bloques para que al hacer clic sobre Limpiarse limpie el lienzo

En realidad sera ms interesante si en lugar de hacer circulitos, pudieran dibujarselneas al arrastrar el dedo por la pantalla. Qu bloque mostaza del objeto

Lienzohabra que usar para que se dibujara segn furamos arrastrando el dedo por ellienzo? Una pista: deberemos utilizar un bloque naranja del componente Lienzo1.

ATENCINEn programacin no hay una nica manera de hacer bien las cosas, es decir, podemosconseguir el mismo resultado utilizando bloques diferentes. El objetivo crear elprograma de la forma ms simple y ms eficiente, para que nuestro cdigo sea mselegante.

Podemos usar estos dos tipos de bloques, por ejemplo, para dibujar un crculo porcada punto donde vayamos arrastrando el dedo. XActual e YActual se refierenprecisamente al punto representado por las coordenadas x e y actuales. Veremoscomo funciona esto al arrastrar el dedo despacio por el lienzo. Si deslizamos el dedodemasiado rpido se vern los puntos separados.



26/67


Ms apropiado puede ser entonces utilizar este otro bloque morado, que se basa endibujar lneas, y no crculos. Para dibujar una lnea hace falta especificar el punto inicialde la lnea y el punto final. Por ello para usar este bloque hay que indicarle doscoordenadas x y dos y. El primer (x1, y1) define el punto inicial de la lnea, y el segundopar (x2, y2) define el punto final de la misma. Al hacer clic sobre el lienzo, sin levantarel dedo, el programa guardar en su memoria el valor de la x e y del punto que hemostocado (determinado por XPrevio e YPrevio). Segn vayamos deslizando el dedo el

programa ir detectando el cambio de posicin y dibujar una lnea desde ese puntoguardado hasta el punto que estamos tocando actualmente (determinado por XActuale YActual). Esto se repetir todo el tiempo, muy rpidamente, mientras sigamosarrastrando el dedo por la pantalla. Se dibujarn por lo tanto muchas lneas muycortas, una detrs de la otra, dando la sensacin de ser una nica lnea continua.

Como hemos decidido utilizar el bloque cuando.Lienzo1.Arrastrado podemos eliminarel bloque naranja cuando.Lienzo1.Tocar que haba utilizado anteriormente, y quedibujaba crculos, a no ser que queramos mantener ambos botones, par que nuestraaplicacin haga dos cosas distintas dependiendo de la accin que tomemos: si slotocamos el lienzo se dibujar un crculo, y si tocamos el lienzo y deslizamos el dedo sedibujar una lnea.

Cambiar el tamao del pincel con un Deslizador

Un objeto Deslizador es perfecto para modificar el valor numrico de un parmetro sintener que escribirlo. Para incluir un deslizador en nuestro interfaz de usuario tenemosque arrastrarlo desde la Paleta. En nuestro caso lo llamaremos Tamao_pincel.



27/67


Tenemos que definir el valor mnimo y mximo que podr tomar el deslizador, y elvalor que tendr inicialmente ( PosicinDelPulgar). Tambin es conveniente especificarla anchura del Slider para que se ajuste al espacio restante ( Ajustar al contenedor).

Tenemos que indicarle ahora a nuestro programa que modifique el ancho de la lneade nuestro dibujo segn variemos la posicin de Tamao_pincel. Para ello,utilizaremos el bloque mostaza cuando.Tamao_pincel.PosicinCambiada, que seejecuta cada vez que se cambia la posicin del selector dentro del deslizador.



28/67


Este bloque incluye una variable, posicinDelPulgar, que contiene el valor actual de laposicin, y que puede utilizarse para nuestro propsito.

Si dejamos momentneamente el puntero del ratn sobre la casilla posicinDelPulgardel bloque mostaza, se mostrar un desplegable que nos permitir elegir el bloque quedefine el valor de esa variable (tomar

), o definir un nuevo valor para ella ( poner).

Elegiremos en este caso el bloque tomar, y lo combinaremos con el bloque verde delobjeto Lienzoque define el ancho de lnea de dibujo, para indicar al programa quecambie el ancho de la lnea cada vez que arrastremos el puntero del deslizador

Tamao_pincel

a un nueva posicin.

Igual que ocurre con los bloques de color naranja tomary ponerque apareccen dentrode algunos bloques mostaza, y que sirven para poner o tomar un valor (en este casopara posicinDelPulgar), en muchos componentes existen bloques de color verde, que

nos permiten tomar o poner valores a sus propiedades.



29/67


Por ejemplo, el siguiente bloque nos permite poner, asignar, definir el valor del anchode lnea del componente Lienzo1. La propiedad AnchoDeLneade Lienzo1tendrentonces el valor del bloque que encajemos a la derecha del bloque verde oscuro.

Y este otro sirve para tomarel valor actual del ancho de lnea del componente Lienzo1.Es decir, cuando encajemos este bloque verde claro a la derecha de un bloque verdeoscuro, ste tomar el valor de la propiedad AnchoDeLnea de Lienzo1.

Guardar un archivo con el dibujo que hemos hecho

Cuando el usuario termine de hacer un dibujo interesante, seguramente querrconservarlo en la memoria permanente del telfono. Para ofrecerle esa posibilidad,tendremos que indicarle a nuestro programa cmo almacenar en la memoria elcontenido actual del lienzo. En primer lugar, hay que incluir en el interfaz un botnGuardar, que al ser pulsado ejecutar el cdigo correspondiente.

El bloque de cdigo que usaremos, incluido dentro del cajn Lienzo, serllamar.Lienzo1.Guardar.



30/67


Este bloque es diferente a los vistos hasta ahora, porque no puede ser encajadodirectamente debajo de otro bloque, o dentro de un bloque color mostaza. El bloquetiene que ser encajado a otro por su izquierda. Esto se debe a que es un bloque quedevuelve un valor, como acabamos de ver al final del apartado anterior, con el bloquede color verde claro Lienzo1.AnchoDeLnea. En este caso el bloque violeta devuelveuna texto, que contiene el nombre del archivo donde se ha almacenado el dibujodentro de la memoria del dispositivo.

Es conveniente colocar un componente Etiqueta, que llamaremos Nombre_Archivo, ala derecha del botn Guardar, y que tomar el valor de texto devuelto por el

procedimiento

Lienzo1.Guardar

. Definiremos que su propiedad

Texto

estinicialmente en blanco. El componente ser difcil de ver en el dispositivo mientras nole asignemos un nuevo valor.

Veamos cuidadosamente el nuevo componente y los bloques utilizados, hastainteriorizar mentalmente su funcionamiento.



31/67


Cada vez que se pulse el botn Guardar, el dibujo quedar almacenado con un nombreque se asignar automticamente, en funcin del da y la hora. Este nombre apareceren el texto de la etiqueta Nombre_archivocada vez que hagamos clic en el botnGuardar.

Ideas para mejorar la aplicacinPodemos mejorar esta aplicacin hasta donde queramos, usando la imaginacin, einvestigando cmo podemos utilizar los recursos en App Inventor para incluir ennuestra aplicacin todo lo que vayamos inventando.

Por ejemplo Poner un sello con tu nombre cuando pulses un botn Tomar una foto existente en la memoria del dispositivo y usarla como fondo del

lienzo, etc.



32/67


Sesin #3

Objetivos para hoy1. Hacer una aplicacin para adivinar qu nmero est pensando2. Descargarla en nuestro mvil

Para ello aprenderemos1. Qu es una variable y cmo manejarla (tomary poner)2. Comprenderemos cmo se genera un nmero aleatorio (random)3. Conoceremos qu es una instruccin condicional (bucle si-entonces)4. Usaremos instrucciones de comparacin

Qu nmero est pensando?

Vamos a hacer un programa sencillo pero eficiente. l pensar un nmero y nosotrostenemos que adivinarlo. Parecer que el mvil piense!

Para que el dispositivo pueda hacer esto correctamente, tenemos que ensearle cmohacerlo, paso a paso, aadiendo bloques de cdigo. Se trata de ensearle al programala lgica que seguimos nosotros, los seres humanos, cuando jugamos a este juego.

Definimos la interfaz del juegoTenemos que crear un interfaz para para que la aplicacin se relacione con el usuario,es decir, le pregunte un nmero, y le vaya dando pistas, diciendo si es demasiado alto,

demasiado bajo, o si finalmente ha acertado el nmero secreto.

Creamos entonces en el Diseador una etiqueta, y cambiamos el texto para queaparezca en ella la palabra Nmero:.Uno de los retos ms importantes cuando programamos, como hemos dicho antes, esser ordenados. Los programadores tendemos a crear y definir muchos objetos parallevar a cabo rpidamente la idea que hemos tenido, antes de que se nos vaya de lacabeza. Aunque parezca imposible, con el tiempo, cuando revisamos el cdigo, ya nosabemos para qu serva cada objeto que hemos creado, y esto nos puede hacerperder mucho tiempo cuando revisamos nuestro programa un mes ms tarde. Para

evitarlo, debemos acostumbrarnos a seguir prcticas o mtodos que nos libren de esteproblema a largo plazo. El futuro parece lejano, pero llega.

A partir de este proyecto vamos entonces a intentar ser ms ordenados. Voy a dejaruna E_ delante del nombre mi nueva etiqueta. As siempre sabr, cuando vea losbloques, que esa es una etiqueta, y no un botn, ni campo de texto, ni otro tipocomponente. Llamar a la etiqueta E_nmero.



33/67


Adems el dispositivo va a tener que escuchar cada nmero que le digamos, paradecidir si hemos acertado, as que aadiremos en nuestra ventana del visor un campode texto. Servir para que el jugador indique qu nmero cree que ha pensado elprograma.

Para diferenciarlo de la etiqueta que hemos creado antes, al campo de texto le

llamaremos

T_nmero. As cuando estemos en el editor de bloques podremosdiferenciar fcilmente entre la etiqueta y el campo de texto, porque uno comienza conE_ y otro con T_. Aunque parezca innecesario, esta costumbre en la asignacin denombres puede ser muy interesante. Con el tiempo cada programador vadesarrollando sus propios mtodos, o tomndolos de otros programadores, paradisfrutar del arte de programar sin complicarse la vida.

Finalmente tendremos que aadir un botn con el texto Adivina para que eldispositivo sepa cul hemos elegido. A este botn lo llamaremos B_adivinar. Cuando eljugador lo pulse el programa tendr que hacer algunas comprobaciones que ahora

iremos viendo.



34/67


Ya est. El dispositivo podr escuchar lo que el jugador le diga.

Generamos un nmero aleatorioCuando las personas jugamos a este juego, qu es lo primero que hacemos cuando ledecimos a un amigo que adivine qu nmero estamos pensando? Pensamos unnmero al azar.

Para hacer lo mismo en nuestra aplicacin necesitamos crear cdigo, as que vamos aleditor de bloques.

Lo primero que el programa tiene que hacer es pensar en un nmero. En este caso levamos a indicar cmo debe pensar en un nmero entre 1 y 10. Al ser una instruccinmatemtica, abriremos el cajn Matemticas, y usaremos el bloque entero aleatorio.Tendremos que especificarle entre qu dos nmeros debe pensar su nmero.

A continuacin vamos a hacer que el programa guarde este nmero en su memoria,

porque si no lo olvidara y no podramos jugar.

Veamos que este tipo de bloque tiene que ser encajado a la derecha de otro. Esto esporque el resultado de este bloque, el nmero entre 1 y 10, ser el dato de entradapara otro bloque.

Guardamos el nmero en una variableUna variable es un espacio de la memoria del dispositivo reservado para guardar datosque nuestros programas tienen que manejar durante su funcionamiento. Para poderutilizar las variables de memoria es necesario en primer lugar darles un nombre.

Para ello abrimos el cajn

Variables y elegimos el bloque

initialize global

to.Podemos darle a la variable el nombre V_nmero_pensado. Es importante dar a las



35/67


variables un nombre descriptivo, porque en programas ms complejos, con msvariables, nos facilitar saber para qu sirve cada una. Como venimos haciendo, y paraidentificar rpidamente que se trata de una variable, el nombre comienza con una V_.

Los bloques deben quedar as:

Con estos dos bloques le hemos dicho al el juego que tiene que pensar un nmeroentre uno y diez, y guardrselo en una variable de su memoria, sin mostrrselo aljugador.

ATENCINUna variable de memoria es como una caja dentro de un gran armario lleno de cajas,

que es la memoria total del ordenador. La memoria total del ordenador estcompuesta por millones de estas pequeas cajitas de memoria, que sirven paraguardar la informacin que el ordenador recibe del exterior, y la que l mismo generadurante la ejecucin de las aplicaciones.Tambin se guarda en la memoria el propio programa que est ejecutndose.

Cul sera el paso siguiente en el juego?

Pedimos un nmero al jugador

Para comenzar a jugar deberamos pedirle al jugador que nos diga un nmero. Esto lo

conseguiremos por medio del campo de texto

T_nmero

que hemos creado en elVisor. El jugador ir escribiendo nmeros en este campo y el programa le ir indicandosi el nmero aleatorio generado secretamente es mayor o menor al que el jugador haescrito.

Por lo tanto, cada vez que el jugador escriba su nmero y pulse el botn B_adivinarelprograma lo comparar con el nmero secreto.

Hacemos comparaciones con la instruccin si-entonces

Ahora que ya tenemos el nmero pensado y el nmero que ha elegido el jugador culser el siguiente paso? La aplicacin tiene que comparar ambos nmeros, para saber siha acertado, o si es mayor o menor.

Este bloque tan importante es el que nos permitir a los programadores ensearle aldispositivo cmo debe tomar las decisiones durante la ejecucin de un programa. Elbloque si-entonces bloque sirve para darle inteligencia a las aplicaciones. Usaremoseste bloque muchsimas veces cuando hagamos programas.



36/67


Dependiendo del resultado de la comparacin la aplicacin deber hacer una cosa uotra:

Si

se cumple una condicinEntonces Ejecuta esto

Con un ejemplo se entender ms fcilmente:

S numero_x>2

Entonces Escribe numero_x es mayor que dos

Al bloque si-entonces se le tienen que encajar dos bloques ms por el lado derecho. Elprimer encajador, el que sigue a

si, sirve para indicar la expresin que se va a evaluar.En el caso de nuestro programa, vamos a comparar dos nmeros, el pensado y el que

ha dicho el jugador.

El segundo enchufe, el que sigue a entonces, sirve para decirle a la aplicacin qu tieneque hacer si se cumple la condicin que hemos puesto en el si.

Primero definimos la parte del si, la expresin a evaluar, a comprobar.

Comparamos los nmeros

El bloque que sirve para hacer una comparacin entre dos nmeros est en el cajnMatemticas. Lo arrastraremos al editor de bloques, hasta encajarlo con el primero delos huecos del bloque si-entonces.



37/67


En el primer hueco del bloque azul pondremos el nmero secreto que almacenamosantes en la variable, y en el otro lado indicaremos cul es el nmero que ha escritoeljugador en el campo T_nmero. Antes de hacer esto tenemos que saber cmo manejarel contenido de una variable.

Bloque tomarpara conocer el valor de una variable, texto o etiqueta

Podemos saber cul es el contenido de una variable con el bloque

tomar

. Arrastramosal editor el bloque tomarque se encuentra dentro del cajn Variableshasta el primerhueco del bloque azul de comparacin, y una vez colocado elegimos qu variable es laque queremos usar, desplegando la lista de variables situada dentro del bloque tomar.



38/67


Ahora que ya sabemos cmo consultar cul es contenido de la variableV_numero_pensado, podemos modificar la comparacin haciendo clic en el centro delbloque azul. Empezaremos evaluando si el nmero pensado es mayor que el nmerodel jugador.

En caso de que se cumpla la condicin deberemos darle al jugador una pista,

dicindole que el nmero que nos ha dicho es demasiado bajo. Lo haremos creandouna nueva etiqueta E_pista en el interfaz del juego.

Bloque poner para guardar el valor de una variable, texto o etiquetaIgual que con el bloque tomartombamos el valor de la variable, con el bloque ponervamos a asignar el valor Demasiado bajo al texto de la etiqueta E_pista,para que eljugador lo vea en la pantalla del juego.

ATENCINUtilizaremos el componente Etiquetacuando el valor de su propiedad Textoslo va aser modificada por el programa, es decir, cuando el usuario de la aplicacin no tieneque escribir sobre ella para modificarlo. En caso de que el usuario pudiera modificarlo

utilizaramos un componente CampoDeTexto

.



39/67


Para incluir el texto Demasiado bajo usaremos un bloque fucsia que hay dentro delcajn Texto.

Y ahora, en el editor, crearemos los bloques para completar la instruccin si-entonces.

Cundo debemos hacer la comparacin? Cada vez que el usuario haga clic en el botnB_adivinar. Por lo tanto, incluiremos todo el bloque anterior dentro del bloquecuando.B_adivinar.Clic



40/67


Pero esto slo dar la pista al jugador cuando su nmero sea menor al pensado, asque habr que hacer tres bloques si-entonces, uno para cuando el nmero sea menor,otro para cuando sea mayor, y el ltimo para cuando sea igual, en cuyo caso el jugadorhabr acertado el nmero.

Observemos que en cada bloque azul el signo de comparacin ser diferente. Podemosduplicar los bloques si-entoncescompletos y luego modificar los bloques azules yfucsia para que se adapten a cada comparacin.

Sucede que como programadores, cuando estamos probando la aplicacin, nosabemos cul es el contenido de la variable V_nmero_pensado, as que no tenemoscerteza de si el programa est ejecutndose bien, es decir, si est informandocorrectamente al jugador si el nmero es demasiado alto, o demasiado bajo.

Para saber si el programa funciona como debe tenemos que poner chivatos. Porejemplo, podemos hacer que se muestre siempre el nmero pensado en pantalla, parasaber si el programa funciona bien. El nmero no ser secreto, pero ayudar alprogramador a saber si la aplicacin est tomando las decisiones como l quiere que lohaga.

ATENCINUn chivato se utiliza slo durante la fase de desarrollo del programa, mientras se estescribiendo. Cuando todo est probado, y antes de ponerlo a disposicin de losusuarios, hay que acordarse de quitar todos los chivatos. A veces los programadores se

olvidan de quitarlos, y eso queda fatal!

Para poner un chivato podemos definir una etiqueta E_chivato, y luego usar estosbloques:

De momento, el mejor sitio para ubicar este bloque es dentro del evento cuandoB_adivinar.Clic, como primera instruccin. As se actualizar en la pantalla el valor del

chivato cada vez que usuario pulse el botn de adivinar.



41/67


Bucles si-entonces anidadosCada vez que el jugador pulsa el botn Adivina el programa hace tres comparacionesseguidas (es menor, es mayor, y es igual). Sin embargo, slo una de ellas ser cierta, asque no es necesario hacer las tres preguntas. Es decir, si se cumple la primeracondicin no es necesario evaluar la segunda condicin, ni la tercera. En realidad, nosolamente no es necesario hacer las tres preguntas, sino que no es tampococonveniente, porque la aplicacin har siempre trabajo intilmente, haciendo laaplicacin ms lenta, menos eficiente.

ATENCIN

Es importante que como programadores intentemos escribir un cdigo tan eficiente ylimpio como podamos. Para ello hay que pensar un poco cul es la mejor manera dellevar a cabo un proceso concreto, evitando lneas innecesarias o redundantes, queafean el cdigo. La programacin tiene un toque artstico, y como tal hay espreferible buscar siempre la elegancia y la belleza.

En nuestro programa, para evitar las ejecuciones de cdigo innecesarias, vamos autilizar sentencias si-entonces anidadas, o si-entonces-si no. Slo se ejecutarn losbloques del si no cuando NO se cumpla la condicin del si-entoncesanterior.

Si

se cumple una condicin

Entonces Ejecuta esto

Si no Ejecuta esto otro

Con un ejemplo sera

S numero_x>2

Entonces Escribe numero_x es mayor que dos

Si no Escribe numero_x es menor o igual que dos



42/67


En este caso concreto, vamos a enlazar un entoncescon el siguiente si, de modo queslo se evaluar el segundo sicuando el primero no se haya cumplido. Y slo seevaluar el tercer si en el caso de que el segundo tampoco se cumpla.

De esta forma el bloque cuando.B_adivinar_Clic se ejecutar mucho ms rpido, alevitar pasar por bloques sin necesidad.

Uso de un reloj para calcular el tiempoUn componente muy til para controlar y gestionar la ejecucin de los programas es eltemporizador, o reloj. Gracias a este componente podemos definir cundo sucedencosas, independientemente de lo que haga el usuario de la aplicacin. O podemoscontrolar el tiempo que duran los procesos que se estn ejecutando, por ejemplo.

En este caso lo utilizaremos para limitar el tiempo de que dispone el usuario paraadivinar el nmero pensado. Cuando el tiempo se cumpla, el usuario no podr seguirintentando adivinar el nmero.

Empezamos aadiendo desde la Paleta al Visor un componente del tipo Reloj. Como elreloj es un componente no visible, aparecer fuera de la zona visible del Visor. Lollamaremos Temporizador

.



43/67


Una de las propiedades ms importantes del reloj es IntervaloDelTemporizador, quecontrola cada cunto tiempo se dispara el reloj. Se expresa en milisegundos, y suvalor inicial es 1000, o lo que es lo mismo, un segundo. Esto significa que cadasegundo el reloj dir Ha pasado una unidad de tiempo!. Si cambiamos su valor por500, por ejemplo, el reloj avisar cada medio segundo. Si ponemos 60000, entoncesnos avisar cada minuto, porque 1000 milisegundos por 60 es exactamente un minuto.

Para esta aplicacin lo definiremos con un valor de 30000, y as le daremos al jugador

la posibilidad de intentar adivinar el nmero durante treinta segundos.

Para saber cundo se cumplen los treinta segundos usaremos el bloque mostazacuando Temporizador.Temporizador ejecutar, que se encuentra dentro del cajn delreloj, en el editor de bloques. Todo lo que queramos que suceda cuando se cumplanlos treinta segundos habr que ponerlo dentro de este bloque.



44/67


Ahora pondremos los bloques para que el juego nos informe de que han transcurridolos treinta segundos a travs de un mensaje de texto. Como llegados a este punto yano vamos a utilizar ms la etiqueta E_pista, podemos reutilizarla para mostrar aljugador el texto de tiempo agotado.

Otras propuestas de mejora para la aplicacin

Siempre ser posible mejorar el juego, para hacerlo ms atractivo e interesante para eljugador. Por ejemplo, podemos hacer que el jugador slo disponga de tres intentospara adivinar el nmero. Para hacer esto tenemos que crear una variable, V_intentos,

en la que guardaremos el nmero de intentos que el usuario ha consumido.Inicialmente esta variable tendr el valor cero, para indicar que no hemos consumidoan ningn intento.

Despus, con un gran si-entonces, indicaremos qu hacer cuando an quedenintentos, y qu otra cosa cuando ya se hayan consumido todos.

Es importante que al final del proceso de preguntas se sume uno al nmero deintentos, para que se reduzcan los intentos restantes para la siguiente vuelta.



45/67


Mejoras en la interfaz de usuario

Es muy importante cuidar al mximo el interfaz de usuario de cualquier aplicacin,porque de ello depender que los potenciales usuarios la encuentren atractiva, o ladescarten y no la usen ms.

Las aplicaciones de uso complejo normalmente no son muy atractivas, as que hay queesforzarse para que el jugador pueda manejar la aplicacin con la facilidad que legustara. Tenemos que pensar qu nos gustara a nosotros que la aplicacin hiciera sifuramos el jugador, cmo nos hara ms cmodo su uso, y crear el cdigo necesariopara que la aplicacin se comporte de esa manera. Por ejemplo, es importante que eljugador slo pueda meter un nmero dentro del rango de nmeros entre los cualesest la aplicacin est pensando su nmero aleatorio.

Otra importante mejora sera poner un botn para empezar de nuevo el juego, esdecir, para que el mvil piense un nuevo nmero. En otro caso, el jugador tendra quesalir de la aplicacin y volver a entrar para que la aplicacin pensara un nuevo nmeropara jugar, y seguro que el jugador no estara dispuesto a hacer esto muchas veces.



46/67


Sesin #4

Objetivos para hoy

1. Disear y escribir un juego grfico2. Probar el juego y definir mejoras3. Descargarlo en nuestro mvil

Y para ello aprenderemos1. Uso de sprites2. Definir y configurar el escenario3. Uso del sensor Acelermetro4. Cmo definir y usar procedimientos5. Implementacin de una barra de progreso

ComponentesImageSprite y PelotaUn recurso muy importante disponible en App Inventor es el componenteSpriteImagen, que se encuentra en la paleta de diseo, dentro del cajn Dibujo yanimacin.

SpriteImagen es un componente muy interesante para crear juegos en los quequeramos incluir y manejar objetos grficos.

Pelota

es un tipo especfico dentro del conjunto SpriteImagen. La nica diferencia esque en el caso del componente Pelotano podemos cambiar su aspecto, la imagen delobjeto, que siempre ser una circunferencia. S podremos hacerlo sin embargo paracualquier otro SpriteImagen

.

En general, un sprite es una imagen en dos dimensiones, ms o menos pequea,incluida dentro de un escenario ms grande, y que ocupa un lugar en la memoriagrfica del ordenador. Se utiliza tradicionalmente para la programacin de juegos.

Ms adelante se describirn los diferentes bloques que permiten definir elcomportamiento de los sprites en App Inventor.



47/67


Este tipo de componentes deben existir siempre dentro de un componente Lienzo,que define el escenario donde se desenvuelve el sprite o sprites. Es decir, primerodebemos definir un Lienzo, y a continuacin incluiremos nuestro sprite dentro de l.

Definicin del escenario de juegoVamos a programar un nuevo juego un poco ms sofisticado, para seguir aprendiendoconceptos y componentes. Se trata de conducir una pelota a travs de un escenario dejuego para ir aplastando enemigos. Habr que gestionar el movimiento de la pelota, laubicacin de los enemigos, el marcador, la duracin del juego, etc.

Comenzaremos un nuevo proyecto y le daremos un nombre descriptivo, comoAplastabichos.

Empezaremos creando el lienzo Escenario, y dentro l incluiremos un componentePelota, que llamaremos spritePelota. De momento indicaremos en el Diseador que la

altura y la anchura del escenario se ajusten automticamente al contenedor. En cuantoa las propiedades de la pelota, definiremos que su Radioes 15, para que se veasuficientemente grande en el escenario.

Para que el escenario siempre ocupe todo el espacio de la pantalla del dispositivodebemos definir algunos bloques dentro del bloque mostazacuando.Screen1.Inicializar. Todo lo que incluyamos en este bloque se ejecutar encuanto se abra la pantalla, es decir, en este caso ser lo primero que suceda cuando seejecute la aplicacin.



48/67


Tenemos que adaptar el escenario a los lmites de la pantalla, tomando laspropiedades de ancho y largo de la pantalla de cada dispositivo. Adems, evitaremosque la pantalla rote automticamente poniendo el valor de la propiedadOrientacinDeLaPantalla a 1. Con este valor la pantalla siempre mantendr laorientacin vertical, aunque inclinemos el dispositivo. No obstante, como esto nofunciona con todos los dispositivos, en algunos casos ser necesario desactivarmanualmente la rotacin de la pantalla en el propio dispositivo.

Proporciones y lmites. Matemtica aplicadaPara disear este juego es necesario hacer algunos pequeos clculos matemticos. Engeneral, para hacer aplicaciones grficas siempre es necesario conocer algunosconceptos matemticos de los que se estudian en el colegio. Es un buen momentopara saber cul es la aplicacin de esos conceptos que pensbamos que nuncautilizaramos.



49/67


Definir el objetivo del juego

Como decamos antes, este juego consistir en ir aplastando con nuestra pelota todoslos objetos que aparezcan a lo largo y ancho del escenario. Para que la pelota ruedepor el escenario tendremos que inclinar el dispositivo. La pelota rodar siempre hacia

la parte del escenario que se encuentre ms cerca del suelo. Recogeremos cada objetocuando la pelota choque con l.

El movimiento de la pelotaEsta parte es muy importante, ya que de ella depende que el juego funcionecorrectamente y su uso sea agradable para el usuario. Aunque parezca complicado,una vez entendida la lgica, no ser difcil crear los bloques que permitan estemovimiento.

Lo primero que debemos hacer es incluir en nuestro visor un componente

Acelermetro

. Lo llamaremos

Inclinacin. Este componente no es visible, as queaparecer en la parte inferior del Visor, en la zona destinada a componentes novisibles.

Ahora utilizaremos el bloque cuando.Inclinacin.CambioEnAceleracin para mover lapelota. Este bloque incluye tres variables, cada una de las cuales almacena lainclinacin del objeto en uno de los ejes de coordenadas. Vamos a hacer que la pelotatenga una direccin dependiendo de los valores de estas tres variables.

Como vimos en la sesin anterior, es conveniente utilizar chivatos durante la fase deprogramacin de nuestras aplicaciones. En este caso mostraremos en pantalla elcontenido de estas variables, para conocer cmo estn funcionando.

Para ello reduciremos un poco el tamao del escenario, y colocaremos debajo trescampos Etiqueta para mostrar el valor de las variables.



50/67


Como la definicin de las dimensiones del escenario se hace dentro delcuando.Screen1. Inicializar, y este slo se ejecuta al abrir la aplicacin, tendremos quehacer varias pruebas conectando y desconectando el dispositivo a App Inventor hastaencontrar las dimensiones ms apropiadas. En nuestro caso hemos reducido la altura

del escenario en 150 unidades, para dar espacio suficiente a la tabla, y a otros objetosque aadiremos ms adelante.

Facilitaremos la disposicin de la informacin usando un componenteDisposicinTabular del cajn Disposicin de la Paleta de componentes. Comoqueremos mostrar los datos de tres etiquetas con sus tres valores correspondientes,tendremos que indicar que la DisposicinTabulartenga dos Columnascon tresRegistros.

Dentro de la tabla, en la columna de izquierda, colocaremos tres etiquetas con ladescripcin de cada campo, E_nombre_acelX, E_nombre_acelYy E_nombre_acelZ. Enla columna de la derecha pondremos tres etiquetas E_valor_acelX, E_valor_acelYyE_valor_acelZ

, para mostrar las variables cuyo valor queremos conocer.



51/67


Ya podemos indicarle al programa que muestre los valores de las tres variables dentrode las etiquetas que hemos creado. Recordemos que podemos duplicar bloques ymodificarlos cuando vamos a crear varias instrucciones similares.

El dispositivo siempre sabe cul es la aceleracin en cualquiera de los tres ejes. Parasaberlo nosotros y utilizarlo en nuestro juego tenemos que utilizar el bloque mostazacuando.Inclinacin.CambioEnAceleracin. Para conocer la aceleracin en el eje X, porejemplo, tenemos que dejar el puntero del ratn inmvil durante un segundo sobre elcampo xAccelcolor naranja que hay dentro del bloque mostaza. Una vez aparezcan lasopciones tomary ponerpara esa variable, podremos arrastrar el bloque tomar hastael hueco disponible a la derecha del bloque color verde oscuro correspondiente.

Es buen momento para experimentar qu sucede con cada una de las variables cuandoinclinamos el dispositivo. Podemos invertir un poco de tiempo probando, hasta queentendamos cmo afecta la inclinacin a cada una de estas variables. Veremos quepara la Y los valores comprendern de -10 (cuando el dispositivo est vertical yapuntando hacia el suelo) a 10 (cuando el dispositivo est vertical, y hacia arriba). Parala X, los valores comprendern tambin entre 10 (cuando est completamente



52/67


inclinado con la pantalla hacia la izquierda) y -10 cuando est completamente inclinadocon la pantalla hacia la derecha).

En cuanto a la Z, inicialmente sin uso en este juego, ir de 10 (cuando el dispositivotiene la pantalla hacia arriba) a -10 (cuando el dispositivo tenga la pantalla hacia abajo,

paralela al suelo).

Una vez est claro qu sucede cuando inclinamos el dispositivo, es hora de programarel comportamiento de la pelota. Tendr que moverse en la direccin en que inclinemosel dispositivo. Cmo? Una pista: hay que utilizar el mismo bloque mostaza del sensorde inclinacin que hemos usado antes.

Dentro del mismo bloque mostaza que detecta la variacin del sensor de inclinacinincluiremos el movimiento de la pelota. Para ello usaremos el bloque violetallamar.spritePelota.MoverA, que sirve para colocar el objeto en cualquier punto delescenario que queramos. Este bloque acepta dos parmetros de entrada, X e Y, quedefinen las coordenadas donde se colocar la esquina superior izquierda del sprite dela pelota. Haremos que la coordenada X y la coordenada Y de la pelota que definen sucolocacin en el escenario vayan variando cuando inclinemos el dispositivo encualquiera de los dos ejes, o en los dos al mismo tiempo. Lo haremos simplementesumando el valor de la variable xAccelal valor de la coordenada X actual de la pelota, ysumando yAccelal valor de la coordenada Y. Los bloques de color verde claro estndentro del cajn de propiedades de spritePelota.

Cuando hagamos esto veremos que el comportamiento vertical, el de la coordenada Y,

ser el esperado, es decir, que la pelota caer hacia nosotros cuando inclinemos eldispositivo hacia nuestro lado, y se alejar de nosotros cuando inclinemos el mvil enla direccin contraria. Sin embargo, cuando inclinemos el dispositivo hacia la derecha,en el eje X, la pelota caer hacia la izquierda, y viceversa. Para solucionar esteproblema, y adaptar el funcionamiento al comportamiento natural de una pelota,tendremos que modificar el bloque que indica el posicionamiento en la componente Xde la coordenada. En lugar de sumarle el valor de xAccelle sumaremos el valor derestar xAccel a 1.



53/67


Ya est listo. Para la coordenada Y utilizaremos el bloque de sumar, y dependiendo desi yAcceltiene un valor positivo o negativo la pelota se mover en una direccin u otra,porque sumar un nmero negativo es lo mismo que restar. En el caso de X tendremosque aadir un bloque de resta para corregir el comportamiento contrario, perobsicamente la lgica es la misma que con la Y.

Las matemticas funcionan, y tienen aplicacin en la vida real!

Veremos tambin que la velocidad a la que se mueve la pelota es mayor si inclinamosmucho el dispositivo. Esto es debido a que el valor de xAccele yAccelque estamossumndole a la posicin de la pelota tambin es mayor o menor en funcin de cuntoinclinamos el dispositivo.

Tommonos un tiempo para asimilar estos ltimos prrafos porque no son sencillos deentender, y hagamos las pruebas que se nos ocurran, modificando el cdigo que

hemos generado para que el programa haga cualquier otra cosa que queramos.

Crear los bichos a aplastar

A continuacin hay que crear cada objeto que vaya a aparecer en el escenario.Tendremos que almacenar la posicin de todos y cada uno de ellos, ya que son objetosdistintos entre s, para que la aplicacin sepa cundo la pelota est en contacto conalguno, y el juego acte en consecuencia.

Para empezar habr que dibujar el sprite que queremos utilizar en el juego pararepresentar al bicho que queremos aplastar. En nuestro caso usaremos el pequeo

sprite de 30x30 pixels Sprite_objeto_1.jpg, que nosotros mismos hemos creado, yque podemos encontrar en http://coderojo-medialabprado.4shared.com

A continuacin, y desde la ventana del Diseador, incluiremos en nuestro escenariocinco objetos SpriteImageniguales. Le daremos un nombre diferente a cada uno, y atodos le asignaremos el aspecto de nuestro sprite. Podemos llamarles

Sprite_enemigo_1 a Sprite_enemigo_5.

http://coderojo-medialabprado.4shared.com/http://coderojo-medialabprado.4shared.com/http://coderojo-medialabprado.4shared.com/http://coderojo-medialabprado.4shared.com/http://coderojo-medialabprado.4shared.com/http://coderojo-medialabprado.4shared.com/


54/67


Manejo de los enemigosUna vez creados los cinco objetos tenemos que colocarlos en el escenario. Lo haremoscon el bloque llamar.Sprite_enemigo_1.MoverA. Especificaremos para cada objetouna posicin aleatoria. Con los bloques azules entero aleatorio entre definiremos enqu coordenada X aparecer la esquina superior del sprite dentro del escenario.Especificaremos un 0 para indicar que el objeto puede aparecer desde el margen

izquierdo del escenario. A continuacin le diremos con el bloque verdeEscenario.Ancho que el lmite mximo es el lmite derecho del escenario. Pero,atencin, si el bloque azul entero aleatorio entre nos devolviera precisamente un valorde X muy cercano al lmite derecho la mayor parte del enemigo sobrepasara el lmitederecho del escenario, y no sera visible. Para solucionar esto se resta aEscenario.Anchoel ancho del sprite del enemigo, Sprite_enemigo_1.Ancho.

Haremos lo mismo con la coordenada vertical Y, y repetiremos los mismos bloquescinco veces, porque hay cinco objetos iguales.



55/67


Procedimiento para tareas definidas y repetitivas

Cada vez que el juego se reinicie tendremos que colocar los objetos en el escenario, ydeberemos volver a usar todos estos bloques, as que lo mejor, para no tener queescribir el mismo cdigo varias veces cuando es tan grande, ser definir unprocedimiento, donde incluiremos todos los bloques que sirven para colocar los

objetos.

Un procedimiento es un conjunto de pasos bien definidos para ejecutar una tareaconcreta que debe ser ejecutada muchas veces. Por ejemplo, para describir una tareade nuestra vida diaria, como lavarnos las manos, podemos definir un procedimientoque incluya los siguientes pasos:

1. Abrir el grifo2. Mojar las manos3. Poner jabn

4. Frotar manos5. Aclarar6. Cerrar el grifo7. Secar las manos con la toalla

Estos pasos podran incluirse dentro de un procedimiento llamado Lavar manos. Yano tendramos que enumerar cada uno de los siete pasos, sino referirnos alprocedimiento por su nombre.

Los procedimientos son muy importantes, porque permiten organizar mejor el cdigo yahorrar esfuerzo a la hora de programar. En nuestro caso, podremos invocar en

cualquier momento al procedimiento para hacer que la aplicacin vuelva a colocar losobjetos aleatoriamente en el escenario.



56/67


El bloque para definir procedimientos se encuentra dentro del cajn Procedures.

Una vez definido el procedimiento, y modificado su nombre, los bloques quedarn as.

En este caso haremos que se ejecute el procedimiento dentro del bloquecuando.Screen1.Inicializar ejecutar.



57/67


Implementar la mecnica del juegoEl jugador deber inclinar el dispositivo para guiar a la pelota hacia cada uno de losobjetos y chocar con ellos. Cada vez que eso suceda deberemos retirar el objeto delescenario. El juego acabar cuando el jugador haya hecho desaparecer todos los

objetos.

Para saber cundo la pelota choca con un objeto utilizaremos el bloque cuandospritePelota.EnColisinCon otro ejecutar. Este boque est dentro del cajn derecursos relacionados con el objeto spritePelota.

Lo que pongamos dentro de este bloque se ejecutar exactamente cuando eso suceda.En este caso, lo que queremos es que desaparezca el objeto contra el que ha chocadola pelota. Podremos hacer referencia a este objeto a travs del parmetro otroincluidoen el bloque cuando spritePelota.EnColisinCon otro ejecutarque hemos definido.

Ahora vamos a utilizar un nuevo tipo de recurso, un bloque que no habamos usado

todava. Este bloque se encuentra dentro del cajn

Cualquier componente /CualquierSpriteImagen. La diferencia entre este cajn y los que hemos abierto anteses que los bloques contenidos aqu nos permitirn definir acciones que harnreferencia a diferentes objetos del mismo tipo. En este caso har referencia a objetosdel tipo SpriteImagen, como son nuestros cinco enemigos.

Lo que vamos a hacer es indicarle al programa que debe hacer desaparecer de lapantalla cada objeto cuando la pelota choca con l. Para no tener que repetir el cdigopara cada objeto, usaremos el bloque genrico poner SpriteImagen.Visible delcomponente como. Este bloque nos permitir cambian el valor de la propiedad Visible

de cualquier componente del tipo

SpriteImagen, que especificaremos en el hueco

delcomponente.



58/67


Usaremos el parmetro otrodel bloque mostaza que hemos aadido antes paraindicar a qu objeto concreto queremos referirnos, y estableceremos a falso el valorde la propiedad Visibledel objeto, para que desaparezca del escenario.

Muchas propiedades de los objetos tienen dos posibles valores, ciertoo falso.Podemos definir el valor para este tipo de variables tomndolo del cajn Lgica.



59/67


El bloque completo que define el comportamiento de cada objeto cuando la pelotachoca con l quedar como en la siguiente figura.

Gestin del marcador

Tenemos tambin que mantener un contador de objetos restantes, para saber cundose han recogido todos y dar por completada la misin. Para ello usaremos dos

variables,

v_objetos_totales, y

v_objetos_restantes. La primera define el nmero deobjetos que vamos a manejar en cada partida, y la segunda define el nmero deobjetos que quedan por hacer desaparecer. Como siempre, par indicar que estamosdefiniendo una variable, y que luego sea ms fcil identificarla como tal,comenzaremos los nombres con el prefijo v_.

Cada vez que la pelota choque con un objeto, tendremos que restar

1

al nmero deobjetos restantes. Cuando la variable v_objetos_restantessea 0, significar que eljugador ha recogido todos los objetos, y el juego habr terminado.



60/67


Podemos aadir un chivato debajo del escenario para saber cul es el contenido de lavariable v_objetos_restantes. As sabremos si nuestro juego est gestionandocorrectamente esta variable tan importante.

Tenemos que acordarnos de eliminar cualquier chivato que hayamos utilizado antes dehacer la versin final del programa.

Reorganizando los bloques de cdigo

Cuando una aplicacin est empezando a crecer, como la nuestra, conviene mirarla unpoco desde lejos y pensar de qu manera podemos hacer que sea ms fcil demanejar, cmo organizarla mejor. As pues, para facilitar el mantenimiento de nuestroprograma, y su lectura, vamos a definir dos procedimientos: Iniciar_juego yFin_del_juego. Para ellos abriremos el cajn Procedimientoy arrastraremos dos vecesel bloque como procedimiento ejecutar.

Nombraremos los nuevos bloques quedarn de la siguiente manera.



61/67


En el primero de ellos tendremos que reubicar los objetos, y reiniciar todas lasvariables que tiene que manejar el juego. Es decir, dejar las cosas listas para empezar ajugar.

Vemos que el procedimiento Fin_del_juego an est vaco, pero ya sabemos queincluiremos en l los bloques que debern ejecutarse cuando el juego termine.

Habr que hacer una llamada al procedimiento Iniciar_juego dentro del bloqueccuando Screen1.Inicializar ejecutar, que ahora quedar as.

Limitar el tiempo para crear tensin

Para dar mayor inters al juego usaremos un temporizador, un componente Reloj, quelimitar el tiempo que tiene el jugador para aplastar a los enemigos. Cuando el tiempotermine, el jugador no podr eliminar ms objetos.

Tenemos que empezar por crear un objeto Relojen el Diseador. El componente Relojse encuentra dentro del cajn Sensores. Le daremos el nombre Cada_Segundo. Sepretende conocer cundo pasa cada segundo, as que su propiedadIntervaloDelTemporizadorcontendr el valor 1000 (1000 milisegundos es igual a 1

segundo).



62/67


La idea es mostrar siempre en la pantalla el nmero de segundos restantes, y para esonecesitamos restar un segundo cada vez respecto de la cantidad que queda disponible.As pues, definiremos el nmero de segundos disponibles con la variablev_segundos_restantes, y le daremos el valor inicial 30.

En el bloque

cuando.Cada_segundo.Temporizador ejecutar indicaremos que reste 1 ala variable v_segundos_restantes, y que lo muestre en un nuevo objeto de tipoEtiqueta que llamaremos E_segundos_restantes.

Con estos componentes que hemos definido controlaremos el tiempo de juego.

Cundo termina el juego?

Cuando esta variable v_segundos_restantes alcance el valor 0 (cero) la partida habrterminado, porque ya no habr segundos restantes. Podemos implementar estacomprobacin aadiendo un bloque mostaza si-entonces dentro del bloquecuando.Cada_segundo.Temporizador ejecutar. Cuando se cumpla la condicin delsi-entonces habr llegado el momento de hacer una llamada al procedimiento

Fin_del_juego

.

En qu otro caso deber considerarse el juego terminado? Claro, el juego tambindeber terminar cuando no queden ms objetos por recoger. Lo indicaremos con unbloque si-entonces dentro del bloque cuando.spritePelota.EnColisinCon.ejecutar.



63/67


Fin del juego

Tenemos entonces que definir qu hacer cuando el juego termine. Una opcin sencillay clara puede ser informar al usuario a travs de un texto, y tal vez un sonido.

Por ejemplo, podemos escribir el texto Fin del juego en la etiquetaE_segundos_restantes. Para ello abriremos el cajn Texto del editor de bloques, yarrastraremos el componente de texto vaco al hueco verde que asigna un valor altexto de la etiqueta E_segundos_restantes.

Haciendo clic entre las comillas podremos definir el texto que se mostrar.



64/67


Extraamente, ese texto no aparece por mucho tiempo en la pantalla. Por qu?

Si ponemos mucha atencin veremos que el texto aparece, pero slo durante unsegundo. Esto se debe a que el programa comprueba en el bloquecuando.Cada_segundo.Temporizador ejecutar si la variable Segundos_totales vale 0,

pero esto slo se cumple durante un segundo, porque el tiempo sigue contando, asque rpidamente el valor de v_segundos_restantes pasa a ser -1, que es el valor quese obtiene cuando a 0 le restamos 1. El programa sigue ejecutndose, y en la siguienteejecucin del bloque cuando.Cada_segundo.Temporizador ejecutar volver a escribirel valor del contador de segundos encima del texto.

Congelando el tiempo

Para evitar esto tenemos que hacer que Cada_segundodeje de contar, es decir, que elbloque cuando.Cada_segundo.Temporizador ejecutar deje de ejecutarse. Esto seconsigue dndole el valor falso a la propiedad TemporizadorHabilitado del

componente Cada_segundo

.

Pero atencin, si queremos que el programa funcione correctamente la prxima vez, yejecute el contenido de cuando.Cada_segundo.Temporizador ejecutar, tendremos

que poner el valor de esa propiedad como

cierto

en el procedimiento

Iniciar_juego

.Adems antes deberemos restablecer el nmero de segundos restantes a 30, su valorinicial. En caso de olvidarnos de dar a nuestro programa alguna de estas dosinstrucciones, el juego se ejecutara para siempre.

Aadir un botn para empezar de nuevoBueno, casi est todo, pero no podemos olvidar incluir un botn Reiniciar para que eljuego comience de nuevo una vez terminado.


7/25/2019 895666Guia In

895666Guia Iniciacion App Inventor

Documents

Transcript of 895666Guia Iniciacion App Inventor