ImageSprite En App Inventor

Sprites y TinyDB

Tabla de contenido

ImageSprite en App Inventor 2

Propiedades: 2

Ball (bola) en App Inventor 3

Propiedades : 4

Eventos: 4

Métodos: 4

Botones con Sprites para App Inventor 6

TinyDB en App Inventor (Base de datos) 18

Propiedades: 18

Guardar y recuperar códigos (TinyDB) 19

Intro 19

Listado de componentes 20

Visor 20

Comportamiento de la aplicación 21

Creación de un servicio personalizado TinyWebDB 23

ImageSprite en App Inventor

Un componente sprite imagen es un objeto animado que puede interactuar con un lienzo (Canvas), pelotas (Ball) y otros sprites imagen. Un sprite imagen es un objeto animado que es contenido por un lienzo, reacciona a los toques y a arrastrar, interactua con otros sprites (sprites de imagen y otras bolas) y el borde del lienzo, y se mueven de acuerdo a sus propiedades. Por ejemplo, para tener un movimiento de sprites 10 píxeles hacia la izquierda cada segundo, se puede establecer la propiedad velocidad a 10, el intervalo de la propiedad a 1000 (milisegundos), el Título de propiedad a 180 (grados), y el enabled a True. Puede cambiar estas y otras propiedades para modificar la imagen de sprite.

Propiedades:

Picture

Imagen que se muestra para el sprite.

Enabled

Si se establece, el sprite está activo.

Interval

La frecuencia del movimiento del sprite, en milisegundos.

Picture

La imagen que determina la apariencia del sprite

Rotates

Si es cierto, la imagen rota de sprites para que coincida con heading.Si es falso, el sprite de la imagen no gira cuando cambia el sprite de la partida.

Visible

Si se establece, sprite la imagen es visible.

Heading

Dirección de desplazamiento del sprite imagen en grados. Cero es horizontal hacia la derecha (este), el 90 es hacia arriba, 180 está a la izquierda, y 270 es hacia abajo.

X

Coordenada x de la imagen sprite Cero es el borde izquierdo del lienzo.

Y

Coordenada y la imagen del sprite. Cero es el borde superior del lienzo.

Speed

Número de píxeles de sprites imagen se mueve cada período.

Width

Ancho de la imagen sprite.

Height

Altura de la imagen sprite.

Eventos:

CollidedWith(component other)

Se le llama cuando dos componentes animados (sprites imagen o bolas) han colisionado. El argumento de other representa el sprite otros en la colisión.

Dragged(number startX, number startY, number prevX, number prevY, number currentX, number currentY)

El sprite fue arrastrado Ver el lienzo Dragged de eventos para una descripción de los argumentos.

EdgeReached(number edge)

Se le llama cuando sprites imagen llega al borde de la pantalla. El edge argumento dice que el borde (o esquina) se alcanzó, codificado como sigue:

 Norte = 1

 noreste = 2

 Este = 3

 sureste = 4

 al sur = -1

 suroeste = -2

 al oeste = -3

 al noroeste = -4

Tenga en cuenta que direcciones opuestas son negaciones de la otra.

NoLongerCollidingWith(component other)

Se le llama cuando dos componentes animados han dejado de chocar.

Touched(number x, number y)

Se le llama cuando el usuario toca el sprite de la imagen.

Métodos:

Bounce(number edge)

Hace que el rebote de sprites imagen, como si de una pared (o en la esquina). El significado del argumento es el mismo que en EdgeReached . Puedes configurar el evento EdgeReached para el rebote de sprites de lo que se alcanzó el borde, haciendo que el sprite a aparecer para rebotar elásticamente desde todos los bordes y las esquinas.

boolean CollidingWith(component other)

Indica si el sprite de la imagen está colisionando con el componente determinado.

MoveIntoBounds()

Si el sprite la imagen está fuera de límites, este método se mueve hacia atrás en los límites.

MoveTo(number x,number y)

Mueve el sprite de imagen directamente en el punto dado.

Ball (bola) en App Inventor

Un componente de bola es un tipo particular de sprite (objeto animado) que se parece a una pelota. Este componente tiene que estar dentro de un Canvas (lienzo) para que reaccione a los toques de pantalla y a los arrastres dentro del Canvas. Pueden interactuar con otros componentes Ball y otros Sprites.

La diferencia entre una pelota y un sprite de la imagen es que este último puede obtener su apariencia de una imagen, mientras que el aspecto de una pelota sólo puede ser cambiado mediante la variación de su PaintColor y Radius propiedades.

Propiedades :

Radius

Radio de la bola.

PaintColor

Color utilizado para dibujar la pelota.

Enabled

Si esto es cierto, la bola está activo.

Interval

Frecuencia de movimiento de la pelota en milisegundos.

Visible

Si se establece, la pelota es visible.

Heading

Dirección de viaje de la pelota.

X

Bola coordenada x.

Y

Bola de coordenada.

Speed

Número de píxeles bola se mueve cada período.

Eventos:

CollidedWith(component other)

Se le llama cuando dos componentes animados (sprites imagen o bolas) han colisionado. El argumento de other representa el otro componente en la colisión.

Dragged(number startX, number startY, number prevX, number prevY, number currentX, number currentY)

La pelota fue arrastrado. Ver el lienzo Dragged de eventos para una descripción de los argumentos.

EdgeReached(number edge)

Llamada cuando la pelota llega al borde de la pantalla. El edge argumento dice que el borde (o esquina) se alcanzó, codificado como sigue:

 Norte = 1

 noreste = 2

 Este = 3

 sureste = 4

 sur = -1

 suroeste = -2

 al oeste = -3

 al noroeste = -4

Tenga en cuenta que direcciones opuestas son negaciones de la otra.

NoLongerCollidingWith(component other)

Se le llama cuando dos componentes animados han dejado de chocar.

Touched(number x, number y)

Se le llama cuando el usuario toca el balón.

Métodos:

Bounce(number edge)

Hace que el rebote de la pelota, como si de una pared (o en la esquina).El significado del argumento es el mismo que en EdgeReached Puede configurar el EdgeReached evento para hacer que la pelota rebote lo que se llegó a borde, causando que la pelota rebote elástico parece que desde todos los bordes y las esquinas.

boolean CollidingWith(component other)

Indica si el balón está colisionando con el componente determinado.

MoveIntoBounds()

Si el balón está fuera de límites, este método se mueve hacia atrás en los límites.

MoveTo(number x,number y)

Mueve la bola directamente al punto.

Botones con Sprites para App Inventor

Seguimos con el App Inventor , vamos a crear un botón con un sprite personalizado. El App Inventor nos deja crear botones pero a la hora de poder situarlos en la pantalla y colocarlo en el lugar que queramos la cosa se pone un poco difícil, podemos utilizar Screen Arrangement pero aún así se van colocando uno al lado de otro. Por ello utilizaremos los sprites.

Vamos al apppinventor http://beta.appinventor.mit.edu

En el creamos un nuevo proyecto le ponemos el nombre que queramos en mi caso botonSprite,

Empezaremos insertando los elementos que necesitamos

Nos vamos a a Screen Arragement y insertamos un HorizontalArragement (nos servirá para organizar las cosas un poco mejor)

Después en Basic seleccionamos un canvas y lo insertamos en sus propiedades en Width le ponemos Fill parent para que ocupe todo el ancho

Seleccionamos el canvas vamos a ponerle una imagen de fondo para ello nos vamos a su propiedad BackgroundImage

Le damos a Add buscamos la imagen y ya tendríamos nuestro canvas con una imagen

De la paleta animation elegimos ImageSprite (Las ImageSprites tiene que ir siempre dentro de un Canvas)

Insertaremos dos ImageSprite las renombramos a la primera le ponemos boton1 y a la segunda boton2

Vamos a ponerle imágenes a estos botones, para ello nos vamos ala propiedad del boton1 y pulsamos Picture, seleccionamos la imagen de nuestro disco duro, con el botón2 hacemos lo mismo.

Donde pone Media le daremos al botón Add y añadiremos las otras 2 imágenes de los estados de los botones. Las utilizaremos después.

Crearemos debajo de nuestro canvas un nuevo HorizontalArragament y insertaremos

...