MonoGame Tutorial — Parte 1: Introdução

7 min readApr 15, 2018

Apresentação

Resolvi criar este tutorial após um rápido estudo que realizei sobre o MonoGame, o que me motivou foi os matérias em português desatualizados que encontrei durante os meus estudos é a vontade de compartilhar o conhecimento que obtive.

Neste tutorial eu irei mostrar as funcionalidades do MonoGame sempre desenvolvendo exemplos mobile (Android) de forma mais objetiva possível.

OBSERVAÇÃO:
Nada impede de acompanhar o tutorial criando aplicações para windows ou outra plataforma, porem existirá algumas características da plataforma escolhida, mais creio que nada muito impactante.
Não sou um profissional em desenvolvimento de jogos, apenas um desenvolvedor curioso e autodidata, desta forma, caso eu escreva alguma besteira não deixem de me corrigir.

O que é MonoGame?

MonoGame é uma implementação open-source do Microsoft XNA 4 Framework, criado em 2009 pelo brasileiro José Antonio Leal de Farias, vulgo JALF, com o nome inicial de XNA Touch, o objetivo dele era portar jogos simples em 2D para dispositivos mobile. Seu primeiro lançamento só suportava iPhone e foi postado no Codeplex. Em 2010 vários jogos que usaram o XNA Touch estavam disponíveis na App Store.

Em março de 2011 o projeto foi renomeado para MonoGame e foi movido para o GitHub e no começo de 2014 a administração do projeto foi passada a Tom Spilman e Steve Williams, que lideram o projeto até hoje.

Atualmente as seguintes plataformas são suportadas:

Desktop PCs

Windows 10 Store Apps (UWP)
Windows Win32 (OpenGL & DirectX)
Linux (OpenGL)
Mac OS X (OpenGL)

Dispositivos Mobile/Tablet

Android (OpenGL)
iPhone/iPad (OpenGL)
Windows Phone 10 (UWP)

Consoles (para desenvolvedores registrados)

PlayStation 4
PlayStation Vita
Xbox One (UWP e/ou XDK)
Nintendo Switch

Outros

tvOS

Instalações

Será utilizado os seguintes programas neste tutorial:

Instalando o Visual Studio (VS)

Não vou entrar em muitos detalhes na instalação do VS, apenas vou apontar um workload que será necessário adicionar na instalação, visto que irei criar os exemplos para dispositivos mobile com android.

Assim que a instalação do VS for iniciada vá até a categoria de Mobile & Gaming e selecione o workload Mobile development with .NET e prossiga com a instalação.

Baixe o instalador neste link: https://www.visualstudio.com/downloads/

Instalando o MonoGame

A instalação do MonoGame e um pouco mais complicada você vai precisar fazer Next, I Agree, Install e Finish..rsr

Baixe o instalador neste link: http://www.monogame.net/releases/v3.6/MonoGameSetup.exe

Testando a Instalação

Se o processo de instalação estiver ocorrido com 105% de sucesso os seguintes templates serão apresentados ao criar um novo projeto no Visual Studio (File — New — Project ou Ctrl+Shift+N):

Selecione a opção MonoGame Android Project informe o nome como GameTeste escolha a pasta onde o projeto será criado e click em OK, assim que o projeto for criado selecione o emulador android ou o seu dispositivo e execute o projeto (F5).

Como eu disse anteriormente, se a sua instalação ocorreu com 105% de sucesso você verá a seguinte tela azul:

Estrutura do Projeto

Acessando o Solution Explorer (Ctrl+Alt+L), observe que a estrutura de pastas nada mudou em relação a uma aplicação para android, com exceção do arquivo Content.mgcb da pasta Content e a classe Game1.cs.

Content.mgcb

Como o nome já diz ele é um aquivo de conteúdo…rsr.

Brincadeiras a parte… ele armazena todos os conteúdos do seu jogo (Sons, Imagens, Fonte de Textos…) e no momento do build estes arquivos são convertidos para o formato .xnb. Porque este formato!? Lembra que o MonoGame é uma implementação do Microsoft XNA, o conteúdo(imagem, sons…) de um jogo desenvolvido em XNA precisa está no formato .xnb.

A vantagem é que você não precisa ficar escrevendo código, para carregar uma imagem por exemplo, especifico para cada dispositivo que o jogo irá rodar , facilitando assim a reutilização do seu código.

Game1.cs

Para comprovar que o MonoGame é uma implementação open source do Microsoft XNA, repare nos using’s, usando os mesmos namespaces do XNA ele mantém a compatibilidade com um código escrito em XNA, ou seja, caso possua um jogo escrito em XNA você pode reutilizar este código com MonoGame realizando pequenos ou nenhum ajuste.

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;

Está classe é a principal do projeto, ela faz herança com a classe Microsoft.Xna.Framework.Game, que fornece algumas propriedades, eventos e métodos úteis para o desenvolvimento de um jogo.

* Variáveis

GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;

graphics —Representa a tela do dispositivo onde jogo está rodando.
spriteBatch — Classe auxiliar para desenhar textos ou imagens na tela.

* Métodos

protected override void Initialize()
{
    // TODO: Add your initialization logic here
    base.Initialize();
}

Initialize() — Permite a inicialização de qualquer serviço ou conteúdo não gráfico antes do jogo começar a executar.

protected override void LoadContent()
{
    spriteBatch = new SpriteBatch(GraphicsDevice);
    // TODO: use this.Content to load your game content here
}

LoadContent() — Chamado após o Initialize uma vez por jogo é aqui que deverá ser carregado o conteúdo.

protected override void Update(GameTime gameTime)
{
    if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
       Exit();

    // TODO: Add your update logic here
    base.Update(gameTime);
}

Update(GameTime gameTime) — Chamado várias vezes por segundo é aqui que deverá ser escrito a lógica do jogo como: Movimentação de personagem, checar colisão, reprodução de sons…

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

    // TODO: Add your drawing code here
    base.Draw(gameTime);
}

Draw(GameTime gameTime) — Chamado várias vezes por segundo é aqui que as texturas serão desenhadas.

Deixando o GameTeste mais Interessante

Para finalizar vamos adicionar o texto “Hello MonoGame!” na tela é fazer o mesmo se mover para onde ocorrer o pressionamento(Touch) na tela.

A primeira coisa á fazer será criar uma arquivo do tipo SpriteFont no nosso Content.mgcb, vamos lá:

No Solution Explorer navegue até a pasta Content, clique com o botão direito do mouse no arquivo Content.mgcb é selecione Open With…, procure por MonoGame Pipeline Tool e de um duplo clique, a seguinte janela será apresentada:

Clique com o botão direito do mouse em Content e selecione Add — New Item…, informe o nome como fonte e selecione o tipo SpriteFont Description (.spritefont) clique em OK e salve a alteração no MonoGame Pipeline Tool.

O arquivo criado nada mais é do que uma XML criado com uma extensão diferente, vá até a pasta do projeto, localize o arquivo fonte.spritefont na pasta Content e abra o mesmo com um editor de texto (Notepad). Em seguida altere o valor da tag Size de 12 para 50.

<?xml version="1.0" encoding="utf-8"?>
<XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics">
  <Asset Type="Graphics:FontDescription">
  <FontName>Arial</FontName>
  <Size>50</Size>
  <Spacing>0</Spacing>
  <UseKerning>true</UseKerning>
  <Style>Regular</Style>
  <CharacterRegions>
    <CharacterRegion>
      <Start>&#32;</Start>
      <End>&#126;</End>
    </CharacterRegion>
  </CharacterRegions>
  </Asset>
</XnaContent>

Agora vamos criar duas variáveis uma do tipo SpriteFont e a outro do tipo Vector2.

SpriteFont fonte;
Vector2 posicao;

No método Initialize instanciaremos a variável posicao e no LoadContent o carregamento do arquivo de fonte que foi criado no arquivo Content.mgcb com o método Load da propriedade Content e atribuiremos o mesmo á variável fonte.

protected override void Initialize()
{
    // TODO: Add your initialization logic here
    posicao = Vector2.Zero;
    base.Initialize();
}

protected override void LoadContent()
{
    spriteBatch = new SpriteBatch(GraphicsDevice);

    // TODO: use this.Content to load your game content here
    fonte = Content.Load<SpriteFont>("fonte");
}

Adicione o seguinte using na classe Game1.cs:

using Microsoft.Xna.Framework.Input.Touch;

No método Update obteremos uma TouchCollection usando o método GetState da classe TouchPanel é realizaremos um loop na coleção obtida pegando o valor da propriedade Position do objeto TouchLocation e atribuiremos o mesmo á variável posicao.

protected override void Update(GameTime gameTime)
{
    if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
        Exit();

    // TODO: Add your update logic here
    TouchCollection touchState = TouchPanel.GetState();
    foreach (TouchLocation touch in touchState)
        posicao = touch.Position;

    base.Update(gameTime);
}

Por fim no método Draw literalmente desenharemos o texto utilizando o método DrawString do objeto SpriteBatch.

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

    // TODO: Add your drawing code here
    spriteBatch.Begin();
    spriteBatch.DrawString(fonte, "Hello MonoGame!", posicao, Color.Black);
    spriteBatch.End();

    base.Draw(gameTime);
}

Observe que antes de utilizar o método para desenhar o texto, foi necessário chamar o método Begin é após utilizar o método foi chamado o método End, estás chamadas são obrigatórias sempre que for realizado a chamada de algum método draw de SpriteBatch.

Repositório dos Exemplos: https://github.com/RonildoSouza/MonoGameTutorial/tree/Parte1

REFERÊNCIAS:
http://www.monogame.net
https://www.youtube.com/watch?v=gM5pRnYV1tA&t=1s
https://www.youtube.com/watch?v=iSMYVVl0drM
Brazil, André Luiz. Desenvolvendo Jogos 2D com C# e Microsoft XNA: volume único / André Luiz Brazil, Lúcia Blondet Baruque. — Rio de Janeiro: Fundação CECIERJ, 2010.

MonoGame Tutorial — Parte2: Planejamento do Jogo e Inicio do Projeto