Crear juego RPG en C++ y Allegro 4 (6) - Scroll

Continuamos con el curso de crea tu juego RPG en C++ y Allegro. En esta entrega se hará que nuestro personaje pueda recorrer el extenso bosque, mediante la ayuda del scroll.

NOTA IMPORTANTE:

Para realizar este curso es necesario tener hecho los anteriores, ya que solo se hace referencia a cambios en el código.

Que es un scroll ?

Se denomina scroll, desplazamiento, al movimiento en 2D de los contenidos que conforman el escenario de un videojuego.

En el ejemplo anterior solo llegaba a mostrarse un trozo del mapa bosque, ya que la imagen es superior a la resolución utilizada en el programa ( 800x600 ). Por ello, se crea un scroll para que cuando el personaje se acerque a uno de los bordes de la pantalla, se desplace el escenario mostrando el resto del mapa.

 Programación

Dentro de mijuego.h se define una variable booleana para indicar si el mapa tiene o no desplazamiento, esta variable la llamamos desplaza, si es TRUE es que tiene desplazamiento.  También se definen las variables enteras desplazamiento_map_x y desplazamiento_map_y, estas variables contendrá el valor del desplazamiento del scroll segun su eje x, y. Estas variables se definen de forma global para que puedan ser utilizadas en todas las funciones.

En la funcion de carga_juego(), se inicializan las variables:

    desplazamiento_map_x=0;
    desplazamiento_map_y=0;     
    desplaza = false;

Se les da un valor de 0 y false, ya que inicialmente partimos de que el primer mapa no tendrá scroll.

En la función actualiza_juego(), se controla el desplazamiento del scroll mediante el siguiente codigo:

     if ( desplaza )
    {
         int d = desplazamiento / 2;
         // controla el desplazamiento del mapa si esta en los bordes
         if ( ax < 160 && desplazamiento_map_x > 0 )
         {                
              desplazamiento_map_x-=d;
              jugador.posiciona(ax+d,ay);
              ax = jugador.getx();
              ay = jugador.gety();              
              if ( ax < 60 && desplazamiento_map_x > 0  )
              {
                  desplazamiento_map_x-=d;
                  jugador.posiciona(ax+d,ay);                   
              }
         }
         if ( ay < 160 && desplazamiento_map_y > 0 )
         { 
              desplazamiento_map_y-=d;
              jugador.posiciona(ax,ay+d);
              ax = jugador.getx();
              ay = jugador.gety();                
              if ( ay < 60 && desplazamiento_map_y > 0 )
             { 
                  desplazamiento_map_y-=d;
                  jugador.posiciona(ax,ay+d);                  
             }
         }
         if ( ax > PANTALLA_ANCHO-160 && desplazamiento_map_x < fondo->w-PANTALLA_ANCHO )
         {
              desplazamiento_map_x+=d;
              jugador.posiciona(ax-d,ay);
              ax = jugador.getx();
              ay = jugador.gety();                
              if ( ax > PANTALLA_ANCHO-60 && desplazamiento_map_x < fondo->w-PANTALLA_ANCHO  )
              {
                  desplazamiento_map_x+=d;
                  jugador.posiciona(ax-d,ay);                   
              }              
         }          
         if ( ay > PANTALLA_ALTO-160 && desplazamiento_map_y < fondo->h-PANTALLA_ALTO )
         {
              desplazamiento_map_y+=d;
              jugador.posiciona(ax,ay-d);
              ax = jugador.getx();
              ay = jugador.gety();                
              if ( ay > PANTALLA_ALTO-60 && desplazamiento_map_y < fondo->h-PANTALLA_ALTO )
              {
                  desplazamiento_map_y+=d;
                  jugador.posiciona(ax,ay-d);
              }              
         }
         ax = jugador.getx();
         ay = jugador.gety();            
                 
    }

En lineas generales lo que hace el código es que cuando el jugador se acerca a uno de los bordes, ya sea por arriba, abajo, izquierda o derecha, cuando esta a menos de 160 pixel se realiza un pequeño desplazamiento del escenario, en el caso de que se siga acercando al borde y este de menos de 60 pixel, se realiza otro desplazamiento para evitar que el jugador quede fuera de pantalla. Este código debe de ir justo antes de la llamada del jugador.teclado().

Tambien se debe de cambiar la siguiente condición al completo.

    if (lugar == 2)
    {
         px = px + desplazamiento_map_x;     
         py = py + desplazamiento_map_y;     
    }

Para que actualice la posición del protagonista cuando haya un desplazamiento.

    switch ( lugar ) 
    {           
    case 1:   // casa
         if ( cambio == 1 )
         {
              // cambiamos a otro lugar              
              lugar = 2;
              fondo  = bosq_a;
              choque = bosq_c;
              cielo  = bosq_b;  
              jugador.posiciona( 410,370 ); 
              desplazamiento_map_x=0;
              desplazamiento_map_y=160; 
              desplaza=true;          
         }
         break;
    case 2:   // bosque
         if ( cambio == 2 )
         {
              // cambiamos a otro lugar
              lugar = 1;
              fondo  = casa_a;
              choque = casa_c;
              cielo  = casa_b;  
              // situamos al prota dentro de la casa
              jugador.posiciona( 290,440 ); 
              desplazamiento_map_x=0;
              desplazamiento_map_y=0;  
              desplaza=false;         
         }
         break;  
    default:
         break;
    }         

Se añade en cada una de las fases el valor correspondiente, según tenga o no scroll el próximo mapa que va a cargar.

Y finalmente se añade el desplazamiento del scroll a la hora de pintar los escenarios en la función pinta_juego()

void pinta_juego()
{
    int ancho, alto;
    int ax=0;
    int ay=0;
    int bx=0;
    int by=0;
    
    switch ( lugar ) 
    {           
    case 1:   // casa     
             bx=160;
             by=160; 
             ancho = 480;
             alto = 325;
             break;
    case 2:   // bosque 
             ax = desplazamiento_map_x; 
             ay = desplazamiento_map_y;
             ancho = PANTALLA_ANCHO;
             alto  = PANTALLA_ALTO;
             break;
    default:
         break;
    }  
    
    blit( fondo, buffer, ax, ay, bx, by, ancho, alto);                   
    jugador.pinta();     
    masked_blit( cielo, buffer, ax, ay, bx, by, ancho, alto); 
}   

Y llegados a este punto ya se tendrá el escenario del juego con scroll.

Si quieres ver alguna de las anteriores entregas entra en el Contenido del Blog. 

Recuerda, si tienes algún problema con los ejemplos de la pagina, o alguna duda. Puedes plantear tu pregunta en el foro de programación:

http://creatusjuegosdecero.webege.com/index.php