ES

www.codigo-facil.com > Programar videojuegos con Object Pascal y SDL (3)

Programar videojuegos con Object Pascal, SDL y OpenGL


Capitulo 3 : Moviendo nuestro avion y creando un fondo animado.

Capitulos

Programar videojuegos con Object Pascal y SDL (1)

Primer capitulo de una serie en la que intentare explicar de forma sencilla los primeros pasos para desarrollar un mini juego en 2d.

En este articulo veremos las herramientas que vamos a utilizar y definiremos lo que sera el nucleo principal de nuestro juego.

Programar videojuegos con Object Pascal y SDL (2)

En este capitulo crearemos la clase sprite, que nos servira para poder dibujar los elementos que van a interactuar en nuestro juego.

Veremos como queda nuestro avion protagonista en la pantalla

Programar videojuegos con Object Pascal y SDL (3)

En este capitulo veremos como desplazar nuestro avion con las teclas del teclado. Ademas añadiremos un fondo al que aplicaremos un efecto para dar la sensacion de movimiento.

Introduccion


En el capitulo anterior creamos la clase que nos permitia dibujar sprites por pantalla. En el articulo que nos ocupa vamos a ver como mover nuestro avion protagonista por la pantalla. Ademas vamos a añadir un fondo al cual aplicaremos un scroll para dar la sensacion de movimiento.

Como cada sprite puede tener sus propias funciones y metodos segun el juego, vamos a crear una nueva unidad que se encarga de extender la clase "sprite" principal que vimos en el capitulo anterior. Asi podremos reciclar dicha clase para otros juegos sin tener que tocar su codigo. Esta unidad la vamos a llamar "u_objects.pas".

Ademas vamos a crear otra unidad donde vamos a implementar los principales procedimientos que se va a utilizar en el juego, como puede ser la creacion de sprites o su posterior destruccion. Esta unidad la vamos a llamar "U_Events.pas".

Creando la unidad U_Objects.pas


Vamos a empezar creando la clase que se encarga de gestionar los procedimientos necesarios para la creacion y utilizacion del avion protagonista. Como esta clase hereda los metodos de la clase "TSprite" debemos incluir la unidad que contiene la definicion de dicha clase en la nueva unidad.

  1. unit u_objects; 

  2.  {$mode objfpc}{$H+} 

  3. interface 

  4. uses
  5.  
  6. (...)

  7. , U_Sprite;

  8. (...)

Una vez que ya hemos incluido la unidad ya podemos definir la clase "TAvion" que es la que vamos a utiliza para definir el avion principal.

  1. (...)
  2.  
  3. type
  4. TAvion = class(TSprite)
  5.   public
  6.   {
  7.   Añadimos esta propiedad para controlar la velocidad
  8.   a la que se va a despplazar el avion por la pantalla
  9.   }
  10.   velocidad : integer;
  11.   constructor create(imgP: string; subWP, subHP: integer);

  12.   {
  13.   Procedimiento que se encarga de analizar el teclado y 
  14.   ejecutar la accion correspondiente al avion principal
  15.   }
  16.   procedure comprobarTeclado;
  17. end;
  18.  
  19. (...)

Una vez que ya tenemos la definicion de la clase vamos a ver la implementacion de sus metodos a continuacion :

  1. (...)

  2. implementation
  3.  
  4. constructor tavion.create(imgP: string; subWP, subHP: integer);
  5. begin

  6.   {
  7.   Asigno la velocidad de desplazamiento por defecto del avion
  8.   Ademos invoco al constructor de la clase base "TSprite"   
  9.   }
  10.   velocidad:=3;
  11.   inherited;
  12. end;
  13.  
  14. procedure TAvion.comprobarTeclado;
  15. begin

  16.   {
  17.   Compruebo las teclas que se han pulsado y 
  18.   muevo el avion por el escenario segun corresponda
  19.   }
  20.   if (teclado.derecha=true)then
  21.     x:=x+velocidad;
  22.  
  23.   if (teclado.izquierda=true)then
  24.     x:=x-velocidad;
  25.  
  26.   if (teclado.arriba=true)then
  27.     y:=y-velocidad;
  28.  
  29.   if (teclado.abajo=true)then
  30.     y:=y+velocidad;
  31. end;
  32.   
  33. (...)

Una vez que ya hemos implementado los metodos basicos de la clase "TAvion", vamos a crear una nueva clase que nos servira para dibujar el fondo de nuestro juego. Comentar que para dibujar el fondo vamos a utilizar una textura con la misma resolucion que la pantalla de nuestro juego (640px x 480px). Como algunas tarjetas graficas no soportan poligonos superiores a 256px x 256px, vamos trocear el fondo y crear subsprites de 160px x 160px. Con lo que tendremos una matriz de 4x3 para representar el fondo. 

Recordad que la clase principal "TSprite" ya se encarga de crear los subsprites en funcion del tamaño que especificamos, por lo que solo deberemos crear un procedimiento que nos dibuje el fondo recorriendo la matriz de subsprites.

Vamos a empezar con la definicion de la clase "TFondo".

  1. (...)
  2. TFondo = class(TSprite)
  3.   public
  4.     {
  5.     Velocidad del scroll para desplazar el fondo
  6.     }
  7.     velocidad: integer ;
  8.     {
  9.     Procedimiento que se encarga de dibujar el fondo y aplicar
  10.     el efecto de scroll
  11.     }
  12.     procedure dibujarFondo;
  13.     constructor create(imgP: string; subWP, subHP: integer);
  14.   private
  15.     {
  16.     Variable privada que utilizo como referencia para saber la
  17.     altura a la qie se encuentra el desplzamiento y poder saber asi
  18.     que subsprites debo dibujar por encima
  19.     }
  20.     position: integer;
  21. end;
  22.  
  23. (...)

Antes de continuar con la implementacion de los metodos para la clase TFondo voy a explicar la tecnica que he utilizado para dibujar el fondo. Como ya habia comentado para la creacion del fondo he utilizado una textura de 640x480px, dividida en subtexturas de 160x160px. La tecnica ha seguir consiste en desplazar el fondo hacia abajo rellenado el hueco que sobra por arriba con la parte que va sobrando por efecto del desplazamiento. 


No es una solucion perfecta pero para el caso que nos ocupa cumple perfectamente. A continuacion vamos a ver la implementacion de los metodos de la clase TFondo y ver como quedaria el codigo para la realizacion de este pseudo-scroll.

  1. (...)
  2.  
  3. constructor tfondo.create(imgP: string; subWP, subHP: integer);
  4. begin
  5.   {
  6.   Constructor de la clase, unicamente asigno una velocidad de desplazamiento
  7.   para el scroll y llamo al constructor de la clase base (TSprite)
  8.   }
  9.   velocidad:=1;
  10.   inherited;
  11. end;
  12.  
  13. procedure tFondo.dibujarFondo;
  14. var
  15.   i,j,k : integer;
  16. begin
  17.   {
  18.   Procedimiento que se encarga de la realizacion del efecto de scroll.
  19.   Para empezar actualizo la posicion en funcion de la velocidad de desplazamiento.
  20.   Ademas compruebo que la posicion no sea mayor que el alto de la pantalla, en caso 
  21.   de lo que sea la inicializo a 0. Esto es necesario para saber cuanto marge debo dibujar 
  22.   por la parte de arriba
  23.   }
  24.   position:=position+velocidad;
  25.   if position>screenH then
  26.     position:=0;

  27.   {
  28.   Creo una variable para controlar las texturas que debo dibujar por arriba, la inicializo
  29.   con el total de texturas que tiene el fondo verticalmente. Ya que las texturas que dibujo hacia
  30.   arriba lo hago empezando desde la posicion actual y voy subiendo.A continuacion recorro la 
  31.   matriz de texturas y segun la posicion hago un cluculo para saber si debo dibujar por arriba 
  32.   y por abajo
  33.   }
  34.   k:=numY;
  35.   for j:=1 to numY do
  36.   begin
  37.     for i:=1 to numX do
  38.       begin
  39.         {
  40.         Selecciono la textura que voy a dibujar
  41.         }
  42.         subY:=j;
  43.         subX:=i;

  44.         {
  45.         Indico la posicion en la pantalla donde se dibuja la textura (en este caso dibujo hacia abajo) 
  46.         }
  47.         x:=(i-1)*subW;
  48.         y:=(j-1)*subH+position;
  49.         {
  50.         Si la posicion vertical no supera el alto de la pantalla entonces dibujo la porcion del fondo 
  51.         en la pantalla
  52.         }
  53.         if (y<=screenH) then
  54.           dibujar;

  55.         {
  56.         Ahora voy rellenando la parte que nos dejamos sin dibujar por ariba. Empiezo seleccionado la 
  57.         textura que voy a dibujar segun el contador que habia creado para dicho cometido
  58.         }
  59.         subY:=K;
  60.         {
  61.         Hago un calculo de la posicion que se corresponde en la pantalla segun la posicion actual del
  62.         desplazamiento (position) y la teorica posicion que deberia dibujar segun la textura de array que 
  63.         voy recorriendo. Si esta posicion es igual o mayor que 0 entoces dibujo, ya que estoy dentro de la 
  64.         pantalla
  65.         }
  66.         y:=position-((j)*subH);
  67.         if (y+subH>=0) then
  68.             dibujar;
  69.       end;
  70.       {
  71.       Voy reducioendo el contador que utilizo para dibujar las texturas por la parte de arriba
  72.       }
  73.       k:=k-1;
  74.     end;

  75. end;
  76.  
  77. (...)

Pues con la declaracion e implementacion de las clases "TAvion" y "TFondo" hemos terminado por el momento con la unidad "U_Objects". Ahora ya podemos pasar a desarrollar los procedimientos que vamos a incluir en la nueva unidad que vamos a crear "U_Events"

Creando la unidad U_Events.pas


Todo juego tiene sus propios procedimientos para construir su propia logica de juego. En esta unidad vamos a incluir los principales procedimientos que intervienen en el funcionamientos del juego que estamos elaborando.

Vamos a empezar viendo la declaracion de los primeros metodos que vamos a incluir en esta nueva unidad. Seguramente en capitulos posteriores desarrollaremos algunos mas.

  1. (...)

  2. procedure cargarSprites;
  3. procedure eliminarSprites;
  4. procedure comprobarAccion;
  5. procedure dibujarSprites;

  6. (...)

Por el momento tan solo vamos a desarrollar algunos metodos muy basicos para el objetivo del articulo que que nos ocupa. Estos metodos, como podemos deducir por su nombre nos permite cargar los sprites que van ha utilizar el juego, eliminr los mismos al termino de la aplicacion, comprobar las diferentes acciones que de deben ejecutar segun la logica del juego y por ultimo dibujar los sprites por pantalla.

Vamos a ver como seria la implementacion de los estos procedimientos.

  1. (...)
  2.  
  3. implementation
  4.  
  5. procedure cargarSprites;
  6. begin
  7.   avion:=tavion.create('avion.png',95,73);
  8.   avion.x:=(screenW div 2)-(95 div 2);
  9.   avion.y:=screenH-73;
  10.   fondo:=tfondo.create('fondo.png',160,160);
  11. end;
  12.  
  13. procedure eliminarSprites;
  14. begin
  15.   avion.free;
  16.   fondo.free;
  17. end;
  18.  
  19. procedure comprobarAccion;
  20. begin
  21.   avion.comprobarTeclado;
  22. end;
  23.  
  24. procedure dibujarSprites;
  25. begin
  26.   fondo.dibujarFondo;
  27.   avion.dibujar;
  28. end;
  29. (...)

Las variables fondo y avion

Si recordamos en el capitulo anterior habiamos declarado la variable avion en el programa principal. Para una mejor organizacion del nuestro codigo y de su reutilizacion utilizaremos la unidad "U_Events", asi que vamos a incluir ademas de los metodos la declaracion de los diferentes objetos que intervienen en el juego.

  1. (...)
  2.  
  3. var
  4. avion:tavion;
  5. fondo:tfondo;

  6. implementation

  7. (...)

Por ultimo tan solo nos falta incluir la unidades que necesitamos para evitar que el compilador nos de error.

  1. unit U_Events;
  2.  
  3. {$mode objfpc}{$H+}
  4.  
  5. interface
  6.  
  7. uses
  8. Classes, SysUtils
  9. ,U_SDL
  10. ,U_Sprite
  11. ,U_objects;
  12.  
  13. (...)

Ahora ya podemos probar el proyecto sin problemas. Como es habitual en esta seria de articulos podeis descargar el codigo fuente y el ejecutable con los avances realizados hasta este capitulo en el siguiente enlace.

Aqui me despido espero que os haya resultado de interes como siempre digo gracias a tod@s por vuestra colaboracion y paciencia, nos vemos en proximas publicaciones.

Ultimas noticias

Crea tu propio framework en javascript

Recopilacion de articulos donde mostrare paso a paso como podemos crear nuestro propio framework en javascript, totalmente funcional y listo para ser utilizado en nuestros futuros proyectos.

Para mas informacion :

Tutorial para crear tu propio FrameWork en JavaSript

Más información
13/12/2013 11:42:57

Como crear una DLL en delphi?

En esta serie de 2 capitulos veremos como crear y utilizar una DLL en Delphi.

Abajo os dejo los enlaces a estos 2 capitulos que componen este mini tutorial, espero que sea de vuestro agrado :

Capitulo 1 : Creacion y utilizacion de una DLL

Capitulo 2 : Creacion de un formulario dinamico utilizando una DLL
Más información
19/09/2013 17:35:59

Ya puedes publicar tu opinion

A partir de ahora ya puedes comentar todas las publicaciones que encuentres en el portal.

Podras opinar tanto si algo te gusta como si no, o si crees que es conveniente completar alguna publicacion, ya que la encuentras incompleta o erronea.

O simplemente por si nos quieres felictar por algo bien hecho :-).

Valoraremos cualquier critica que nos puedas hacer.
Más información
20/05/2013 15:30:10

Tutorial PHP5

Fundamentos de la programacion orientada a objetos
Un interesante tutorial repartido en una serie de capitulos donde se tratan los conocimientos basicos de la programacion orientada a objetos (POO) en PHP5.

Para mayor informacion siga el siguiente enlace :

Tutorial POO en PHP

Más información
04/09/2013 15:44:29
0