App inventor 2 en español
Cómo programar los teléfonos móviles con Android.
Prácticas de App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

___________________________

Dibujo y animación.

27.- Lienzo. Dibujo de líneas con el dedo en la pantalla.

p27_dibujo_en_lienzo.aia

- Lienzo es una zona de la pantalla donde podemos dibujar, trazar líneas, puntos círculos,... En inglés "Lienzo" es "Canvas".

Vamos a crear un Lienzo y vamos a dibujar sobre él con el dedo utilizando varios colores.

- Creamos un Lienzo, está en Dibujo y animación / Lienzo

- Ponemos en Ancho y Alto del Lienzo que ocupe todo el Contenedor, es decir toda la pantalla.

- Insertamos un DisposiciónHorizontal y dentro 5 Botones.
Los botones los situamos como indica la figura de abajo.

_________________
- Diseño.

_________________
- Bloques.

- Cuando arrastramos el dedo por el Lienzo, se dibuja una línea entre el punto anterior y el punto actual.

- Cuando pulsamos un Botón, el color del trazo se pone según el Botón pulsado.

----------------------------------------------

- Otra manera de dibujar trazos más suaves es mediante el bloque:

- El grosor se puede modificar mediante el radius.

- Puedes comprar unos lápices para dibujar en la pantalla.

- Otro código parecido:

_______________________________
28.- Lienzo. SpriteImagen.

p28_spriteimagen_lienzo.aia

- Lienzo es una zona de la pantalla donde podemos dibujar, trazar líneas, puntos círculos,...
- SpriteImagen es un dibujo que debe ir sobre un Lienzo y puede moverse.

Vamos a realizar este proyecto.
- El Lienzo Alto, lo he puesto de 400 pixel de alto.
- El AnchoDeLínea, en caso de dibujar una línea, ésta se dibujaría con ese grosor.

- El SpriteImagen va dentro del Lienzo.
- El Botón lo he puesto con la Propiedad de Forma Oval.

- He puesto una imagen con fondo transparente. El fondo transparente lo he realizado online:
http://www.online-image-editor.com/?language=spanish

balon3.gif

la.mp3

_________________
- Diseño.

_________________
- Bloques.

Empezamos con esto...

- Cuando tocamos el Lienzo , se crea un color aleatorio, mezcla de Rojo, Verde y Azul, según números aleatorios.
Cada RVA puede tener un valor de 0 a 255, en este caso he comenzado en 100 para que salgan colores más claros.

- Además se dibuja un Círculo relleno con el color aleatorio obtenido antes y un diámetro también aleatorio de 1 a 80.

- Añadimos esto...

- Cuando levantamos el dedo del Lienzo , suena un sonido.

- Agregamos esto...

- Cuando arrastramos el dedo por el Lienzo se dibuja una línea negra de 3 pixeles de grueso.

- Si en vez de la línea negra queremos puntos negros, pondríamos esto...

Ahora vamos con el SpriteImagen...

Ponemos el dedo en la Imagen y la arrastramos por el Lienzo.
Además a medida que se va arrastrando va girando 3 grados.

Cuando pulsamos el Botón o el SpriteSprite toca un lateral, se borra el contenido del Lienzo.

_______________________________
29.- Lienzo. SpriteImagen. (II)

p29_choque_de_imagen.aia

- Cuando pulsamos un botón el SpriteImagen (balón) se desplaza a los lados.
Además el SpriteImagen va girando (Dirección) 5 grados a medida que se mueve.

_________________
- Bloques.

- Cuando la bola roja choca con un eje, rebota y suena un sonido
- Cuando el SpriteImagen (balón) colisiona con algo, la bola roja cambia de sentido.
- Suena otro sonido.

- Podemos desplazar el ImageSprite (balón) desplazándolo con el dedo.

- Cuando pulsamos en Boton5, se cierra el programa (no funciona mientras se está emulando, solo cuando está instalado).

_______________________________
30.- Lienzo. SpriteImagen. (III). Propiedad Lanzado.

p30_spriteimagen_lanzado.aia

- Al poner el dedo sobre una imagen y arrastrar rápidamente, la imagen se mueve en esa dirección y con la velocidad que le hayamos realizado con el dedo.

- Baja este barquito a tu ordenador y luego lo subes al proyecto que estamos realizando.

- En Diseñar, insertamos:

- Un Lienzo, que ocupe el Ancho y el Alto del contenedor.

- Dentro del Lienzo, un ImagenSprite. En su Propiedad Foto, ponemos la imagen del barquito.

_________________
- Diseño.

Vamos a los Bloques e insertamos estos...

- Cuando ponemos el dedo en la imagen y lo movemos con rapidez, se moverá la imagen en esa dirección y con esa velocidad.
- Cuando la imagen toca un borde, rebota.

_______________________________
30B.- Sprite transparentes. Variable Z. Dirección. Rota.

p30B_sprite_transparente.aia

- Vamos a seguir profundizando en el Lienzo y los Sprites.

- En este caso un Sprite se moverá por la pantalla, atravesará por arriba o por debajo a otros Sprites, rebotará, cambiará de dirección,...

- Insertamos un Lienzo. Le ponemos ColordeFondo Amarillo. Ajustamos el Ancho y Alto al Contenedor.
- Insertamos una Etiqueta.
- Insertamos un DisposiciónHorizontal y dentro cinco Botones.
- Dentro del Lienzo insertamos 4 SpriteImagen.

- El cuadrado pequeño es el SpriteImagen1. En este cuadrado la parte de arriba está marcada con un trazo negro y la parte derecha con un trazo blanco. Este Sprite se moverá por la pantalla.
Cuando se mueva su dirección la marcará la parte derecha, es decir el trazo blanco. Pondremos su velocidad a 10.

- El segundo es el SpriteImagen2, un cuadrado azul con otro central amarillo
- El tercero y el cuarto tienen el color central transparente, es decir que si algo pasa a su través, cuando pase por la parte blanca se verá.

- Como he indicado en un ejemplo anterior, podemos crear imágenes con fondo transparente online en http://www.online-image-editor.com/?language=spanish

- En el Diseño, ponemos la variable Z de todos a 2

_________________
- Diseño.

_________________
- Bloques.

_____________________
- Comentarios.

- En este ejemplo los dos bloque de arriba el Lanzado y el Arrastrado no conviven bien. Vamos sobre el Bloque de Arrastrado y con el Botón derecho pulsamos en Inhabilitar Bloque para anularlo, ya más tarde lo habilitamos.

- El Lanzado provoca que cuando ponemos el dedo sobre el SpriteImagen1 y lo arrastramos con velocidad, se mueve en la dirección en la que lo hemos arrastrado y con la velocidad del arrastre.

- El Tocar borde, cuando el SprietImagen1 toca un borde de pantalla, rebota y escribe en la Etiqueta el número de borde que ha tocado (1, -1, 3. -3)

- En Colisión y FinDeColisión, cuando el SpriteImgen1 choca con otros Sprites se indica en la Etiqueta, cuando no choca también se indica.

- Cuando pulsamos el Botón1 el SpriteImagen1 se dirige a la Dirección x = 10, y = 10 de la pantalla.

- Cuando pulsamos el Botón2 el SpriteImaben1 se dirige hacia el SpriteImagen2

- Cuado pulsamos el Botón3, se cambia la variable Rota a verdadero o falso, es decir si estaba verdadero se pone falso y si estaba falso se pone verdadero, esto se expresa como Rota = NO (Rota)

- Rota establece si cuando el Sprite choca el dibujo cambia su dirección o no. Es decir, se pone "marcha atrás" o "se da la vuelta".

- Z establece si un Sprite para por encima o por debajo de otro.

- Si un Sprite tiene Z = 2 y otro tiene Z = 3, éste pasará por encima.

- Si un Sprite tiene Z = 2 y otro tiene Z = 1, éste pasará por debajo.

- Al poner el SpriteImagen1 a 1 o a 3, hacemos que tenga menos o más preferencia de estar sobre la imagen que atraviese, ya que hemos puesto en el Diseño Z = 2 para los demás Sprites.

- En este ejemplo hay dos Sprites que tiene parte transparente, de tal manera que el SpriteImagen1, se verá cuando pase por debajo de ellos.

- Habilitar el Bloque de Arrastre.

- En fin, instalar la aplicación y jugar un poco con ella.

_______________________________
31.- Lienzo. Al pasar el dedo por la pantalla se dibuja una imagen. Máscara.

p31_mascara.aia

- En el Lienzo hay una imagen que ocupa todo el Lienzo. Al iniciar la pantalla, la imagen se enmascara con color blanco y alfa 0,
- Al pasar el dedo por el Lienzo se va dibujando la imagen que está detrás del color blanco.
- Si solo pulsamos en el color blanco sale un círculo con parte de la imagen.

- Con los botones ponemos todo en blanco o presentamos la imagen.
- Para hacerlo de nuevo pulsamos el botón "Todo blanco".

- En este código presta atención a la forma en que se crea el color blanco (255, 255, 255) y además un cuarto número, el 0, que establece el alfa o saturación del color, si no ponemos este número no funciona lo que deseamos.

_________________
- Diseño.

Bloques

Cuando Tocamos el Lienzo se dibuja un círculo de radio 25.
Cuando Arrastramos el dedo por el Lienzo se dibuja una línea de 40 de grosor.

Cuando se inicia la pantalla, se hace el proceso blanco.
Cuando se pulsa el Botón1, se hace el proceso blanco.
Cuando se pulsa el Botón2, se quita el blanco y aparece la imagen.

El proceso blanco, dibuja un círculo muy grande que ocupa toda la pantalla de blanco y pone luego pone el color de la pintura de blanco pero con alfa 0.

El alfa 0 es la saturación del color.

NOTA: consulta el tutorial 20E Opacidad.

_______________________________
32.- Dibujo de una función.

p32_dibujar_funcion.aia

- Se trata de dibujar un funciones seno, coseno y parábola.

- Para dibujar se utiliza el Lienzo. Lo ponemos con su Propiedad Ancho: Ajustar al contenedor y su Propiedad Alto: 400 pixel

_________________
- Diseño.

_________________
- Bloques.

_____________________
- Comentarios.

Debemos hacer una cambio de base:

AnchodePantalla ---------------------- 360

        X                 ---------------------  numero

X = AnchodePantalla * numero / 360

Es decir, adaptamos el valor de la variable X para que los 360º coincidan con el AnchodePantalla.

- Multiplicamos por 100 ya que se seno es menor o igual a 1, si no lo hacemos el alto de la señal tendrá valores muy pequeños.

- Multiplicamos por -100, ya que el dimensionado de la pantalla va de arriba abajo y no de abajo arriba, es decir según bajamos es mayor la varible Y. (También podríamos haber utilzado la resta en vez de la suma, como se hace luego en la parábola)

- Sumamos 220 para que el centro de la señal coincida con el centro de la pantalla.

- Se tarda un tiempo en dibujar las señales.

- Debemos estudiar la escala horizontal y vertical de la señal que queramos visualizar.

- Otra forma sería en utilizar pequeñas rectas en vez de puntos con este bloque:

_____

Aquí tenemos otro ejemplo de dibujo de funciones.

CodingMathEpisode2 (Fuente)

_______________________________
33.- Paleta de tenis. Pelota y SpriteImagen.

p33_tenis.aia

- Una Pelota se mueve por el Lienzo rebotando en sus ejes.

_________________
- Diseño.

_________________
- Bloques.

_____________________________________

- Truco.

Si quieres que el Lienzo ocupe todo el alto de la pantalla, desmarca y marca la Propiedad Enrollable en la pantalla Screen1 y establece la Propiedad Alto Ajustar al contenedor en el Lienzo.

__________________________________