Parallax Scroll en XNA

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.

 

 

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

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

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

 

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