Antes de comenzar con este taller, si no estás familiarizado con la aplicación, te sugiero ver la página de instalación del emulador y la página sobre la interfaz de "App Inventor"
Para poder ver en cualquier momento como va funcionando tu juego debes:
Conectar y luego Reiniciar conexión
Seleccionaremos Emulador para emular un celular o table. Si usted lo tiene conectado en un puerto USB selecciones USB. Si por Wifi seleccione AI Companion
Para volver a ver a iniciar el juego arrastra en el lienzo cualquier objeto, cámbiandolo de posición.
Dicho eso, este taller constará de un juego con los siguientes componentes: un lienzo, una pelota, un botón de texto y tres "Spriteimagen":
- El lienzo es el fondo en donde se desarrollará el juego.
- La pelota será el objeto en movimiento que rebotará en los muros y en los obstáculos que queramos poner.
- Una de las "Spriteimagen" será el jugador que arrastraremos.
- Las "Spriteimagen" restantes serán los obstáculos que crearemos en el lienzo.
Las fotos a utilizar serán:
El fondo será la imagen de la playa, los obstáculos serán los pelícanos y el personaje a utilizar será el perro. Las imágenes son de referencia, así que puedes utilizar las que tu quieras. Te recomiendo descargar imágenes png sin fondo. Las imagenes pueden ser de cualquier tamaño, pues en Propiedades de cada componente deberás modificar a tu gusto el tamaño del objeto.
Ahora vamos con los pasos:
Ejecuta la aplicación "Aistarter" ya instalada, luego crea un nuevo proyecto y ponle el nombre que quieras. Puedes cambiar el idioma al que te acomode.
Arrastra "lienzo" que se encuentra en la zona de Paleta - Dibujo y animación a la zona del Visor / Screen 1. En propiedades del lienzo cambiar el Alto y Ancho por Ajustar al contenedor.
Bajo la zona de componentes, hay una pestaña llamada Medios, ahí debes subir las fotos que vas a utilizar en tu juego. Luego de subir las fotos, ve a propiedades del lienzo, selecciona Imagen de fondo y luego la imagen que has decidido ocupar. Ahora el visor debe quedar de la siguiente manera:
El siguiente paso es agregar la pelota al lienzo, así que arrastre el componente Pelota a Visor / Screen. Observe como las componentes dependen de otros.
En propiedades de Pelota cambie el color e ingrese 3.0 en Velocidad.
Recuerde ir guardando a menudo el proyecto.
Estamos en modo de diseño, asi que ahora necesitamos agregar bloques de programación a nuestra aplicación. Selecciona el botón Bloques.
Si selecciona la Pelota en el área Bloques se mostrarán todos los bloques predeterminados para modificar las propiedades de la pelota y su comportamiento.
Recordemos que queremos que la pelota rebote en los bordes de nuestro celular, entonces seleccione el bloque cuando Pelota TocarBorde... ejecutar
Queremos que la Pelota rebote en cualquier dirección, por lo tanto la haremos apuntar a una dirección aleatoria para una coordenada (x,y). Se supone que necesitamos un valor aleatorio, esto debe ser entregado por una función matemática. Seleccione el siguiente bloque y encajelo en el bloque anterior: Luego busque en la sección Matemáticas el bloque "entero aleatorio entre...":
Duplica el bloque con click derecho y encájalos en x e y. Por ahora los dejaremos con los valores prestablecidos 1 a 100.
Ya programado aquello, arrastremos tres "SpriteImagen" al lienzo, una de ellas será el jugador, y las otras dos serán pelícanos. Quedará de la siguiente manera:
Queremos que el personaje a jugar, en este caso, el perro, se mueva, entonces en la sección Bloques debemos seleccionar la casilla de Perro y luego "cuando Perro arrastrado... ejecutar":
Luego seleccionamos llamar Perro Mover a X, Y y lo encajamos en el bloque anterior.
Tenemos varias opciones, si ponemos X inicial, entonces el perro no se moverá ni a izquierda ni a derecha.
Si ponemos Y inicial, no se moverá ni arriba ni abajo.
Si ponemos X actual se moverá hacia donde lo arrastremos con el dedo de izquierda a derecha. Lo mismo con Y actual, subirá o bajará hacia donde movamos el dedo.
En este caso, solo queremos que se mueva de izquierda a derecha, dejando la altura fija. Es por ello que utilizaremos los bloques tomar X actual y tomar Y inicial.
Ya programada la movilidad del perro, la idea es que cuando la pelota choque con el perro o los pelícanos, rebote hacia un lado aleatorio al igual que cuando chocaba con un borde de la pantalla.
La acción para que la Pelota1 apunte a una nueva dirección ya la tenemos de cuando choca con el borde, por lo tanto lo duplicaremos. Basta agregar el bloque de colisión de Perro, Pelicano1 y Pelicano2 quedando de la siguiente manera.
Entonces, hasta ahora tenemos a la pelota que rebota al colisionar con los bordes y con los personajes. Y al perro que se mueve dependiendo hacia donde lo arrastremos.
Lo siguiente es hacer que los pelícanos avancen, para así añadirle una dificultad al juego, pues si están estáticos sería muy sencillo.
Para hacer que avancen deben ir a propiedades y añadirles velocidad. La velocidad utilizada es de 6, pero cuidado, pues el pelícano que va de derecha a izquierda debe tener la velocidad en negativo, así el programa interpreta que debe ir en sentido contrario.
Pero surge un problema, avanzan, llegan al borde y se frenan. Es por esto que hay que ir a la sección bloques y seleccionar "Cuando Pelícano Tocar Borde", "llamar Pelícano Mover a x y".
El valor de y en ambos debe ser "Pelícano Y" pues no sube ni baja, solo avanza.
En el caso del valor x, este es un valor númerico. Queremos que cuando llegue al borde avanzando, se devuelva atrás. Así que cuidado con el valor que eligas, pues está dependerá del tamaño del visor. Mientras más grande sea el visor, más píxeles tendrá el lienzo.
Observación: El juego fue programado con el visor en Monitor size*, por lo tanto, los valores numéricos puestos en los bloques de programación son coherentes con el tamaño de la pantalla.
El tamaño de visor Monitor size es de 1024 pixeles por 768 pixeles. Utilicé este, pues es el que más se acomodaba a mi celular. Puedes usar el que te parezca más cómodo.
Pelícano1 es el de más arriba, avanza de derecha a izquierda. Entonces si queremos que se devuelva, el valor de x debe ser grande, en este caso se utilizó 300, llegando a él con ensayo y error. Pues si al probar el juego, el pelícano se queda pegado al borde sin hacer nada, el valor seleccionado fue muy alto.
Pelícano2 avanza de izquierda a derecha, entonces si queremos que se devuelva debemos elegir un valor cercano a 0, en este caso elegimos 15. Si al iniciar el juego el pelícano se queda en el borde, es porque se eligió un valor muy cercano al borde, asi que debes aumentar el número.
Finalmente, solo nos queda agregar un sistema de puntuaciones, para que cada vez que el perro toque la pelota, sume un punto. Pero antes, añadiremos una dificultad. Cada vez que la pelota rebote en algo, está aumentará su velocidad.
Para ello es necesario utilizar los bloques, "Poner Pelota Velocidad como", en Matemáticas elegir el bloque operación multiplicación y multiplicar un valor numérico con "Pelota Velocidad".
Aquel bloque debemos ponerlo en cada objeto con el que colisiona la pelota. Se decidió poner el valor 1.1 para que la pelota no aumente su velocidad tan rápidamente, ya que un valor muy grande hará "injugable" el juego, y un valor bajo 1 hará que vaya disminuyendo la velocidad.
Una opción para añadirle aleatoriedad a la velocidad de la pelota es que cada vez que colisione con un pelícano, la velocidad cambie entre ciertos números. Considerando que la velocidad predeterminada es 5, podría fijarse un número aleatorio entre 5 y 10.
Debes elegir una opción u otra, ya que establecer ambas producirán un error en el juego.
Finalmente, le agregaremos un contador de colisiones, para esto necesitamos un campo de texto para ir mostrando la cantidad de colisiones que se van generando.
Activa el modo de Diseño y agregaremos un campo de texto desde Paleta / Interfaz de usuario.
No podemos agregar el campo de texto al lienzo por lo tanto necesitamos cambiar el tamaño del Lienzo. Para esto seleccionamos Lienzo desde el área Componentes y cambiaremos el Alto.
En propiedades del lienzo cambia por 80% el alto.
Seleccionamos el área Paleta / Interfaz de usuario y arrastramos debajo del lienzo el CampoDeTexto.
Ahora en el área bloques, necesitamos una variable global llamada contador inicializada en 0, que sea reconocida por todas las componentes, para esto vamos al modo Bloques, seleccionamos Variables y arrastramos inicializar global nombre como.
El evento de colisión es el siguiente: Cada vez que colisiona Perro con la Pelota debemos incrementar el contador y escribir su valor en el Campo de Texto.
Para incrementar en 1 el valor del contador necesitamos poner el contador al valor de la suma del valor actual del contador más 1
Para sumar seleccionamos el bloque suma de Matemática y lo completamos con:
Tomar el valor de la variable global de contador más el valor 1 de un bloque de Matemáticas.
Asigna el nombre al bloque poner y encaja el bloque de la suma, obteniendo lo siguiente
Como queremos actualizar el campo de Texto debemos poner en el CampoDeTexto un Texto con el valor de la variable global contador.Seleccionamos en el área de Bloque el CampoDeTexto y seleccionamos el bloque poner CampoDeTexto el Texto.
Luego se encaja aquello en la colisión del perro con la pelota.Para terminar puedes cambiar el color de Screen 1, y añadir los detalles que quieras. Como detalle adicional te recomiendo modificar los valores de los intervalos adonde sale lanzada la pelota después de rebotar con algún objeto.
Para el Pelicano1 te recomiendo en valor de "y" un intervalo de números grandes, así la pelota rebota en él y sale disparada hacia abajo.
Con Pelicano2 te recomiendo en valor de "y" un intervalo de números pequeños así la pelota rebota hacia arriba.
El eje x no tiene ninguna especificación ya que queremos que la pelota al rebotar apunte a cualquier parte del lienzo sea izquierda o derecha del centro.
Para terminar, recuerda guardar el proyecto y descargarlo en tu computador.
El resultado del juego es el siguiente:
Comentarios
Publicar un comentario