Crear un Neon Vector Shooter en XNA: Juego básico

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En esta serie de tutoriales, te mostraré cómo hacer un tirador de gemelos neón como Geometry Wars, que llamaremos Shape Blaster, en XNA. El objetivo de estos tutoriales no es dejarle una réplica exacta de Geometry Wars, sino repasar los elementos necesarios que le permitirán crear su propia variante de alta calidad.

Los animo a ampliar y experimentar con el código que se proporciona en estos tutoriales. Cubriremos estos temas en toda la serie:

Configura el juego básico, crea la nave del jugador y maneja la entrada, el sonido y la música.
Finaliza la implementación de la mecánica del juego agregando enemigos, manejando la detección de colisiones y rastreando el puntaje y la vida del jugador.
Agregue un filtro bloom, que es el efecto que dará a los gráficos un brillo de neón.
Agregue efectos de partículas extravagantes.
Agregue al fondo la deformada cuadrícula.

Esto es lo que tendremos al final de la serie:

Y esto es lo que tendremos al final de esta primera parte:

La música y los efectos de sonido que puedes escuchar en estos videos fueron creados por RetroModular, y puedes leer sobre cómo lo hizo en Audiotuts+.

Los sprites son de Jacob Zinman-Jeanes, nuestro diseñador residente de Tuts+. Todas las ilustraciones se pueden encontrar en el archivo zip para la descarga del codigo fuente.

Empecemos.

Visión de conjunto

En este tutorial crearemos un tirador de doble palo; el jugador controlará la nave con el teclado, el teclado y el mouse, o las dos barras de un gamepad.

Usamos varias clases para lograr esto:

Entity: la clase base para enemigos, balas y la nave del jugador.
Bullet y PlayerShip.
EntityManager: realiza un seguimiento de todas las entidades en el juego y realiza la detección de colisión.
Input: ayuda a administrar la entrada desde el teclado, el mouse y el gamepad.
Art: Carga y guarda referencias a las texturas necesarias para el juego.
Sound: carga y mantiene referencias a los sonidos y la música.
MathUtil y Extensions: contiene algunos métodos estáticos útiles y métodos de extensión.
GameRoot: controla el ciclo principal del juego. Esta es la clase Game1 que XNA genera automáticamente, renombrado.

El código en este tutorial pretende ser simple y fácil de entender. No tendrá todas las características o una arquitectura complicada diseñada para satisfacer todas las necesidades posibles. Por el contrario, solo hará lo que necesita hacer. Manteniéndolo simple hará que sea más fácil para usted comprender los conceptos, y luego modificarlos y expandirlos en su propio juego único.

Las entidades y el barco del jugador

Crea un nuevo proyecto XNA. Cambia el nombre de la clase Game1 a algo más adecuado. Lo llamé GameRoot.

Ahora comencemos creando una clase base para nuestras entidades de juego.


abstract class Entity
{
  protected Texture2D image;
	// The tint of the image. This will also allow us to change the transparency.
	protected Color color = Color.White;

	public Vector2 Position, Velocity;
	public float Orientation;
	public float Radius = 20;	// used for circular collision detection
	public bool IsExpired;		// true if the entity was destroyed and should be deleted.

	public Vector2 Size
	{
		get
		{
			return image == null ? Vector2.Zero : new Vector2(image.Width, image.Height);
		}
	}

	public abstract void Update();

	public virtual void Draw(SpriteBatch spriteBatch)
	{
		spriteBatch.Draw(image, Position, null, color, Orientation, Size / 2f, 1f, 0, 0);
	}
}

Todas nuestras entidades (enemigos, balas y la nave del jugador) tienen algunas propiedades básicas, como una imagen y una posición. IsExpired se usará para indicar que la entidad ha sido destruida y debe eliminarse de cualquier lista que contenga una referencia a ella.

A continuación, creamos un EntityManager para rastrear nuestras entidades y actualizarlas y dibujarlas.


static class EntityManager
{
	static List<Entity> entities = new List<Entity>();

	static bool isUpdating;
	static List<Entity> addedEntities = new List<Entity>();

	public static int Count { get { return entities.Count; } }

	public static void Add(Entity entity)
	{
		if (!isUpdating)
			entities.Add(entity);
		else
			addedEntities.Add(entity);
	}

	public static void Update()
	{
		isUpdating = true;

		foreach (var entity in entities)
			entity.Update();

		isUpdating = false;

		foreach (var entity in addedEntities)
			entities.Add(entity);

		addedEntities.Clear();

		// remove any expired entities.
		entities = entities.Where(x => !x.IsExpired).ToList();
	}

	public static void Draw(SpriteBatch spriteBatch)
	{
		foreach (var entity in entities)
			entity.Draw(spriteBatch);
	}
}

Recuerde, si modifica una lista mientras la itera, obtendrá una excepción. El código anterior se encarga de esto al poner en cola las entidades agregadas durante la actualización en una lista separada, y agregarlas después de que termine de actualizar las entidades existentes.

Haciendolas visibles

Tendremos que cargar algunas texturas si queremos dibujar algo. Crearemos una clase estática para mantener referencias a todas nuestras texturas.


static class Art
{
	public static Texture2D Player { get; private set; }
	public static Texture2D Seeker { get; private set; }
	public static Texture2D Wanderer { get; private set; }
	public static Texture2D Bullet { get; private set; }
	public static Texture2D Pointer { get; private set; }


	public static void Load(ContentManager content)
	{
		Player = content.Load<Texture2D>("Player");
		Seeker = content.Load<Texture2D>("Seeker");
		Wanderer = content.Load<Texture2D>("Wanderer");
		Bullet = content.Load<Texture2D>("Bullet");
		Pointer = content.Load<Texture2D>("Pointer");
	}
}

Cargue el arte llamando a Art.Load(Content) en GameRoot.LoadContent(). Además, varias clases necesitarán conocer las dimensiones de la pantalla, así que agrega las siguientes propiedades a GameRoot:

1
2	public static GameRoot Instance { get; private set; }
3	public static Viewport Viewport { get { return Instance.GraphicsDevice.Viewport; } }
4	public static Vector2 ScreenSize { get { return new Vector2(Viewport.Width, Viewport.Height); } }

Y en el constructor GameRoot, agregue:

1
2	Instance = this;

Ahora comenzaremos a escribir la clase PlayerShip.


class PlayerShip : Entity
{
	private static PlayerShip instance;
	public static PlayerShip Instance 
	{
		get
		{
			if (instance == null)
				instance = new PlayerShip();

			return instance;
		}
	}

	private PlayerShip()
	{
		image = Art.Player;
		Position = GameRoot.ScreenSize / 2;
		Radius = 10;
	}

	public override void Update()
	{
		// ship logic goes here
	}
}

Creamos PlayerShip como singleton, configuramos su imagen y lo colocamos en el centro de la pantalla.

Finalmente, agreguemos la nave del jugador al EntityManager y la actualizaremos y dibujaremos. Agregue el siguiente código en GameRoot:


// in Initialize(), after the call to base.Initialize()
EntityManager.Add(PlayerShip.Instance);

// in Update()
EntityManager.Update();

// in Draw()
GraphicsDevice.Clear(Color.Black);

spriteBatch.Begin(SpriteSortMode.Texture, BlendState.Additive);
EntityManager.Draw(spriteBatch);
spriteBatch.End();

Dibujamos los sprites con mezcla de aditivos, que es parte de lo que les dará su aspecto de neón. Si ejecuta el juego en este punto, debería ver su nave en el centro de la pantalla. Sin embargo, aún no responde a la entrada. Arreglemos eso.

Entrada

Para el movimiento, el jugador puede usar WASD en el teclado, o el pulgar izquierdo en un gamepad. Para apuntar, pueden usar las teclas de flecha, el pulgar derecho o el mouse. No le pediremos al jugador que mantenga presionado el botón del mouse para disparar porque es incómodo mantener el botón continuamente. Esto nos deja un pequeño problema: ¿cómo sabemos si el jugador apunta con el mouse, el teclado o el gamepad?

Usaremos el siguiente sistema: agregaremos la entrada de teclado y gamepad juntos. Si el jugador mueve el mouse, cambiamos al objetivo del mouse. Si el jugador presiona las teclas de flecha o usa el thumbstick derecho, desactivamos apuntar con el mouse.

Una cosa a tener en cuenta: al empujar un joystick hacia adelante, se devolverá un valor y positivo. En coordenadas de pantalla, los valores y aumentan hacia abajo. Queremos invertir el eje y en el controlador para que empujando la palanca de control hacia arriba apunte o nos mueva hacia la parte superior de la pantalla.

Haremos una clase estática para realizar un seguimiento de los diversos dispositivos de entrada y nos ocuparemos de cambiar entre los diferentes tipos de puntería.


static class Input
{
	private static KeyboardState keyboardState, lastKeyboardState;
	private static MouseState mouseState, lastMouseState;
	private static GamePadState gamepadState, lastGamepadState;

	private static bool isAimingWithMouse = false;

	public static Vector2 MousePosition { get { return new Vector2(mouseState.X, mouseState.Y); } }

	public static void Update()
	{
		lastKeyboardState = keyboardState;
		lastMouseState = mouseState;
		lastGamepadState = gamepadState;

		keyboardState = Keyboard.GetState();
		mouseState = Mouse.GetState();
		gamepadState = GamePad.GetState(PlayerIndex.One);

		// If the player pressed one of the arrow keys or is using a gamepad to aim, we want to disable mouse aiming. Otherwise,
		// if the player moves the mouse, enable mouse aiming.
		if (new[] { Keys.Left, Keys.Right, Keys.Up, Keys.Down }.Any(x => keyboardState.IsKeyDown(x)) || gamepadState.ThumbSticks.Right != Vector2.Zero)
			isAimingWithMouse = false;
		else if (MousePosition != new Vector2(lastMouseState.X, lastMouseState.Y))
			isAimingWithMouse = true;
	}

	// Checks if a key was just pressed down
	public static bool WasKeyPressed(Keys key)
	{
		return lastKeyboardState.IsKeyUp(key) && keyboardState.IsKeyDown(key);
	}

	public static bool WasButtonPressed(Buttons button)
	{
		return lastGamepadState.IsButtonUp(button) && gamepadState.IsButtonDown(button);
	}

	public static Vector2 GetMovementDirection()
	{
			
		Vector2 direction = gamepadState.ThumbSticks.Left;
		direction.Y *= -1;	// invert the y-axis

		if (keyboardState.IsKeyDown(Keys.A))
			direction.X -= 1;
		if (keyboardState.IsKeyDown(Keys.D))
			direction.X += 1;
		if (keyboardState.IsKeyDown(Keys.W))
			direction.Y -= 1;
		if (keyboardState.IsKeyDown(Keys.S))
			direction.Y += 1;

		// Clamp the length of the vector to a maximum of 1.
		if (direction.LengthSquared() > 1)
			direction.Normalize();

		return direction;
	}

	public static Vector2 GetAimDirection()
	{
		if (isAimingWithMouse)
			return GetMouseAimDirection();

		Vector2 direction = gamepadState.ThumbSticks.Right;
		direction.Y *= -1;

		if (keyboardState.IsKeyDown(Keys.Left))
			direction.X -= 1;
		if (keyboardState.IsKeyDown(Keys.Right))
			direction.X += 1;
		if (keyboardState.IsKeyDown(Keys.Up))
			direction.Y -= 1;
		if (keyboardState.IsKeyDown(Keys.Down))
			direction.Y += 1;

		// If there's no aim input, return zero. Otherwise normalize the direction to have a length of 1.
		if (direction == Vector2.Zero)
			return Vector2.Zero;
		else
			return Vector2.Normalize(direction);
	}

	private static Vector2 GetMouseAimDirection()
	{
		Vector2 direction = MousePosition - PlayerShip.Instance.Position;

		if (direction == Vector2.Zero)
			return Vector2.Zero;
		else
			return Vector2.Normalize(direction);
	}

	public static bool WasBombButtonPressed()
	{
		return WasButtonPressed(Buttons.LeftTrigger) || WasButtonPressed(Buttons.RightTrigger) || WasKeyPressed(Keys.Space);
	}
}

Llame Input.Update() al comienzo de GameRoot.Update() para que la clase de entrada funcione.

Consejo: Es posible que notes que incluí un método para bombas. No implementaremos bombas ahora, pero ese método está ahí para su uso futuro.

También puede observar en GetMovementDirection() escribí direction.LengthSquared() > 1. Using LengthSquared() es una pequeña optimización del rendimiento; calcular el cuadrado de la longitud es un poco más rápido que calcular la longitud en sí porque evita la operación de raíz cuadrada relativamente lenta. Verás el código usando los cuadrados de longitudes o distancias a lo largo del programa. En este caso particular, la diferencia de rendimiento es insignificante, pero esta optimización puede marcar la diferencia cuando se usa en ciclos ajustados.

Movimiento

Ahora estamos listos para hacer que la nave se mueva. Agregue este código al método PlayerShip.Update():


const float speed = 8;
Velocity = speed * Input.GetMovementDirection();
Position += Velocity;
Position = Vector2.Clamp(Position, Size / 2, GameRoot.ScreenSize - Size / 2);
			
if (Velocity.LengthSquared() > 0)
	Orientation = Velocity.ToAngle();

Esto hará que la nave se mueva a una velocidad de hasta ocho píxeles por cuadro, sujete su posición para que no pueda salir de la pantalla y gire la nave para mirar hacia la dirección en que se mueve.

ToAngle() es un método de extensión simple definido en nuestra clase de Extensions así:


public static float ToAngle(this Vector2 vector)
{
	return (float)Math.Atan2(vector.Y, vector.X);
}

Disparos

Si ejecuta el juego ahora, debería poder volar el barco. Ahora hagámoslo disparar.

Primero, necesitamos una clase para balas.


class Bullet : Entity
{
	public Bullet(Vector2 position, Vector2 velocity)
	{
		image = Art.Bullet;
		Position = position;
		Velocity = velocity;
		Orientation = Velocity.ToAngle();
		Radius = 8;
	}

	public override void Update()
	{
		if (Velocity.LengthSquared() > 0)
			Orientation = Velocity.ToAngle();

		Position += Velocity;

		// delete bullets that go off-screen
		if (!GameRoot.Viewport.Bounds.Contains(Position.ToPoint()))
			IsExpired = true;
	}
}

Queremos un breve período de recuperación entre viñetas, así que agregue los siguientes campos a la clase PlayerShip.

1
2	const int cooldownFrames = 6;
3	int cooldownRemaining = 0;
4	static Random rand = new Random();

Además, agregue el siguiente código a PlayerShip.Update().


var aim = Input.GetAimDirection();
if (aim.LengthSquared() > 0 && cooldownRemaining <= 0)
{
	cooldownRemaining = cooldownFrames;
	float aimAngle = aim.ToAngle();
	Quaternion aimQuat = Quaternion.CreateFromYawPitchRoll(0, 0, aimAngle);

	float randomSpread = rand.NextFloat(-0.04f, 0.04f) + rand.NextFloat(-0.04f, 0.04f);
	Vector2 vel = MathUtil.FromPolar(aimAngle + randomSpread, 11f);

	Vector2 offset = Vector2.Transform(new Vector2(25, -8), aimQuat);
	EntityManager.Add(new Bullet(Position + offset, vel));

	offset = Vector2.Transform(new Vector2(25, 8), aimQuat);
	EntityManager.Add(new Bullet(Position + offset, vel));
}

if (cooldownRemaining > 0)
	cooldownRemaining--;

Este código crea dos viñetas que viajan paralelas entre sí. Agrega una pequeña cantidad de aleatoriedad a la dirección. Esto hace que los disparos se extiendan un poco como una ametralladora. Agregamos dos números aleatorios juntos porque esto hace que su suma sea más probable que esté centrada (alrededor de cero) y es menos probable que envíe balas muy lejos. Usamos un cuaternión para rotar la posición inicial de las balas en la dirección en que viajan.

También utilizamos dos nuevos métodos de ayuda:

Random.NextFloat() devuelve un flotante entre un valor mínimo y máximo.
MathUtil.FromPolar() crea un Vector2 desde un ángulo y magnitud.


// in Extensions
public static float NextFloat(this Random rand, float minValue, float maxValue)
{
	return (float)rand.NextDouble() * (maxValue - minValue) + minValue;
}

// in MathUtil
public static Vector2 FromPolar(float angle, float magnitude)
{
	return magnitude * new Vector2((float)Math.Cos(angle), (float)Math.Sin(angle));
}

Cursor personalizado

Hay una cosa más que deberíamos hacer ahora que tenemos la clase Input. Dibujemos un cursor de mouse personalizado para que sea más fácil ver hacia dónde apunta el barco. En GameRoot.Draw, simplemente dibuja Art.Pointer en la posición del mouse.


spriteBatch.Begin(SpriteSortMode.Texture, BlendState.Additive);
EntityManager.Draw(spriteBatch);

// draw the custom mouse cursor
spriteBatch.Draw(Art.Pointer, Input.MousePosition, Color.White);
spriteBatch.End();

Conclusión

Si pruebas el juego ahora, podrás mover el barco con las teclas WASD o el joystick izquierdo, y apuntar el flujo continuo de balas con las teclas de flecha, el mouse o el thumbstick derecho.

En la siguiente parte, completaremos la jugabilidad agregando enemigos y un puntaje.

1
2	static class EntityManager
3	{
4	static List<Entity> entities = new List<Entity>();
5
6	static bool isUpdating;
7	static List<Entity> addedEntities = new List<Entity>();
8
9	public static int Count { get { return entities.Count; } }
10
11	public static void Add(Entity entity)
12	{
13	if (!isUpdating)
14	entities.Add(entity);
15	else
16	addedEntities.Add(entity);
17	}
18
19	public static void Update()
20	{
21	isUpdating = true;
22
23	foreach (var entity in entities)
24	entity.Update();
25
26	isUpdating = false;
27
28	foreach (var entity in addedEntities)
29	entities.Add(entity);
30
31	addedEntities.Clear();
32
33	// remove any expired entities.
34	entities = entities.Where(x => !x.IsExpired).ToList();
35	}
36
37	public static void Draw(SpriteBatch spriteBatch)
38	{
39	foreach (var entity in entities)
40	entity.Draw(spriteBatch);
41	}
42	}

1
2	static class Input
3	{
4	private static KeyboardState keyboardState, lastKeyboardState;
5	private static MouseState mouseState, lastMouseState;
6	private static GamePadState gamepadState, lastGamepadState;
7
8	private static bool isAimingWithMouse = false;
9
10	public static Vector2 MousePosition { get { return new Vector2(mouseState.X, mouseState.Y); } }
11
12	public static void Update()
13	{
14	lastKeyboardState = keyboardState;
15	lastMouseState = mouseState;
16	lastGamepadState = gamepadState;
17
18	keyboardState = Keyboard.GetState();
19	mouseState = Mouse.GetState();
20	gamepadState = GamePad.GetState(PlayerIndex.One);
21
22	// If the player pressed one of the arrow keys or is using a gamepad to aim, we want to disable mouse aiming. Otherwise,
23	// if the player moves the mouse, enable mouse aiming.
24	if (new[] { Keys.Left, Keys.Right, Keys.Up, Keys.Down }.Any(x => keyboardState.IsKeyDown(x)) \|\| gamepadState.ThumbSticks.Right != Vector2.Zero)
25	isAimingWithMouse = false;
26	else if (MousePosition != new Vector2(lastMouseState.X, lastMouseState.Y))
27	isAimingWithMouse = true;
28	}
29
30	// Checks if a key was just pressed down
31	public static bool WasKeyPressed(Keys key)
32	{
33	return lastKeyboardState.IsKeyUp(key) && keyboardState.IsKeyDown(key);
34	}
35
36	public static bool WasButtonPressed(Buttons button)
37	{
38	return lastGamepadState.IsButtonUp(button) && gamepadState.IsButtonDown(button);
39	}
40
41	public static Vector2 GetMovementDirection()
42	{
43
44	Vector2 direction = gamepadState.ThumbSticks.Left;
45	direction.Y *= -1; // invert the y-axis
46
47	if (keyboardState.IsKeyDown(Keys.A))
48	direction.X -= 1;
49	if (keyboardState.IsKeyDown(Keys.D))
50	direction.X += 1;
51	if (keyboardState.IsKeyDown(Keys.W))
52	direction.Y -= 1;
53	if (keyboardState.IsKeyDown(Keys.S))
54	direction.Y += 1;
55
56	// Clamp the length of the vector to a maximum of 1.
57	if (direction.LengthSquared() > 1)
58	direction.Normalize();
59
60	return direction;
61	}
62
63	public static Vector2 GetAimDirection()
64	{
65	if (isAimingWithMouse)
66	return GetMouseAimDirection();
67
68	Vector2 direction = gamepadState.ThumbSticks.Right;
69	direction.Y *= -1;
70
71	if (keyboardState.IsKeyDown(Keys.Left))
72	direction.X -= 1;
73	if (keyboardState.IsKeyDown(Keys.Right))
74	direction.X += 1;
75	if (keyboardState.IsKeyDown(Keys.Up))
76	direction.Y -= 1;
77	if (keyboardState.IsKeyDown(Keys.Down))
78	direction.Y += 1;
79
80	// If there's no aim input, return zero. Otherwise normalize the direction to have a length of 1.
81	if (direction == Vector2.Zero)
82	return Vector2.Zero;
83	else
84	return Vector2.Normalize(direction);
85	}
86
87	private static Vector2 GetMouseAimDirection()
88	{
89	Vector2 direction = MousePosition - PlayerShip.Instance.Position;
90
91	if (direction == Vector2.Zero)
92	return Vector2.Zero;
93	else
94	return Vector2.Normalize(direction);
95	}
96
97	public static bool WasBombButtonPressed()
98	{
99	return WasButtonPressed(Buttons.LeftTrigger) \|\| WasButtonPressed(Buttons.RightTrigger) \|\| WasKeyPressed(Keys.Space);
100	}
101	}