Fundamentos de programación para la creación de materiales educativos Lección 6 Gráficos (1 parte)
Índice de contenido Introducción...3 Canvas... 4 Pintar en el canvas... 4 Círculos...5 Líneas... 6 Puntos...7 Texto... 7 Rectángulos y cuadrados... 8 Respondiendo a eventos... 10 Sprites... 12 Ball... 12 ImageSprite...12 Eventos de los sprites...13 Ejemplo: Lanzar una bola... 14 Ejemplo: Colocar figuras en su huecos... 17 Ejemplo: Dibujo y puntura... 22 2
Introducción El App Inventor incorpora elementos para trabajar con gráficos: El Canvas: es el lienzo donde dibujamos e incorporamos todos los elementos gráficos (sprites) Ball: es un una bola que podemos animar dentro del Canvas. ImageSprite: este elemento es un sprite compuesto por una imagen. Sirve para incorporar en el canvas imágenes o dibujos animados. En este capítulo veremos una introducción a esos tres elementos y, en el siguiente, veremos con más detalle cómo combinarlos para hacer animaciones de cara a montar cuentos interactivos o sencillos videojuegos. 3
Canvas El Canvas se encuentra de la pestaña Basic de la paleta del editor: Representa un lienzo donde podemos pintar cosas y añadir objetos gráficos y animarlos. Además, nos permite detectar eventos táctiles para interactuar con el usuario, lo que hace de este elemento una potente herramienta del App Inventor. Pintar en el canvas Si añadimos un canvas a nuestra ventana, con el editor de diseños, podremos configurar algunas propiedades interesantes: PaintColor: Es el color que utilizaremos para pintar. LineWidth: Ancho de la linea usada para dibujar. FontSize: el tamaño de la fuente que usaremos para dibujar texto. Con el canvas pintamos figuras básicas, como círculos, cuadrados, líneas, puntos o texto. Para ello, en el Block Editor, hacemos uso de los siguientes bloques (My Blocks Canvas): Vemos que todos los bloques poden las coordenadas donde queremos dibujar, x e y. Dichas coordenadas están basadas en el sistema de referencia del canvas, en el cual, la esquina superior izquierda es x=0,y=0 y la inferior derecha es x=width, y=height. 4
Círculos El bloque Canvas1.DrawCircle, nos permite dibujar un círculo de radio r en la posición (x,y). Por ejemplo, con el siguiente bloque podemos dibujar un círculo de colo rojo de radio 50 en el centro del canvas: En este caso, los parámetros x e y especifican el centro del círculo. 5
Líneas Para pintar lineas, usamos DrawLine. Por ejemplo, el siguiente bloque dibuja un aspa en el canvas: En este caso, el bloque DrawLine acepta como parámetros los dos extremos de la línea (x1,y1) y (x2,y2). El grosor de la línea lo establecemos con LineWidth. 6
Puntos Podemos dibujar puntos haciendo uso del bloque DrawPoint. El siguiente ejemplo dibuja 200 puntos aleatorios en el canvas: Texto Para pintar texto, el canvas ofrece dos bloques: el DrawText y el DrawTextAtAngle. El primero de ellos nos permite dibujar texto en una posición dada: El bloque DrawTextAtAngle, además, nos permite especificar un ángulo en el que se orientará el texto, entre 0 y 360º. El texto gira en sentido antihorario. Como ejemplo, podemos hacer uso de un reloj para dibujar texto animado: 7
En el bloque de arriba, hacemos uso también de Canvas1.Clear para limpiar el canvas. Rectángulos y cuadrados En el canvas no tenemos un bloque DrawRectangle para dibujar rectángulos. Sin embargo, podemos añadir dicha funcionalidad pintando líneas de grosor suficientemente grande. El siguiente ejemplo pinta un rectángulo de tamaño 200x100: Podemos generalizar el proceso de pintar rectángulos haciendo nuestro propio procedimiento drawrectangle: 8
El procedimiento drawrectangle de arriba acepta como parámetros: El canvas donde dibujar. La esquina superior izquierda del rectángulo (x,y). El ancho (width) y alto del rectángulo (height). Su funcionamiento es simple: dibuja una línea vertical cuya longitud viene especificada por el alto del rectángulo. El grosor de dicha linea vendrá dado por el ancho del rectángulo. 9
Respondiendo a eventos Si sólo pudiéramos pintar en el canvas, sin interaccionar con el usuario, su funcionalidad quedaría mermada. Es por ello por lo que el App Inventor ofrece la posibilidad de interaccionar con el usuario, respondiendo a toques y otros eventos. Los eventos más simples son: Touched. Este evento equivaldría a un click en el canvas, es decir, se produce cuando el usuario presiona y levanta seguidamente el dedo. Loas parámetros del evento son las coordenadas donde se ha tocado el canvas y una variable touchedsprite que nos servirá para comprobar, como veremos más adelante, si el toque se ha realizado sobre un sprite (Ball o ImageSprite) o no. TouchDown. Dicho evento tiene lugar en el instante en el que el usuario presiona la pantalla. Como parámetros del evento tenemos las coordenadas (x, y) del canvas donde ha tenido lugar la pulsación. TouchUp. Este evento tiene lugar justo en el instante en el que el usuario deja de presionar la pantalla. Como parámetros, el AppInventor nos dará las coordenadas (x,y) del canvas. 10
Los otros dos eventos avanzados que podemos utilizar con el canvas son: Dragged: con ese evento vamos a poder detectar cuando arrastramos el dedo a lo largo del canvas. Nos permitirá añadir funcionalidad arrastrar y soltar en nuestro canvas. Los parámetros del evento Dragged son: startx, starty: las coordenadas (en el canvas) donde se inició la pulsación. prevx, prevy: las coordenadas donde teníamos colocado el dedo antes de moverlo nuevamente. currentx, currenty: coordenadas actuales donde tenemos la pulsación. draggedsprite: indica, al igual que en el evento Touched, si el efecto de arrastrar y soltar se ha realizado con un sprite pulsado. Flung: este evento se dispara cuando el usuario hace una acción como de lanzar algo dentro del canvas (por ejemplo, una bola). Los parámetros de este evento son: x, y: coordenadas donde se ha pulsado en el canvas para hacer el lanzamiento. speed: velocidad del lanzamiento. heading: dirección del lanzamiento. xvel, yvel: velocidades de cada una de las componentes (x,y). flungsprite: nos dice, como en otros eventos, si hay algún sprite implicado. Más adelante tendremos tiempo de practicar con los diferentes eventos. 11
Sprites Además de permitir que pintemos y dibujemos, el canvas actúa como un contenedor de objetos gráficos a los que llamamos sprites. Dichos sprites serán parte de los cuentos, de los videojuegos que diseñemos o, simplemente, elementos extras de la interfaz de usuario. En este capítulo usaremos sprites de forma estática,, mientras que en el próximo capítulo veremos cómo animarlos. Los dos sprites que incorpora el App Inventor son el elemento Ball y el ImageSprite. Para usar estos elementos, necesitamos añadirlos sobre un canvas que tengamos previamente añadido en nuestra ventana. Ball Es una bola que responde a eventos de toque y, además, incorpora métodos para poder animarla y hacer rebotes con ella a lo largo del canvas. Podemos encontrarla en la pestaña Animation de la paleta de diseño: Entre las propiedades que podemos establecer del elemento Ball, encontramos sus coordenadas en el canvas (X,Y), el orden Z, la velocidad a la que se mueve si la animamos (Speed), la dirección hacia la que se está moviendo (Heading), el color, el radio... Veremos este sprite con más detalle en el próximo capítulo. ImageSprite Representa una imagen dentro del canvas. Puede ser un botón especial, un personaje en nuestro cuento, o un elemento de un videojuego. El ImageSprite también se encuentra dentro de la pestaña Animation, y para añadirlo tenemos que arrastrarlo dentro de un canvas. Muchas propiedades de este sprite son parecidas a la del elemento Ball: tenemos sus coordenadas X,Y, el orden Z, la velocidad y dirección de animación, el tamaño... Orden-Z Los sprites se pueden superponer unos sobre otros, para indicar qué sprite está por encima de otro, se usa el orden-z (propiedad Z de los elementos). Cuando más alto sea este valor, más arriba aparecerá. 12
Eventos de los sprites Los sprites tienen asociados eventos para detectar toques y efectos de arrastrar y soltar o de lanzamiento, muy similares a los del sprite. También, pensando en las animaciones, incorporan eventos para detectar si un sprite choca con otro o con uno de los extremos del canvas. Los eventos para trabajar con toques son: Touched, TouchDown y TouchUp. Estos eventos son equivalentes a los del Canvas, diciendo las coordenadas del sprite (el origen es la esquina superior izquierda) donde ha ocurrido el evento. Los eventos Dragged y Flung también están disponibles: Si estamos animando un sprite a lo largo de la pantalla, podemos detectar que ha chocado con el siguiente bloque: También podemos detectar colisiones con los extremos de la ventana mediante el bloque: 13
Ejemplo: Lanzar una bola Vamos a hacer un pequeño ejemplo que muestre el uso del evento Flung para lanzar objetos. Para ello, construimos un nuevo proyecto con un canvas y una bola dentro de él. Cuando el usuario pulse la bola y la lance, ésta empezará a moverse, rebotando en los extremos de la pantalla. Incorporaremos un efecto de rozamiento para ir deteniendo poco a poco la boda. A continuación, se detallan algunas propiedades que conviene establecer en el editor: Para que el canvas ocupe toda la pantalla, nos aseguraremos de que la propiedad Scrollable de la ventana sea False y cambiamos las propiedades Width y Height de dicho canvas a FillParent. Cambiaremos la propiedad Interval de Ball1 para que valga 1, lo que significa que se animará cada milisegundo. El reloj lo usaremos para simular el efecto de rozamiento y parar la bola. Si propiedad Interval será 100, e inicialmente esta desactivado (desmarcamos TimerEnabled). 14
Para decirle al App Inventor qué hacer cuando la bola se lance, usamos el evento Ball1.Flung: El evento Flung nos da información interesante como la velocidad o dirección del lanzamiento. Nosotros usamos esa información para configurar la animación de la bola. La propiedad Heading, que especifica la dirección hacia la que se mueve, es un ángulo de 0º a 360º: Este: 0º Norte: 90º Oeste: 180º Sur: 270º Con el bloque de arriba, si probamos a lanzar la bola, esta se pondrá indefinidamente a moverse, hasta que alcance algún extremo de la pantalla y quede bloqueada. Para añadir un efecto de rebote, podemos usar el bloque Ball1.EdgeReached. Este bloque tiene como parámetro el extremo alcanzado: Norte: 1. Noreste: 2. Este: 3. Sureste: 4. Sur: -1. Suroeste: -2. Oeste: -3. Noroeste: -4. En la mayoría de los casos, será suficiente con detectar coches con los 4 extremos principales (norte, sur, este y oeste) usando varios bloques IF-ELSE para ello. Para hacer que la bola rebote en el extremo, App Inventor dispone del bloque Ball1.Bounce, que acepta como parámetro el extremo sobre el que se rebota: 15
Se deja como reto para el alumno ver cómo se podría obtener el ángulo resultante de forma manual, usando para ello las operaciones matemáticas de la pestaña Math. Llegados a este punto, si probamos a ejecutar el programa, veremos que si lanzamos la bola, ésta rebota en los extremos de la ventana indefinidamente, sin detenerse. Vamos añadir un sencillo efecto de rozamiento lineal usando el reloj: En el bloque del reloj, que se ejecuta cada 100 milisegundos (propiedad Interval), lo que hacemos es disminuir la velocidad con la que se mueve la bola. Cuando la velocidad menor o igual que cero, se supone que la bola se ha parado del todo. En tal caso, detenemos la bola de forma explícita haciendo Ball1.Speed To 0 (por si se ha quedado una velocidad negativa). También detenemos el reloj, ya que no tiene sentido seguir aplicando rozamiento. 16
Ejemplo: Colocar figuras en su huecos En el siguiente ejemplo vamos a usar los Sprites para hacer una aplicación en la que el usuario tendrá que colocar varias figuritas en sus huecos. Los ficheros necesarios se encuentran en Figuras.zip. El diseño de la aplicación es el siguiente: Como vemos en la figura de arriba, la aplicación tiene un canvas y éste 8 sprites con cada una de las imágenes del fichero Figuras.zip. El canvas ocupa todo el ancho (Width=FillParent) y tiene 400 pixels de alto. Además, establecemos la propiedad ScreenOrientation a LandScape, para poner la ventana apaisada (cuando usemos el emulador Ctrl+F12 rota la pantalla). La aplicación funcionará de la siguiente manera: el usuario tiene que emparejar cada figura con su contorno. Para ello, pulsa sobre una figura y la arrastra hacia el contorno. Si el contorno coincide, la figura se inserta dentro de éste. En caso contrario, hacemos que vuelva de forma automática a su posición original. Con este sencillo ejemplo, vamos a ver cómo combinar diferentes eventos del canvas y los sprites. De forma resumida: Cuando se pulse sobre un sprite (evento TouchDown), guardaremos en dos variables el sprite pulsado y el contorno con el que se empareja. El evento Dragged del canvas, lo usaremos para mover la figura pulsada en TouchDown a lo largo de la ventana. Cuando el usuario levante la pulsación, evento TouchUp, comprobaremos si el sprite pulsado colisiona con su contorno. En ese caso ambos sprites se juntan y, en el caso contrario, colocamos la figura en su posición original. 17
Vamos a comenzar con una figura cualquiera, en este caso el Círculo. El evento TouchDown asociado al sprite es el siguiente: En el bloque, hacemos uso de un procedimiento juntarsprites que tiene como parámetros los dos sprites que hay que emparejar: En juntarsprites, hacemos lo siguiente: Guardamos la figura y su contorno asociado en dos variables, spritefigura y spritecontorno. Puesto que vamos a arrastrar la figura, hacemos uso de ImageSprite.Z para cambiar su orden-z a 10, y asegurarnos así de que aparecerá encima de todas las demás. El bloque ImageSprite.Z, está dentro de la sección Advanced Any ImageSprite. Este tipo de bloques genericos son muy útiles si los componentes de nuestro programa los almacenamos en variables o listas, pasándole como parámetro el componente concreto con el que vamos a trabajar. Guardamos la posición donde está la figura en (oldx,oldy) para poder restaurar su posición original si no se empareja correctamente. Añadimos las variables globales que necesitamos: 18
Asignamos a spritefigura y spritecontorno el valor false para indicar que inicialmente no hay ningún sprite seleccionado. Ahora vamos a añadir el evento Canvas1.Dragged para arrastrar el objeto por la ventana: Lo que hacemos en el bloque anterior es comprobar si hay algún sprite seleccionado y lo movemos, usando ImageSprite.MoveTo, a la posición que se está pulsando actualmente (currentx, currenty). Si el código lo ejecutamos, observaremos un comportamiento extraño, debido a que en (currentx, currenty) se coloca la esquina superior izquierda del sprite, en lugar de su centro. Para centrarlo, usamos este bloque MoveTo: Básicamente, lo que hacemos es desplazar la posición currentx, currenty la mitad de la anchura y altura del sprite respectivamente, para que éste aparezca centrado. Ahora tenemos que especificar qué hacer cuando se suelte el sprite. Para ello, implementamos el evento TouchUp del canvas: 19
En este bloque, lo que hacemos en primer lugar es comprobar que haya un sprite seleccionado. En dicho caso, llamamos a un procedimiento comprobarsprites, que será el encargado de ver si se ha juntado la figura con su contorno correcto. Por último, puesto que se ha soltado el sprite, asignamos a spritefigura el valor false para indicar que no hay ninguno seleccionado. El procedimiento comprobarsprites es: Primero, usamos el bloque ImageSprite.CollidingWith (Advanced-Any ImageSprite) para ver si la figura colisiona con su contorno, lo que significa que están juntos. Si los sprites colisionan, los unimos. Dicha unión la hacemos de forma ficticia asignando al sprite del contorno la imagen de la figura y, a continuación, borramos el sprite que contiene la figura (este sprite es que responde al evento TouchDown, por lo que, al ocultarlo, ya no podremos arrastrar el círculo). SI los sprites no colisionan, restauramos la posición de la figura. Para ello, usamos los valores que guardamos en TouchDown, oldx y oldy. Para terminar el programa, nos quedará especificar los eventos TouchDown para el resto de las figuras: 20
Ya tenemos listo el programa! Ahora, sólo queda ejecutarlo y ver que funciona correctamente: El alumno puede añadir otras figuras y contornos. También podemos usar imágenes que se correspondan a partes de una imagen completa. Por ejemplo, podemos tener tres imágenes con un queso, un ratón y otra con un ratón comiendo queso. En la ventana aparecerán las imágenes del ratón y el queso y, cuando el usuario las una, ambas imágenes se cambiarán por la del ratón comiendo. 21
Ejemplo: Dibujo y puntura Vamos a hacer un sencillo programa para dibujar sobre el lienzo. El usuario podrá seleccionar entre diferentes colores de una paleta o usar una goma de borrar. El el diseño tenemos que tener en cuenta: Que la propiedad Scrollable de la ventana no está marcada. El canvas debe ocupar toda la ventana (Width y Height como FillParent). Dentro del canvas, añadimos diferentes sprites Ball con los colores a usar, y un ImageSprite con la GomaBorrar.png (Moodle). Además, añadimos un elemento Ball de radio 27, que usaremos para marcar el color seleccionado. Este sprite tendrá un orden-z muy bajo, 0.1, para asegurarnos que aparece detrás de los demás elementos El canvas tendrá su propiedad LineWidth a 10, que será el ancho del pincel que usaremos. En el Block Editor, lo primero que vamos a hacer es añadir el comportamiento de selección de colores o goma de borrar. Para ello, usamos el evento Touched: 22
También vamos a posicionar la marca de selección justo detrás color seleccionado. Para ello, usaremos un procedimiento marcarcolor: En este procedimiento lo que hacemos es colocar la bola marcaseleccion para que quede centrada respecto a la bola que pasamos como parámetro. También necesitamos un procedimiento marcargoma, para marcar la goma de borrar (que no es de tipo Ball): En los eventos Touched, colocamos las llamadas a los procedimientos que correspondan. A continuación, mostramos algunos de ellos (que el alumno complete el resto): 23
También debemos seleccionar el color por defecto (negro): El siguiente paso es añadir funcionalidad cuando arrastremos el dedo por el canvas. Lo que haremos será dibujar un punto con el color seleccionado: Si ejecutamos el programa, podremos usarlo para dibujar y dar expresión a nuestra creatividad: Si queremos, podemos guardar la imagen creada en el canvas usando los bloques Canvas1.Save y Canvas1.SaveAs. Se le deja al alumno esta funcionalidad para que la investigue. 24