Tutorial MonoGame – Primeros pasos

Tutorial MonoGame – Primeros pasos

Ya tenemos todo lo necesario para empezar con MonoGame. Pero antes de que empecemos a escribir código y debido a que estamos usando Visual Studio Code vamos a hacer algunas preparaciones, ya que aún no podemos usar MonoGame con Visual Studio 2019 por lo cual se tienen que hacer algunos pasos extras.

Primero, vamos a hacer que nuestros assets estén preparados para que sean utilizados por MonoGame, por ahora solamente las imágenes pero luego haremos los mismos pasos para el audio y las fuentes.

Agregando nuestros assets

Abre el pipeline de MonoGame y te debe aparecer la siguiente pantalla

Vamos a crear un nuevo proyecto, has clic en File -> New y guárdalo en un lugar en el que tengas acceso rápido. De nombre puedes ponerle como quieras, yo le puse FlappyBird. 

Una vez que tengamos listo nuestro proyecto, le damos clic derecho en la ventana de Project y selecciona Add -> New folder. Llama a esa carpeta Sprites; crea otras dos carpetas llamadas Fonts y Audio. Puede ser que cuando agregues la primera carpeta no te aparezca nada, este es un pequeño bug de la herramienta, pero cuando agregas las demás ya aparecen.

Ya con los assets descargados, vamos a seleccionar nuestra carpeta Sprites, darle clic derecho y seleccionar Existing Item… en la pantalla de selección, vamos a seleccionar todos los sprites que aparecen en la carpeta res y darle clic en Agregar

Nos aparecerá la siguiente pantalla

Ahí elige Copy the file to the directory y selecciona Use the same action for all selected files y selecciona Agregar (Add), ya tendremos todos nuestros assets en sprites. Haz lo mismo con el Audio. Las fuentes lo vamos a dejar para después ya que es un poco más complicado.

Ahora es tiempo de compilar nuestro proyecto para que nos genere los archivos que pueda utilizar MonoGame, ya que son un tipo de archivo especial que se genera para que pueda ser utilizado en las diferentes plataformas que MonoGame soporta.

Selecciona la raíz de nuestro proyecto y le damos clic en Build. 

Dejamos que nuestro proyecto se compile y nos genere los archivos

En tu carpeta donde creaste el proyecto, te debe aparecer una carpeta llamada bin, dentro de esta carpeta se encuentran otras dos carpetas que contienen nuestros assets en formato .xnb. Estos archivos son los que vamos a utilizar.

Creando el proyecto de FlappyBird

Ya que tenemos nuestros assets listos de una vez para no atrasarnos, es hora de crear el proyecto de MonoGame y poder empezar a crear nuestro videojuego.

En tu terminal, ve a la carpeta donde quieres crear el proyecto (en la parte de Instalando MonoGame, muestro un video cómo hacerlo de forma sencilla si aún no manejas bien la terminal), ya dentro de la carpeta vamos a escribir el siguiente comando para crear el proyecto de MonoGame.

Esto nos creará una carpeta llamada FlappyBird con el proyecto de MonoGame, entremos a la carpeta y abramos Visual Studio Code

Te aparecerán dos advertencias. Selecciona Yes y Restore.

El template de MonoGame nos crea la siguiente estructura de carpeta

El archivo más importante es Game1.cs , si lo abrimos veremos el siguiente código. He borrado los comentarios para que sea más corto

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

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. Debido a que hicimos unos pasos adicionales, cambiaremos de nombre esta carpeta, pero lo veremos más adelante.

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í actualizamos 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. En la terminal escribe dotnet run  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.

Como puedes ver, hay algunos métodos que no aparecen en nuestra plantilla, pero que son llamados automáticamente, como UnloadContent y End. La parte más importante es el Game Loop, que es donde escribiremos la lógica de nuestro videojuego.

Resumiendo

Ya tenemos listo nuestro proyecto para empezar a crear nuestro videojuego, en los siguientes pasos vamos a empezar a crear las pantallas que va a utilizar nuestro videojuego y ahora sí, escribir código.

A %d blogueros les gusta esto: