Juego del Astronauta

A continuación, comenzaremos a trabajar con la aplicación que aprendimos a instalar, la idea es que vayas realizando el paso a paso que te dejaré, para que así comprendas cada movimiento que se va realizando, y te logres dar cuenta lo sencillo que es usar esta aplicación.

El juego que realizaremos ahora será muy simple, ya que será algo para comenzar a entender la aplicación y algunas de sus funciones básicas, de esta manera verás lo divertido y las grandes cosas que se pueden crear!.

Nuestro juego será: El astronauta en el espacio

PASO 1: Debemos ingresar a la página principal de App Inventor, y darle en Create Apps!, como ya tenemos nuestra cuenta creada, solo nos dirá si queremos ingresar en ella.

PASO 2: Nos aparecerá la siguiente pestaña, en la cual debemos darle click en ''Start New Proyect'', también en esta pestaña, cuando ya tengamos proyectos, podremos acceder a ellos y verlos seleccionandolos.

PASO 3: como nombre, le colocaremos ''Juego_Astronauta'', de esta manera luego nos será más fácil poder encontrarlo para trabajarlo.

PASO 4: en la esquina superior derecha, junto a otras opciones, veremos una que dice ''english'', en esa opción le podremos cambiar el idioma, lo dejaremos en español para comprender mejor.

PASO 5: al costado izquierdo de nuestra pantalla, encontraremos la sección llamada ''Paleta'' en donde encontraremos distintas opciones para poder trabajar; en esta ocasión le daremos click en la sección ''Dibujo y animación''. en la cual se desplegarán 3 opciones para el diseño.

Lo siguiente que haremos será deslizar la opción ''Lienzo'' a nuestro simulador en forma de teléfono, en donde veremos cómo va quedando nuestro proyecto.

PASO 6: a nuestro lado derecho encontraremos dos opciones similares a la Paleta, en donde tendremos ''Componentes'' (en donde podremos seleccionar cuál será el objeto a trabajar para editar o configurar); y también está la opción ''Propiedades'' (donde podremos arreglar los ajustes de los objetos, fotografías, etc).

Lo primero que haremos es darnos cuenta que estamos trabajando con el Lienzo; luego, en propiedades lo primero que haremos es cambiarle el color al fondo, en este caso escogeremos negro, que es lo más semejante al espacio.

PASO 7: lo siguiente que cambiaremos en el lienzo es el tamaño en el -ANCHO y ALTO-, más abajo del color de fondo encontraremos esas opciones, haciendo click en cada una, nos dará varias opciones y nosotros colocaremos ''Ajustar al contenedor'' (está opción nos ayudará, ya que independiente del dispositivo que nosotros utilicemos, se verá ajustado a ella).

PASO 8: agregaremos (deslizando igual que anteriormente), ahora un ''SpriteImagen'' en la opciones dispuestas en la Paleta.

PASO 9: a nuestro lado derecho de la pantalla, abajo de componentes, encontraremos la opción ''Medios'' donde podremos añadir una fotografía.

Buscaremos en internet alguna fotografía de un astronauta, pero esta debe estar en formato png, así que al momento de buscar coloquen ''Astronauta png'' así les aparecerá más rápido el tipo de fotografía. Esta foto que hayamos escogido, será el archivo que subiremos al presionar -subir archivo-.

PASO 10: una vez subido nuestra fotografía, iremos a componentes para poder modificar ciertas cosas de la Sprite. Lo primero, en propiedades, es ir hasta la parte ''Foto'', al darle click apretaremos nuestra fotografía subida, así en nuestra pantalla del celular nos aparecerá dicha foto.

PASO 11: otro arreglo que le realizaremos, será en el ancho y largo, le pondremos la opción de uno digitar los números y le colocaremos 80 a ambas opciones.

Podemos ir viendo el avance de nuestro trabajo en la pantalla que simula ser un celular, de todas maneras y como se te mencionó al momento de instalar la aplicación, que esto se puede ver a través de la aplicación así vemos lo que tenemos y el cómo va quedando.

Ahora comenzaremos a trabajar con la parte de programación que será la capaz de hacer posible que nuestro astronauta comience a moverse por este espacio. Para eso en la esquina superior derecha (un poco más arriba de propiedades) hay dos opciones ''diseñador y bloques'', le haremos click en bloques.

Antes de continuar, recuerda ir guardando tu trabajo, para que así no se pierda el avance que nosotros tenemos.

PASO 12: iremos a la sección bloques (esquina izquierda), y seleccionaremos Screen1, y nos aparecerán unas opciones para anclar. Haremos click en la siguiente:

para poder usar la opción, debemos arrastrarla hasta nuestra pantalla principal.

PASO 13: haremos lo mismo de ahora, pero con la bola, ya que necesitamos hacer calzar los bloques así tendrá sentido nuestro movimiento, cuando el Screen se inicie, nuestro astronauta tendrá valores para su movimiento.

Haremos este paso (de agregar este bloque) 3 veces, y los uniremos entre sí, para luego unirlas al bloque del Screen (naranja), si te das cuenta en el bloque verde del Sprite, sale ''dirección'', como tenemos 3 casillas verdes, a cada una le daremos una opción diferente, una deberá quedar con ''Dirección'', otra con ''Velocidad'' y otro con ''Intervalo''. Nos debe quedar de la siguiente manera:

PASO 14:  nos vamos a la parte de arriba de los bloques, y apretamos donde dice ''matemáticas'' y luego apretamos la siguiente opción para añadir uno la cifra, este bloque lo añadiremos dos veces.

Estos bloques los uniremos al que tiene al intervalo, y al que tiene la velocidad. Al de Velocidad podemos ir jugando colocándole cualquier número para señalar qué tan rápido lo queremos, en esta ocasión le colocaremos 4, y al intervalo 1.

Para el bloque de ''Dirección'' debemos ver el anclaje que le haremos para ver el ángulo en el que se moverá nuestro astronauta. Para eso agregaremos el botón (también encontrado en matemáticas), el entero aleatorio entre. En los valores que podemos añadir, le colocaremos -90 en uno, y en el otro 90.

Recuerda anclar todos los puntos como fueron señalados, es importante que el orden de las cosas estén bien junto con el bloque correspondiente, ya que si lo anclas en otro, no funcionará como nosotros queremos que se mueva. Nos debe quedar así:

Ahora nos encargaremos de ver los movimientos de nuestro astronauta:

PASO 15: vamos a la sección del Sprite, y seleccionaremos arrastrando el bloque de ''cuando es lanzado''. 

De esta manera podremos er los temas de velocidad y dirección, que en cierta parte estarán determinados por nuestro dedo, ya que lo moverá. Nos vamos nuevamente a nuestra Sprite, y vamos arrastramos el ''poner sprite..'' (el mismo que habíamos seleccionado antes), esta opción la seleccionamos dos veces.

Un botón/bloque quedará con la opción de dirección, y la otra le cambiaremos esa opción dejándola con la opción de velocidad. Nos quedará de la siguiente manera:

Nos podríamos preguntar ¿qué velocidad y qué dirección tomaría nuestro astronauta?, será la que nosotros le demos con el dedo al moverlo.

Ahora, iremos a la opción ''Variable'' que la encontramos un poco más abajo de la de matemáticas, arrastramos nuestra opción de tomar, esto lo hacemos dos veces. Un bloque será añadido al que contiene a la dirección, y como opción le colocaremos ''dirección'', el otro, irá anclado a velocidad, y su bloque contendrá la conexión de velocidad. Nuevamente es importante este orden y asegurarnos que los bloques estén bien puestos. Nos queda de la sigueinte manera:

Ahora veremos la manera en que nuestro astronauta rebote cuando llegue a los bordes de nuestro dispositivo, tal cual se estuviera en el espacio.

PASO 16: volvemos a seleccionar nuestro Sprite para poder ver lo del rebote, y vamos a seleccionar la opción ''cuando... tocar borde''. 

Le añadiremos el bloque ''llamar....botar'', y a este bloque le añadiremos el ''tomar'' que habíamos añadido anteriormente en variables, este tendrá la opción de borde.

Nos quedará de la siguiente manera:

Con esto tenemos completo nuestro juego, y podemos comprobarlo, revisándolo en nuestra plataforma. Ingresamos a través del código y podemos ver cómo nuestro juego quedó completo.