Desenvolvendo Jogos Com o Framework MONOGAME (Free) : Por - Luciano Alves

Luciano Alves da Silva
Desenvolvendo Jogos com o Framework MONOGAME - Guia

para Desenvolvedores [VERSO DE AMOSTRA]
2

3

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
5

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

7

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.
9

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
11

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
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

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
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
16

Swing Copters

Angry Birds Rio
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.
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
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.
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:

http://download.microsoft.com/download/9/5/A/95A9616B-
7A37-4AF6-BC36-
D6EA96C8DAAE/dotNetFx40_Full_x86_x64.exe

Feito isso ser aberto a seguinte caixa de dilogo :


Realize o download e faa a instalao do framework .NET
4.0 em sua mquina.
21

Aps a instalao do .NET 4.0 vamos instalar agora o GTK#
for .NET. Para realizar o download, clique no seguinte link
abaixo:

http://download.xamarin.com/GTKforWindows/Windows/gtk
-sharp-2.12.25.msi

Feito isso ser aberta a seguinte caixa de dilogo :


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).

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 :


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:

24

Ferramenta Xamarim Studio

2.2) O framework MONOGAME

Depois de instalarmos o Xamarim Studio, vamos agora
instalar o framework MONOGAME.

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.

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:

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 :

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 :

29

Selecionando o pacote

Agora vamos clicar no boto Open para realizarmos a
instalao. Feito ser mostrada a seguinte caixa de dilogo
abaixo:

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.
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
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
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):

34

Criando um novo projeto

Feito isso ir se abrir a seguinte caixa de dilogo a seguir:

Caixa de dilogo Nova Soluo
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
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:
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;
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
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 ||
40

Keyboard.GetState().IsKeyDown(Keys.Escape))
Exit();

// TODO: Add your update logic here

base.Update(gameTime);
}

/// <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:

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 ();
}
}
}
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:


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.).

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:


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 :
44

if(GamePad.GetState(PlayerIndex.One).
Buttons.Back == ButtonState.Pressed)
Exit();



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 :




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.
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:


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:

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
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.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:

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:
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.
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
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:

52

Caixa de dilogo Adicionar arquivos

Agora selecione o diretrio onde se encontram os arquivos
da biblioteca GameUtil2D, conforme mostrado na figura
em seguida:

53

Diretrio GameUtil2D

Selecione todos os arquivos e em seguida clique em Open.
Feito isso ser aberta a seguinte mensagem :

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:

55

Todos os arquivos copiados para o projeto

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

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) :

58

Diretrio Capitulo 4

Feito isso basta selecionar todos os arquivos e clicar em
Open (conforme os procedimentos j vistos
anteriormente). Vejamos o resultado:

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 :
60

Seo de declarao de bibliotecas

Vamos digitar a seguinte instruo destacada a seguir :

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:

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).

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).

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:

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.

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.
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:

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:

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 :

70

Selecionando a opo

Antes de executarmos, vamos remover a seguinte linha de
cdigo do construtor da classe Game1:


Agora compile e execute novamente o projeto e confira o
resultado, conforme demonstra a figura seguinte:

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:

72

{
:
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:

{
:
imagem = new Image(Content, "bird", 370, 200, 60, 47);
titulo_flappy_bird = new Image(Content,
"titulo_flappy_bird", 260, 100, 280, 92);
background_fase_flappy_bird = new Image(Content,
"background_fase_flappy_bird", 0, 0, 800, 480);

}

Agora dentro do mtodo Draw vamos digitar o seguinte
cdigo, conforme mostrado em seguida:

73

{

spriteBatch.Begin();

background_fase_flappy_bird.Draw(spriteBatch);
titulo_flappy_bird.Draw(spriteBatch);
imagem.Draw(spriteBatch);

spriteBatch.End();


}

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:


Que ir exibir uma imagem de fundo, que a fase do
famoso jogo Flappy Bird.

Em seguida, temos a seguinte instruo:


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 :

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:

76

{


imagem.Draw(spriteBatch,true);

spriteBatch.End();

}

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 :

77

Imagem invertida na horizontal

Aps realizar as modificaes solicitadas acima, salve o seu
projeto.
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
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 :

{
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.
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);
}
80

Agora vamos no mtodo Draw para adicionarmos as
seguintes linhas de comando:

{

ceu_azul.Draw(spriteBatch);
nuvem.Draw(spriteBatch);
aviao.Draw(spriteBatch);
spriteBatch.End();

}

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).
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:

82

{
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:

{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back
== ButtonState.Pressed)
this.Exit();
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);
83

else if (teclado.IsKeyDown(Keys.Down))
aviao.MoveByY(5);

}

Vamos analisar os comandos digitados em negrito. Na
instruo :


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 :

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.
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).
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:

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) {
:
aviao.MoveByY(5);
nuvem.MoveByX(-15);
if (nuvem.GetX() < -nuvem.GetWidth())
nuvem.SetX(largura_tela);
}
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:
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):

88

int largura_tela;
int altura_tela;

Agora dentro do mtodo LoadContent vamos digitar a
seguinte linha de comando destacada em negrito:

{
:
largura_tela = GraphicsDevice.Viewport.Width;
altura_tela = GraphicsDevice.Viewport.Height;
}

Agora vamos dentro do mtodo Update para digitarmos as
seguintes linhas de cdigo destacadas em negrito abaixo:

{
:

{
aviao.MoveByX(5);
if ((aviao.GetX() + aviao.GetWidth()) >
largura_tela)
aviao.SetX(largura_tela
aviao.GetWidth());
}

89

{
aviao.MoveByX(-5);
if (aviao.GetX() < 0)
aviao.SetX(0);
}
else if (teclado.IsKeyDown(Keys.Up))
{
aviao.MoveByY(-5);
if (aviao.GetY() < 0)
aviao.SetY(0);
}
{
aviao.MoveByY(5);
if ((aviao.GetY() + aviao.GetHeight()) >
altura_tela)
aviao.SetY(altura_tela -
aviao.GetHeight());
}

:

}

Irei explicar agora a finalidade de cada instruo adicionada
no cdigo. A instruo:

if((aviao.GetX() + aviao.GetWidth()) >
largura_tela)

Avalia se o avio est comeando a sair da tela indo para
frente (se a posio atual do avio na coordenada X somado
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)

posio Y do objeto for menor que 0). Se a condio for
verdadeira, ser executada a seguinte instruo:
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:

if((aviao.GetY() + aviao.GetHeight()) >
altura_tela)

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:

92

Agora o avio no sai mais da tela

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
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
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:

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:
// Create a new SpriteBatch, which can be used to
// draw textures.
naruto = new AnimationSprites(Content, 0, 0, 124,
164);
naruto.Add("naruto_parado_1");
naruto.Start(6, true);
}
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:

:
naruto.Add(naruto_parado_1);
:

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
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:

{

naruto.Draw(spriteBatch);
spriteBatch.End();

}

Antes de executarmos, retire a seguinte instruo dentro do
mtodo construtor da classe :


Depois de digitar o cdigo solicitado, execute o nosso jogo e
confira o resultado, como demonstra a figura seguinte:
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);
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).
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:
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

102

{
:
//Carrega a animao do primeiro personagem
wing_gundam = new AnimationSprites(Content, 100, 130,
200, 250);

wing_gundam.Add("wing_gundam_parado_1");
:
//Carrega a animao do segundo personagem
heavy_arms = new AnimationSprites(Content, 450, 120,
197, 263);
heavy_arms.Add("heavy_arms_parado_1");
:
}

Pelas seguintes destacadas em negrito em seguida :

{
:
//Carrega a animao do primeiro personagem
wing_gundam = new AnimationSprites(Content, 450, 130,
200, 250);
:
//Carrega a animao do segundo personagem
heavy_arms = new AnimationSprites(Content, 100, 120,
197, 263);

}
103

Agora dentro do mtodo Draw vamos substituir as

{
:
wing_gundam.Draw(spriteBatch);
heavy_arms.Draw(spriteBatch,true);
}

Pelas seguintes linhas de cdigo destacadas em negrito
abaixo:

{
:
wing_gundam.Draw(spriteBatch,true);
heavy_arms.Draw(spriteBatch);
}

Depois de realizada as modificaes execute novamente o
nosso jogo, e confira o resultado que mostrado na figura a
seguir:

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.).

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:

U
106

Dentro da seo de declarao de atributos da classe,
vamos realizar as declaraes abaixo, como segue:

AnimationSprites personagem;
Image cenario;
Image obstaculo,obstaculo2;
KeyboardState teclado;

Agora dentro do mtodo LoadContent vamos adicionar as
seguintes instrues:

{
// Create a new SpriteBatch, which can be used to
// draw textures.
// TODO: use this.Content to load your game content
// here
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);
}
107

Agora dentro do mtodo Update vamos adicionar as
seguintes instrues destacadas em negrito:

{
:

personagem.MoveByX(5);
personagem.MoveByX(-5);

}

Agora dentro do mtodo Draw vamos adicionar as
seguintes instrues destacadas em negrito:

{
:
cenario.Draw(spriteBatch);
personagem.Draw(spriteBatch);
obstaculo.Draw(spriteBatch);
obstaculo2.Draw(spriteBatch);
spriteBatch.End();

}
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.
109

Para adicionarmos o cdigo de coliso vamos no mtodo
Update para adicionarmos as seguinte instrues,
destacados em negrito abaixo:

{
:
{
//Colidiu com o obstculo da direita
//("obstaculo2")
if (Collision.Check(personagem, obstaculo2))
}
{
//Colidiu com o obstculo da esquerda
//("obstaculo")
if (Collision.Check(personagem, obstaculo))
}

}

Irei explicar agora o cdigo que avalia a coliso do
personagem com as barras horizontais e verticais. A
expresso abaixo:


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 :


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:


A explicao das condies seguintes similar ao que foi
explicado agora.

Vamos executar agora a nossa demonstrao e conferir os
resultados.
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.).

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!

Desenvolvendo Jogos Com o Framework MONOGAME (Free) : Por - Luciano Alves

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Desenvolvendo Jogos Com o Framework MONOGAME (Free) : Por - Luciano Alves

Caricato da

Copyright:

Formati disponibili

Luciano Alves da Silva

Desenvolvendo Jogos com o Framework MONOGAME - Guia

Potrebbero piacerti anche