Tutorial de XNA: Vectores, movimiento

 

Bienvenidos a esta tercera entrega de tutoriales de XNA. Pronto estarán recibiendo tutoriales más a menudo, pero por ahora con el tiempo que tengo a la mano, hago lo que puedo.

Hoy veremos dos temas, quizá de los más básicos, e importantes, para el desarrollo de un videojuego en cualquier plataforma… claro está, que lo veremos orientado a XNA.

Hablaremos primero de la pantalla: Para poder colocar el texto en nuestro tutorial anterior, recordamos que utilizamos la linea:

spriteBatch.DrawString(miFont, textoFinal, new Vector2(10, 10), Color.White);

Comentamos un poco sobre como 0,0 es el punto de arriba a la izquierda, como se ve a continuación:

Es importante tener en cuenta que tenemos entonces los valores 0,0 en esa esquina, porque, si retomamos un poco nuestras clases de matemáticas, recordando el plano cartesiano, teniamos 4 sectores: donde X es positivo, Y es positivo, X es positivo, Y es negativo… etc. (el propósito de este tutorial no es dar clases de planos cartesianos, pero si tienen dudas al respecto por favor dejen un comentario y se verá…). La idea está entonces, que nosotros podemos colocar desde (0,0) hasta (~Viewport.Width, ~Viewport.Height) algun texto en particular. En nuestro ejemplo anterior, lo colocamos en (10,10).

En ésta misma imágen tenemos dos lineas de instrucción nuevas, que simplemente son la manera en la que nosotros podemos conseguir el tamaño total en X y Y de un VIEWPORT. Hago incapie en esa palabra, viewport, porque nos será de importancia si quisieramos hacer un juego con opción de multijugador.

Ahora vamos a un tema más interesante: ¡Movimiento!

Lo que trataremos de hacer es mover el texto en nuestra pantalla con el teclado, utilizando las teclas W,A,S,D o las flechas (arriba, izquierda, abajo, derecha). Para lograr eso, lo primero que necesitaremos, es crear un nuevo objeto de tipo Vector2, ya que nuestro texto (y las imágenes que colocaremos en futuros tutoriales) requieren de una posición Vector2 (es decir, el lugar en el que se van a dibujar). En este ejemplo, cree junto al resto de los objetos (al inicio del archivo) la variable:

Vector2 textVector = Vector2.Zero;

Esta linea nos crea un nuevo objeto de tipo Vector2, en la posicion (0,0). ¡Perfecto! Estamos un paso más cerca de poder darle movimiento a nuestro texto. Lo siguiente que queremos es poder modificar esta variable, dependiendo de las teclas que presionamos. Para lograr esto, necesitamos crear OTRO objeto de tipo KeyboardState. Para no meternos a detalles, digamos que esto lo que hace es detectar el estado actual de nuestor teclado (que teclas están presionadas, por ejemplo).

En nuestro método Update() agregamos la siguiente línea en cualquier parte, pero ANTES de la línea base.Update(gameTime); (por razones que se harán claras en futuros tutoriales, por ahora esto no tiene importancia).

KeyboardState teclado = Keyboard.GetState();

if(teclado.IsKeyDown(Keys.W))

{

textVector.Y--;
}

Esto puede parecer complicado para los principantes, ¡pero no lo es! Simplemente creamos un objeto para detectar el estado del teclado con la primera linea. KeyboardState es un objeto que maneja el estado, ¿y qué estado buscamos? ¡Pues el del teclado! Para eso escribimos la segunda parte de esa linea ( = Keyboard.GetState();). El hecho de estar esto escrito al inicio de nuestro método Update, significa que siempre al inicio de checar el método, lo primero que hará es leer lo que se ha presionado en el teclado. Acto seguido tenemos un bloque if, en donde escribimos en “castellano”: “si el estado de nuestro teclado, tiene una tecla presionada, y esta tecla es W… entonces modificar el valor del eje Y en textVector por -1”. Recordamos que, en X, los numeros positivos van a la derecha, los negativos a la izquierda… y en Y los positivos van hacia abajo, ¡y los negativos hacia arriba! Esto es al revés de un plano cartesiano normal, ¡así que tomenlo muy en cuenta!

Al final, cambiamos en nuestro método Draw(), en la linea de spriteBatch.DrawString, la parte que dice new Vector2(10,10), por nuestro objeto nuevo textVector, ejecutamos nuestro código con F5, y veremos el texto “Default” arriba a la izquierda. Si presionan la tecla W, el texto se irá flotando fuera de la pantalla hacia el infinito, y más allá.

Ahora les toca a ustedes: ¿Cómo podriamos mover el texto en las demás direcciones? ¿Cómo podemos evitar que salga de la pantalla?

Intenten resolver esto primero, y si no logran llegar a una solución, ¡no teman! Todos somos nuevos en algo, en algún punto de nuestra vida, e iremos agarrando colmillo poco a poco. La solución será lo primero que pondré en el siguiente tutorial, pero no lo vean hasta estar seguros de que no pudieron!

 

Aquí dejo el código completo hasta ahora de lo que llevamos, por si tienen errores que no pueden resolver.

Si tienen dudas o comentarios, por favor escribanlos aquí, o de plano mandenme un tweet a @Barzorx. ¡Saludos y disfruten de la programación!

 

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace Tutorials
{
    /// <summary>
    /// This is the main type for your game
    /// </summary>
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        SpriteFont miFont;

        Vector2 textVector = Vector2.Zero;

        string textoFinal = "Default";
        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        protected override void Initialize()
        {


            base.Initialize();
        }

        protected override void LoadContent()
        {
            spriteBatch = new SpriteBatch(GraphicsDevice);
            miFont = Content.Load<SpriteFont>("miFont");

        }


        protected override void UnloadContent()
        {

        }


        protected override void Update(GameTime gameTime)
        {
            // Allows the game to exit
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();
            KeyboardState teclado = Keyboard.GetState();

            if (teclado.IsKeyDown(Keys.W))
            {
                textVector.Y--;
            }

            // TODO: Add your update logic here

            base.Update(gameTime);
        }

        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            // TODO: Add your drawing code here

            spriteBatch.Begin();
            spriteBatch.DrawString(miFont, textoFinal, textVector, Color.White);
            spriteBatch.End();

            base.Draw(gameTime);
        }
    }
}

 

 

Leave a Reply