29 de noviembre de 2010
Próximo tutorial : Space Invaders en XNA
Estoy preparando un tutorial para crear el Space Invaders con XNA. Este tutorial servirá para ver los temas de disparos, animación de sprites y alguno más. Además incluiré un menú al juego para que también veamos como hacer un menú. Obviamente se repasarán temas ya vistos como control de colisiones, movimiento del jugador, etc.
27 de noviembre de 2010
[XNA] Creando el Pong (Parte 3)/ Añadiendo texto
Lo primero que vamos a hacer, es insertar los archivos .spritefont que especifican el tipo de fuente que vamos a usar para la puntuación, etc. Para esto, vamos al apartado Content del explorador de soluciones, clic derecho > Add > Existing Item... y elegimos el archivo . spritefont que vamos a usar.
Hecho esto, tenemos que cargar la fuente. Para cargar las distintas fuentes que tenemos hemos creado una variable de tipo SpriteFont para cada una y en el método LoadContent() ponemos:
Una vez esto, solo nos queda escribir lo que queremos en pantalla. Vamos a Draw() y ponemos:
Si tenéis alguna duda o se me ha pasado algo dejadme un comentario y lo arreglo.
Hecho esto, tenemos que cargar la fuente. Para cargar las distintas fuentes que tenemos hemos creado una variable de tipo SpriteFont para cada una y en el método LoadContent() ponemos:
puntuacion = Content.Load("puntuacion");
campeon = Content.Load("campeon");
victorias = Content.Load("victorias");Donde puntuacion, victorias y campeon son las variables que he creado para las fuentes.
Una vez esto, solo nos queda escribir lo que queremos en pantalla. Vamos a Draw() y ponemos:
spriteBatch.Begin();
if (empezar == true)
spriteBatch.DrawString(puntuacion, "Jugador 1 | " + puntuacionJ1 + " - " + puntuacionJ2 + " | Jugador 2", new Vector2(GraphicsDevice.Viewport.Width / 2 - 125, 20), Color.White);
if (empezar == false && final == false)
spriteBatch.DrawString(puntuacion, "Pulsa Enter", new Vector2(GraphicsDevice.Viewport.Width / 2 - 50, GraphicsDevice.Viewport.Height / 2 -10), Color.White);
if (final == true)
{
if (puntuacionJ1 > puntuacionJ2)
spriteBatch.DrawString(campeon, "Victoria Jugador 1", new Vector2(GraphicsDevice.Viewport.Width / 2 - 250, 100), Color.White);
else
spriteBatch.DrawString(campeon, "Victoria Jugador 2", new Vector2(GraphicsDevice.Viewport.Width / 2 - 250, 100), Color.White);
spriteBatch.DrawString(victorias, victoriasJ1 + " - " + victoriasJ2, new Vector2(GraphicsDevice.Viewport.Width / 2 - 125, 200), Color.White);
spriteBatch.DrawString(puntuacion, "Pulsa Enter", new Vector2(GraphicsDevice.Viewport.Width / 2 - 50, 350), Color.White);
}
spriteBatch.End();Por último, para que la pelota solo se dibuje cuando empezar sea igual a true añadimos dicha condición en el método Draw() de la clase Pelota.cs :
if((Game as Pong).empezar == true)
(Game as Pong).spriteBatch.Draw(textura, posicion, Color.White);Bueno, pues ya tenemos nuestro Pong. Aquí os dejo el código. (Descargar)
Si tenéis alguna duda o se me ha pasado algo dejadme un comentario y lo arreglo.
[XNA] Creando el Pong (Parte 2) / Bounding Boxes
Ahora vamos a trabajar con la pelota. En primer lugar, como siempre, creamos las variables de la pelota solo que esta vez añadimos otro vector llamado velocidad:
private Texture2D textura;private Vector2 posicion, velocidad;float angulo, celeridad;
Donde el angulo sera el angulo con el que saldrá la pelota el cual vendrá definido por un método que crearemos llamado anguloAleatorio() de tipo void y que nos servirá para evitar la rutina en la trayectoria de la pelota:
private void anguloAleatorio()
{
Random rAngulo = new Random();
int r = 0;
while (r % 2 == 0)
r = rAngulo.Next(1, 7);
angulo = MathHelper.ToRadians(r * 45);
}
En el método Initialize() posicionamos la pelota en el centro de la pantalla e iniciamos la velocidad:
posicion = Vector2.Zero;
anguloAleatorio();
velocidad = new Vector2((float)(celeridad * Math.Cos(angulo)), (float)(celeridad * Math.Sin(angulo)));
En el LoadContent() cargamos la textura y establecemos la posición inicial:
textura = Game.Content.Load("Pelota");
posicion.X = GraphicsDevice.Viewport.Width / 2 - textura.Width / 2;
posicion.Y = GraphicsDevice.Viewport.Height / 2 - textura.Height / 2;
Para definir la trayectoria de la pelota, vamos al método Update() y escribimos:
posicion += velocidad;
Por último solo nos queda dibujar la pelota en la pantalla:
(Game as Pong).spriteBatch.Begin();
(Game as Pong).spriteBatch.Draw(textura, posicion, Color.White);
(Game as Pong).spriteBatch.End();
Y para que todo esto sea visible, tenemos que iniciarla en la clase Pong. Añadimos la variable pelota:
public Pelota pelota;
Y la inicializamos:
pelota = new Pelota(this);
Components.Add(pelota);
Ya tenemos la pelota, ahora lo que vamos a hacer es que rebote en las paredes. Para conseguirlo lo que vamos a hacer es cambiar el sentido de la velocidad en el eje Y cuando la pelota sobrepase los limites de la pantalla. En primer lugar, al igual que en las palas, creamos un rectángulo para la pelota y en el método Update tras llamar al método actualizarRectángulo() escribimos:
if (posicion.Y <= 0 || posicion.Y >= Game.GraphicsDevice.Viewport.Height - textura.Height)
{
velocidad.Y = -1f * velocidad.Y;
}
Para las colisiones entre la pelota y las palas, vamos a hacer uso de colisiones Bounding Boxes. Para esto, vamos a la clase Pong.cs y en el método Update escribimos:
if (pelota.rectangulo.Intersects(jugador1.rectangulo) || pelota.rectangulo.Intersects(jugador2.rectangulo))
pelota.velocidad.X *= -1.0f;
Si aumentamos el numero que multiplica a la velocidad, la pelota irá incrementando la velocidad con cada golpe. Cuanto mas alto sea el número que la multiplica más se aumentará la velocidad así que no os paséis o el cambio de velocidad seria muy brusco. Añadimos la colisión entre la pelota y el borde derecho y el borde izquierdo de la pantalla. Cuando la pelota colisiona con estos bordes, la puntuación del jugador del lado contrario aumenta y la pelota vuelve al centro de la pantalla. Para esto hemos creado un método llamado reiniciarPosicion() en la clase Pelota.cs :
public void reiniciarPosicion()
{
posicion.X = GraphicsDevice.Viewport.Width / 2 - textura.Width / 2;
posicion.Y = GraphicsDevice.Viewport.Height / 2 - textura.Height / 2;
anguloAleatorio();
velocidad = new Vector2((float)(celeridad * Math.Cos(angulo)), (float)(celeridad * Math.Sin(angulo)));
}y hemos añadido las variables de puntuación llamadas puntuacionJ1 y puntuacionJ2 y las siguientes condiciones al método Update() de la clase Pong.cs:
if (pelota.rectangulo.Left <= 0)
{
puntuacionJ2 += 1;
pelota.reiniciarPosicion();
pelota.velocidad *= -1.0f;
}
else if (pelota.rectangulo.Right >= GraphicsDevice.Viewport.Width)
{
puntuacionJ1 += 1;
pelota.reiniciarPosicion();
pelota.velocidad *= -1.0f;
}Ahora vamos a hacer que la partida no empiece a menos que pulsemos una tecla, en este caso la tecla Enter. Creamos una variable de tipo bool llamada empezar en la clase Pong.cs:
public bool empezar = false,sumarVictoria;y en Update ponemos:
y para hacer que la pelota no se mueva a menos que empezar sea igual a true, vamos a la clase Pelota.cs y en el método Update, donde hemos puesto posicion += velocidad añadimos la condición de que para que esto se de, empezar tenga que ser true:
if (estado.IsKeyDown(Keys.Enter))
{
empezar = true;
final = false;
puntuacionJ1 = 0;
puntuacionJ2 = 0;
sumarVictoria = true;
}
if((Game as Pong).empezar == true)
posicion += velocidad;Como una partida no puede ser infinita, vamos a hacer que cuando algún jugador llegue a cierta puntuación (yo voy a poner una puntuación máxima de 11 puntos) el juego se pare, es decir, empezar sea igual a false. Además, vamos a crear una nueva variable de tipo bool que llamaremos final y que iniciaremos como false. Para esto añadimos el siguiente código a Update de la clase Pong.cs:
if (puntuacionJ1 == 11 || puntuacionJ2 == 11)
{
empezar = false;
final = true;
}También queremos controlar el número de victorias que acumula cada jugador. Así pues creamos dos nuevas variables de tipo int llamadas victoriasJ1 y victoriasJ2 iniciadas con el valor 0. Para controlar las victorias de cada jugador, añadimos el siguiente código a la condición anterior:
Dicho esto solo nos queda mostrar en pantalla la puntuación, el numero de victorias, etc. Lo veremos en la tercera parte.
if (puntuacionJ1 > puntuacionJ2 && sumarVictoria == true)
{
victoriasJ1++;
sumarVictoria = false;
}
else if (puntuacionJ2>puntuacionJ1 && sumarVictoria == true)
{
victoriasJ2++;
sumarVictoria = false;
}
[XNA] Creando el Pong (Parte 1)
Lo primero que vamos a hacer es crear un proyecto nuevo que se llame, por ejemplo, Pong, para ser originales. Para no tener que escribir Game1 cuando me refiera a la clase principal, yo le he cambiado el nombre a Pong.cs.
El Pong clásico tenia el fondo negro, así que nosotros no vamos a ser menos. Para cambiar el color de fondo, lo que vamos a hacer es situarnos en el apartado Draw y cambiar
Ahora vamos a añadir las texturas a la carpeta de contenidos del proyecto. Las texturas son las imágenes que usaremos para las raquetas y la pelota y puedes crearlas con el programa que prefieras (paint, photoshop,etc). Para añadirlas, vamos a la seccion Content y pulsamos clic derecho>Add>Existing Item... y elegimos las imagenes que hemos creado.
Lo siguiente que vamos a hacer es crear todo lo que vamos a utilizar en el juego. En el Pong tenemos:
Empezamos a meterle mano al código primero a las palas. Recordamos que lo primero que teníamos que hacer era crear los métodos que nos faltaban, LoadContent() y Draw().
Una vez hecho esto, lo que vamos a hacer es modificar el constructor para que nos cree una raqueta para cada jugador. Para esto cambiamos
this.jugador = jugador;
}
Ahora vamos a dibujar las palas en pantalla. Para esto creamos las variables necesarias para que la imagen aparezca en pantalla.
No necesitaremos crear un SpriteBatch ya que utilizaremos el SpriteBatch de la clase Pong.cs.
Cargamos la imagen y la posicionamos en un sitio o en otro dependiendo del jugador al que corresponda:
El estado del teclado vamos a controlarlo desde la clase Pong.cs. Para hacerlo, añadimos una variable llamada estado:
Por último creamos las raquetas desde la clase pong. Para esto creamos las siguientes variables:
Como podéis comprobar, las palas no tienen límite, es decir, se pueden salir de la pantalla. Para evitar esto vamos a crear un rectángulo que corresponda a las raquetas y comprobaremos que la pantalla contiene este rectángulo. Para esto lo primero que tenemos que hacer es crear un rectángulo para las palas. Para ello creamos una variable Rectangle en la clase Palas.cs :
Para que el rectángulo siga a la textura de la pala vamos a crear un nuevo método llamado actualizarRectangulo() :
Ya tenemos el rectángulo, ahora vamos a crear una variable Vector2 llamada posicionAntigua que corresponderá a la posición que tenia la pala antes de salirse de la pantalla:
Ya tenemos lo que necesitamos en la clase Palas.cs. En la segunda parte vamos a ver la clase Pelota.cs.
El Pong clásico tenia el fondo negro, así que nosotros no vamos a ser menos. Para cambiar el color de fondo, lo que vamos a hacer es situarnos en el apartado Draw y cambiar
GraphicsDevice.Clear(Color.CornflowerBlue);por
GraphicsDevice.Clear(Color.Black);Si compilamos podemos ver que el fondo ya no es azul como se muestra de forma predeterminada sino que ahora es negro, tal y como hemos especificado. (Recordad que para compilar lo que hacíamos era darle al triangulo verde de la parte superior de Visual Studio).
Ahora vamos a añadir las texturas a la carpeta de contenidos del proyecto. Las texturas son las imágenes que usaremos para las raquetas y la pelota y puedes crearlas con el programa que prefieras (paint, photoshop,etc). Para añadirlas, vamos a la seccion Content y pulsamos clic derecho>Add>Existing Item... y elegimos las imagenes que hemos creado.
Lo siguiente que vamos a hacer es crear todo lo que vamos a utilizar en el juego. En el Pong tenemos:
- Dos palas que se reunirán en la misma clase ya que una clase la podemos definir como un molde. Así pues creamos la clase Palas.cs.
- Una pelota que crearemos con su respectiva clase Pelota.cs.
Tanto la clase Pelota.cs como la clase Palas.cs deben de heredar de la clase de XNA DrawableGameComponent. Para esto cambiamos
public class Pelota : Microsoft.Xna.Framework.GameComponentpor
public class Pelota : Microsoft.Xna.Framework.DrawableGameComponenty lo mismo en la clase Palas.cs.
Empezamos a meterle mano al código primero a las palas. Recordamos que lo primero que teníamos que hacer era crear los métodos que nos faltaban, LoadContent() y Draw().
Una vez hecho esto, lo que vamos a hacer es modificar el constructor para que nos cree una raqueta para cada jugador. Para esto cambiamos
public Palas(Game game)
: base(game)por
public Palas(Game game,int jugador)
: base(game){
this.jugador = jugador;
}
Ahora vamos a dibujar las palas en pantalla. Para esto creamos las variables necesarias para que la imagen aparezca en pantalla.
private Vector2 posicion;
private Texture2D textura;
int jugador;
No necesitaremos crear un SpriteBatch ya que utilizaremos el SpriteBatch de la clase Pong.cs.
Cargamos la imagen y la posicionamos en un sitio o en otro dependiendo del jugador al que corresponda:
protected override void LoadContent()
{
textura = Game.Content.Load("Raqueta");
if (jugador == 1)
{
posicion.X = 10;
posicion.Y = GraphicsDevice.Viewport.Height / 2 - textura.Height / 2;
}
else
{
posicion.X = GraphicsDevice.Viewport.Width - 10 - textura.Width;
posicion.Y = GraphicsDevice.Viewport.Height / 2 - textura.Height / 2;
}
base.LoadContent();
}
El estado del teclado vamos a controlarlo desde la clase Pong.cs. Para hacerlo, añadimos una variable llamada estado:
public KeyboardState estado;y luego en el método Update() añadimos:
estado = Keyboard.GetState();La declaramos de tipo público para poder acceder a ella desde otras clases. Recordamos que para controlar los objetos añadíamos el código al método Update():
if (jugador == 1)
{
if ((Game as Pong).estado.IsKeyDown(Keys.W))
posicion.Y -= 1.0f + gameTime.ElapsedGameTime.Milliseconds;
if ((Game as Pong).estado.IsKeyDown(Keys.S))
posicion.Y += 1.0f + gameTime.ElapsedGameTime.Milliseconds;
}
else
{
if ((Game as Pong).estado.IsKeyDown(Keys.Up))
posicion.Y -= 1.0f + gameTime.ElapsedGameTime.Milliseconds;
if ((Game as Pong).estado.IsKeyDown(Keys.Down))
posicion.Y += 1.0f + gameTime.ElapsedGameTime.Milliseconds;
}Ahora vamos al método Draw(GameTime gameTime):
(Game as Pong).spriteBatch.Begin();
(Game as Pong).spriteBatch.Draw(textura, posicion, Color.White);
(Game as Pong).spriteBatch.End();
Por último creamos las raquetas desde la clase pong. Para esto creamos las siguientes variables:
public Palas jugador1, jugador2;y añadimos al constructor:
jugador1 = new Palas(this, 1);
Components.Add(jugador1);
jugador2 = new Palas(this, 2);
Components.Add(jugador2);
Como podéis comprobar, las palas no tienen límite, es decir, se pueden salir de la pantalla. Para evitar esto vamos a crear un rectángulo que corresponda a las raquetas y comprobaremos que la pantalla contiene este rectángulo. Para esto lo primero que tenemos que hacer es crear un rectángulo para las palas. Para ello creamos una variable Rectangle en la clase Palas.cs :
public Rectangle rectangulo;Inicializamos el rectángulo:
this.rectangulo = new Rectangle();Después, en el método LoadContent(), tras la posición inicial:
rectangulo.Height = textura.Height;
rectangulo.Width = textura.Width;
Para que el rectángulo siga a la textura de la pala vamos a crear un nuevo método llamado actualizarRectangulo() :
public void actualizaRectangulo()
{
this.Rectangulo.X = (int)this.posicion.X;
this.Rectangulo.Y = (int)this.posicion.Y;
}y vamos a hacer una llamada a este método desde el método Update().
Ya tenemos el rectángulo, ahora vamos a crear una variable Vector2 llamada posicionAntigua que corresponderá a la posición que tenia la pala antes de salirse de la pantalla:
private Vector2 posicionAntigua;y en el método Update() :
posicionAntigua = posicion;y hacemos que cuando el rectángulo de la pala salga de la pantalla la posición sea la posición Antigua:
if (!Game.GraphicsDevice.Viewport.Bounds.Contains(Rectangulo))
{
posicion = posicionAntigua;
this.actualizaRectangulo();
}Si no os sale, comprobad que el método Update() lo habéis puesto de la siguiente forma:
- posicionAntigua = posicion;
- Controles.
- actualizaRectangulo();
- Condición.
Ya tenemos lo que necesitamos en la clase Palas.cs. En la segunda parte vamos a ver la clase Pelota.cs.
20 de noviembre de 2010
[XNA] Colisiones
Uno de los pilares de los videojuegos es sin lugar a dudas las colisiones. Existen diferentes métodos para controlar las colisiones. Vamos a dividirlos en dos:
- Bounding Boxes.
- Colisiones por pixel.
Bounding Boxes
Se basa en un rectángulo que creamos para nuestros sprites, generalmente del mismo, o de un tamaño algo menor de la textura del sprite, que sirve para poder compararlo con los demás rectángulos de los demás sprites. Este es un método fácil de aplicar en XNA.
Colisiones por pixel
Los objetos ocupan un area rectangular al igual que en las colisiones por Bounding Boxes pero además tienen una mascara que define que pixeles son visibles. Primero se realiza una detección de colisión de área, luego, si hubo colisión, se realiza una detección pixel a pixel entre los pixeles superpuestos de ambos objetos. Si existen dos pixeles superpuestos ambos visibles, entonces hay una colisión.
Más adelante subire un ejemplo para cada tipo de colisión a modo de tutorial.
[XNA] Añadir un personaje al juego (2D)
Teniendo en mente el funcionamiento de la programación orientada a objetos de la que hace uso XNA, un personaje de un juego no puede ser otra cosa que un objeto. En este tutorial vamos a ver como incorporar un personaje, posicionarlo y manejarlo con el teclado en un juego 2D usando XNA.
En primer lugar lo que tenemos que hacer si no tenemos creado un proyecto es crearlo. Si no sabéis cómo hacerlo podéis echar un vistazo a este tutorial.
Una vez tengamos el proyecto, lo que vamos a hacer es crear la clase a la que pertenecerá el personaje. Para esto nos vamos a la pestaña del explorador de soluciones que aparece en la derecha (si no te aparece ve a "View > Other Windows > Solution explorer "). Hacemos Clic Derecho sobre el nombre del proyecto y nos aparecerán una serie de opciones. Como lo que queremos es crear una clase, nos vamos a "Add > New Item..." y nos aparecerá una ventana con todos los posibles archivos que podemos crear con Visual Studio. A nosotros solo nos interesan los archivos de XNA así que hacemos clic sobre "XNA Game Studio 4.0" (Arriba a la izquierda) y elegimos la opción "Game Component". Le damos un nombre (preferiblemente el nombre del personaje) y le damos a "Add".
Ahora si nos fijamos en la pestaña de soluciones podemos ver que aparece una clase más, la que acabamos de crear.
Lo siguiente que vamos a hacer es cargar la imagen en la carpeta de contenidos del proyecto. Para esto hacemos clic derecho sobre el apartado "xContent (Content)" (donde x es el nombre que le has puesto al proyecto), luego "Add > Existing Item..." y se abrirá una ventana del explorador para que elijas la imagen que deseas añadir, en nuestro caso, la imagen del personaje. Una vez hecho te aparecerá el archivo en el explorador de soluciones.
Con la imagen ya creada y la imagen cargada en el contenido del proyecto, solo nos queda meterle mano al código. Si recordamos lo expuesto en la entrada anterior, los componentes básicos del juego eran el constructor, el inicializador, la carga de contenido, la actualización y dibujar en pantalla, pero, si echamos un vistazo al código que se ha creado automáticamente, comprobamos que no están todas las funciones, con lo cual, lo primero que vamos a hacer es crear las funciones que nos faltan. La primera función que falta es la encargada de cargar el contenido. Para ponerla nos situamos detrás de la función que se encarga de inicializar y escribimos el siguiente código:
La otra función que falta es la de dibujar así que también la ponemos:
Si nos fijamos, al escribir la función "Draw" aparece un error. Para que no se produzca el error, vamos al principio del código y donde pone:
Luego vamos al inicializador y escribimos lo siguiente:
Continuamos con la función LoadContent:
La posición inicial que hemos puesto para el personaje es la de la esquina inferior izquierda de la pantalla.
Tras cargar la imagen, vamos a la función Update. En esta función vamos a poner los controles del personaje.
Para acabar con el código en la clase del personaje que hemos creado, nos dirigimos a la funcion Draw para que se dibuje el personaje en pantalla.
Si le damos a compilar comprobaremos que en la pantalla no se muestra ningún personaje. Esto se debe a que para que se muestre el personaje tenemos que añadir la clase del personaje a la clase Game1.cs. Para esto vamos a la clase Game1.cs y en la declaración de variables escribimos:
Deberia quedarnos algo así:
Recordemos que "Link" es el nombre que he usado para la clase del personaje.
Con esto conseguimos poner un personaje en pantalla que podemos mover por la pantalla con el teclado.
Ejemplo (Descargar).
En primer lugar lo que tenemos que hacer si no tenemos creado un proyecto es crearlo. Si no sabéis cómo hacerlo podéis echar un vistazo a este tutorial.
Una vez tengamos el proyecto, lo que vamos a hacer es crear la clase a la que pertenecerá el personaje. Para esto nos vamos a la pestaña del explorador de soluciones que aparece en la derecha (si no te aparece ve a "View > Other Windows > Solution explorer "). Hacemos Clic Derecho sobre el nombre del proyecto y nos aparecerán una serie de opciones. Como lo que queremos es crear una clase, nos vamos a "Add > New Item..." y nos aparecerá una ventana con todos los posibles archivos que podemos crear con Visual Studio. A nosotros solo nos interesan los archivos de XNA así que hacemos clic sobre "XNA Game Studio 4.0" (Arriba a la izquierda) y elegimos la opción "Game Component". Le damos un nombre (preferiblemente el nombre del personaje) y le damos a "Add".
Ahora si nos fijamos en la pestaña de soluciones podemos ver que aparece una clase más, la que acabamos de crear.
Lo siguiente que vamos a hacer es cargar la imagen en la carpeta de contenidos del proyecto. Para esto hacemos clic derecho sobre el apartado "xContent (Content)" (donde x es el nombre que le has puesto al proyecto), luego "Add > Existing Item..." y se abrirá una ventana del explorador para que elijas la imagen que deseas añadir, en nuestro caso, la imagen del personaje. Una vez hecho te aparecerá el archivo en el explorador de soluciones.
Con la imagen ya creada y la imagen cargada en el contenido del proyecto, solo nos queda meterle mano al código. Si recordamos lo expuesto en la entrada anterior, los componentes básicos del juego eran el constructor, el inicializador, la carga de contenido, la actualización y dibujar en pantalla, pero, si echamos un vistazo al código que se ha creado automáticamente, comprobamos que no están todas las funciones, con lo cual, lo primero que vamos a hacer es crear las funciones que nos faltan. La primera función que falta es la encargada de cargar el contenido. Para ponerla nos situamos detrás de la función que se encarga de inicializar y escribimos el siguiente código:
protected override void LoadContent()
{
}
La otra función que falta es la de dibujar así que también la ponemos:
public override void Draw(GameTime gameTime)
{
base.Draw(gameTime);
}
Si nos fijamos, al escribir la función "Draw" aparece un error. Para que no se produzca el error, vamos al principio del código y donde pone:
public class Link : Microsoft.Xna.Framework.GameComponent(donde "Link" es el nombre que tiene la clase) y lo cambiamos por esto:
public class Link : Microsoft.Xna.Framework.DrawableGameComponentAhora vamos a añadir más código. Vamos al principio de la clase y escribimos esto:
public class Link : Microsoft.Xna.Framework.DrawableGameComponent
{
private SpriteBatch sprite; //Declaración del sprite.
private Texture2D textura; //Textura que va a tener el sprite.
private Vector2 posicion; //Vector de posición.
...
Luego vamos al inicializador y escribimos lo siguiente:
public override void Initialize()
{
// TODO: Add your initialization code here
sprite = new SpriteBatch(Game.GraphicsDevice);
posicion = Vector2.Zero;
base.Initialize();
}
Continuamos con la función LoadContent:
protected override void LoadContent()
{
textura = Game.Content.Load("link"); //"link" es el asset name de la imagen.
posicion.Y = Game.GraphicsDevice.Viewport.Height - textura.Height; //Posición en la que se coloca el personaje.
base.LoadContent();
}Para ver el asset name de la imagen hacemos clic derecho sobre la imagen en el explorador de soluciones y vamos a propiedades.
La posición inicial que hemos puesto para el personaje es la de la esquina inferior izquierda de la pantalla.
Tras cargar la imagen, vamos a la función Update. En esta función vamos a poner los controles del personaje.
public override void Update(GameTime gameTime)
{
// TODO: Add your update code here
KeyboardState estado = Keyboard.GetState();
if (estado.IsKeyDown(Keys.Left))
posicion.X -= 1.0f + gameTime.ElapsedGameTime.Milliseconds;
if (estado.IsKeyDown(Keys.Right))
posicion.X += 1.0f + gameTime.ElapsedGameTime.Milliseconds;
if (estado.IsKeyDown(Keys.Up))
posicion.Y -= 1.0f + gameTime.ElapsedGameTime.Milliseconds;
if (estado.IsKeyDown(Keys.Down))
posicion.Y += 1.0f + gameTime.ElapsedGameTime.Milliseconds;
base.Update(gameTime);
}No olvideis que las coordenadas de los videojuegos tienen el punto (0,0) en la esquina superior izquierda de la pantalla.
Para acabar con el código en la clase del personaje que hemos creado, nos dirigimos a la funcion Draw para que se dibuje el personaje en pantalla.
public override void Draw(GameTime gameTime)
{
sprite.Begin();
sprite.Draw(textura, posicion, Color.White);
sprite.End();
base.Draw(gameTime);
}
Si le damos a compilar comprobaremos que en la pantalla no se muestra ningún personaje. Esto se debe a que para que se muestre el personaje tenemos que añadir la clase del personaje a la clase Game1.cs. Para esto vamos a la clase Game1.cs y en la declaración de variables escribimos:
Link link;Luego vamos al constructor y ponermos:
link = new Link(this);
Components.Add(link);
Deberia quedarnos algo así:
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
Link link;
public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
link = new Link(this);
Components.Add(link);
}....
Recordemos que "Link" es el nombre que he usado para la clase del personaje.
Con esto conseguimos poner un personaje en pantalla que podemos mover por la pantalla con el teclado.
Ejemplo (Descargar).
[XNA] Iniciar un proyecto en XNA 4.0
En este tutorial vamos a ver como iniciar un proyecto de XNA.
En primer lugar tenemos que disponer de las herramientas necesarias para usar XNA. Podeis
descargar todas las herramientas en un solo pack desde la pagina official de App Hub (Descargar).
Si ya disponeis de Visual Studio solo necesitais descargar XNA Game Studio :
Una vez tengamos todo lo necesario ya podemos empezar con el tutorial.
En primer lugar vamos a abrir Microsoft Visual Studio. Tendremos algo parecido a esto.

Le damos a "New Project..." y se nos abrira una ventana. En "Templates", vamos a "Visual C#" puesto que es el lenguaje que utiliza XNA , pulsamos "XNA Game Studio 4.0" y elegimos la
opción "Windows Game (4.0)". Si nos fijamos, debajo tenemos la opción de darle un nombre al proyecto y de elegir el lugar en el que queremos guardarlo, pues bien, le ponemos un nombre al proyecto, elegimos el lugar en el que queremos guardarlo y le damos a aceptar.
Una vez hecho esto ya tenemos nuestro proyecto creado. Habrá quedado algo así:

Si echamos un vistazo al código podemos observar los componentes básicos de un juego en XNA.
CONSTRUCTOR
public Game1(){graphics = new GraphicsDeviceManager(this);Content.RootDirectory = "Content";}
INICIALIZADOR
protected override void Initialize(){// TODO: Add your initialization logic here
base.Initialize();}
CARGA DE CONTENIDOS
protected override void LoadContent(){// Create a new SpriteBatch, which can be used to draw textures.spriteBatch = new SpriteBatch(GraphicsDevice);
// TODO: use this.Content to load your game content here}ACTUALIZACIÓN
protected override void Update(GameTime gameTime){// Allows the game to exitif (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)this.Exit();
// TODO: Add your update logic here
base.Update(gameTime);}
DIBUJAR EN PANTALLA
protected override void Draw(GameTime gameTime){GraphicsDevice.Clear(Color.CornflowerBlue);
// TODO: Add your drawing code here
base.Draw(gameTime);}
Con el código que se ha generado automáticamente al crear el proyecto tenemos suficiente para para ejecutar el proyecto, con lo cual, ya tenemos un juego, un juego que de momento no hace nada pero un juego al fin y al cabo.
Proximamente en el blog
Como ya muchos sabréis, XNA es un entorno de desarrollo de videojuegos para xbox360, PC y Windows phone 7. Pues bien, voy a ir subiendo al blog toda la información sobre XNA que os pueda ayudar a crear vuestros juegos.
25 de mayo de 2010
¿Lo aguanta tu PC?
¿Alguna vez te han entrado ganas de jugar a un juego pero no sabes si tu PC lo soporta? Pues acaba con la duda y consúltalo aquí. Esta pagina no incluye todos los juego pero… algo es algo.
Suscribirse a:
Entradas (Atom)
