Archivo

Posts Tagged ‘tutorial’

Parallax Scroll en XNA

22 febrero 2010 2 comentarios

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

Anuncios
Categorías:XNA Etiquetas: , ,

Tutorial [Entrega 5]: Añadiendo disparos de los enemigos

28 diciembre 2009 Deja un comentario

Llegados a este punto, tenemos nuestra nave frente a unas cuantas naves enemigas. Nuestra nave puede disparar y eliminar a los enemigos, pero los enemigos todavía no pueden dispara para intentar eliminarnos. Vamos a ver como podemos hacer esto después del salto.

 

Como ya sabéis, si tenéis alguna duda, podéis plantearla en el foro: http://www.foro.xna-tutorial.com/viewtopic.php?f=4&p=8#p8

 

Categorías:Mis cosas, XNA Etiquetas: , ,

Tutorial [Entrega 4]: Añadiendo enemigos

24 diciembre 2009 Deja un comentario

Continuamos con la siguiente entrega del tutorial. Llegados a este punto, tenemos a una nave que disipara. La nave se mueve con las teclas de dirección y dispara pulsando la tecla de dirección arriba. Pero…. ¿a qué dispara? Hoy introduciremos los enemigos para que sirvan de diana, XD.

image

Mira el tutorial después del salto.

Leer más…

Categorías:Mis cosas, XNA Etiquetas: , ,

Tutorial [Entrega 3]: Añadiendo disparos

17 diciembre 2009 2 comentarios

Continuamos con las entregas del tutorial para hacer un clon del Space Invaders en XNA.

Ahora que ya tenemos una nave protagonista moviéndose por la pantalla, le realizaremos algunas mejoras a la nave y haremos que pueda dispara.

Podrás leer el tutorial completo después del salto. Y recuerda que si tienes alguna duda con el tutorial, puedes preguntármela en el foro: http://www.foro.xna-tutorial.com/viewtopic.php?f=4&t=4

Leer más…

Categorías:Mis cosas, XNA Etiquetas: , , ,

Tutorial [Entrega 2]: Moviendo un sprite por la pantalla

12 diciembre 2009 5 comentarios

Este articulo lo escribí no hace mucho en otro blog en el que suelo escribir: www.xna-tutorial.com. Ahora os lo traigo en este blog. En esta serie de tutoriales crearé un clon del Space Invaders e iré explicando paso a paso como lo he ido implementando. Espero que os interese. Un saludo

 

 

 

En esta entrega crearemos un proyecto de XNA 3.1 y dibujaremos por la pantalla un sprite (nuestra nave) y haremos que se mueva por la pantalla. Vamos a empezar por cosas fáciles y ya iremos subiendo poco a poco el nivel de dificultad.

Encontrarás el tutorial completo después del salto.

Leer más…

Categorías:Mis cosas, XNA Etiquetas: , , ,

Creando un juego completo desde 0

10 diciembre 2009 5 comentarios

Hace unas semanas, empecé a escribir un tutorial de XNA en otro blog donde suelo escribir: www.xna-tutorial.com. He pensado que tambien iré escribiendo el tutorial por este blog, para que a aquellos que llegáis a mi blog buscando cosas de XNA os sirva, y de paso publicitar un poco el otro blog, XD.

Sin más, os dejo con el anuncio que puse en su momento en www.xna-tutorial.com

 

Hola a todos:

Os anuncio que dentro de unos días (aún estoy acabando algunos tutoriales) voy a empezar a explicar paso a paso como crear un juego en 2D programado con XNA. El juego no será excesivamente complejo, pero tampoco tan fácil como puede parecer.

La idea es hacer un clon de Space Invaders. Ya os anticipo que no será el mejor clon, pero la idea es aprender como cargar sprites, mover un personaje, colisiones,  lógica del juego, añadir menú del juego, gestión de estados, etc… vamos, tocar todos los aspectos que hacen falta en la creación de un juego.

El resultado será algo más o menos parecido a esto.

space-invaders

 

Intentaré ir publicando los distintos apartados del manual poco a poco, aunque espero que sin pausa.

Espero que os gusten los tutoriales, y que sepáis que si tenéis alguna duda estamos aquí para ayudar.

 

Un saludo a todos y nos vemos dentro de unos días con la 1º entrega del tutorial!

Categorías:Mis cosas, XNA Etiquetas: , , ,