jueves, 10 de diciembre de 2015

Videojuego serpiente

Videojuego serpiente programado con Tululoo. Para mover se usan los cursores o bien se pincha sobre la pantalla (arriba, abajo, izquierda y derecha).

lunes, 7 de diciembre de 2015

jueves, 3 de diciembre de 2015

Programar videojuegos con Tululoo Gamemaker


Tululoo permite programar videojuegos para ser jugados desde un navegador. Es un entorno gratuito y hereda mucho de GameMaker. A continuación pondré un conjunto de capturas de pantalla para explicar sucintamente cómo se puede programar un videojuego sencillo que está subido en esta dirección:
http://videojuegosgamemaker.blogspot.com.es/2015/12/probando.html

Iré explicando cómo está hecho este videojuego concreto con Tululoo.
Puedes pinchar sobre las imágenes para verlas más grandes.

Sprites 
Los sprites son los dibujos. Se gestiona desde la pestaña de sprites.


Una vez seleccionamos un Sprite podemos definir su límite de colisión (para interactuar con otros objetos más adelante).


Si queremos un Sprite que no sea cuadrado (lo habitual) tenemos que eliminar el color que quede fuera, para ello es muy sencillo con la herramienta de borrar que está marcada en la captura de más abajo:


Objetos
 Los objetos (Objects) son el cuerpo fundamental del programa y es donde deberemos incluir la programación en función de los diferentes eventos sobre los que podemos programar. Iremos analizando esto para los diferentes objetos de nuestro ejemplo.


El objeto objPac tiene programado en nuestro ejemplo 5 eventos: uno de creación, otro de step y tres de colisiones.


Vamos a usar las ecuaciones de movimiento r = r0 + v, que por componentes será:

x = x0+vx
y = y0+vy

Para ello programamos en el evento de creación el valor inicial de las velocidades: vx = 4, vy= 0 (movimiento horizontal hacia la derecha).


El evento de Step controla cómo va a ir moviéndose Pacman. Para leer el teclado usamos la función keyboard_check(). con el condicional if. Esta es la programación, tal y como puede verse en la siguiente captura de pantalla:

if ( keyboard_check( vk_right )) {
    vx = 4;
    vy = 0;
}
if ( keyboard_check( vk_left )) {
    vx = -4;
    vy = 0;
}
if ( keyboard_check( vk_down )) {
    vy = 4;
    vx = 0;
}
if ( keyboard_check( vk_up )) {
    vy = -4;
    vx = 0;
}
x = x +vx;
y = y +vy;



Para programar las colisiones tenemos dos objetos diferentes sin código que son pared_up_down que están situadas arriba y abajo y pared_iz_de que están situadas a la derecha e izquierda. Programamos para que Pacman pare si choca con las paredes de arriba y abajo sin más que poner:

y = yprevious;

Es decir, hace que la coordenada "y" de Pacman sea la anterior.


Hacemos lo mismo con la coordenada "x" para la colisión con pared_iz_de.

x = xprevious;


La colisión de Pacman con el objeto pincho es la siguiente:

coorx = x;
coory = y;
this.instance_destroy();
instance_create(coorx, coory, Pacman_muerto);
instance_create(200, 580, mensajefinal);

Lo que sirve para destruir el objeto objPac  [con this.instance_destroy();], crear el objeto Pacman_muerto en el mismo sitio que objPac [con instance_create(coorx, coory, Pacman_muerto);] y poner el mensaje de volver a empezar al darle a la tecla "0" [con instance_create(200, 580, mensajefinal);]



Analicemos ahora el objeto pincho: tiene cuatro eventos.


Vamos a guardar las velocidades en las variables px y py. Como durante el juego se van a crear varias instancias de este objeto, para distinguir unas de las otras usamos this.px y this.py, de esta forma:

this.px = 2;
this.py = 2;


En el evento step se actualizan las coordenadas:

this.x = this.x + this.px;
this.y = this.y + this.py;


Las colisiones con las paredes verticales hacen que las velocidades en el eje "x" cambien de signo:

this.px = -this.px;



Las colisiones con las paredes horizontales hacen que las velocidades en el eje "y" cambien de signo:

this.py = -this.py;



El objeto comida tiene dos eventos programados. En el evento de creación definimos la variable puntos. Como queremos que esta variable sea global y accesible a otros objetos, la definimos así:

global.puntos=0;


El evento colisión con Pacman lleva esta programación:

x = 64 + random (300);
y = 64 + random (300);
instance_create(64+random(300), 64+random(300), pincho);
global.puntos= global.puntos+1;

Así, hacemos que el objeto comida cambie de posición al azar [x = 64 + random (300); y = 64 + random (300);], que cree una nueva instancia del objeto pincho también en una posición al azar [instance_create(64+random(300), 64+random(300), pincho);] y aumenta en uno los puntos.


El objeto Pacman_muerto solo lleva esta programación en evento Step:

if (keyboard_check_pressed(vk_0))
{
room_goto_first();
}

Que reinicia el juego al pulsar la tecla "0".


El objeto puntuación lleva este código en el evento Draw:

draw_set_font(fuente);
draw_text(100, 490, "Puntuación: "+global.puntos);

Previamente definimos en la pestaña Fonts el tipo de fuente que queremos y le damos un nombre (en este caso fuente).



Tenemos finalmente otros objetos que solo sirven para escribir texto o sacar otro objeto que solo lleva una imagen.



Scenes
Las Scenes son las pantallas (Rooms en GameMaker). Este ejemplo solo tiene dos, una inicial a modo de portada que espera que se pulse la tecla "0" y la del juego en sí.


La edición de Scenes nos permite ir situando los objetos en el lugar en el que queremos.







lunes, 16 de junio de 2014