Hola a todos, aquí estoy de nuevo con otro tutorial en el que aprenderemos a crear un fondo para nuestros juegos 2D que se desplace a medida que el personaje que controlemos vaya moviéndose por la pantalla.
Normalmente cada vez que hago un tutorial suelo mirar antes en otros sitios para ver más alternativa o para ver que no estoy metiendo la pata jeje pero esta vez lo he hecho sin mirar nada de ahí fuera, asi que seguramente encontraréis otras formas de hacerlo, y seguro que mejores jeje, pero aquí va la mía.
La idea a partir de la cual se construye este método es la siguiente, busco alguna manera de desplazar el fondo sin la necesidad de saber donde se encuentra el personaje en cada momento, esto pienso, hace al sistema más flexible y escalable para otros proyectos, ya que solo necesito saber las teclas que se estan pulsando en cada momento, y eso es algo que se puede obtener fácilmente.
Con esta idea en la cabeza comenzamos, el proyecto se compone de las dos clases habituales más dos más, una para el fondo y otro para el personaje, en este caso será un avión.
Vamos primero a explicar la clase FondoConDesplazamiento, esta clase albergará el fondo, asi que es necesario tener una textura para él y la información sobre la resolución de nuestro juego, con esta clase lo que queremos obtener el algo así:
Como podéis observar, el área de la pantalla corresponde al rectángulo rojo, y lo que queremos es que vaya desplazándose horizontal o verticalmente según corresponda, lo único que haría falta hacer sería ir moviendo ese rectángulo rojo, con lo que también necesitaremos saber en todo momento cual es su posición, esto lo hacemos en el método Update y puede verse aquí:
public void Update(KeyboardState teclado) {
if (teclado.IsKeyDown(Keys.Right)) {
posicion.X -= desplazamiento;
}
if (teclado.IsKeyDown(Keys.Left)){
posicion.X += desplazamiento;
}
if (teclado.IsKeyDown(Keys.Down)){
posicion.Y -= desplazamiento;
}
if (teclado.IsKeyDown(Keys.Up)){
posicion.Y += desplazamiento;
}
/*Comprobamos que no nos salimos del fondo*/
if (Math.Abs(posicion.X) + tamañoPantalla.X >= tamañoFondo.X) {
posicion.X = - tamañoFondo.X + tamañoPantalla.X;
}
if (Math.Abs(posicion.Y) + tamañoPantalla.Y >= tamañoFondo.Y){
posicion.Y = - tamañoFondo.Y + tamañoPantalla.Y;
}
if (posicion.X >= 0) {
posicion.X = 0;
}
if (posicion.Y >= 0) {
posicion.Y = 0;
}
}
Como puede verse el método recibe el estado del teclado como parámetro para comprobar las teclas que han sido pulsadas, justo lo que queríamos hacer 🙂
Lo siguiente que hay que hacer será pintar correctamente la parte del fondo que corresponda, eso lo haremos en el método Draw:
public void Draw(SpriteBatch batch)
{
batch.Draw(fondo,new Rectangle(((int)posicion.X),((int)posicion.Y),
fondo.Width,fondo.Height),Color.White);
}
Con solo esas líneas tendremos perfectamente nuesto fondo desplazándose 😀
La otra clase que se incluye es la de la nave, pero es tan simple que no voy a describirla jeje, simplemente es un sprite que se mueve por la pantalla con los movimientos de teclado de las flechas de dirección, es muy sencillita.
Pues bien con esto acaba este tutorial, como os digo seguro que hay muchas más formas de hacer esto, pero esta no me parece mala del todo, aunque si buscáis un poco por internet, quizás encontréis alguna que os guste más, pues eso ha sido todo, aquí os dejo un video de como queda, hasta la próxima.
Descarga el código fuente
Desplazamiento de fondo (1.3Mb) XNA 3.1
Desplazamiento de fondo (1.3Mb) XNA 4.0
Utilizar las flechas de teclado para mover el avion
Aprendiendo XNA 
Saludos disculpa la pregunta pero ¿como hago para que
el rectanguolo rojo inicie en medio? de antemano muchas gracias
En la clase FondoConDesplazamiento hay una variable posición, la puedes inicializar con el valor que quieras, yo por ejemplo puse el (0,0) pero sabiendo las dimensiones de la textura le pones (ancho/2,alto/2) para que empiece en la mitad 🙂
Esta página es genial, disculpa me gustaría preguntarte a que te refieres con este trozo de código:
tamañoPantalla = new Vector2(dispositivo.Viewport.Width, dispositivo.Viewport.Height);
De donde sale dispositivo y a que hace referencia el trozo de código
Muchas gracias de antemano por toda la ayuda que nos prestas a los novatos.
Hola, pues verás, si te fijas ese dispositivo aparece como parámetro en el constructor de la clase y lo mando desde el método loadcontent del game1.cs
Ese trozo de código sirve para saber la resolución actual de la pantalla y hacer que el fondo se desplace conforme a esa resolución, si miras el método Draw, uso la variable tamaño pantalla para pintar todo correctamente.
Espero que mas o menos me hayas entendido jeje un saludo y gracias por tu visita! 🙂