jueves, 26 de mayo de 2011

Tutorial Vibora Parte 2

Segunda parte de este tutorial sobre creacion de videojuegos: Vibora
La primera parte la puedes encontra aqui: Tutorial Vibora Parte 1
La tercera parte la puedes encontrar aqui: Tutorial de Vibora Parte 3 
El codigo fuente se encuentra al final del tutorial.

¿Que es lo que vamos a lograr en este tutorial?




Detalles:
  • Inicializar graficos para nuestro juego
  • Cargar Datos
  • Obtener del teclado hacia donde va la vibora
  • Actualizar posicion de la vibora
  • Dibujar Vibora

Diagrama de flujo: (no es tecnico, solo representa a gran escala como va el juego)

Continuacion: Clase Snake
En esta clase tendremos nuestro ciclo principal, crearemos las graficas (clase cGraphic), obtendremos las entradas del teclado para manejar la direccion de la vibora, entre otras cosas.
Crearemos 2 archivos mas uno llamado snake.cc y otra snake.hh, de nuevo te recuerdo que puedes llamar los archivos como gustes.
---- Archivo snake.hh ----


Explicacion breve:
La vibora se divide en cuadros de 20*20(BLOQSIZE), y cada cuadro de estos es guardado dentro de una lista. La estructura POINT se utiliza para guardar los puntos de cada cuadro (x,y). Tenemos una enumeracion que utilizaremos para especificar la direccion de la vibora. MAXX y MAXY son para definir el maximo de cuadros de 20x20 que hay en la ventana (si modificas el tamaño de la ventana, tmb tienes que modificar esto, talvez mas adelante lo arreglemos para que lo haga automatico). Hay 2 variables que no se utilizan, asi que puedes borrarlas sin problema, son _inicio y _final.

---- Archivo snake.cc ----


En este archivo empieza lo interesante, que es el ciclo principal, la actualizacion de la vibora, entre otras cosas. Vamos a analizar el codigo.

cSnake::cSnake: Este es nuestro constructor, aqui creamos un nuevo cGraphic, asignamos los valores iniciales, tamaño del snake, cuadros del snake inicial, direccion inicial.

cSnake::~cSnake: Es el destructor, aqui simplemente liberamos la memoria.

cSnake::start: En esta funcion esta el ciclo principal. Al empezar cargamos las imagenes, en este caso solo es una.
Variables Nuevas
SDL_Event event esta estructura sirve para guardar toda la informacion relacionada con los eventos, por ejemplo cuando presionas una tecla, cuando mueves el mouse, etc.

Funciones Nuevas
SDL_PollEvent es utilizada para obtener los eventos pendientes. En otras palabras se crea una lista con todos los eventos que han ocurrido y conforme los vamos obteniendo con (SDL_PollEvent) se van borrando de esta lista. Con esta funcion sabremos si el usuario presiono una tecla, movio el mouse, entre otras cosas.
Sintaxis:
     SDL_PollEvent( SDL_Event* event );

SDL_Delay es utilizado para crear una pausa. No hay mucho que explicar solo que detiene el programa el tiempo especificado. Toma como variable el valor en milisegundos.
Sintaxis:
     SDL_Delay( Uint32 miliseconds );

Explicacion Sobre el ciclo principal:
  • SDL_PollEvent se toma en un ciclo hasta que ya no haya mas eventos que procesar. 
  • Se hace una switch para procesar los tipos de eventos (event.type). Solo manejamos 2 tipos de eventos: SDL_QUIT que sucede cuando el usuario presiona el boton de salir(x) en la ventana y SDL_KEYDOWN que sucede cuando el usuario presiona una tecla.
  • Cuando sucede el evento SDL_QUIT simplemente ponemos en  la variable _exit, para que salga del ciclo.
  • Con el evento SDL_KEYDOWN hacemos 2 cosas, cuando se presiona una de las flechas cambiamos la direccion de la vibora y la otra es cuando presionamos la tecla q, hacemos lo mismo que en el evento SDL_QUIT.
  • Una vez procesado los eventos, realizamos una actualizacion, en este caso solo se actualiza la posicion de la vibora, funcion que veremos mas adelante.
  • Despues dibuja la vibora, funcion que veremos mas adelante.
  • Dibuja todo al pantalla, esta funcion es de la clase cGraphic, y la vimos en el tutorial anterior (SDL_Flip)
  • Por ultimo utilizamos SDL_Delay para hacer una pequeña pause, de otro modo el programa andaria muy rapido y no se alcanzaria a apreciar bien el movimiento. Si en tu computadora corre muy rapido o muy lento, trata de modificar el valor en SDL_Delay. Otra opcion es declarando Frames por segundo(FPS) pero por el momento no veremos eso.

cSnake::draw: Aqui lo que hacemos es dibujar la vibora a la superficie principal (la obtenida con SDL_SetVideoMode).
Variables Nuevas
SDL_Rect esta estructura es utilizada para definir una area {Sint16 x, Sint16 y, Uint16 width, Uint16 height}
x y y definen el punto inicial y width y height el ancho y largo respectivamente.

 Funciones Nuevas
SDL_BlitSurface es utilizado para pasar una superficie a otra. En este caso dibujamos la imagen que cargamos al principio a la superficie principal. Los valores ocupa es superficie de origen(SDL_Surface*), area de origen(SDL_Rect*, si esta es NULL dibujara toda la imagen), superficie destino(SDL_Surface*), area destino (SDL_Rect* aqui vamos a poner la posicion donde vamos a dibujar la superficie)
Sintaxis:
     SDL_BlitSurface(SDL_Surface* origen, SDL_Rect *areaorigen, SDL_Surface* destino, SDL_Rect* areadestino);

cSnake::actualizar: Aqui se actualiza la posicion de la vibora, dependiendo de su direccion. Como el movimiento es continuo, se realiza en cada ciclo. Si no fuera continuo solo se llamaria cuando el usuario presiona una tecla. Aqui esta el motivo por el cual utilizamos una lista. Cuando la vibora se mueve, borramos el ultimo elemento de la lista, y agregamos uno nuevo al principio dependiendo de la direccion. El codigo es muy sencillo asi que no lo explicare mas.


En resumen.
  • Inicializamos SDL
  • Cargamos las imagenes
  • Mientras no querramos salir, ejecutamos el ciclo principal.
  • Dentro del ciclo principal:
    1. Limpiamos la pantalla
    2. Obtenemos las teclas presionadas. Dependiendo de la tecla(flecha) asignamos el destino de la vibora
    3. Actualizamos la posicion de la vibora
    4. Dibujamos la vibora
    5. Pasamos todo a nuestra pantalla
    6. Hacemos una ligera pausa para que no vaya todo muy rapido
    Que sigue?
    En el proximo tutorial haremos lo siguiente:
    • Agregar frutas para que la vibora aumente de tamaño (talvez agreguemos mas de 1)

    Codigo fuente:
    http://www.megaupload.com/?d=4KVXZDYS


    Tutorial de Vibora Parte 3

    No hay comentarios:

    Publicar un comentario