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

Diciembre 14 2009No Commented

Categorized Under: 2D, Tutorial

 

Parece que ha habido un error y la 2º parte del tutorial se ha borrado, asi que vuelvo a subirlo: Un saludo y perdonar las molestias

 

 

Continuamos la serie de tutoriales con lo más básico de XNA: crear el proyecto y mover un sprite por la pantalla.

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, XD.

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

 

Hasta la próxima entrega!

Leave a Reply