miércoles, 30 de noviembre de 2011

Tutorial arkanoid app inventor

Tutorial sobre cómo hacer un Arkanoid estilo “Urías” en app inventor
Para este tutorial necesitaremos de los siguientes componentes:
·         3 Canvas: 1 para la pantalla de inicio, 1 para la pantalla principal del juego y el último para cuando el juego haya concluido.
·         Dentro del Canvas principal, se incluirán 7 Sprites (de los cuales 3 serán las barras a destruir, 3 serán las explosiones que produzca la destrucción de estas barras y 1 será la barra que controlará el jugador) y 1 componente Ball.
·         1 Botón que será el que inicié el juego.
·         1 Label la cual almacenará nuestra puntuación.
·         3 componentes de sonido: 1 para el sonido se inicie la aplicación y cuando el usuario empiece a jugar, 1 más para reproducir el choque entre los Sprite y otro para cuando el usuario concluya el juego.
·         2 componentes Clock, 1 para iniciar el cambio de pantallas, entre la de inicio y la principal.
Dejaremos los nombres de los componentes en default, al abrir el gestor de bloques, primero seleccionamos el método Initialize del bloque Screen1, dentro de ese bloque colocaremos el método Canvas3.Visible como true, que será para mostrar nuestra pantalla de inicio, un método Sound1.play y activar el método Clock1.TimerEnabled para activar el método Clock1.Timer dentro del cual pondremos como false nuestro método Canvas3.Visible, poner en true el método Canvas1.Visible para cambiar a nuestra pantalla principal, en true el método Button1.Visible y deshabilitar nuestro Clock1.Timer.


Posteriormente programaremos el método Button1.Click, primeramente utilizamos los bloques Ball1.X y Ball1.Y, dentro del apartado Built-In en la sección Math seleccionamos los bloques 6 bloques number, que nos servirán para poner los valores de Ball1.X, Ball1.Y que indican la posición de nuestra bola, otros 2 para indicar el rango de movimiento de la bola y otros 2 para colocar los valores del bloque Ball1.Interval y Ball1.Speed para indicar la velocidad de la bola. Entonces colocaremos los bloques Ball1.Heading al cual le añadiremos la función random integer, también encontrada en Built-In sección Math, los valores serán a criterio. Colocaremos el bloque Sound1.play para reproducir un sonido al dar click al botón y colocar los bloques Canvas1.Visible, Canvas2.Visible las cuales son nuestras pantallas principal y de conclusión, poniendo la primera en true y la segunda en falsa, también Barra1.Visible, Barra2.Visible y Barra3.Visible en true. Esto se hace para que cada vez que se de click al botón se puedan actualizar las pantallas ya sea porque no se terminó el juego destruyendo no todas las barras porque se concluyó y salió otra pantalla.

Lo siguiente es hacer que la barra principal (la cual controlaremos) se mueva, para eso colocaremos el bloque ImageSprite1.Dragged, a este solo le añadiremos la función ImageSprite1.MoveTo y a esa función le asignaremos el bloque currentX y el ImageSprite1.Y ya que solo se moveré en el sentido de las Y.

Para continuar colocaremos el método Ball1.CollidedWith, al nombre le daremos ImageSprite1 para indicar lo que sucederá cada vez que nuestra bola choque con nuestra barra principal. Colocamos el método Ball1.Heading, una función menos para indicar la nueva ruta de la bola al chocar poniéndole en la resta un valor 0 y del otro lado el valor Ball1.Heading. Pondremos un condicional If para indicar que si el valor visible de las 3 barras es igual false cambié de pantalla y reproduzca un sonido, esto par para indicar que el juego concluyó.


Tomaremos dentro de la sección Built-In Definition una variable a la cual le daremos el nombre de nuestra label en este caso es Label1 y le asignaremos un valor 0. Pondremos un procedimiento dentro del cual pondremos el boque Label1.Text y le asignaremos la propiedad Text (dicha propiedad Text tendrá el valor de Puntuación=) y la uniremos con el valor que tenga la variable label1 (la cual será incrementando en cada colisión de la bola con las barras a destruir).
A su vez pondremos el bloque Clock2.Timer dentro del cual pondremos los 3 sprites para las explosiones en Visible false, es decir, cada vez que se ejecute el Timer se pondrán en falsos y se pondrán visibles solo cuando colisionen por 1 segundo. Aquí mismo se manda llamar al procedimiento para estar actualizando el Label1.Text.





Colocaremos un Ball1.EdgeReached para indicar cuando se ha alcanzado el filo de la pantalla con un condicional if-else dentro para indicar en caso de que el filo no sea -1 (es decir, que la bola no ha bajado a una posición inferior a nuestra barra principal) rebote (método Ball1.Bounce) y si no se desactiva la bola. 

Lo último que queda es colocar los bloques que indiquen las colisiones de cada barra a destruir. Se colocará el método Barra1.CollidedWith, en nombre le daremos Ball1. Dentro colocaremos los bloques barra1.Visible como false, xplo1.Visible como true (desaparecer la barra y colocar una explosión), Sound2.Play para reproducir un sonido al chocar, un Sound2.Vibrate dándole el valor de 100 para que vibre al chocar la bola con nuestra barra y una variable global del label1 añadiéndole una suma del contenido actual de label1 + 10 (valor a criterio) y listo, lo mismo será para las otras 2 barras.