Primeros pasos

Ya tenemos todo instalado para empezar a crear nuestro videojuego, es hora de abrir Visual Studio y crear un proyecto MonoGame.

Te darás cuenta que se te han instalado varias plantillas de MonoGame, de esta forma te será más fácil empezar a desarrollar los juegos, por ahora vamos a utilizar la de escritorio ya que crearemos un juego que podemos utilizar en nuestra computadora. Elige la plantilla de tu plataforma para que empecemos desde ahí.

Luego le damos Siguiente, elegimos el nombre, yo le puse ShooterAdvance , luego le decimos dónde guardar nuestro proyecto y al finalizar se nos presentarán varios archivos, por ahora el más importante es Game1.cs  ya que es donde está presente la lógica principal de MonoGame.

Un vistazo a la plantilla de MonoGame

Ahora vamos a darle una pequeña revisada al código que nos genera la plantilla de MonoGame (he removido comentarios) para que sea más fácil concentrarnos en el código.

Estas son las bibliotecas básicas cuando queremos hacer algo con MonoGame ya que nos traen utilidades que podemos usar para manejar los recursos, pintar sprites en pantalla y manejar las entradas de los jugadores. Una cosa curiosa es que tienen el espacio de nombre de Microsoft.Xna , esto es así debido a que lo que se pretendía era mantener 100% la compatibilidad con XNA y decidieron dejar ese espacio de nombre para prácticamente copiar y pegar.

Dependiendo del nombre y la plataforma que hayas elegido, tu espacio de nombre puede ser diferente, aunque por lo regular, siempre lo puedes cambiar.

Luego tenemos el inicio de nuestra clase principal

Game1  es el nombre de la clase principal donde va toda la lógica, a mi me gusta cambiarlo por algo más descriptivo como MainGame  o algo parecido, pero por ahora vamos a dejarlo así. Esta clase hereda de Game  que nos provee de todos los métodos esenciales para nuestro juego (como Load/Unload Content, Update, Draw, etc). Generalmente tenemos un Game  por proyecto.

Luego se nos presentan dos variables de instancia

Por defecto, MonoGame nos crea estas dos variables, nos sirve para manejar las gráficas de nuestro juego, cosa que utilizaremos más adelante.

Luego, MonoGame nos crea un constructor

Este constructor nos sirve para inicializar las variables. En este caso estamos creando un GraphicsDeviceManager  para nuestro juego, con el cual vamos a poder manejar los gráficos, y también le indicamos a MonoGame dónde va a encontrar el contenido que vamos a ir agregando, en este caso en la carpeta de Content

Ahora nos toca ver el Método Initialize() . Este método se llama luego del constructor pero antes del Loop del juego (Update/Draw).

Por lo general, aquí inicializamos las variables que nos servirán para la lógica del juego y aquellas cosas que no sean cosas gráficas, ya que para eso tenemos un método especial.

En este método cargamos todo el contenido gráfico del juego y lo inicializamos. Este método solo se llama una vez por juego, sucede luego del método Initialize  pero antes del loop principal (Update/Draw).

Ya que hemos inicializado todo lo que vamos a ocupar, ahora sí podemos llamar a nuestro loop principal, que se encuentra divido en dos partes para un mejor manejo de los recursos.

Este método es llamado múltiple veces por segundo, aquí es donde actualizamos toda la lógica del juego tales como colisiones, entrada del usuario, audio, etc. Es el corazón principal de MonoGame. Una cosa que hay que tener en cuenta es que en este método no actualizamos los gráficos, para esa función tenemos otro método.

En el método Draw  es también llamado varias veces por segundo, aquí actulizamos todo lo relacionado con el aspecto gráfico, como la posición del sprite, colores, etc. Dentro de este método tenemos graphics.GraphicsDevice.Clear(Color.CornflowerBlue); , lo cual nos da de fondo un lindo color Azul.

Ahora que ya conocemos un poco del código que nos genera MonoGame, es hora de correr por primera vez el proyecto. Al correr esta plantilla sin modificaciones nos debe de salir esto

¡Emocionante! Tenemos una pantalla lista para empezar nuestro videojuego con el fondo que se indica en el método Draw .

El ciclo de vida de un juego con MonoGame

Ya hablamos un poco sobre qué hace cada método que aparece en la plantilla de MonoGame, ahora vamos a visualizarlo para que se entienda mejor.

que programaremos la lógica de nuestro juego.

Agregando contenido

De los assets que descargamos, vamos a empezar a agregar contenido a nuestro juego. En la ventana de explorador de Visual Studio verás una carpeta llamada Content  y dentro de esa carpeta un pequeño archivo llamado Content.mgcb .

Vamos a darle doble clic a ese archivo para que nos abra un programa llamado MonoGame Pipeline que nos va a servir a transformar nuestros assets a algo que MonoGame pueda leer. Este programa nos optmiza imágenes, sonidos y fuentes para que podamos utilizarlo con MonoGame en las distintas plataformas, de tal forma que no tengamos que hacer mucho para que se vea bien en todos lados.

Ya con la herramienta abierta, vamos dar clic derecho a Content y luego Add > New Folder y le ponemos nombre Sprites

Dentro de la carpeta nueva que creamos, le damos clic derecho y seleccionamos Add > Existing Item…, Seleccionamos single_ship.png  de los assets que descargamos y en la nueva pantalla seleccionamos Copy the file to the directory.

Ahora ya tenemos nuestro sprite dentro de la carpeta Content, pero necesitamos hacer un paso más para que sea utilzado por MonoGame, debemos compilar nuestros assets. Le vamos a dar clic al botón de Build  para que transforme todos nuestros assets a algo que pueda leer MonoGame, esto creará un archivo con el mismo nombre pero con la extensión xnb .

Ahora podemos cerrar la herramienta y volver a Visual Studio.

Agregando al jugador en la pantalla

Ahora que ya tenemos el contenido en nuestro proyecto, ¡es hora de usarlo! Primero debemos declarar una variable para poder cargar el sprite en memoria.

Usamos Texture2D  ya que estamos cargando una imagen, hay otros tipos pero por ahora no los utilizaremos. Una vez que tenemos la variable, vamos a ir al método LoadContent  (recuerda que aquí cargamos el contenido gráfico) para inicializar nuestra variable

A nuestro Content  le cargamos nuestra textura y le pasamos el nombre de la imagen, sin extensión, ya que todos tienen extensión xnb  por lo cual es irrelevante. Como guardamos esa imagen en la carpeta Sprites  igual debemos indicar ese path.

Es hora de dibujar nuestro sprite en pantalla

SpriteBatch  es una clase que hace muchas cosas, no la vamos a cubrir todas, pero con lo que cubramos vamos a hacer lo necesario para manejar nuestros assets. SpriteBatch es usado para manejar muchos sprites al mismo tiempo, es por eso que necesitamos indicar cuándo inicia y cuándo termina. Con spriteBatch.Begin();  le indicamos a MonoGame que estamos por dibujar nuestros sprites, cuando terminamos de dibujar todos los sprites usamos spriteBatch.End(); .

Ahora vamos a darle un vistazo a spriteBatch.Draw() , este método tiene muchos formas de dibujar nuestros sprites, por ahora vamos a utilizar el método que toma tres parámetros, estos son: playerSprite es el objeto que queremos dibujar, new Vector2(100, 100)  es la posición en donde queremos dibujar el sprite y Color.White  es el color del tinte que queremos darle, como no queremos ningún tinte especial entonces solamente lo dejamos en blanco.

Ahora es tiempo de correr nuestro juego, y podremos ver el sprite en pantalla.

Sobre las coordenadas

En la sección anterior vimos que a nuestro método spriteBatch.Draw()  le pasamos como parámetro un Vector2  que indica la posición de nuestro sprite, pero ¿cómo funciona esto en realidad? En MonoGame, y prácticamente todos los engines y frameworks, la posición en pantalla se guía por coordenadas X y Y con origen en la esquina superior izquierda.

El eje de las X aumenta hacia la derecha y el eje de las Y aumenta hacia abajo, al contrario de lo que nos enseñaron en la escuela. También hay que notar que la posición que le damos al sprite es relativo a la esquina superior izquierda de la imagen, y no el centro, esto hay que recordarlo muy bien porque luego nos puede dar errores en los cálculos y posiciones.

Para mejor entendimiento muestro la siguiente imagen

Resumiendo

Ya hemos hecho nuestros primeros pasos con MonoGame y pudimos poner un sprite en pantalla. Si quires ver el código que hay hasta ahora, puedes verlo en mi Github, ahí estaré subiendo una nueva rama por cada lección que vayamos viendo para que puedas validar tu código.