Inicio > Mis cosas, XNA > Tutorial [Entrega 2]: Moviendo un sprite por la pantalla

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

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.

Creando el proyecto

Lo primero que tenemos que hacer es crear un nuevo proyecto de XNA. Para ello, abrimos el VS2008 (o el Visual C# Studio si tienes la versión gratuita) y le damos a “Archivo/Nuevo/Proyecto”.

image

 

 

Nos saldrá una nueva ventana donde debemos elegir como tipo de proyecto “XNA Game Studio 3.1” y como plantilla “Windows Game”.

 image

 

 

También le debemos dar un nombre al proyecto. Como hoy estoy poco ingenioso, lo llamaré simplemente “Space Invaders”. Vosotros podéis darle el nombre que queráis.

Si le damos a aceptar, veremos que se creará un proyecto nuevo, con varios ficheros (Game1.cs, Program.cs). Vemos que ya hay código escrito, y si le damos a F5 nos saldrá una pantalla azul. Esa pantalla es nuestro  futuro juego.  El fichero Program.cs no debemos tocarlo.

Creando la nave

Ahora vamos a crear nuestra nave y pintarla en la pantalla esa azul que nos ha salido antes.

Para ello, en el archivo Game1.cs nos creamos una variable llamada nave de tipo ‘Texture2D’ que representará nuestra nave para combatir la invasión alienígena y un nuevo tipo de dato que trae XNA llamado ‘Vector2’ para almacenar la posición de la nave.

private Texture2D nave;
private Vector2 pos;

 

Ahora vamos al método Initialize(). En este método iniciamos la posición inicial de la nave. El resultado del método os quedará así:

protected override void Initialize()
{
// TODO: Add your initialization logic here
pos = new Vector2(400,550);base.Initialize();
}

 

 

Ya tenemos la posición de la nave. Ahora le tenemos que indicar al programa que sprite queremos usar como nave. Así que os dejo yo aquí uno muy chulo hecho por mi con gran destreza haciendo uso de mis años usando el Paint,😄.

 

nave

 

 

Bien, para cargar la imagen primero tenemos que agregarla al directorio “Content” del juego. Para ello, le damos a “Botón Derecho” sobre “Content” y seleccionamos “Agregar/Elemento Existente”. Buscamos el sprite y le damos a aceptar. También podemos arrastrar directamente una imagen al directorio.

 

image

 

 

Ahora en nuestro proyecto tenemos un sprite llamado “nave”. Para cargarlo, usaremos el método ‘Load()’ dentro de nuestro método LoadContent(). Nos quedará algo así:

protected override void LoadContent()
{
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);
nave = Content.Load<Texture2D>("nave");// TODO: use this.Content to load your game content here
}

 

 

Ahora ya falta dibujarlo por la pantalla. Así que en el método Draw() escribimos el siguiente código para pintarlo.

protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);// TODO: Add your drawing code here
spriteBatch.Begin();
spriteBatch.Draw(nave, pos, Color.White);
spriteBatch.End();
base.Draw(gameTime);
}

 

 

Si le damos ahora a F5 nos mostrará por la pantalla un fondo azul y nuestra nave. Igual que esta imagen:

 

image

 

 

Muy bonito, si, pero todavía no podemos hacer nada con ella, así que vamos a ver como moverla por la pantalla.

 

Para ello, volvemos al método “update()” y escribimos dos instrucciones if: una para mover a la izquierda y otra para mover a la derecha.

protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (Keyboard.GetState().IsKeyDown(Keys.Escape))
this.Exit();

// TODO: Add your update logic here
if (Keyboard.GetState().IsKeyDown(Keys.Left))
pos.X -= 5;
if (Keyboard.GetState().IsKeyDown(Keys.Right))
pos.X += 5;
base.Update(gameTime);
}

 

 

Ahora, si le damos a F5, con las teclas de dirección podremos mover nuestra nave hacia izquierda y derecha. Fácil, verdad?

En la próxima entrega crearemos una clase para nuestra nave para poder controlarla mejor y haremos que pueda disparar.

down Descargar Código Fuente

 

 

 

 

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

Hasta la próxima entrega!

Categorías:Mis cosas, XNA Etiquetas: , , ,
  1. 20 febrero 2013 a las 10:57

    True, but funny, as are many of your pages. I read through the archives over
    the past week or two, and I must say I think I’m found a new bookmark.

  1. 12 junio 2015 a las 18:11
  2. 12 junio 2015 a las 18:52
  3. 15 junio 2015 a las 2:44
  4. 1 julio 2015 a las 19:04

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: