Desenvolvendo Jogos com o Framework MONOGAME - Guia
para Desenvolvedores [VERSO DE AMOSTRA] 2
Luciano Alves da Silva 3
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 4
Desenvolvendo Jogos com o Framework
Guia para Desenvolvedores [VERSO DE AMOSTRA]
Autor: Luciano Alves da Silva
Rio de Janeiro Outubro/2014
Copyright 2014 Todos os direitos reservados Luciano Alves da Silva 5
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 6
Aviso importante
Esta obra UMA VERSO DE AMOSTRA, ou seja, UMA VERSO LIMITADA E LIVRE da verso COMPLETA.
Essa obra , PODER SER DISTRIBUDA LIVREMENTE , MEDIANTE AS SEGUINTES REGRAS ABAIXO:
Esse material NO PODER SER COMERCIALIZADO Essa material NO PODER SER DEVIRADO E todos os crditos do autor DEVERO SER MANTIDOS
Download dos arquivos
Para realizar o download dos arquivos de exemplos utilizados nesta obra, clique no link disponibilizado abaixo:
Link dos materiais http://goo.gl/wqN8jn
Luciano Alves da Silva 7
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 8
Sobre o autor da obra
Luciano Alves da Silva (lucianopascal@yahoo.com.br) Bacharelado em Cincia da Computao pela UNISUAM e Ps-Graduado em Docncia do Ensino Superior pelo Instituto A Vez do Mestre (Universidade Cndido Mendes - UCAM). Possui conhecimento e domnio das linguagens de programao Pascal, Java, C/C++, C#, Visual Basic, Delphi, PHP e HTML. J criou Ambientes de Desenvolvimento Integrado (conhecidos como IDE) como o MakeWare (que trabalha com as linguagens Pascal, C++ e Java) e o AlgoWare (interpretador de algoritmos).
autor tambm dos seguintes livros, pela editora AGBOOK
Aprenda Passo a Passo a Programar em Android Guia Essencial para Desenvolvedores
Desenvolvendo Jogos com a Plataforma XNA Guia para Desenvolvedores (2 Edio).
Desenvolvendo Jogos com a Ferramenta RPG Maker VX Guia do Usurio. Luciano Alves da Silva 9
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 10
Apresentao
O mercado de desenvolvimento de jogos tem crescido bastante nesses ltimos tempos. Hoje encontramos jogos para as mais diversas plataformas (como PC, Web e Mobile). Atualmente o mercado de desenvolvimento de jogos para PC tem ganhado bastante destaque, e hoje temos vrias ferramentas (como frameworks) voltados para a criao de jogos destinados plataforma PC, e uma dessas ferramentas e o framework MONOGAME , que uma plataforma de CDIGO ABERTO baseada no XNA da Microsoft. Neste livro voc aprender nossos bsicas de como criar jogos utilizando o framework MONOGAME, atravs dos seus recursos disponveis e tambm atravs dos exemplos mostrados aqui nesta obra.
Para uma abordagem MAIS COMPLETA, adquira a VERSO COMPLETA do livro no meu site : http://lucianodev.com Luciano Alves da Silva 11
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 12
ndice analtico
Capitulo 1 Fundamentos bsicos sobre jogos ................ 14 1.1) O que um jogo de computador ? ............................ 14 1.2) Regras para a criao de um jogo ............................. 15 1.3) Sobre a plataforma de desenvolvimento ................. 17 1.4) Sobre a linguagem de programao C# .................... 17 Capitulo 2 Instalando as ferramentas de desenvolvimento ................................................................ 18 2.1) A ferramenta Xamarim Studio .................................. 18 2.1.1) Realizando o download ........................................... 19 2.1.2) Instalando a ferramenta ......................................... 23 2.2) O framework MONOGAME ......................................... 24 2.2.1) Realizando o download ........................................... 25 2.2.2) Instalando a plataforma ......................................... 26 Luciano Alves da Silva 13
2.3) A biblioteca GameUtil2D ........................................... 30 2.3.1) Para que serve esta biblioteca ? ............................ 31 Capitulo 3 Criando nosso primeiro projeto .................... 32 Capitulo 4 Visualizando imagens no jogo ....................... 50 4.1) Criando nosso projeto ................................................ 50 4.2) Importando a biblioteca GameUtil2D ...................... 50 4.3) Copiando as imagens para dentro do projeto ......... 56 4.4) Desenvolvendo o cdigo ............................................. 59 Capitulo 5 Movendo elementos do jogo pela tela ......... 78 Capitulo 6 Trabalhando com animao de sprites........ 93 Capitulo 7 Detectando colises entre objetos ............ 105 Consideraes Finais........................................................ 112
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 14
Capitulo 1 Fundamentos bsicos sobre jogos
ntes de comearmos a estudar e utilizar o framework MONOGAME, vamos entender melhor os fundamentos sobre jogos de computador.
1.1) O que um jogo de computador ?
Um jogo de computador (assim como um software que utilizamos no dia a dia), um programa voltado e destinado somente ao entretenimento e diverso.
Praticamente, por parte de muitos usurios, os jogos fazem parte do cotidiano (mesmo para aqueles que no so desenvolvedores). Quem nunca se divertiu (em seu momento de intervalo) com algum jogo de computador, por mais simples que seja (como um jogo de campo minado, um jogo de cartas, um jogo de plataforma como Mario Bros e etc.).
A Luciano Alves da Silva 15
1.2) Regras para a criao de um jogo de computador
Para desenvolvermos um jogo, naturalmente, precisamos ter algumas coisas em mente : seu inicio, meio e fim (histria do jogo de modo geral, no importando seu gnero) ; as ferramentas que vamos utilizar para desenvolver os jogos e programadores/artistas que estaro envolvidos no projeto do jogo.
Vejamos abaixo algumas imagens de alguns ttulos de jogos bastante conhecidos :
Jetpack joyride Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 16
Swing Copters
Angry Birds Rio Luciano Alves da Silva 17
1.3) Sobre a plataforma de desenvolvimento
Conforme foi abordado no tpico 1.2 deste captulo, um dos critrios para a construo de jogos a ferramenta de desenvolvimento escolhida, que neste caso, ser o framework MONOGAME.
O MONOGAME um framework de cdigo aberto criado pela Monogame Team , baseado na plataforma XNA da Microsoft. Ele surgiu para dar continuade a plataforma XNA da Microsoft (que foi descontinuada) pertimindo que desenvolvedores criem jogos multi-plataforma (voltados para Windows, Android , OUYA e etc.) utilizando praticamente os mesmos comandos e classes que so utilizados no XNA. 1.4) Sobre a linguagem de programao C#
A linguagem de programao C# a linguagem que iremos utilizar para o desenvolvimento de jogos no framework MONOGAME (juntamente com o MonoDevelop (ferramenta de desenvolvimento), hoje mantida pela Xamarim Studio). Caso voc , que esteja lendo este livro, no tenha nenhum conhecimento de linguagem de programao e/ou algoritmos, recomendo fortemente o estudo sobre o assunto. Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 18
Capitulo 2 Instalando as ferramentas de desenvolvimento
este captulo iremos aprender passo a passo a instalar todas as ferramentas (e frameworks) de desenvolvimento para criarmos os nossos jogos atravs do framework MONOGAME. 2.1) A ferramenta Xamarim Studio
Conforme j foi mencionado no captulo anterior, iremos utilizar a ferramenta Xamarim Studio (antigo MonoDevelop) para o desenvolvimento de jogos no MONOGAME.
OBSERVAES SOBRE O XAMARIM STUDIO Durante a produo deste livro j estava disponvel a verso 5.0.1.3 da ferramenta Xamarim Studio, porm, por problemas de compatibilidade que esta ferramenta apresentou com o pacote do MONOGAME (voltado para o MonoDevelop), iremos trabalhar com a verso do Xamarim 4.2.2.2, que apresentou ESTABILIDADE e nenhuma falha. N Luciano Alves da Silva 19
2.1.1) Realizando o download
Para realizarmos o download do Xamarim Studio, visite o seguinte link : http://download.xamarin.com/studio/Windows/XamarinStud io-4.2.2-2.msi
Feito isso ser aberta a seguinte caixa de dilogo abaixo:
Caixa de dilogo de download
Faa o download do arquivo de instalao do Xamarim Studio, MAS POR ENQUANTO NO INSTALE A FERRAMENTA AINDA. Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 20
Agora vamos baixar alguns pacotes que funcionam como pr-requisito para o Xamarim Studio. O primeiro deles a plataforma .NET 4.0, que pode ser baixado no seguinte link abaixo:
Feito isso ser aberta a seguinte caixa de dilogo :
Caixa de dilogo de download
Aps a realizao do download execute o programa de instalao do GTK# for .NET. Basta seguir o passo a passo da instalao (praticamente so clicar Next,...,Next e Install).
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 22
Agora vamos realizar o download de um arquivo de instalao muito importante que ir permitir que nossos jogos possam executar no PC, que a biblioteca OpenAL (Open Audio library). Para fazer o download basta clicar no link em seguida :
http://goo.gl/53s4yX
Feito isso ir se abrir a seguinte caixa de dilogo :
Caixa de dilogo de download
Luciano Alves da Silva 23
Efetue o download do arquivo .ZIP, e aps isso extraia o executvel .EXE que se encontra dentro do arquivo zipado. Em seguida execute o arquivo de instalao. A instalao muito simples, basta clicar em OK para que a biblioteca seja instalada no Windows .
2.1.2) Instalando a ferramenta
Depois de instalados todos os pr-requisitos vamos instalar agora a nossa ferramenta Xamarim Studio (que j baixamos anteriormente). Basta seguirmos passo a passo o procedimento de instalao (praticamente s clicarmos em Next,..,Next e Install).
Feito isso, vamos executar a nossa ferramenta Xamarim Studio. Vejamos nossa ferramenta na figura seguinte:
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 24
Ferramenta Xamarim Studio
2.2) O framework MONOGAME
Depois de instalarmos o Xamarim Studio, vamos agora instalar o framework MONOGAME.
Luciano Alves da Silva 25
2.2.1) Realizando o download
Para realizarmos o download do MONOGAME visite o seguinte link :
http://goo.gl/gsa0ow
Caixa de dilogo de download do MONOGAME
Efetue o download do MONOGAME salve o arquivo de instalao em um local apropriado.
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 26
2.2.2) Instalando a plataforma
Agora vamos realizar a instalao do nosso framework MONOGAME no Xamarim Studio. Com o Xamarim Studio aberto, vamos no menu Ferramentas e em seguida selecione a opo Gerenciador de Mdulos Adicionais. Confira a figura em seguida:
Chamando o gerenciador de mdulos adicionais
Feito isso ir se abrir a seguinte caixa de dalogo em seguida:
Luciano Alves da Silva 27
Caixa de dilogo Add-in Manager
Agora vamos clicar no boto Install from file para buscarmos o arquivo. Feito isso ir se abrir a seguinte tela :
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 28
Caixa de dilogo Install Add-in Package
Vamos selecionar o diretrio onde se encontra o arquivo que baixamos do MONOGAME, conforme mostrado em seguida :
Luciano Alves da Silva 29
Selecionando o pacote
Agora vamos clicar no boto Open para realizarmos a instalao. Feito ser mostrada a seguinte caixa de dilogo abaixo:
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 30
Feito isso basta clicar no boto Instalar para que o pacote seja instalado. Confira o resultado na figura seguinte :
Framework MONOGAME instalado
Clique em CLOSE para fechar a caixa de dilogo.
2.3) A biblioteca GameUtil2D
Nesta obra , irei utilizar para o desenvolvimento de nossos jogos uma biblioteca (dentro dos nossos projetos no MONOGAME) que eu mesmo desenvolvi chamado GameUtil2D. Luciano Alves da Silva 31
2.3.1) Para que serve esta biblioteca ?
Essa biblioteca nada mais do que um conjunto de classes que facilitam a construo de jogos no MONOGAME. Ela j possui uma srie de recursos que facilitam a construo de jogos de forma fcil e rpida (inclui classes para animao de Sprites, colises, criao de personagens para jogos plataforma e etc.) . Esse framework (que j acompanha este material) pode ser encontrada em seu site oficial : www.gameutil2d.org Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 32
Capitulo 3 Criando nosso primeiro projeto
este captulo iremos criar o nosso primeiro projeto de jogo atravs do Xamarin Studio, usando o framework MONOGAME (em conjunto com as classes da biblioteca GameUtil2D).
Depois de tudo instalado, vamos executar o Xamarin Studio (indo no Menu iniciar / Todos os programas / Xamarin Studio).
Feito o procedimento explicado acima, ser aberta a seguinte tela :
N Luciano Alves da Silva 33
Xamarin Studio
Bom, vamos comear criando nosso primeiro projeto no C# voltado para a PC no MONOGAME. Para isso, vamos no menu Arquivo / Novo e em seguida Soluo (ou como tecla de atalho pressione CTRL+SHIFT+N):
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 34
Criando um novo projeto
Feito isso ir se abrir a seguinte caixa de dilogo a seguir:
Caixa de dilogo Nova Soluo Luciano Alves da Silva 35
Vamos selecionar a seo MonoGame conforme demonstra a figura a seguir:
Selecionando a seo MonoGame
Feito isso veremos vrias opes de criao de jogos em MonoGame. Como vamos criar jogos voltados para a plataforma PC, vamos selecionar a opo MonoGame Windows OpenGL Application. Aps selecionar a opo solicitada vamos no campo Nome para digitarmos o nome Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 36
do nosso projeto, que vai se chamar Primeiro_Projeto (devemos usar _ ao invs de espao). Depois disso basta clicarmos em OK para que o nosso projeto possa ser criado. Veja na figura seguinte:
Projeto Primeiro Exemplo criado
Bom, vamos ver a guia Soluo para saber quais arquivos compem um projeto MONOGAME. Confira na figura seguinte: Luciano Alves da Silva 37
Solution Explorer
Icon.png: Arquivo de cone , que vai representar a aplicao quando ela for gerada. Game1.cs: Este o arquivo principal onde ns iremos codificar o nosso jogo. Veja o cdigo fonte dele :
#region Using Statements using System; using System.Collections.Generic; Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 38
using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework.Input; using Microsoft.Xna.Framework.Storage; using Microsoft.Xna.Framework.GamerServices; #endregion
namespace Primeiro_Exemplo { /// <summary> /// This is the main type for your game /// </summary> public class Game1 : Game { GraphicsDeviceManager graphics; SpriteBatch spriteBatch;
public Game1() { graphics = new GraphicsDeviceManager(this); Content.RootDirectory = "Content"; graphics.IsFullScreen = true;
}
/// <summary> /// Allows the game to perform any initialization /// it needs to before starting to run. /// This is where it can query for any required /// services and load any non-graphic /// related content. Calling base.Initialize will /// enumerate through any components and initialize /// them as well. /// </summary> protected override void Initialize() { // TODO: Add your initialization logic here Luciano Alves da Silva 39
base.Initialize(); }
/// <summary> /// LoadContent will be called once per game and is /// the place to load all of your content. /// </summary> protected override void LoadContent() { // Create a new SpriteBatch, which can be used // to draw textures. spriteBatch = new SpriteBatch(GraphicsDevice);
// TODO: use this.Content to load your game // content here }
/// <summary> /// UnloadContent will be called once per game and /// is the place to unload all content. /// </summary> protected override void UnloadContent() { // TODO: Unload any non ContentManager content // here } /// <summary> /// Allows the game to run logic such as updating /// the world, checking for collisions, gathering /// input, and playing audio. /// </summary> /// <param name="gameTime">Provides a snapshot of /// timing values.</param> protected override void Update(GameTime gameTime) { if (GamePad.GetState(PlayerIndex.One). Buttons.Back == ButtonState.Pressed || Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 40
/// <summary> /// This is called when the game should draw /// itself. /// </summary> /// <param name="gameTime">Provides a snapshot of /// timing values.</param> protected override void Draw(GameTime gameTime) { GraphicsDevice.Clear(Color.CornflowerBlue);
// TODO: Add your drawing code here
base.Draw(gameTime); } } }
Irei comentar agora algumas linhas de cdigo do programa acima. Se observarmos dentro da classe Game1 existe dois objetos declarados, conforme voc confere abaixo: GraphicsDeviceManager graphics; SpriteBatch spriteBatch;
Luciano Alves da Silva 41
A varivel objeto graphics do tipo GraphicsDeviceManager, que representa a janela (tela) onde nosso jogo vai acontecer. A varivel objeto spriteBatch do tipo SpriteBatch (Lote de imagens) vai armazenar todas as imagens e textos que vo ser exibidas na tela do nosso jogo. Program.cs: Este o arquivo responsvel por carregar o jogo definido em cdigo dentro da classe Game1 . Veja seu cdigo abaixo: #region Using Statements using System; using System.Collections.Generic; using System.Linq;
#endregion namespace Primeiro_Projeto { static class Program { private static Game1 game; /// <summary> /// The main entry point for the application. /// </summary> [STAThread] static void Main () { game = new Game1 (); game.Run (); } } } Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 42
Se observarmos o cdigo acima dentro do mtodo Main , existe uma linha de comando que cria a instncia da classe Game1, e em seguida, executa todo o seu cdigo atravs do mtodo Run. Irei comentar agora todo o passo a passo da execuo dos mtodos situados dentro da classe Game1, para entendermos como funciona o processo da execuo do jogo. Quando a instncia da classe Game1 criada, o primeiro mtodo a ser executado o construtor da classe, tambm chamado de Game1, que possui o seguinte cdigo abaixo:
graphics = new GraphicsDeviceManager(this); Content.RootDirectory = "Content"; graphics.IsFullScreen = true;
A primeira linha de cdigo acima cria a instncia da classe GraphicsDeviceManager, e atribui essa instncia a varivel graphics.
Na linha seguinte defino o diretrio padro de onde sero carregados todos os contedos (isso inclui msicas, sons de efeito, imagens, fontes e etc.).
Luciano Alves da Silva 43
E na prxima linha, temos uma instruo que ir colocar o jogo em TELA CHEIA, atravs da propriedade IsFullScreen com o valor true.
Em seguida, executado o mtodo Initialize, onde nele podemos iniciar todas as variveis que sero utilizadas em nosso jogo. Por padro, esse s possui uma linha de comando que chama o mtodo Initialize da classe base (a classe Game). Confira na linha seguinte:
base.Initialize(); Em seguida, executado o mtodo LoadContent, que tem a seguinte linha de cdigo:
spriteBatch = new SpriteBatch(GraphicsDevice);
Que cria a instncia da classe SpriteBath e em seguida atribui essa instncia a varivel spriteBatch. Este mtodo utilizado para carregar todo o contedo que ser utilizado em nosso jogo (como imagens, sons, textos e etc.). Em paralelo, logo aps a execuo do mtodo acima, so executados os mtodos Update e Draw. O mtodo Update serve para colocarmos toda a codificao do nosso jogo, ou seja, e l que a coisa acontece. Esse mtodo executado sempre. Veja o cdigo do mtodo Update : Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 44
A primeira linha de cdigo acima verifica se a tecla responsvel por encerrar o jogo foi pressionada, caso verdadeiro, o jogo termina. Logo em seguida chamado o mtodo Update da classe base (Game).
O mtodo Draw o responsvel por desenhar todos os sprites, imagens e textos na tela do jogo. Esse mtodo executado sempre. Vejamos o cdigo desse mtodo :
GraphicsDevice.Clear(Color.CornflowerBlue);
// TODO: Add your drawing code here
base.Draw(gameTime);
Na primeira linha do cdigo acima disparado o mtodo Clear situado em GraphicsDevice, que limpa a tela do jogo com uma cor de fundo especificada no parmetro. Na linha seguinte disparado o mtodo Draw da classe base. Luciano Alves da Silva 45
Executando o nosso projeto
Se executarmos o nosso jogo agora ele automaticamente ir colocar o display em TELA CHEIA. Vamos no mtodo construtor da classe Game1 para alterarmos a linha:
graphics.IsFullScreen = true;
Por :
graphics.IsFullScreen = false;
Vamos agora executar o nosso exemplo seguindo os passos aqui descritos. Para executarmos nosso programa, vamos no menu Executar e sem seguida Start Debugging ou, simplesmente pressione a tecla F5. Veja o resultado na figura seguinte:
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 46
Primeiro exemplo em execuo
Alterando a resoluo da tela do jogo
A tela do jogo j est configurada com uma resoluo padro (que de 800x480), porm, podemos alterar essa resoluo de acordo com a nossa necessidade. Vamos criar um novo projeto no XNA chamado Resoluo Tela para trabalharmos esse exemplo. Se observamos dentro do cdigo da classe Game1 existe um objeto chamado graphics, do tipo Luciano Alves da Silva 47
GraphicDeviceManager . atravs desse objeto que vamos alterar as propriedades de largura a altura da tela. Por exemplo, como fao para colocar a resoluo da tela em 300x300 pixels ? Todas essas configuraes sero definidas dentro do construtor da classe Game1. Dentro do construtor da classe vamos colocar o cdigo destacado em negrito, conforme voc confere em seguida:
public Game1() { graphics = new GraphicsDeviceManager(this); Content.RootDirectory = "Content"; graphics.IsFullScreen = false; graphics.PreferredBackBufferHeight = 300; graphics.PreferredBackBufferWidth = 300; }
A propriedade PreferredBackBufferHeight do objeto graphics permite definir a altura da tela do jogo e a propriedade PreferredBackBufferWidth permite definir a largura da tela do jogo.
Execute o nosso jogo agora e confira o resultado:
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 48
Resoluo da tela modificada via programao
Agora como fao para obter o tamanho da largura e altura da tela do jogo ? Conforme j havia mostrado, podemos utilizar as seguintes propriedades do objeto graphics que so PreferredBackBufferWidth e PreferredBackBufferHeight. Veja um exemplo :
int width = graphics.PreferredBackBufferWidth; int height = graphics.PreferredBackBufferHeight;
Tambm podemos obter a resoluo da tela do jogo utilizando o objeto GraphicsDevice, como segue abaixo: Luciano Alves da Silva 49
int width = GraphicsDevice.Viewport.Width; int height = GraphicsDevice.Viewport.Height;
A diferena de ambos os meios mostrados para a obteno da resoluo da tela do jogo que com as propriedades PreferredBackBufferWidth e PreferredBackBufferHeight do objeto graphics podemos tanto obter os valores quanto alter-los. J as propriedades Height e Width do objeto GraphicsDevice so somente leitura.
Nela informaremos nome do projeto (que j foi dado no inicio de sua criao) e local onde salvaremos ele. Feito isso basta clicar em Save. Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 50
Capitulo 4 Visualizando imagens no jogo
o captulo anterior aprendemos a criar e a executar um projeto (vazio) no MONOGAME , assim como aprendemos tambm a alterar a resoluo da tela do nosso jogo. Agora vamos comear a colocar a MO NA MASSA. Nesse captulo iremos aprender como visualizar uma imagem na tela (j utilizando a biblioteca GameUtil2D).
4.1) Criando nosso projeto
Primeiramente vamos criar o nosso projeto no MONOGAME (com o Xamarin Studio, conforme j foi mostrado no captulo anterior). O nome do nosso projeto ir se chamar Visualizando_Imagens.
4.2) Importando a biblioteca GameUtil2D para o projeto
Com os arquivos que acompanham este material j temos a nossa biblioteca GameUtil2D (presente dentro da pasta N Luciano Alves da Silva 51
GameUtil2D). Agora ser necessrio copiar todos os arquivos da biblioteca para dentro do nosso projeto. Irei mostrar agora os procedimentos : 1) Com o nosso projeto em MONOGAME criado no Xamarin Studio aberto, clique com o boto direito sobre o nome do nosso projeto e em seguida selecione Adicionar / Adicionar Arquivos :
Adicionando a biblioteca em nosso projeto
Feito isso ser aberta a seguinte caixa de dilogo:
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 52
Caixa de dilogo Adicionar arquivos
Agora selecione o diretrio onde se encontram os arquivos da biblioteca GameUtil2D, conforme mostrado na figura em seguida:
Luciano Alves da Silva 53
Diretrio GameUtil2D
Selecione todos os arquivos e em seguida clique em Open. Feito isso ser aberta a seguinte mensagem :
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 54
Mensagem Add File to Folder
Mantenha a opo Copy the file to the directory selecionada e a checkbox Use the same action for all selected files marcada. Feito isso clique em OK. Confira o resultado:
Luciano Alves da Silva 55
Todos os arquivos copiados para o projeto
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 56
4.3) Copiando as imagens para dentro do projeto
Da mesma forma que fizemos para importar os arquivos da biblioteca GameUtil2D para dentro do nosso projeto, vamos colocar as imagens que vamos trabalhar nesse exemplo. Siga os procedimentos a seguir : 1) Clique com o boto direito sobre a pasta Content do nosso projeto e em seguida selecione Adicionar / Adicionar Arquivos :
Adicionando as imagens em nosso projeto
Luciano Alves da Silva 57
Feito isso ser aberta a seguinte caixa de dilogo:
Caixa de dilogo Adicionar arquivos
Agora basta selecionarmos o diretrio onde se encontra as nossas imagens (o diretrio Captulo 4) :
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 58
Diretrio Capitulo 4
Feito isso basta selecionar todos os arquivos e clicar em Open (conforme os procedimentos j vistos anteriormente). Vejamos o resultado:
Luciano Alves da Silva 59
Imagens copiadas para dentro do projeto
4.4) Desenvolvendo o cdigo
Bom, agora vamos desenvolver o cdigo do nosso jogo, que ir mostrar algumas imagens na tela. Primeiramente na seo de declarao (importao) de bibliotecas , presente dentro do cdigo mostrado a seguir : Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 60
Seo de declarao de bibliotecas
Vamos digitar a seguinte instruo destacada a seguir :
Luciano Alves da Silva 61
Declarando o uso de nossa biblioteca
A biblioteca gameutil2d.classes.basic que declaramos agora pouco possui todas as classes bsicas do nosso framework GameUtil2D, que podemos utilizar para a construo de um jogo.
Agora dentro da nossa classe (chamada Game1) vamos digitar o seguinte atributo, conforme mostra a figura seguinte:
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 62
Declarando nosso atributo
O atributo que declaramos acima (que se chama imagem) do tipo Image, que uma classe da biblioteca GameUtil2D destinada para a visualizao de imagens na tela do nosso jogo. (Para mais informaes a respeito de todas as classes do framework, baixe a sua documentao que esta disponvel no site do GameUtil2D).
Luciano Alves da Silva 63
Agora dentro do cdigo do mtodo LoadContent vamos digitar as seguintes instrues, conforme mostra a figura seguinte :
Inicializando nosso objeto
Vamos analisar o primeiro comando inserido abaixo.
GD.instance = GraphicsDevice;
Aqui ns inicializamos a nossa biblioteca GameUtil2D, guardando a referncia do objeto GraphicsDevice para dentro da propriedade instance da classe GD (que ser utilizada para carregar as imagens).
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 64
Agora vamos analisar a segunda instruo inserida. O construtor da classe Image possui os seguintes parmetros:
O primeiro parmetro do construtor padro, cujo argumento sempre ser o Content. O segundo parmetro corresponde imagem que vamos visualizar no jogo (que a imagem bird.png). Observe que quando informamos o nome da imagem NO INFORMAMOS A SUA EXTENSO (e tambm NO PRECISO), pois o MONOGAME j reconhece a imagem presente dentro do projeto.
O terceiro e quarto parmetro do construtor correspondem , respectivamente, as coordenadas X e Y do objeto na tela do jogo (cujos valores so 0 e 0). J o quinto e o sexto parmetro correspondem, respectivamente, a largura e a altura do objeto (cujo valores so 60 e 47).
Bom, o que fizemos at agora foi carregar o objeto (imagem) na memria. Agora precisamos desenhar a imagem carregada na tela. Para isso devemos utilizar o mtodo Draw, responsvel por essa finalidade. Dentro do mtodo Draw vamos escrever o seguinte cdigo destacado em seguida:
Luciano Alves da Silva 65
Cdigo para visualizarmos a nossa imagem na tela
Vamos analisar o cdigo acima. O mtodo Begin da classe SpriteBatch inicia o objeto para que possamos inserir todo o conjunto de imagens (e tambm textos, que vamos trabalhar futuramente) que sero exibidos na tela.
O mtodo Draw do objeto imagem responsvel por visualizar a imagem na tela , passando como argumento para o mtodo um objeto do tipo SpriteBatch (que nesse caso, a varivel spriteBatch).
Na linha seguinte disparado o mtodo End da classe SpriteBatch, que finaliza a operao o objeto.
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 66
Vamos executar a nossa aplicao para conferir o resultado. Possivelmente voc ver UMA MENSAGEM DE ERRO, conforme mostrado na figura em seguida:
Erro ao carregar a imagem
CALMA! No se preocupe. Nosso cdigo no est errado. Precisamos conhecer um pouco das particularidades da ferramenta MONOGAME durante a construo de um projeto.
Quando trabalhamos com imagens (contents) em um projeto, por padro, essas mesmas imagens NO SO COPIADAS para o diretrio do executvel do jogo, fazendo com que o erro acima seja exibido. Luciano Alves da Silva 67
Para solucionarmos esse problema, vamos primeiramente selecionar TODAS AS IMAGENS dentro do diretrio Content, conforme mostrado na figura a seguir :
Selecionando todas as imagens
Em seguida, clique com o boto direito sobre as imagens e selecione Aco de Construo / Content:
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 68
Selecionando a opo Content
O procedimento ainda no acabou. Falta realizar agora a ltima etapa. Como estamos trabalhando nesse projeto por enquanto com a imagem bird.png, clique com o boto direito sobre essa imagem e selecione Propriedades. O resultado voc confere a seguir:
Luciano Alves da Silva 69
Propriedades da imagem selecionada
Agora vamos mudar o valor da propriedade Copiar para diretrio de No copiar para Sempre copiar. Veja o resultado na figura seguinte :
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 70
Selecionando a opo
Antes de executarmos, vamos remover a seguinte linha de cdigo do construtor da classe Game1:
graphics.IsFullScreen = true;
Agora compile e execute novamente o projeto e confira o resultado, conforme demonstra a figura seguinte:
Luciano Alves da Silva 71
Imagem sendo visualizada no jogo
E ai, aprendeu como visualizar uma imagem na tela do jogo ? Com certeza que sim!
Vamos aproveitar esse mesmo projeto para demonstrar mais um exemplo de visualizao de imagens.
Vamos voltar para o cdigo de declarao de atributos para digitarmos o seguinte trecho de cdigo destacado em seguida em negrito:
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 72
public class Game1 : Game { : Image imagem; Image titulo_flappy_bird; Image background_fase_flappy_bird;
public Game1() :
Agora dentro do mtodo LoadContent vamos substituir o cdigo destacado abaixo:
imagem = new Image(Content, "bird", 0, 0, 60, 47);
Pelo seguinte cdigo destacado em negrito em seguida:
Dentro do mtodo Draw existem trs instrues onde cada uma ir exibir uma imagem na tela. As instrues que inserimos no cdigo, possuem uma sequncia, que precisarei explicar. Observe que a primeira instruo adicionada no mtodo Draw foi:
background_fase_flappy_bird.Draw(spriteBatch);
Que ir exibir uma imagem de fundo, que a fase do famoso jogo Flappy Bird.
Em seguida, temos a seguinte instruo:
titulo_flappy_bird.Draw(spriteBatch);
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 74
Que ir exibir o ttulo Flappy Bird na tela. Como essa a segunda imagem a ser exibida, a mesma exibida a frente da imagem de fundo.
Na terceira instruo temos a seguinte linha de cdigo:
bird.Draw(spriteBatch);
Que ir desenhar o passarinho (personagem) do jogo na tela. Como essa a terceira imagem a ser exibida na tela, a mesma mostrada a frente da imagem de fundo e do ttulo.
Antes de executarmos o arquivo, REPITA O MESMO PROCESSO DE No copiar para Sempre copiar para os arquivos restantes (titulo_flappy_bird.png e background_fase_flappy_bird.png), seno ser novamente acusado um erro.
Executando o nosso cdigo, teremos o seguinte resultado :
Luciano Alves da Silva 75
Resultado do cdigo na tela
Invertendo uma imagem na tela
A classe Image possui um mtodo chamado Draw que serve para exibirmos uma imagem na tela. Pois bem, o mesmo mtodo possui um segundo parmetro que nos permite inverter a imagem exibida na horizontal.
Para realizarmos essa demonstrao de inverso de imagem vamos alterar dentro do mtodo Draw, conforme mostra instruo destacada em negrito em seguida:
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 76
Observe que no objeto bird (que mostra o passarinho na tela), adicionamos o segundo argumento no mtodo Draw, o argumento true (que indica que a imagem ser invertida na horizontal). Vejamos o resultado :
Luciano Alves da Silva 77
Imagem invertida na horizontal
Aps realizar as modificaes solicitadas acima, salve o seu projeto. Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 78
Capitulo 5 Movendo elementos do jogo pela tela
o captulo anterior aprendemos como visualizar elementos (como imagens) na tela, porm, as imagens vistas ficam num ponto fixo da dela, definido pelo cdigo. Agora vamos aprender a movimentar esses elementos pela tela do jogo usando os recursos oferecidos pela biblioteca GameUtil2D no MONOGAME.
Neste captulo vamos aprender a movimentar os elementos do jogo usando o teclado, atravs dos mtodos oferecidos pelo framework MONOGAME.
Primeiramente vamos criar um novo projeto no Xamarin Studio voltado para MONOGAME. O nome do nosso projeto ir se chamar Movendo_Objetos_pela_Tela.
Depois de criado o projeto copie todos os arquivos da framework GameUtil2D (conforme j foi mostrado), e logo em seguida, copie todas as imagens presentes dentro da pasta Capitulo 5 (que j acompanha este material) para dentro do nosso projeto, para a pasta Content . Feito isso realize aquele processo Copiar para Diretrio para todas as imagens (Sempre copiar). N Luciano Alves da Silva 79
Para comearmos digite a seguinte linha destacada em negrito na seo de declarao (importao) das bibliotecas do C#: : using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework.Input; using Microsoft.Xna.Framework.Media;
using gameutil2d.classes.basic;
Agora dentro da seo de declarao de atributos da classe vamos digitar as seguintes instrues em negrito abaixo :
public class Game1 : Game { GraphicsDeviceManager graphics; SpriteBatch spriteBatch; Image aviao, nuvem, ceu_azul;
Agora dentro do mtodo LoadContent vamos digitar o seguinte bloco de comandos destacados em negrito a seguir :
protected override void LoadContent() { //Create a new SpriteBatch, which can be used to draw // textures. spriteBatch = new SpriteBatch(GraphicsDevice); GD.instance = GraphicsDevice; aviao = new Image(Content, "aviao", 0, 0, 90, 70); nuvem = new Image(Content, "nuvem", 250, 100, 90,70); ceu_azul = new Image(Content, "ceu_azul", 0, 0, 800, 480); } Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 80
Agora vamos no mtodo Draw para adicionarmos as seguintes linhas de comando:
// TODO: Add your drawing code here spriteBatch.Begin(); ceu_azul.Draw(spriteBatch); nuvem.Draw(spriteBatch); aviao.Draw(spriteBatch); spriteBatch.End();
base.Draw(gameTime); }
Nas linhas de comando que adicionarmos acima, todas elas, desenham as imagens na tela do jogo. Agora, as linhas de comando acima foram adicionadas na seguinte sequencia:
A primeira linha de comando que adicionarmos, desenha a imagem do cu azul na tela, at ai tudo bem. Na linha seguinte desenhamos a nuvem na tela, essa nuvem ser desenhada na frente da imagem do cu azul. Por ltimo, desenhamos a imagem do avio, e esse avio ser desenhado na frente da imagem da nuvem e do cu azul (conforme j foi explicado no captulo anterior, mas sendo reforado neste captulo). Luciano Alves da Silva 81
Depois de escrever o cdigo , vamos executar nossa aplicao e conferir os resultados:
Jogo em execuo na tela
Por enquanto s conseguimos visualizarmos o nosso avio, mas, no podemos moviment-lo pela tela ainda.
Como havia falado, iremos movimentar os objetos via teclado (neste caso aqui, o avio).
Vamos voltar na seo de declarao de atributos e l vamos declarar a seguinte instruo, como segue:
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 82
public class Game1 : Game { GraphicsDeviceManager graphics; SpriteBatch spriteBatch; Image aviao, nuvem, ceu_azul;
KeyboardState teclado; :
No comando destacado em negrito declaramos uma varivel chamada teclado do tipo KeyboardState (que uma classe que possui recursos que detecta estados do teclado. Por exemplo: verificar se uma tecla est pressionada ou solta)
Agora dentro do mtodo Update vamos digitar o seguinte bloco de comandos destacado em negrito abaixo:
protected override void Update(GameTime gameTime) { // Allows the game to exit if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed) this.Exit(); // TODO: Add your update logic here teclado = Keyboard.GetState();
if (teclado.IsKeyDown(Keys.Right)) aviao.MoveByX(5); else if (teclado.IsKeyDown(Keys.Left)) aviao.MoveByX(-5); else if (teclado.IsKeyDown(Keys.Up)) aviao.MoveByY(-5); Luciano Alves da Silva 83
else if (teclado.IsKeyDown(Keys.Down)) aviao.MoveByY(5);
base.Update(gameTime); }
Vamos analisar os comandos digitados em negrito. Na instruo :
teclado = Keyboard.GetState();
A varivel teclado recebe uma instncia do mtodo GetState (da classe Keyboard) que retorna todas teclas (pressionadas e no pressionadas) do teclado.
Na prxima instruo :
if (teclado.IsKeyDown(Keys.Right)) aviao.MoveByX(5);
Verifico se a tecla de direo para direita (representada por Keys.Right) est pressionada, atravs do mtodo IsKeyDown. Caso verdadeiro, executado o mtodo MoveByX que responsvel por deslocar o nosso avio. Observe que o valor que passamos como parmetro para o mtodo foi 5, ou seja, nosso avio ir andar 5 pixels para a direita partindo da posio atual que ele se encontra. Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 84
A explicao acima similar para as demais condies seguintes. Vamos executar a aplicao para conferir os resultados, conforme mostra a figura seguinte (no se esquea de remover a instruo de tela cheia do cdigo):
Movendo nosso avio pela tela
Se observarmos o jogo, ns conseguimos mover o avio pela tela, porm, a nuvem que adicionamos no jogo est imvel. O ideal seria que essa nuvem se movimentasse, dando a sensao de que o avio est voando (em movimento). Luciano Alves da Silva 85
Para colocarmos a nuvem em movimento, precisaremos adicionar mais algumas instrues. Para comear vamos declarar um atributo, conforme voc pode conferir em seguida (na seo de declarao de atributos) :
int largura_tela;
Agora dentro do mtodo LoadContent vamos adicionar a seguinte instruo destacada em negrito abaixo:
protected override void LoadContent() { nuvem = new Image(Content, "nuvem", 250, 100, 90, 70); ceu_azul = new Image(Content, "ceu_azul", 0, 0, 800, 480); //Retorna a largura da tela (que por padro //800) largura_tela = GraphicsDevice.Viewport.Width; }
Agora dentro do mtodo Update vamos adicionar o seguinte comando destacado em negrito, como segue:
protected override void Update(GameTime gameTime) { : else if (teclado.IsKeyDown(Keys.Down)) aviao.MoveByY(5); nuvem.MoveByX(-15); if (nuvem.GetX() < -nuvem.GetWidth()) nuvem.SetX(largura_tela); base.Update(gameTime); } Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 86
Irei explicar cada linha de comando das instrues adicionadas acima. A linha:
nuvem.MoveByX(-15);
Desloca a nuvem para a esquerda, de 15 em 15 pixels (lembre-se : valor positivo significa deslocamento pra direita, e valor negativo deslocamento para esquerda). A prxima instruo :
if(nuvem.GetX() < -nuvem.GetWidth())
Verifica se a nuvem saiu for a da tela. Como interpretamos a avaliao feita pela condio acima ? Irei explicar para voc.
O mtodo GetX (do objeto nuvem, do tipo Image) retorna a posio da coordenada X do objeto na tela, e o mtodo GetWidth retorna a largura do objeto. Quando a posio X de qualquer objeto for menor que o valor negativo de sua largura, significa que o objeto no est visvel na tela, ou seja, est fora dela (fora pelo lado esquerdo da tela). Quando isso acontece, executada a seguinte instruo:
nuvem.SetX(largura_tela);
Que reposiciona a nuvem para surgir a partir da direita da tela, dando a sensao que o avio est realmente voando. Execute novamente a aplicao e confira o resultado: Luciano Alves da Silva 87
Nuvem em movimento
Se observarmos o nosso jogo, o avio pode se deslocar perfeitamente pela tela, porm, se deixarmos o avio se mover constante (e unicamente) para uma direo, o mesmo sai da tela (independente se para frente, pra trs, pra cima ou para baixo). Como solucionar esse problema ? simples, basta limitarmos seu movimento de forma que o mesmo no saia da tela.
Para realizarmos esse procedimento, primeiramente, vamos declarar o seguinte atributo em seguida (destacado em negrito):
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 88
int largura_tela; int altura_tela;
Agora dentro do mtodo LoadContent vamos digitar a seguinte linha de comando destacada em negrito:
Avalia se o avio est comeando a sair da tela indo para frente (se a posio atual do avio na coordenada X somado Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 90
com a largura do mesmo for maior que a largura da tela. Isso uma regra padro). Caso a condio seja verdadeira, executada seguinte instruo:
aviao.SetX(largura_tela - aviao.GetWidth());
Que impede que o avio saia da tela, atravs do reajuste da posio dele na coordenada X, que ser : largura da tela largura do avio. Quando o avio anda para trs, executada a seguinte avaliao condicional:
if(aviao.GetX() < 0)
Que verifica se o avio est comeando a sair da tela (se a posio X do objeto for menor que 0). Se a condio for verdadeira, ser executada a seguinte instruo:
aviao.SetX(0);
Que reajusta a posio do avio , pela coordenada X (definindo a coordenada X com o valor 0). Quando o avio anda para cima, executada a seguinte avaliao condicional:
if(aviao.GetY() < 0)
Que verifica se o avio est comeando a sair da tela (se a posio Y do objeto for menor que 0). Se a condio for verdadeira, ser executada a seguinte instruo: Luciano Alves da Silva 91
aviao.SetY(0);
Que reajusta a posio do avio , pela coordenada Y (definindo a coordenada Y com o valor 0). Quando o avio est se movimentando para baixo, executada a seguinte avaliao:
Que verifica se o avio est comeando a sair da tela (se a posio atual do avio na coordenada Y somado com a altura do mesmo for maior que a altura da tela. Isso uma regra padro). Caso a condio seja verdadeira, executada a seguinte instruo:
aviao.SetY(altura_tela - aviao.GetHeight());
Que impede que o avio saia da tela, atravs do reajuste da posio dele na coordenada Y, que ser a altura da tela a altura do avio.
Executando nossa aplicao, teremos o seguinte resultado:
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 92
Agora o avio no sai mais da tela
Luciano Alves da Silva 93
Capitulo 6 Trabalhando com animao de sprites
os captulos anteriores aprendemos a visualizar imagens estticas no jogo (pode ser qualquer elemento do jogo como uma rvore, um poste, um bloco e etc.). Agora, se eu quisesse que algum elemento do jogo apresenta-se alguma animao ? Neste captulo vamos aprender como realizar essas animaes usando sprites no jogo.
Na maioria dos jogos em 2D (talvez podemos dizer todos), alguns dos elementos apresentam algum tipo de animao (como o movimento de um personagem ou a ao de algum objeto). Agora a pergunta que fao : como so realizadas essas animaes no jogo ? Essas animaes so realizadas utilizando o que ns chamamos de sprites. O que vem a ser uma sprite ? Sprites nada mais so do que um conjunto de imagens, onde cada imagem representa o movimento ou ao de um determinado elemento do jogo (como um personagem ou um objeto do jogo qualquer). Vamos ver abaixo um conjunto de imagens (sprites) de um personagem, onde cada imagem representa um movimento: N Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 94
Sprites de um personagem de um jogo (dando soco)
Como funciona a animao de um personagem (ou objeto) durante o jogo ? Se observarmos as imagens acima, cada uma delas representa um movimento, e cada uma delas exibida numa fatia de tempo, dando a sensao de movimento ou ao. Para trabalharmos com animao de sprites aqui no MONOGAME faremos uso da classe chamada AnimationSprites, destinada somente para esse tipo de tarefa (presente dentro do pacote gameutil2d.classes.basic da nossa biblioteca).
Para comearmos vamos criar um novo projeto no MONOGAME chamado Animacao_de_Sprites. Em seguida, copie todos os arquivos da biblioteca GameUtil2D para Luciano Alves da Silva 95
dentro do seu projeto e , por ltimo, copie todas as imagens presentes dentro da pasta Capitulo 6 (que acompanha este material) para dentro da pasta Content. No se esquea de realizar o processo de Copiar para Diretrio para todos os arquivos inseridos em Content. Agora dentro da seo de declarao de bibliotecas, digite a seguinte linha de comando abaixo: using gameutil2d.classes.basic;
Agora dentro da classe Game1 , na seo de declarao de atributos, vamos digitar a seguinte instruo abaixo: AnimationSprites naruto; Agora dentro do mtodo LoadContent vamos digitar o seguinte bloco de comandos destacados em negrito abaixo: protected override void LoadContent() { // Create a new SpriteBatch, which can be used to // draw textures. spriteBatch = new SpriteBatch(GraphicsDevice); GD.instance = GraphicsDevice; naruto = new AnimationSprites(Content, 0, 0, 124, 164); naruto.Add("naruto_parado_1"); naruto.Add("naruto_parado_2"); naruto.Add("naruto_parado_3"); naruto.Add("naruto_parado_4"); naruto.Start(6, true); } Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 96
Irei explicar o cdigo inserido no mtodo acima. A linha de comando:
naruto = new AnimationSprites(Content, 0, 0, 124, 164);
Carrega a instncia do objeto naruto do tipo AnimationSprites. No primeiro argumento da classe, sempre passamos o valor Content. No segundo e terceiro parmetro, passamos respectivamente a coordenada X e Y do objeto na tela. J os dois ltimos parmetros representam , respectivamente , a largura e a altura do objeto (124 para largura e 164 para altura). Nas linhas de comando seguinte:
Adicionamos as imagens (sprites) dentro do objeto, para que possamos ter uma animao do personagem, atravs do mtodo Add. Em seguida, vem a seguinte instruo:
naruto.Start(6, true);
Que tem a finalidade de iniciar a animao, atravs do mtodo Start. Esse mtodo possui dois parmetros : O primeiro parmetro responsvel por definir, em frames, o Luciano Alves da Silva 97
intervalo da troca de imagens, e o segundo definimos se a animao vai ficar em loop (caso true) ou no (caso false).
Agora no mtodo Draw vamos adicionar a seguinte instruo destacada:
// TODO: Add your drawing code here spriteBatch.Begin(); naruto.Draw(spriteBatch); spriteBatch.End();
base.Draw(gameTime); }
Antes de executarmos, retire a seguinte instruo dentro do mtodo construtor da classe :
graphics.IsFullScreen = false;
Depois de digitar o cdigo solicitado, execute o nosso jogo e confira o resultado, como demonstra a figura seguinte: Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 98
Animao do personagem em execuo
Em uma animao de sprites tambm podemos aplicar o efeito de flip (inverso) de uma imagem, na horizontal (como j havamos visto com imagens estticas). Para invertermos uma imagem na horizontal, basta adicionar um parmetro no mtodo Draw do objeto, o valor true.
Vamos voltar para o mtodo Draw da classe Game1 para substituirmos a linha abaixo:
naruto.Draw(spriteBatch);
Por essa:
naruto.Draw(spriteBatch,true); Luciano Alves da Silva 99
Depois de realizar a alterao no cdigo execute novamente o jogo , conforme demonstra o resultado mostrado abaixo .
Animao invertida na horitontal
Mais um exemplo de animao de sprites
Vamos realizar agora mais uma pratica de animao de sprites no MONOGAME usando a classe AnimationSprites. Para essa pratica vamos descompactar um projeto j feito (que j acompanha este material), que o arquivo AnimacaoSprites_GundamWing.zip (presente dentro da pasta Capitulo 6). Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 100
Aps descompactar o arquivo AnimacaoSprites_GundamWing.zip vamos abrir o projeto , que se encontra dentro do diretrio AnimacaoSprites_GundamWing, conforme mostra a figura seguinte:
Projeto descompactado
Depois de abrir o nosso projeto execute-o, e confira o resultado conforme demonstra a figura seguinte: Luciano Alves da Silva 101
Jogo em execuo
Esse um exemplo baseado no jogo Gundam Wing Endless Duel, um dos grandes sucessos da plataforma Super Nitendo.
A inteno deste exemplo trocarmos as posies dos personagens do jogo. Para isso, vamos na classe Game1 e, em seguida, vamos realizar as seguintes modificaes citadas a seguir:
Dentro do mtodo LoadContent vamos substituir as seguintes linhas de cdigo destacadas em negrito abaixo:
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 102
protected override void LoadContent() { : //Carrega a animao do primeiro personagem wing_gundam = new AnimationSprites(Content, 100, 130, 200, 250);
wing_gundam.Add("wing_gundam_parado_1"); wing_gundam.Add("wing_gundam_parado_2"); : //Carrega a animao do segundo personagem heavy_arms = new AnimationSprites(Content, 450, 120, 197, 263); heavy_arms.Add("heavy_arms_parado_1"); heavy_arms.Add("heavy_arms_parado_2"); : }
Pelas seguintes destacadas em negrito em seguida :
protected override void LoadContent() { : //Carrega a animao do primeiro personagem wing_gundam = new AnimationSprites(Content, 450, 130, 200, 250); wing_gundam.Add("wing_gundam_parado_1"); wing_gundam.Add("wing_gundam_parado_2"); : //Carrega a animao do segundo personagem heavy_arms = new AnimationSprites(Content, 100, 120, 197, 263); heavy_arms.Add("heavy_arms_parado_1"); heavy_arms.Add("heavy_arms_parado_2");
} Luciano Alves da Silva 103
Agora dentro do mtodo Draw vamos substituir as seguintes linhas de cdigo destacadas em negrito abaixo:
Depois de realizada as modificaes execute novamente o nosso jogo, e confira o resultado que mostrado na figura a seguir:
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 104
Jogo em execuo Imagens trocadas
Regras para a criao de sprites
Quando vamos criar as sprites (animaes) de um determinado elemento de um jogo, normalmente, cada imagem que ir representar uma ao desse elemento deve ter o mesmo tamanho (padronizado para cada elemento do jogo), e quando salvas, devero estar nomeadas de forma que fique fcil a organizao das imagens (como por exemplo : personagem_andando_1.png , personagem_andando2.png e etc.).
Luciano Alves da Silva 105
Capitulo 7 Detectando colises entre objetos no jogo
ma das tcnicas mais importantes, que no se pode faltar em um jogo, a deteco de colises entre elementos . Neste captulo, iremos aprender a detectar se dois objetos (ou mais) se colidem um com o outro no jogo, atravs dos recursos oferecidos neste material.
Primeiramente vamos criar um novo projeto no MONOGAME chamado Colisoes_entre_Objetos.
Depois de criarmos o projeto, copie todos os arquivos da framework GameUtil2D para dentro do projeto, e por ultimo copie todas as imagens (presentes dentro da pasta Capitulo 7) para dentro projeto na pasta Content, no esquecendo de realizar o processo de Copiar para Diretrio.
Vamos dentro da classe Game1 na seo de declarao de bibliotecas para digitarmos o seguinte cdigo abaixo:
using gameutil2d.classes.basic; U Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 106
Dentro da seo de declarao de atributos da classe, vamos realizar as declaraes abaixo, como segue:
Agora dentro do mtodo LoadContent vamos adicionar as seguintes instrues:
protected override void LoadContent() { // Create a new SpriteBatch, which can be used to // draw textures. spriteBatch = new SpriteBatch(GraphicsDevice); // TODO: use this.Content to load your game content // here GD.instance = GraphicsDevice; personagem = new AnimationSprites(Content, (400 24), 305, 48, 50); personagem.Add("monstro_andando_1"); personagem.Add("monstro_andando_2"); personagem.Start(10, true); cenario = new Image(Content, "cenario", 0, 0, 800, 480); obstaculo = new Image(Content, "obstaculo", 80, 253, 68, 120); obstaculo2 = new Image(Content, "obstaculo", 630, 253, 68, 120); } Luciano Alves da Silva 107
Agora dentro do mtodo Update vamos adicionar as seguintes instrues destacadas em negrito:
protected override void Update(GameTime gameTime) { : // TODO: Add your update logic here teclado = Keyboard.GetState();
if (teclado.IsKeyDown(Keys.Right)) personagem.MoveByX(5); else if (teclado.IsKeyDown(Keys.Left)) personagem.MoveByX(-5);
base.Update(gameTime); }
Agora dentro do mtodo Draw vamos adicionar as seguintes instrues destacadas em negrito:
protected override void Draw(GameTime gameTime) { : // TODO: Add your drawing code here spriteBatch.Begin(); cenario.Draw(spriteBatch); personagem.Draw(spriteBatch); obstaculo.Draw(spriteBatch); obstaculo2.Draw(spriteBatch); spriteBatch.End();
base.Draw(gameTime); } Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 108
Depois de digitar os cdigos solicitados, execute a aplicao e confira o resultado:
Jogo em execuo
Se observarmos o jogo acima nosso personagem pode se movimentar de um lado para o outro, porm, o nosso personagem no pode ultrapassar os obstculos (que so os elevadores).
A ideia seria desenvolver um cdigo que ir detectar a coliso do personagem com os obstculos, que no caso so os elevadores. Luciano Alves da Silva 109
Para adicionarmos o cdigo de coliso vamos no mtodo Update para adicionarmos as seguinte instrues, destacados em negrito abaixo:
protected override void Update(GameTime gameTime) { : if (teclado.IsKeyDown(Keys.Right)) { personagem.MoveByX(5); //Colidiu com o obstculo da direita //("obstaculo2") if (Collision.Check(personagem, obstaculo2)) personagem.MoveByX(-5); } else if (teclado.IsKeyDown(Keys.Left)) { personagem.MoveByX(-5); //Colidiu com o obstculo da esquerda //("obstaculo") if (Collision.Check(personagem, obstaculo)) personagem.MoveByX(5); }
base.Update(gameTime); }
Irei explicar agora o cdigo que avalia a coliso do personagem com as barras horizontais e verticais. A expresso abaixo:
if (teclado.IsKeyDown(Keys.Right))
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 110
Verifica se a tecla seta para direita foi pressionada atravs do mtodo IsKeyDown (com o argumento Keys.Right). Se a condio for verdadeira, executado a instruo dentro da condio :
personagem.MoveByX(5);
Em uma determinada circustncia, poder haver um determinado momento em que o personagem poder se colidir com o obstculo da direita (o objeto obstaculo2). agora, como avaliar se houve a coliso ? Para verificar se houve uma coliso entre dois objetos usamos o mtodo Check da classe Collision, como podemos ver na instruo abaixo:
if(Collision.Check(personagem, obstaculo2))
Se ocorrer uma coliso, nosso personagem ir voltar um passo anterior (se ele andou 5 pixels para direita e nesse movimento ele colidiu com o obstculo, ele voltar um passo anterior), conforme voc confere em seguida:
personagem.MoveByX(-5);
A explicao das condies seguintes similar ao que foi explicado agora.
Vamos executar agora a nossa demonstrao e conferir os resultados. Luciano Alves da Silva 111
Jogo em execuo Personagem colide com o elevador
Como pudemos observar acima, a coliso uma das tcnicas de desenvolvimento de jogos mais importantes. Com essa tcnica conseguimos muitas coisas (como verificar se o personagem est pisando em algum bloco, se um tiro atingiu o inimigo e etc.).
Desenvolvendo Jogos com o Framework MONOGAME - Guia para Desenvolvedores [VERSO DE AMOSTRA] 112
Consideraes Finais
Neste livro aprendemos SOMENTE AS NOES BSICAS de desenvolvimento de jogos atravs do framework MONOGAME. Vimos um pouco sobre fundamentos de desenvolvimento de jogos e aprendemos a instalar o MONOGAME (juntamente com o Xamarim Studio). Conhecemos tambm um pouco da biblioteca de desenvolvimento de jogos para MONOGAME chamado GameUtil2D (que eu mesmo desenvolvi) que pode ser utilizado junto com o projeto e como construir algumas demonstraes de jogo utilizando ela. Para o aprendizado COMPLETO desta obra, adquira a VERSO COMPLETA do livro no meu site : http://lucianodev.com
Espero que esse material lhe tenha sido til. Um forte abrao!