Que duro es ser informático Los grandes artistas copian, los genios roban
  • Mar
    1

    Ya hacia tiempo que no escribía nada sobre XNA. Así que voy a escribir un cortito (pero útil) tutorial de como hacer Parallax Scroll en XNA.

     

    image

     

    Es muy facilito, y además de dejaros el código fuente del proyecto, os dejare también las imágenes y una explicación del código para que lo hagáis vosotros.

     

    IMAGENES

    Pinchar sobre la imagen, se os abrirá una nueva ventana. Guardaros esa imagen.

    http://nosoyfriky.es/cosasxna/rocas.png

    image

    http://nosoyfriky.es/cosasxna/espacio.png

    image

    http://nosoyfriky.es/cosasxna/planeta.png

    image

     

    CLASE CapaParallax

    Como podemos ver, esta clase tan simple representa una capa del fondo, el cual tiene una velocidad determinada, así como una textura.

     

      1 class CapaParallax
      2     {
      3         private Texture2D textura = null;
      4         private Vector2 posicion = Vector2.Zero;
      5         private Vector2 desplazamiento = Vector2.Zero;
      6         private float velocidad = 10.0f;
      7
      8         private float viewportWidth = 0.0f;
      9
    10
    11         /// <summary>
    12         /// Constructor de la capa de parallax Scrolling
    13         /// </summary>
    14         /// <param name="graphics">Donde se dibujara la capa</param>
    15         /// <param name="texture">Textura de la capa</param>
    16         /// <param name="speed">Velocidad con la que se movera la capa</param>
    17         public CapaParallax(GraphicsDeviceManager graphics, Texture2D texture, float speed)
    18         {
    19             textura = texture;
    20
    21             viewportWidth = graphics.GraphicsDevice.Viewport.Width;
    22
    23             posicion = new Vector2(0.0f, 0.0f);
    24             desplazamiento = new Vector2(viewportWidth, 0.0f);
    25
    26             velocidad = speed;
    27         } 
     
    Para el funcionamiento del parallax, necesitamos que cada capa se mueva a una velocidad distinta. Cuanto más rápido sea el movimiento, nos parecerá que esta más próxima la capa.
     
     
     
     
    30         /// <summary>
    31         /// Actualiza la posicion de la capa
    32         /// </summary>
    33         /// <param name="gameTime">Tiempo transcurrido de juego</param>
    34         public void Update(GameTime gameTime)
    35         {
    36
    37              
    38             
    39             float delta = (float)gameTime.ElapsedGameTime.TotalSeconds;
    40
    41             posicion.X -= velocidad * delta;
    42             posicion.X = posicion.X % textura.Width;
    43             
    44         }
    45
    46
    47         /// <summary>
    48         /// Da la sensacion de que nos movemos a la derecha
    49         /// </summary>
    50         /// <param name="gameTime"></param>
    51         public void MoverDerecha(GameTime gameTime)
    52         {
    53             float delta = (float)gameTime.ElapsedGameTime.TotalSeconds;
    54
    55             posicion.X -= velocidad * delta;
    56             posicion.X = posicion.X % textura.Width;
    57         }
    58
    59         /// <summary>
    60         /// Da la sensacion de que nos movemos a la izquierda
    61         /// </summary>
    62         /// <param name="gameTime"></param>
    63         public void MoverIzquierda(GameTime gameTime)
    64         {
    65             float delta = (float)gameTime.ElapsedGameTime.TotalSeconds;
    66
    67             posicion.X += velocidad * delta;
    68             posicion.X = posicion.X % textura.Width;
    69         }
    70
    71
    72         /// <summary>
    73         /// Dibuja la capa
    74         /// </summary>
    75         /// <param name="spriteBatch"></param>
    76         public void Draw(SpriteBatch spriteBatch)
    77         {
    78             //Como es una capa "continua", tenemos que dibujarla
    79             // otra vez cuando se salga de la pantalla
    80             
    81             if (posicion.X < viewportWidth)
    82             {
    83                 spriteBatch.Draw(textura, posicion, Color.White);
    84             }
    85
    86             spriteBatch.Draw(textura, posicion + desplazamiento, Color.White);
    87         }
    88     }

     

     

    GAME1.CS

    Con esta clase ya implementada, tenemos que agregar en nuestro juegos las diferentes capas que queramos y almacenarlas todas en una lista.

      1         //Texturas de las capas
      2         private Texture2D planeta;
      3         private Texture2D espacio;
      4         private Texture2D rocas;
      5
      6         private List<CapaParallax> capasParallax;

     

    O bien en el constructor o  bien en en metodo “Initialize” tenemos que crear las capas:

      1         protected override void Initialize()
      2         {
      3             // TODO: Add your initialization logic here
      4             planeta = this.Content.Load<Texture2D>("planeta");
      5             rocas = this.Content.Load<Texture2D>("rocas");
      6             espacio = this.Content.Load<Texture2D>("espacio");
      7
      8
      9             //Cuidado con el orden de insercion.
    10             //1º lo mas alejado
    11             capasParallax = new List<CapaParallax>();
    12             capasParallax.Add(new CapaParallax(graphics, planeta, 0.0f)); //la velocidad es 0, no se mueve
    13             capasParallax.Add(new CapaParallax(graphics, espacio, 10.0f));
    14             //luego lo mas cercano
    15             capasParallax.Add(new CapaParallax(graphics, rocas, 50.0f));
    16
    17             base.Initialize();
    18         }

     

     

    En el update tan facil como:

      1                 foreach (CapaParallax capa in capasParallax)
      2                 {
      3                     capa.Update(gameTime);
      4                 }

     

    y lo mismo en el metodo Draw:

      1             foreach (CapaParallax capa in capasParallax)
      2             {
      3                 capa.Draw(spriteBatch);
      4             }

     

     

     

    Descargar Código Fuente del Proyecto

    No Comments