Tutorial sobre cómo empezar tu app en AppInventor
Una de las formas más fáciles para aprender en todo tipo de ámbitos es a través de un juego, y eso es lo que vamos a realizar en este tutorial. Aprenderemos cómo poner una pantalla interactiva en la aplicación, a generar objetos dentro de esa pantalla, y el movimiento e interacción de objetos en y con la pantalla.
Para empezar nuestra aplicación, es necesario crear un proyecto nuevo. Esto se hace en la parte superior de la página, hay que clickear en proyectos > comenzar un proyecto nuevo. Luego de esto saldrá una pantalla como esta:
Aquí hay que poner un nombre cualquiera al proyecto, en este caso le podemos poner tutorial1, o un nombre que a ti te parezca.
El paso siguiente será conectar el emulador a la página. Esto se podrá hacer con el tutorial que vimos anteriormente. Si no lo recuerdas, puedes ingresar haciendo click aquí. Luego de que esté todo listo, se podremos ver una página como esta:
Al ver la página, podemos analizar los componentes que tiene esta herramienta. En primer lugar, en color morado en la imagen, podemos ver los ajustes principales del proyecto: es aquí donde se pueden crear proyectos nuevos, abrir proyectos, crear la conexión con el emulador y un largo etcétera.
Luego, en color azul, está la paleta. Es aquí donde próximamente podremos elegir próximamente lo que queramos que esté en la aplicación. Sus elementos pueden ser básicos como botones en la pantalla, y un poco más complejos, como un lienzo en el que uno pueda dibujar usando la función táctil del celular.
En celeste, está el visor de la aplicación. Es aquí donde deberemos arrastrar los elementos desde la paleta en el orden y disposición que uno desee. Es totalmente editable así que no hay problema con probar diferentes formas de organizar la aplicación para encontrar la más adecuada.
En verde, están los componentes y elementos que has agregado desde la paleta. Existe un orden de jerarquía entre los elementos.
En café, están las propiedades de cada elemento. Aquí es donde se pueden cambiar las características y dimensiones de los elementos que vayamos agregando, como por ejemplo la altura y el ancho de cada elemento.
Por último, el botón rojo es el botón de bloques, y deberemos usarlo para programar con cada elemento que pusimos en nuestro diseño.
¿Qué aprenderemos con este tutorial?
Aprenderemos cómo crear nuevos elementos u objetos en nuestra aplicación, como cambiar la apariencia de dichos objetos y como darles instrucciones a los elementos.
Haremos un juego parecido al mítico Pong, donde habrá una pelotita que rebotará en los bordes del celular. Habrán dos jugadores, el usuario y un oponente estático. La idea del jugador será esquivar la pelota, y al primero que le llega la pelota 15 veces, pierde. Al finalizar, debería quedar algo como esto:
¿Cómo podemos hacer la aplicación?
Para comenzar, lo que debemos hacer es poner un fondo en la aplicación sobre el cual podamos trabajar. Para esto, se debe ir a la paleta y buscar Dibujo y Animación, hacer click y luego buscar donde dice Lienzo, y arrastrarlo al visor.
Si todo salió bien, debería salir un cuadrado pequeño en el visor. Para agrandarlo, hay que ir a propiedades del lienzo, y dejar su ancho y su alto como ajustar al contenedor.
Luego de esto, agregaremos los objetos que van a estar en nuestro juego. Como habíamos dicho, usaremos dos personajes (el usuario y el oponente) y una pelota. En la paleta, nuevamente debemos ir al apartado de Dibujo y Animación, como en la figura anterior, pero esta vez arrastrar Pelota al centro del lienzo.
Para los objetos, necesitaremos dos imágenes, las cuales se pueden integrar con SpriteImagen. Arrastrar uno hacia la parte superior del lienzo y el otro hacia la parte inferior del lienzo. Si hicieron todo correctamente, debería quedar algo parecido a esto:
Para personalizar la aplicación, podemos poner imágenes para reemplazar a esos logos que aparecen ahí. Para hacer esto, debemos ir a la parte de componentes y seleccionar el componente que queremos cambiar. Luego, vamos a Medios -> Subir Archivo
Luego lo que haremos será crear contadores para cuando caiga en cada objeto (puntuación). Para esto, se deberá ir a variables e inicializar las variables de puntaje para usuario y puntaje de oponente, dependiendo de lo que hayas puesto en su contexto. En este caso:
Ahora haremos que cada vez que le llegue a cada personaje, le suba el puntaje al otro. Esto lo hacemos con el bloque cuando objeto.EnColisionCon ejecutar y adentro subiremos la puntuación y también haremos que rebote hacia un lugar aleatorio. Debería quedar así, para los dos objetos:
También debemos incluir una función para que podamos mover a nuestro personaje de forma horizontal. Esto se hace arrastrándolo, usando la función "cuando Objeto.Arrastrado ejecutar"
y llamamos al objeto a la coordenada X actual y a la coordenada Y inicial, de esta forma:
Por último, hay que poner un final para el juego, en este caso, cuando algún personaje llegue a los 15 puntos. Para esto, modificaremos el primer bloque que realizamos, para darle un final. Esto se hace integrando dos bloques "Si, entonces", y la condición será: "si puntaje1 = 15, velocidad pelota 0" y "si puntaje2 = 15, velocidad pelota 0" de la siguiente forma:
Y con esto ya estaría lista nuestra aplicación. Lo que vamos a agregar ahora serán cambios que ayudarán a mejorar la visualización y el entendimiento de la aplicación, en este caso serán campos de texto que nos indicarán el puntaje de cada figura, y un botón que reinicie el juego. Los botones se deben agregar en la pantalla Diseñador.
En la paleta, se debe ir a Disposición y arrastrar Disposición Horizontal a la pantalla.
Esto puede ser arriba o abajo, es tu decisión. En este tutorial lo pondremos abajo, y quedará como un cuadrado bajo el lienzo. Luego de esto, arrastraremos dos campos de texto para el puntaje, y esto se hará buscando estos campos en la paleta, en la parte de Interfaz de Usuario. Por último, debemos agregar un botón al final de la disposición, que será el que nos ayudará a reiniciar el juego. Sin embargo, nos vemos con una dificultad, que los dos campos de texto son tan grandes que no se puede poner el botón. Para remediarlo, cambiaremos el ancho de los campos de texto en propiedades, de la siguiente forma:
Esto quiere decir que cada campo de texto ocupará 35% del ancho total, lo que nos dará chance de poner el botón. El fondo de tu aplicación deberá quedar de la siguiente forma:
Para programar con estos botones, lo debemos hacer en Bloques. Empezaremos con el botón Borrar. Debemos buscar el bloque que dice "Cuando Boton1.Clic ejecutar". Lo que haremos será reiniciar los puntajes y los campos de texto, y bajar la velocidad a la inicial. El bloque queda de la siguiente forma:
Y por último, en los campos de texto se deberá ir reflejando el puntaje. Esto lo haremos en los bloques cuando una figura toca la pelota, ya que es ahí donde se produce el cambio de las puntuaciones. Por lo tanto iremos a dichos bloques y le agregaremos este bloque adicional:
Y lo mismo con el otro cambio de texto, solo que con el otro personaje. Y estaría listo, lo que queda es personalizar las imágenes con lo que tú quieras, y si quieres, cambiar algunas reglas del juego, como la velocidad de la pelota, o agregar diferentes obstáculos entre medio. Espero te haya gustado este tutorial, y pronto se viene un tutorial con nuevas características y actividades, saludos :)
Comentarios
Publicar un comentario