Colección de Juegos Vamos a crear una aplicación que contenga un par de juegos diferentes. Empecemos con dos juegos diferentes: Pong y Pintar. Para tener dos juegos diferentes unificados en una aplicación, vamos a necesitar por lo menos tres ventanas. Podríamos tener más, dependiendo de cómo diseñemos nuestra aplicación. Puedes añadir una nueva pantalla usando el botón que dice “Añadir ventana” 

 

NOTA: La Screen1 que se crea automáticamente desde el principio, siempre será la primer ventana que aparezca cuando tu aplicación ya terminada se abra. Primero diseña tu ventana inicial. 

Pantalla Inicial

     

¿Qué necesitamos poner en la pantalla principal? Antes de siquiera preguntarnos esto, deberíamos pensar acerca de cuál es el objetivo que debería tener esta pantalla. Uno de sus principales propósitos es el de navegar entre los diferentes juegos que tienes. ¿Cuáles son los demás propósitos de esta pantalla? ______________________________________________________________________________ ______________________________________________________________________________  ¿Qué componentes pondrás a la pantalla inicial para poder navegar entre tus juegos? (Pista: Piensa sobre cómo se navega entre pantallas en otras aplicaciones que conoces) ______________________________________________________________________________ ______________________________________________________________________________ 

Pong - Tu primer juego

Para empezar - ¿Qué es el juego de pong?  

Para aquellos que no lo conocen, pong es un juego de tenis de mesa virtual (ping pong). Hay una “paleta” en cada lado de la pantalla y un “balón” como el que se muestra en la imagen de arriba. El objetivo es ganar regresando el balón al oponente de tal forma que se le pase.  

¿Cómo queremos nosotras que funcione el juego?  Antes de empezar a programar cualquier parte del juego, necesitamos definir cómo queremos que funcione, esto se conoce como crear un “spec”. El spec es la lista de todos los componentes y las propiedades que tendrá el juego para cumplir el objetivo que acabamos de describir. Pensemos sobre iniciar el juego, jugarlo y terminarlo.  

El juego puede iniciar de diferentes maneras: ● El usuario da click en una notificación y después comienza el juego. ● El balón se empieza a mover inmediatamente cuando el juego se abre. ● El usuario arroja el balón para iniciar el juego. 

 Este tutorial te guiará a través de la primera opción (la notificación), pero te recomendamos investigar las otras opciones una vez que termines este tutorial.  Siguiente, ¿cómo se jugará el juego? 

1. Los jugadores podrán mover de arriba a abajo sus paletas para evitar que el balón entre por el lado izquierdo o derecho de la pantalla. 

2. El balón rebotara cuando pegue en el marco superior o inferior de la ventana. 3. El balón rebotara cuando pegue con una de las paletas. 4. El balón se detendrá cuando pegue en el lado izquierdo o derecho de la ventana. 

 Finalmente, cuando un jugador pierta ¿cómo funcionará el juego? Otra vez, hay algunas opciones diferentes: 

● El juego va a mostrar una notificación diciendo quién ganó y quién perdió el juego. ● Se va a poner reiniciar el juego. ● Ambas opciones descritas arriba. 

  Ahora que sabemos cómo debe funcionar el juego, necesitamos explorar los componentes que necesitamos. 

➔ Notificador ➔ Pelota ➔ Lienzo ➔ SpriteImagen 

Componente Notificador  El componente Notificador le permite a la aplicación mandar alertas al usuario mientras está usando la aplicación. ¿Cómo se podría usar el notificador en la aplicación? ___________________________________________________ ___________________________________________________           

Componente Lienzo El Lienzo es el componente en el cual una spriteImagen puede ser movida o también el usuario puede dibujar. ¿Cómo piensas que usaremos el lienzo para esto? ___________________________________________________ ___________________________________________________ Componente SpriteImagen SpriteImagen son imágenes que se ponen en el lienzo que se pueden mover y con las cuales el usuario puede interactuar. Puedes cargar en tu aplicación las imágenes que quieres usar como sprites. ¿Para qué más podremos usar este componente? ___________________________________________________ ___________________________________________________   

Puedes crear tu propia imagen de paletas, para ser usadas en el juego de pong, dibujando un simple rectángulo y guardandolo como imagen (como el que se muestra a continuación). Cualquier procesador de texto en tu computadora te permitirá hacer esto. 

 Buenas prácticas de programación Como regla general, es bueno siempre ponerles un nombre significativo a tus componentes, de tal forma que si observamos la lista de tus componentes puedas inmediatamente decir cuál es la función de cada uno de ellos.  Quieres asegurarte de dejar suficientes “pistas” para que tú o alguien más pueda regresar a tu código y logre entender qué está pasando de una manera fácil. A esto se lo conoce como “nombramiento descriptivo”. El nombre del componente debe reflejar su función o su propósito. Puedes seleccionar un componente dentro del panel de componentes (a la derecha de la vista) y después hacer clic en el botón de  “Cambiar nombre”, en la parte inferior, para asegurar que el componente sea nombrado descriptivamente.   Dado todo lo que hemos visto hasta ahora, vamos a construir nuestra pantalla de pong. Acá está la imagen de ejemplo otra vez. No te preocupes mucho de acomodar las paletas y la pelota en el mismo lugar. Podemos acomodar esto en los bloques después.  Empecemos por poner el lienzo en la pantalla. Asegúrate de hacer esto antes de poner la spriteImagen, este componente solo funciona dentro del lienzo. 

  Debes tener los mismos componentes en tu pantalla como los que se muestran en la imagen de abajo. ¿Puedes encontrar dónde se puede subir la imagen de la paleta en la imagen de abajo? ¿Y dónde cambiar la orientación de la pantalla? Además, verás que hay una opción de “enrollable” en el área de propiedades. Es ideal hacer clic en el pequeño “check mark” para que la pantalla NO haga “scroll”  

 ¿Cómo puedes hacer que el lienzo entre en toda la pantalla? En la parte inferior de las propiedades del lienzo, hay unos campos de ancho y alto. Puedes cambiar estos a “Ajustar al contenedor”. El “padre” del lienzo es la pantalla de Pong, lo sabes porque está enlistado debajo de Pong en la sección de “Componentes”. Así que, cuando decimos “Ajustar al contenedor”, se entiende que queremos que la altura y el ancho se expandan para llenar a su contenedor padre, es decir el de la pantalla Pong. 

 Construyendo tus bloques Después de “jalar” todos tus componentes y subir la imagen de tus paletas, tu pantalla debe verse similar a esta. 

 

¿Cómo movemos nuestras paletas a la posición inicial adecuada? Exploremos un poco los bloques disponibles para la pantalla. 

Cambia a la vista de bloques y selecciona tu pantalla dentro del área de bloques a tu izquierda.   El bloque “cuando Pong.Inicializar” es útil para nosotros. Podemos usarlo para cambiar las propiedades cuando la pantalla se inicie. Mueve este bloque al visor.  Nota que este bloque es color mostaza/café ­ al igual que “cuando Botón.click” Esto es un indicador de que este bloque también es un manejador de eventos. Como resultado, cuando la pantalla se inicialice, todo dentro del bloque manejador de eventos será ejecutado.  

  ¿Cómo lo usamos para cambiar la posición de las paletas? Exploremos dentro de las propiedades de los sprites de las paletas. Seleccionemos una de las paletas en el editor de bloques y hagamos scroll hasta llegar al final de la lista de bloques. A nuestra derecha, vemos bloques para poner la posición en X y Y del sprite de la paleta. 

 Si tú no ves los bloques uno de los bloques azules después de elegir uno de las spirtes de paleta, recuerda que hay una barra de scroll a la derecha del áreaverde. Da Clic y sujeta este para moverte de arriba a abajo, para poder ver todos los componentes disponibles.  X y Y son las coordenadas con respecto a la esquina superior izquierda donde se pondrá la imagen de sprite en la pantalla. Aquí está como las coordenadas de X y Y están mapeadas en la pantalla. 

      

Dado esto, queremos que las paletas estén en alguno de los lados de la pantalla, ¿cuál queremos que sea el valor de X para cada una de las paletas? (Pista: Puedes obtener el valor más grande de X y Y posible usando las propiedades de Alto y Ancho de la ventana, y la X y Y toman como punto de referencia la esquina superior izquierda de la imagen del sprite para ubicarlo).  Paleta Izquierda: ____________________  Paleta Derecha:  ____________________  ¿Y la coordenada en Y? ¿Qué valor debe tomar? __________________________________ __________________________________  Debemos tener algo como lo siguiente: 

 ¡Probemos! Prueba tu aplicación, podrás ver si las paletas están acomodadas en algún lado de la pantalla. Incluso si esa posición es en la que las pusiste en tu diseño inicial.   

Agregando movimiento a las paletas Primero necesitamos definir cómo queremos que se muevan nuestras paletas. 

­ Las paletas se deben mover arriba y abajo cuando es sujetado con el dedo. ­ Las paletas deben mantenerse alineadas en cada uno de sus lados (la paleta izquierda debe 

mantenerse en la orilla izquierda de la pantalla, la paleta derecha debe mantenerse en el lado derecho de la pantalla) 

­ Las paletas no deben salirse de la pantalla. Vamos a explorar un poco lo que hacen nuestros bloques de spirtes. Observemos los bloques de PaletaIzquierdaSpirte, existe un bloque “ cuándo PaletaIzquierdaSprite. Arrastrado” que es un manejador de eventos. Esto es precisamente lo que estábamos buscando. “XInicial” y “YInicial” van a tener los valores de X y Y para donde tus dedos tocaron inicialmente la pantalla durante el evento de arrastrado, a su vez “XActual” y “YActual” contienen el valor de X y Y para donde tus dedos 

terminan durante el evento de arrastrado. Toma este evento. Si sostienes el ratón sobre alguna de estas pequeñas cajas naranjas, sin darle clic, dos bloques aparecerán: un bloque de “tomar” y otro de “poner”. Recuerda que un bloque de “tomar” te permitirá usar el valor del bloque 

mencionado.  Mirando otra vez los bloques de la PaletaIzquierdaSprite, encontraremos un procedimiento llamado “llamar PaletaIzquierdaSprite. MoverA”  

 Recuerda, X y Y tienen como punto de referencia la esquina superior izquierda del contenedor.  En ese caso, el máximo valor de Y (valor vertical) que cualquiera de las paletas pueden tener es  la altura de la pantalla menos la altura de la paleta.  

 De esta manera, si el usuario toma la paleta más allá del valor máximo, no queremos que el sprite de la paleta siga moviéndose hacia afuera de la pantalla. Revisemos. Estos son los dos bloques que hemos descubierto hasta ahora. Necesitamos más bloques que estos dos dado que tenemos una “condición” que satisfacer”. Necesitamos evitar que las paletas desaparezcan de la pantalla. Poniendo la condición de la paleta  SI la posición actual de Y del dedo es mayor que (altura de la pantalla menos altura de la paleta)  ENTONCES la paleta debe moverse hacia (altura de la pantalla menos altura de la paleta) para Y y mantenerse en la posición inicial de X.  SI NO la paleta se debe mover hacia (la posición actual de Y) y mantenerse igual en X. 

¿Cómo hacemos esto usando los bloques? Veamos los bloques de “Control”. Estos son bloques que nos ayudarán a obtener ciertos comportamientos generales (no específicos para un componente).  

Existe un bloque que se usa para el “si” y “entonces” que acabamos de describir arriba, pero ¿qué pasa con el “si no”? Tomemos este bloque y veamos. Hay un punto azul en la esquina superior izquierda de este bloque.     

 Demos clic en esta opción y aparecerá otra opción, así como en  la imagen de la derecha.  Demos click y tomemos ese “si no” dentro de nuestra baja.  ¿Cómo se ve ahora este bloque? 

  Ahora que hemos aprendido a usar nuestro bloque “si­entonces­si no”, ¿cómo nos podrá ayudar? Empecemos a construir nuestro algoritmo.  SI el valor actual de Y de los dedos es mayor que mi altura máxima ENTONCES la paleta debe moverse hacia mi valor máximo para Y y mantenerse en “5” para X SI NO la paleta debe moverse hacia el valor actual de Y y X debe permanecer en “5”  En ambos casos queremos que nuestra paleta se mueva a una posición. “Vamos llenando lo que queremos” 

 ¿Qué bloque necesitamos para poder completar la condición de SI en la parte de arriba? Ya sabemos como obtener la posición actual de Y. ¿Sabes dónde encontrar el operador para saber si algo es mayor que otro número? Estas son funciones matemáticas, así que debemos buscarlas en los bloques de Matemáticas. Dentro de “Matemáticas” existe un bloque que nos permite ver si dos bloques son iguales. Esto no es exactamente lo que estamos buscando, pero podemos observar que hay una flechita en ese bloque. Vamos a tomar ese bloque y ver qué opciones se muestran en esa flecha.  

 ¿Qué es lo que descubriste al darle clic a esa flecha? ____________________________________________________________________________________________  Una vez que hayas acomodado todo, deberá verse similar a lo siguiente. 

  

¡Probemos! ¿Tu paleta izquierda se mueve a la izquierda y a la derecha con tu dedo? Ahora que hemos completado los bloques para mover la paleta izquierda juntos. Haz lo necesario para tener la misma funcionalidad en la paleta derecha. (Pista: Debe ser muy similar al de la paleta izquierda con solo algunas diferencias)   

Agregando el Notificador Ahora que tenemos las paletas y la pelota en su lugar, ¿cómo podemos hacer que la pelota se empiece a mover? Aquí es donde usamos al notificador. El notificador puede mostrar alertas y mensajes al usuario cuando está dentro de la aplicación, además, puede aceptar respuestas del usuario. Aquí está una imagen de cómo el notificador podría verse. 

 En este caso cuando el usuario le de clic a “Si” el juego inicia. Selecciona el notificador en el editor de bloques. Veamos cómo obtener una imagen como la que se muestra arriba. 

 Viendo los bloques disponibles para el notificador, vemos que hay uno llamado “llamar Notificador2.MostrarDiálogoElección”. Este bloque toma diferentes valores de ingreso: mensaje, título, textoBoton1, textoBoton2 y cancelar. Los primeros cuatro valores de entrada aceptan texto, y la última toma valores de cierto o falso. 

¿Dónde debe ponerse este componente? (Pista: Este es un bloque de procedimiento y este necesita ser puesto en un bloque manejador de eventos) 

¡Probemos! El bloque de inicio debería verse similar a la imagen a continuación. Configura los mensajes para que quede como te gustaría.    

 ¿Qué sucede si le das clic al botón del diálogo de notificación? ¿Qué queremos que suceda? Idealmente, el juego debería empezar después de presionar el botón de “Si”. En este caso, exploremos los bloques disponibles para el notificador. El evento que sucede después de que el usuario presiona una opción se llama “DespuésDeSelección”. Podemos usar ese bloque para hacer que el juego comience después de que el usuario haya elegido una opción de la caja de notificación.           

 ¿Cómo podemos hacer que la pelota se empiece a mover? Veamos los atributos que tiene la pelota. Selecciona la pelota en los bloques y haz scroll hacia abajo. La pelota tiene las propiedades de “dirección” y “velocidad”. La velocidad describe qué tan rápido puede ir la pelota en la pantalla, y la dirección se refiere a la orientación en la que la pelota viajará. 

Ahora tienes un manejador de eventos (Notificador1.DespuésDeSelección) y dos procedimientos de “poner”. ¿Cómo ponemos ambos juntos?    Deberías tener algo que se vea cómo la imagen de la derecha. ¿En qué valor queremos poner la velocidad y la dirección? Ambas entradas aceptan solo números. Juega un poco con los valores y pruébalo. (Pista: Para dirección prueba con 0, 90 180 y 270. ¿Cómo es el comportamiento?)   

Haciendo rebotar la pelota ¿Qué ocurre cuando la pelota llega al borde de la pantalla? Queremos que la pelota tenga un movimiento natural y rebote cuando llega al borde de la pantalla. Veamos otra vez las opciones que tiene la pelota.  Existe un manejador de eventos para “TocarBorde” y un procedimiento para rebotar la pelota. 

 En el evento de “TocarBorde”, vemos “borde” en una caja color naranja claro. Esto nos dirá cuál borde ha alcanzado la pelota. Si sostienes el mouse encima (sin hacer clic) un “tomar” y “poner” se muestra. Selecciona “tomar borde”.   

  

“Borde” puede tomar los siguientes valores  1  > Parte superior de la ventana  3  > Parte derecha de la ventana ­1  > Parte inferior de la ventana ­3  > Parte izquierda de la ventana     

       Ahora que conoces estos tres bloques, ¿cómo pones todo junto? 

¡Probemos! Recuerda probar tu aplicación frecuentemente y guardarla seguido. Revisemos que la pelota rebote en los bordes con nuestro nuevo código.    

Deteniendo la pelota cuando ha alcanzado el lado izquierdo o derecho ¿Qué es lo que notaste que ocurre cuando la pelota llega al lado izquierdo o derecho? ¿Qué queremos que ocurra? Queremos que la pelota se detenga cuando esto suceda pues significa que el jugador ha perdido. ¿Cómo especificamos esto?  Entendamos bien esto primero.  ¿Qué información se nos proporciona cuando el evento de “tocar borde” ocurre?__________________________  Recuerda, los siguientes valores nos dicen a qué borde ha llegado la pelota.  1  > Parte superior de la ventana  3  > Parte derecha de la ventana ­1  > Parte inferior de la ventana ­3  > Parte izquierda de la ventana  Dado que podemos saber qué borde ha tocado la pelota, ¡podemos modificar el comportamiento dependiendo del borde!  Queremos decir: SI el borde es el derecho o izquierdo ENTONCES la pelota se debería parar SI NO la pelota debe rebotar   Podemos cambiar la parte del SI por si siguiente SI el borde es “3” o es “­3”   

 Ya hemos identificado el bloque “si ­  entonces ­ si no” antes para las paletas, ahora tenemos que usarlo otra vez. Usando estos bloques ¿cómo podemos construir los pasos de arriba? (Pista: O también es un bloque de lógica) 

  Ya habíamos logrado hacer que la pelota rebotara. Pero cuando la pelota toca el borde derecho o izquierdo de la ventana, entonces la pelota deberá parar. Entonces, ¿qué valor debe tomar la velocidad? y ¿cómo cambiamos la velocidad a ese valor? (Pista: Observa cómo hicimos que la pelota empezara a moverse después del mensaje de notificación) 

¡Probemos! Ahora que has puesto todos los bloques, prueba. Recuerda que es una buena práctica de programación guardar y probar continuamente. ¿La pelota ahora se detiene cuando llega a los lados?   

 

Rebotar las pelotas de las paletas Por último, necesitamos hacer que las pelotas reboten cuando tocan las paletas. Los sprites tienen eventos para cuando colisionan con otros sprites. 

Cuando la pelota colisiona con una paleta, podemos manejarlo como un rebote de la pared en el mismo lado de la paleta.   Recuerda lo siguiente:   3  > Parte derecha de la ventana  ­3  > Parte izquierda de la ventana      

¿A qué se refiere con “otro”? Nos dice contra qué otro sprite ha colisionado la pelota cuando entró a este evento.  ¿Cuáles son los otros dos posibles sprites con los que podría colisionar la pelota? (Pista: Solo hay otros dos sprites en la pantalla)  Dado que hay otras dos opciones a considerar, necesitamos usar un “si, entonces, si no” para obtener el comportamiento de ambas colisiones.  

Así que, ¿cómo especificamos la paleta? Veamos los bloques que tiene la paleta.  Si hacemos scroll por toda la pantalla hasta el final, después de haber seleccionado una de las paletas, existe un bloque que solo describe el sprite, no ninguna de sus propiedades.           

 Ya hemos explorado todos los bloques que necesitamos para hacer la pelota rebotar de las paletas. ¡Pongámoslo junto! ¿Cómo podemos hacer la pelota rebotar usando los siguientes bloques? 

 ¡Probemos!      

Ahora, ¿cómo reiniciamos el juego? Piensa un poco sobre qué componentes hemos usado. ¿Podemos volver a usar alguno? (Pista: Piensa sobre cómo iniciamos el juego)   Reto adicional: ¿Cómo podemos hacer diferentes niveles en el juego?  

Juego 2: Pintar Para el segundo juego, hagamos una aplicación para colorear. Si todavía no tienes una pantalla de Pintar, adelante y crea una. A esta altura, deberías ser capaz de navegar en este juego por tu cuenta.  Nota Histórica: Pintar fue uno de los primeros programas desarrollado para demostrar el potencial de las computadoras personales, en tiempos tan antiguos como 1970.  

¿Qué clase de características deberías programar en tu aplicación de Pintar? ●  Dibujar líneas y puntos con tus dedos. ● Borrar la pantalla ● Escoger colores. ● Personalizar tus propios colores. 

● ¿ Algo más? 

Preparando el lienzo para dibujar Vamos característica por característica y empezaremos con la más importante: el lienzo para dibujar! Anteriormente, usamos el lienzo para mover imágenes sprite en el juego de Pong, pero ahora lo usaremos para poder dibujar. Recuerda: puedes encontrar el componente del lienzo en el menú dentro de la Paleta llamado “Dibujo y animación”. Después que hayas arrastrado el componente de lienzo en la pantalla, toma un tiempo para observar las propiedades del lienzo. Vamos a cambiar la altura y el ancho del mismo a la opción de “Ajustar al contenedor.” ¿Qué pasa a la altura y el ancho del lienzo cuando seleccionas esa opción?  ¿Qué le pasa al ancho que no le sucede a la altura?   ________________________  Si seleccionas la pantalla, en el menú de Componentes, verás que eres capaz de modificar las propiedades de la pantalla. Existe una opción para hacer que ésta sea desplazable usando el botón de “scroll” de tu mouse. Haz click en la checkbox debajo de la palabra “Enrollable” para remover esta opción. ¿Qué ocurre al lienzo una vez que deseleccionas la opción?         Dibujando en el lienzo  Cambia a la vista de bloques donde podremos agregar los bloques que nos permitirán dibujar en el lienzo.  Dibujando Líneas  Si arrastras tu dedo lentamente por encima del lienzo, este dibuja una línea. Arrastrar tu dedo refiere a la acción de presionar la pantalla con él encima del lienzo y moverlo sin despegarlo de la misma. 

Veamos como lucen los bloques disponibles para programar el lienzo. Existe un bloque que se activa cuando ocurre el evento de arrastrar tu dedo. Justo como cuando arrastramos una imagen, contamos con las posiciones iniciales de X y Y (al inicio de donde presionó nuestro dedo), la posición 

inmediata después de la actual, así como la posición en la que va nuestro dedo en el lienzo. Veamos que procedimientos para el lienzo podrían ayudarnos a programar las características que deseamos. Existe un procedimiento llamado “Dibujar Línea” que podría sernos útil.  Cuando arrastras tu dedo a través de la pantalla, pareciera que dibujas una línea curveada gigante al moverlo. Pero en realidad lo que sucede es que estas dibujando cientos de pequeñas líneas rectas. Como las líneas son tan pequeñas y están interconectadas, pareciera que forman una curva en cualquier dirección que arrastres tu dedo. El bloque de procedimiento llamado DibujaLínea ocupa cuatro parámetros de entrada: x1, y1, x2, y2. Los valores X1 y Y1 corresponden a un punto en la línea a dibujar y los X2 y Y2 a los siguientes de la misma. ¿Dónde podemos encontrar los valores que necesitamos llenar dentro de este bloque?  El evento de “Arrastrado” contiene los valores de la posición en la que tu dedo empezó a arrastrarse por la pantalla y también la posición en donde se encuentra actualmente. Veamos los bloques que tenemos disponibles.  ¿Cómo podrías acomodar los bloques que vemos en la imagen de la derecha para ser capaces de dibujar al arrastrar tu dedo?  

¡Probemos! Recuerda las reglas para programar: guarda tu programa continuamente y pruébalo constantemente también. Prueba el orden que pensaste para los 

bloques en la pregunta anterior y observa que pasa. ¿Qué puedes ver sobre el comportamiento? Existen cosas o un orden que no puedes llevar a cabo?        

  Haciendo Puntos Cuando tocamos el lienzo, se debería dibujar un punto en donde tocamos. Veamos los bloques disponibles para programar esto. 

 Existe un bloque para el evento de “Tocar” la pantalla que podría sernos muy útil.  En la parte de arriba de este manejador de eventos, veremos X, Y y SpriteTocado. Los valores X y Y nos dirán en que parte la pantalla fue presionada. ¿Qué procedimiento usaremos para que con el evento de “Tocar” la pantalla, se dibujen unos puntos?        

 Para este evento, haremos que el lienzo dibuje un pequeño círculo en las coordenadas de X y Y. Existe un bloque llamado “Dibuja Círculo” que es perfecto para hacer esto en el lienzo.  En el lado derecho del bloque llamado “Dibuja Círculo” existen 3 recuadros donde podemos especificar los valores de X y Y para colocar el círculo que dibujaremos, y un valor R que controla el radio del círculo. Un valor de 5 funciona perfectamente para el radio del círculo. Para X y Y, podemos usar los valores que nos da el evento de “Tocar” la pantalla previamente descrito.  ¿Cómo acomodarías los bloques de la derecha?  

¡Probemos!  Intenta dibujar puntos así como líneas en el lienzo ahora. ¿Puedes borrar la pantalla? Vamos a agregar esa función a continuación. 

   

Borrando la Pantalla Podríamos borrar la pantalla usando botones (cosa que aprendimos en el tutorial de Háblame), pero aprenderemos una nueva forma más amena para hacerlo en esta ocasión. Cambia a la vista de Diseñador y dale un vistazo a la sección llamada Sensores. Ahí encontrarás un componente llamado “Acelerómetro.” Los sensores de acelerómetros se encuentran en todos los smartphones actualmente y puede informar a las aplicaciones cuando el teléfono se está moviendo o vibrando. Arrastra el componente de acelerómetro hacia la pantalla y cambia de regreso a la vista de bloques. Veamos qué clase de eventos tenemos disponibles ahí. 

 El evento llamado “Agitar” parece ser perfecto para la ocasión. Cuando el acelerómetro detecte que el teléfono este siendo agitado, podemos decirle a la aplicación que borre por completo el lienzo.  Si echamos un vistazo al lienzo de nuevo, podremos ver el procedimiento llamado “Limpiar.” Este, al ser usado, borrará completamente todo lo que este en el lienzo. 

 ¡Probemos!  ¡Coloca juntos los bloques de “Agitar” y “Limpiar” para que observes cómo funcionan en conjunto!    

Configura la Selección de Color Hasta el momento, hemos sólo visto como poder dibujar usando el color negro. Vamos a agregar una forma para poder cambiar el color con el que dibujamos. Añade un botón para elegir el color Rojo. Agrega el botón debajo del lienzo y cambia su atributo de texto a la palabra “Rojo,” así como también hacer su color de fondo rojo. 

 Haz clic en Botón1 que se encuentra enlistado en la vista de componentes para seleccionarlo (probablemente ya lo este) y usando ahí mismo el botón de “Cambiar nombre” cambia su nombre de “Botón1” a “BotónRojo.”   Vayamos ahora a la vista de bloques y descubramos cómo hacer que al presionar el botón el color para dibujar se vuelva el rojo (o cualquiera que queramos). Ya hemos usado el evento de presionar botón con anterioridad, así que solamente ocupamos usar el bloque que corresponde a esta acción. También puedes configurar el color para el lienzo puesto que es una propiedad del mismo, y puedes obtener el color de fondo del botón usado por la misma razón. 

 ¿Con los bloques mostrados a la izquierda, cómo podríamos cambiar el color para dibujar? 

 ¡Probemos! ¡Prueba presionar el botón! Observa si cambia al color que deseamos.   

 ¡Explora aún más! Ahora que sabes cómo cambiar el color para dibujar, ¡agrega tantos como quieras! Intenta ordenar los botones en la pantalla de una forma que se vean atractivos en la pantalla.  

También podrías programar una forma en que los usuarios cambien el tamaño de los puntos que dibujen y usen los colores que ellos mismos quieran.