17 Animación Manual App Inventor

 

 
Creación de aplicaciones animadas 
En este capítulo se analizan los métodos para la creación de aplicaciones con animaciones 
simples (objetos que se mueven). Usted aprenderá los 
fundamentos de crear juegos bidimensionales con App 
Inventor, a entender los ImageSprites (duendes con 
imágenes) 
y el manejo de eventos tales como dos objetos que chocan. 
 Cuando usted ve un objeto que se mueve suavemente a lo 
largo de la pantalla del ordenador, lo que realmente está 
viendo es una rápida sucesión de imágenes con una pequeña 
diferencia de posición cada una. Es una ilusión no muy 
diferente a la de "flipbooks" (folioscopio), en la que se ve una 
imagen en movimiento por pasar rápidamente a través de las 
páginas (y es también algo parecido a como se hacen las películas animadas más sofisticadas!). 
 
Con App Inventor, podrá definir la animación mediante la 
colocación de objetos dentro de un componente Canvas 
(lienzo) y mover aquellos objetos por el lienzo a través del tiempo. En este capítulo, usted 
aprenderá cómo funciona el sistema de coordenadas para el Canvas, cómo usar el evento 
Clock.Timer​ para activar un movimiento, la forma de controlar la velocidad de objetos, y la 
respuesta a eventos tales como dos objetos chocandose. 
 
Agregar un componente Canvas a su aplicación 
Puede arrastrar un componente ​
Canvas ​
a su aplicación desde la 
paleta básica. Después de arrastrar hacia fuera, especifique el 
ancho y alto del ​
Canvas​
. A menudo, usted desea que abarque todo 
el ancho de la pantalla del dispositivo, para ello, cuando se especifica el ancho seleccione "Fill Parent", como se muestra en la 
Figura 17­1. 
 
También puede hacer lo mismo con la altura, pero generalmente la establece con un número 
(por ejemplo, 300 píxeles) así puede dejar espacio para otros componentes por encima y por 
debajo. 
 
El sistema de coordenadas del Canvas 
Un dibujo sobre un ​
Canvas (lienzo)​
 es realmente una tabla de píxeles, donde un píxel es el punto de color más pequeño que puede modificarse en el teléfono (u otro dispositivo). Cada 
píxel tiene una ubicación (o celda de la tabla) en el ​
Canvas,​
 que se define por un sistema de 
coordenadas x­y, como se ilustra En la Figura 17­2. En este sistema de coordenadas, “x” define 

una ubicación en el plano horizontal (de izquierda a derecha), y “y” define una localización en el plano vertical (de arriba hacia abajo). 

 
 
Puede parecer un poco contradictorio, pero la celda superior izquierda comienza en 0 para las 
dos coordenadas, por lo que esta posición se representa como (x = 0, y = 0). (Esto es diferente 
al índice que se utiliza en App Inventor para las listas, que se inician con el valor 1, 
aparentemente más normal) A medida que se desplaza hacia la derecha, la coordenada “x” va creciendo, mientras que si se desplaza hacia abajo, la coordenada “y” es la que aumenta. La 
celda inmediatamente a la derecha de la esquina superior izquierda es 
(x = 1, y = 0). La esquina superior derecha tiene una coordenada “x” igual al ancho del Canvas 
menos 1. La mayoría de las pantallas de los teléfonos tienen una ancho cercano a 300, pero para el Canvas del ejemplo que se muestra aquí, el ancho es de 20, por lo que la esquina 
superior derecha es la coordenada (x = 19, y = 0). 
 
Puede cambiar la apariencia del ​
Canvas ​
de dos maneras: (1) pintando sobre él, o (2) mediante 
la colocación y movimiento de objetos dentro de él. Este capítulo se centrará principalmente en 
la segunda forma, pero primero vamos a hablar de cómo "pintar" y cómo crear una animación pintando (este es también el tema de la aplicación PaintPot en el capítulo 2). 
 

Cada celda del ​
Canvas​
 tiene un píxel que define el color que debe aparecer allí. 
El componente Canvas proporciona los bloques ​
Canvas.DrawLine​
 y ​
Canvas.DrawCircle​
 para 
pintar píxeles en él. En primer lugar, establezca la propiedad ​
Canvas.PaintColor​
 al color que ...