Lección 6

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