Aumentar el tamaño de un archivo incrustrado

Haz funcionar el reloj de App Inventor

Os dejo un enlace para que nuestro reloj de App Inventor se ponga en marcha. Solo tienes que pinchar en la palabra enlace

App Inventor + PHP+ MySQL

Un enlace interesante para seguir paso a paso la fusión de App Inventor + PHP + MySQL. Pinchar en la palabra enlace

Imitando un juego con App Inventor

Flappy Bird. Gráficos y videojuegos en APP Inventor.

2013 fue el año en el que  un modesto desarrollador vietnamita publicó Flappy Bird, un sencillo juego que consistía en un pájaro que debía volar entre unas tuberías sin chocar. El vuelo se controlaba con una pulsación en la pantalla quer combatía la caída del pájaro. Esta sencillez, combinada con una dificultad alta y un punto importante de azar,convirtió al juego en un fenómeno viral que llegó a dar unos beneficios de unos 90.000$ al día. Sin embargo el creador decidió retirar el juego pues su objetivo era crear un entretenimiento, no una fuente de adicciones. (Fuente: Wikipedia).

Aunque es poco probable que no conozcais el juego podeis probarlo, ya que actualmente hay una infinidad de clones del mismo. En este enlace hay una versión online.

Un buen ejercicio, por tanto, es realizar un clon del Flappy Bird, que se ha convertido en una especie de "Hola, mundo" del desarrollo de videojuegos.

¿Qué tengo que hacer?

Aprender a programar el juego completo llevaría más tiempo del que disponemos en clase. APP Inventor, además, no es una aplicación de desarrollo de videojuegos profesional y es complicado un resultado conseguir. Pero trataremos al menos de ver por donde habría que empezar para crear un Flappy Bird en APP Inventor. Cuando tengas el resultado final publica el código QR que de acceso a la APK.

 

 Con pasos pequeños y constantes llegarás más lejos Para desarrollar videojuegos, al ser programas con un cierto nivel de complejidad, es imprescindible, al igual que en cualquier problema, ser analíticos y dividirlo en problemas más pequeños y fáciles de solucionar. Es la forma más fácil de construir nuestro juego: dándo pasos pequeños

No copies!!!!!. Procura no mirar constantemente la guía y copiar los códigos sin meditar. Para aprender a programar es bueno pelearse, buscar soluciones por uno mismo, y utilizar la ayuda externa para desatascar en momentos de bloqueo o cuando llegamos al límite de lo que sabemos hacer.

1. DISEÑO Y ANIMACIÓN: 

Lo primero descargar las siguientes imágenes a vuestro ordenador. (Por favor abrir una carpeta con el nombre del juego e ir introduciendo en ella todos los elementos)

bird1.png

bird2.png

bird3.png

bird4.png

fondo.png

DISEÑO: En APP Inventor tenéis que poner en vuestra pantalla (Screen) fondo.png, sin olvidar eliminar el color de fondo que lo tapará. Teneis que incluír un Canvas (terreno de juego) que llene la pantalla (fillParent). Situar un ImageSprite en la mitad de la pantalla. Además necesitaremos un reloj (clock) al que daremos un interval de 100 (para que la animación vaya a una velocidad adecuada):

Elementos de nuestro diseño

1. PROGRAMA: Para el programa de bloques haremos lo siguiente. Primero debemos usar el reloj, para que nos temporalice nuestra animación. Lo que veis dentro es una llamada a una función o método o procedimiento, llamado FlappyAnim, que es un trozo de programa que construimos en otro lugar, por estructura, comodidad y para ahorrar código:

Debemos pues programar el método que codifica la animación. Crearemos también una variable llamada animacion que nos contará el número de sprite que usaremos (tenemos bird1.png, bird2.png, bird3.png y bird4.png y debemos cambiar entre ellos). 

Al ir cambiando animacion (vamos haciendo que se sume 1 en cada intervalo de reloj en set global animacion), podemos decirle al programa que cambie la imagen sucesivamente (set ImageSprite1.Picture). Primero bird1.png, luego bird2.png, luego bird3.png, luego bird4.png... y como bird5.png no existe, creamos un condicional para que animacion vuelva a tomar el valor 1 cuando llega a 5 y se repita sucesivamente:

2. MOVIMIENTO:

Una vez que tenemos a Flappy con la animación de las alas en pantalla, es hora de darle dinamismo. Queremos que se caiga por acción de la gravedad, y que al pulsar sobre la pantalla se impulse hacia arriba. Para ello crearemos una variable llamada velocidad, y un método o función llamado gravedad.

 

IMPORTANTE: Tenemos que tener en cuenta que el origen de coordenadas es la esquina superior izquierda, aumentar la X es ir hacia la derecha (convencional) y aumentar la Y es ir hacia abajo (al contrario que en las coordenadas cartesianas).

2.1 GRAVEDAD: La velocidad debe, por tanto, aumentar automáticamente por acción de la gravedad. Aquí hay que tantear, probamos aumentándola de 3 en 3, podrían considerarse otros valores. Después debemos modificar la posición Y del sprite sumándole esa velocidad. Cuanto mayor sea la velocidad, más caerá Flappy. Comprobad que funciona.

En el juego, al caer Flappy, también cambiaba la inclinación del Sprite. Si nos quedábamos sin pulsar nada, Flappy terminaba haciendo un picado. Para conseguir este efecto debemos cambiar la propiedad ImageSprite.Heading. Lo hacemos a través de un condicional para asegurar que la inclinación se estanca en la dirección hacia abajo (-90º). Si la inclinación no ha llegado a -90, vamos restando, yo he probado de 8 en 8:

Para hacer que la gravedad actúe siempre, hay que incluírla dentro de un reloj (puede ser el que ya teníamos o crear uno independiente para controlar mejor su acción).

2.2 SALTO: Por fin programaremos algo de interactuación con el usuario. Nuestro proyecto empezará a parecer un videojuego. Necesitamos que al pulsar sobre la pantalla (canvas), Flappy se impulse hacia arriba, es decir, debemos cambiar la velocidad. La pulsación se detecta con When Canvas.Touched.

Como una velocidad positiva era sinónimo de caída, debemos hacer que al tocar, la velocidad sea negativa ( -20). También queremos que Flappy recupere inclinación (Heading 22). Pero vosotros podéis cambiar estos valores por otros.

Comprobad que ya tenemos a Flappy animado, cayéndose y saltando cuando pulsamos sobre la pantalla. Podéis modificar los valores propuestos para ver cómo cambia el programa.

3. ESCENARIO: 

 

Para simplificar simplemente aparecerán tuberías por abajo para saltar y de la misma altura. Dejo como reto plantearse como construír una versión más completa. Debéis descargaros el siguiente archivo:

tubeabajo.png

Aquí no detallaré tanto los pasos, tenéis que empezar a pelearos vosotros. Daré unas indicaciones generales:

1º. Situar la tubería en el lugar adecuado en el diseñador.
2º. Crear un método llamada Scroll, que cambie la posición X de la tubería, para que se desplace a la izquierda. Id probando (recordad incluír el método dentro de un reloj).

PROBLEMA: Después de conseguir esto, comprobaréis que la tubería se queda parada cuando llega al borde, perdiendo la sensación de movimiento infinito de Flappy.

SOLUCIÓN: Empezamos con trucos para engañar a la mente. Aumentaremos el ancho del canvas, de modo que la tubería se siga desplazando fuera de la pantalla.

PROBLEMA: ¿Cómo hacemos que aparezcan nuevas tuberías?

SOLUCIÓN: Con un condicional podemos hacer que cuando perdamos de vista la tubería por la izquierda, vuelva a aparecer por la derecha cambiando su posición X.

Intentadlo e id solicitando mi ayuda cuando os sintáis bloqueados.

4. COLISIÓN Y "GAME OVER"

Otro concepto esencial en los videojuegos es la detección de colisiones. Es un tema que parece sencillo, pero da bastante trabajo a los programadores para hacer sistemas de detección buenos y que no consuman mucha memoria.

Para detectar colisiones suelen usarse formas sencillas e invisibles encima de nuestros sprites, pero si no complicamos este sistema nos encontraremos con que puede haber detecciones de colisión falsas, por ejemplo, estas dos naves cuya forma ha sido simplificada a un círculo:

No hay choque, pero el programa sí cree que lo hay.

Profundizar mucho en esto no es el objetivo de la materia, si a alguien le interesa está muy bien este artículo.

APP Inventor ya trae implementada un sistema de detección de colisiones, aunque no es muy avanzado. Para esta parte del programa necesitareis dos nuevos sprites:

start.png

gameover.png

Debéis incluírlos en pantalla, bien situados, y desactivar la casilla Visible.

DETECTAR COLISIÓN: Utilizaremos When ImageSprite.Collided With. Debemos decirle al programa que cuando Flappy choque, pare los relojes y haga visibles GameOver y START:

REINICIAR EL JUEGO: Cuando pulsemos sobre START, debemos reiniciar las posiciones de Flappy, de la tubería, hacer desaparecer el Game Over y el START y reiniciar los relojes:

5. PUNTUACIÓN

Falta algo fundamental para que nuestro Flappy Bird primario se parezca en jugabilidad al original. Queremos que el juego cuente cuántas tuberías llevamos superadas. Aqui debemos utilizar otro truco de programador:

1º. Crearemos un Sprite detrás de Flappy. Yo le he llamado DetectaPuntos.

2º. No le asignaremos ninguna imagen, sólo modificaremos su tamaño para que sea estrecho y muy alto (por ejemplo, 10 pixels x 400 pixels).

3º. En los bloques haremos que cuando este Sprite detecte colisión (sólo puede colisionar con tuberías), aumente una variable nueva que almacene la puntuación.

4º. En el diseñador incluiremos un Label que nos muestre los puntos. Podríamos hacerlo con Sprites y números gráficos, pero simplificaremos con la etiqueta de texto.

4º. Cuando reinciemos con START, debemos poner la puntuación a 0 de nuevo.

5º. Podemos incluir un botón SHARE para compartir nuestra puntuación por WhatsApp. Lo dejo como ejercicio.

6. MEJORA Y COMPLETA EL PROGRAMA (opcional)

El aspecto del juego tal y como está hasta ahora es el siguiente:

Como véis, está encauzado, pero lleva su tiempo. Conseguir un resultado igual al del juego original sólo es cuestión de seguir trabajando, depurando y mejorando. Dejo un atlas con todos los gráficos necesarios por si queréis intentarlo.

Ejercicios con Scratch

Os dejo dos tutoriales para realizar ejercicios con Scratch. No olvidar que podemos usarlo desde la plataforma Scratch y desde los enlaces de nuestro ordenador, pinchando en la cigüeña de la parte inferior, de la pantalla, a vuestra izquierda. Seguir estos enlaces:

1. Ejercicios que tenéis que hacer y sobre todo "leerlos"
2. Cuaderno de ejercicio

Crear un cartel con EASELLY online

Se llama easelly. Se trata de un programa online que está pensado para que hagamos carteles bonitos para presentar distintas informaciones: gráficas, resultados, cursos... En realidad lo voy a usar para una exposición que voy a hacer en el centro. Pensando pensando y viendo viendo...llegué a la conclusión de lo que quería y al buscar encontré esta herramienta que me va a ayudar con la parte gráfica. Os dejo este tutorial tan bonito para que sigáis los pasos y os hagáis con esta herramienta. EASELLY

KOMPOZER

Hoy comenzamos con las páginas web. Vamos a realizar una que pueda usarse en las clases con unidades didácticas completas que admitan todo tipo de multimedia (fotos, vídeo, audio, revistas digitales, formularios...). Para ello usaremos el programa Kompozer (o Nvu, que es igual) que, de los editores de páginas web que hay en el mercado, es uno de los más fáciles de usar, con muchas posibilidades y, esto es importantísimo, completamente gratuito. 
Os dejo el enlace para realizar los ejercicios: ejercicios Kompozer