[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

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.GameComponent

por

    public class Pelota : Microsoft.Xna.Framework.DrawableGameComponent 

y 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:

1. posicionAntigua = posicion;
2. Controles.
3. actualizaRectangulo();
4. Condición.

Ya tenemos lo que necesitamos en la clase Palas.cs. En la segunda parte vamos a ver la clase Pelota.cs.