Anda di halaman 1dari 101

Luciano Alves da Silva

Desenvolvendo Jogos com a plataforma XNA- Guia para


Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
2

Luciano Alves da Silva
3

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
4





Desenvolvendo Jogos com a Plataforma XNA
Guia para desenvolvedores
2 Edio
[VERSO DE AMOSTRA]

Autor: Luciano Alves da Silva

Rio de Janeiro Setembro/2014

Copyright 2014 Todos os direitos reservados
Luciano Alves da Silva
5


Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [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
bit.ly/1x3hm0Y

Luciano Alves da Silva
7

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
8

Sobre o autor da obra

Luciano Alves da Silva 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 Ferramenta RPG Maker
VX Guia do Usurio.
Luciano Alves da Silva
9

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [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 a plataforma XNA , desenvolvida e distribuda
pela Microsoft (de forma GRATUITA).
Neste livro voc aprender noes bsicas de como criar
jogos utilizando a plataforma XNA da Microsoft, atravs dos
seus recursos disponveis e tambm dos exemplos
mostrados aqui nesta obra.

Para uma abordagem MAIS AMPLA adquira a VERSO
COMPLETA do livro no meu site : http://lucianodev.com
Luciano Alves da Silva
11

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
12


ndice analtico

ndice analtico ................................................................... 12
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 Visual Studio 2010 Express ............. 18
2.1.1) Realizando o download .................................... 18
2.1.2) Instalando a ferramenta .................................. 23
2.2) A plataforma XNA .................................................... 24
2.2.1) Realizando o download .................................... 24
Luciano Alves da Silva
13

2.2.2) Instalando a plataforma .................................. 27
2.3) O Framework GameUtil2D ..................................... 28
2.3.1) Para que serve este framework ?................... 28
Capitulo 3 Criando nosso primeiro projeto no XNA ...... 29
Capitulo 4 Visualizando imagens no jogo ....................... 48
4.1) Criando nosso projeto ............................................. 48
4.2) Importando a biblioteca GameUtil2D para o
projeto .............................................................................. 48
4.3) Copiando as imagens para dentro do projeto ..... 51
4.4) Desenvolvendo o cdigo ......................................... 54
Capitulo 5 Movendo elementos do jogo pela tela ......... 67
Capitulo 6 Trabalhando com animao de sprites........ 82
Capitulo 7 Detectando colises entre objetos no jogo . 94
Consideraes Finais........................................................ 101

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
14


Capitulo 1 Fundamentos
bsicos sobre jogos

ntes de comearmos a estudar e utilizar a plataforma
XNA, 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 a plataforma XNA- Guia para
Desenvolvedores 2 Edio [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 a
plataforma XNA (desenvolvida pela Microsoft).
A plataforma XNA um framework desenvolvido pela
Microsoft voltado para a criao de jogos (tanto em 2D
quanto em 3D) que trabalha junto com a ferramenta Visual
Studio 2010. Como pr-requisito o XNA necessita da
ferramenta Visual C# 2010 instalada em seu computador
para o desenvolvimento dos seus jogos na linguagem C#.
A plataforma j oferece recursos voltados diretamente para
a criao de jogos como classes para a exibio de imagens ,
para a execuo de msicas e sons de efeito e etc.

1.4) Sobre a linguagem de programao C#

A linguagem de programao C# a linguagem que iremos
utilizar para o desenvolvimento de jogos na plataforma XNA
(juntamente com o Visual C# 2010). Caso voc , que esteja
lendo este livro, no tenha nenhum conhecimento de
linguagem de programao e/ou lgica de programao
(algoritmos), recomendo fortemente o estudo e
aprendizagem dessas abordagens para a melhor
compreenso desta obra.

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [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 da plataforma XNA.
2.1) A ferramenta Visual Studio 2010 Express

Conforme j foi mencionado no captulo anterior, iremos
utilizar a ferramenta Visual Studio 2010 (na verso Express,
que uma VERSO GRATUITA).

2.1.1) Realizando o download

Para realizarmos o download do Visual Studio 2010 Express,
visite o seguinte link :
http://www.visualstudio.com/downloads/download-visual-
studio-vs
Ser aberta a seguinte pgina abaixo:

N
Luciano Alves da Silva
19



Pgina de download do Visual Studio 2010 Express

Role abaixo at encontrar o seguinte link destacado na
imagem seguinte :

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
20


Pgina de download do Visual Studio 2010 Express

Quando clicar no item destacado, ir se expandir uma srie
de opes. Role abaixo e procure a opo Instalar Agora.
Veja na figura seguinte :

Luciano Alves da Silva
21



Clicando no link indicado acima, ser aberta a seguinte caixa
de dilogo:








Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
22


Caixa de dilogo de download do arquivo ISO

OBS GERAL
Se por acaso a pgina de download do Visual Studio 2010
Express for diferente do que apresentado neste livro e
voc encontre dificuldades para a realizao do download,
clique no link abaixo

http://go.microsoft.com/?linkid=9709969

Faa o download do arquivo ISO que possui o Visual Studio
2010 Express.
Luciano Alves da Silva
23

2.1.2) Instalando a ferramenta

Aps o download do arquivo ISO , queime este arquivo em
algum CD Virgem (ou emule a execuo desse arquivo
atravs de algum software como o Daemon Tools) para em
seguida instalarmos o Visual C# 2010 Express.

Ao executarmos o programa de instalao, ser aberta a
seguinte tela abaixo:


Tela de instalao do Visual Studio 2010 Express

Escolha a opo que instala o Visual C# Studio 2010 Express
e siga passo o passo da instalao.
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
24

2.2) A plataforma XNA

Depois de instalarmos o Visual C# 2010 Express, vamos
agora instalar a plataforma XNA 4.0.

2.2.1) Realizando o download

Para realizarmos o download do XNA Game Studio 4.0, visite
o seguinte link :



http://www.microsoft.com/en-us/download/details.aspx?id=23714



Feito isso ser aberta a seguinte pgina :

Luciano Alves da Silva
25


Pgina de download do XNA Game Studio


Feito isso vamos clicar no boto Download, e em seguida
surgir a seguinte caixa de dilogo abaixo:
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
26


Caixa de dilogo de download do XNA Game Studio

OBS GERAL
Se por acaso a pgina de download do XNA Game Studio
4.0 for diferente do que apresentado neste livro e voc
encontre dificuldades para a realizao do download,
clique no link abaixo

http://download.microsoft.com/download/0/1/4/01483
A18-289E-4779-BB5A-
0A28DFE18BC5/XNAGS40_setup.exe


Efetue o download da plataforma XNA salve o arquivo de
instalao em um local apropriado.


Luciano Alves da Silva
27


2.2.2) Instalando a plataforma

Antes da instalao , certifique-se de que o Visual C# 2010
Express esteja fechado para assim podermos instalar a
plataforma.

Execute o programa para iniciarmos a instalao do XNA
Game Studio 4.0, conforme podemos conferir na figura
seguinte:

Instalao do XNA Game Studio 4.0

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
28


Para instalar o XNA Game Studio 4.0, basta simplesmente
clicar no boto Next na maioria das situaes, no tem
mistrio.

2.3) O Framework GameUtil2D

Nesta obra (diferente da primeira edio do livro), irei
utilizar para o desenvolvimento de nossos jogos um
framework (dentro dos nossos projetos em XNA) que eu
mesmo desenvolvi chamado GameUtil2D.
2.3.1) Para que serve este framework ?

Esse framework nada mais do que um conjunto de classes
que facilitam a construo de jogos no XNA. 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
Luciano Alves da Silva
29

Capitulo 3 Criando nosso
primeiro projeto no XNA

este captulo iremos criar o nosso primeiro projeto
de jogo atravs do Visual C# 2010 Express, usando
a plataforma XNA (em conjunto com as classes do
meu framework GameUtil2D).

Depois de tudo instalado, vamos executar o Visual C# 2010
Express (indo no Menu iniciar / Todos os programas /
Microsoft Visual Studio 2010 Express / Microsoft Visual C#
2010 Express).

Feito o procedimento explicado acima, ser aberta a
seguinte tela :








N
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
30


Visual C# 2010 Express

Bom, vamos comear criando nosso primeiro projeto no C#
voltado para a plataforma XNA. Para isso, vamos no menu
File e em seguida, New Project (ou voc pode
simplesmente pode clicar onde est escrito New Project da
guia Start Page), como j mostra a figura acima. Feito isso,
ser aberta uma caixa de dilogo conforme mostra a figura
seguinte:

Luciano Alves da Silva
31


Criando um novo projeto

Em Name digitamos o nome do nosso projeto XNA que
desejamos criar. Em Location escolhemos o diretrio onde
o nosso projeto ser criado.
Vamos criar um projeto cujo nome vai se chamar Primeiro
exemplo. Para isso, vamos digitar em Name o nome do
nosso projeto conforme j foi mencionado e em seguida,
clique em OK.

Feito o que se foi pedido acima, ser criado o novo projeto,
conforme podemos conferir na figura seguinte:
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
32


Projeto Primeiro Exemplo criado

Bom, vamos ver a guia Solution Explorer para saber quais
arquivos compem um projeto XNA. Confira na figura
seguinte:

Luciano Alves da Silva
33


Solution Explorer

AssemblyInfo.cs: Neste arquivo esto guardadas todas as
informaes a respeito da aplicao (jogo) como nome da
aplicao, descrio , verso e etc.
Game.ico: 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 :

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
34

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace Primeiro_Exemplo
{


/// <summary>
/// This is the main type for your game
/// </summary>

public class Game1 : Microsoft.Xna.Framework.Game
{

GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;

public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
}

/// <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
Luciano Alves da Silva
35

/// and initialize them as well.
/// </summary>
protected override void Initialize()
{
// TODO: Add your initialization logic here

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,
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
36

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


Luciano Alves da Silva
37

Irei comentar agora algumas linhas de cdigo do programa
acima. Se observarmos dentro da classe Game1 existem
dois objetos declarados, conforme voc confere abaixo:
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;

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:
using System;

namespace Primeiro_Exemplo
{
#if WINDOWS || XBOX
static class Program
{
/// <summary>
/// The main entry point for the application.
/// </summary>
static void Main(string[] args)
{
using (Game1 game = new Game1())
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
38

{
game.Run();
}
}
}
#endif
}

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

A primeira linha de cdigo acima cria a instncia da classe
GraphicsDeviceManager, e atribui essa instncia a varivel
graphics.

Luciano Alves da Silva
39

Na linha seguinte defino o diretrio padro de onde sero
carregados todos os contedos (isso inclui msicas, sons de
efeito, imagens, fontes e etc.).

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 a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
40


// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).
Buttons.Back == ButtonState.Pressed)
this.Exit();

// TODO: Add your update logic here

base.Update(gameTime);

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

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
41

Por ltimo, dentro da classe Game1, existe o mtodo
UnloadContent que disparado quando o jogo
encerrado. Por padro ele no possui nenhum cdigo
dentro dele, cabendo ao programador coloc-lo se
necessrio.

Executando o nosso projeto

Vamos executar o nosso exemplo seguindo os passos aqui
descritos. Para executarmos nosso programa, vamos no
menu Debug e sem seguida Start Debugging ou,
simplesmente pressione a tecla F5.
Se na hora de executar o programa aparecer a seguinte
mensagem conforme mostra a figura abaixo:


Mensagem de erro

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
42

Calma, no se desespere! Por padro o XNA Game Studio
4.0 faz uso mximo do hardware na hora de executar os
jogos, mas, para aqueles que no possui todo esse poder
de hardware, existe uma soluo para conter esse
problema. Vamos na guia Solution Explorer e clique com o
boto direito sobre o projeto e em seguida selecione
Properties, conforme mostra a figura abaixo:

Selecionado a opo propriedades do projeto

Ao fazer o que se foi pedido acima, sero abertas as
propriedades do projeto, conforme mostra a figura
seguinte:
Luciano Alves da Silva
43


Propriedades do projeto

Por padro, a guia de propriedades que aberta a XNA
Game Studio. Se observarmos em Game Profile, existe
uma opo selecionada que faz com que o jogo faa
mximo uso do hardware para a sua execuo (Use HiHef
to access the complete API). Como nem todas as mquinas
que possuem o XNA Game Studio 4.0 possui tal poder de
hardware, precisamos marcar a opo Use Reach to access
limited API set supported by Windows Phone, Xbox 360 and
Windows Phone, permitindo com que a aplicao faa uso
somente dos recursos de hardware instalados no PC. Feito
isso, salve as configuraes do projeto, indo no menu File e
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
44

em seguida, Save Selected items ou, simplesmente
Ctrl+S.

OBS : E SE O ERRO AINDA PERSISTIR ?
Se o erro ainda persistir (mesmo com as alteraes feitas)
significa que a sua placa de vdeo realmente muito fraca
at para as configuraes limitadas do XNA Game Studio.
Recomendo a troca de sua placa de vdeo por uma outra
moderna e mais atualizada.

Feito isso, j podemos executar nosso exemplo criado. Veja
o resultado na figura seguinte:


Primeiro exemplo em execuo
Luciano Alves da Silva
45

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
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.PreferredBackBufferHeight = 300;
graphics.PreferredBackBufferWidth = 300;
}

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
46


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.

Agora, como fao para colocar a tela do jogo em modo tela
cheia ? Para colocarmos a tela cheia em nosso jogo basta,
dentro do construtor da classe, inserir o seguinte cdigo
destacado em negrito.

public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";

graphics.IsFullScreen = true;

}

A propriedade IsFullScreen permite definir se a tela do jogo
estar em modo tela cheia (caso o valor atribudo seja
true) ou no (caso o valor atribudo seja false).

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 :

Luciano Alves da Silva
47

int width = graphics.PreferredBackBufferWidth;

int height = graphics.PreferredBackBufferHeight;


Tambm podemos obter a resoluo da tela do jogo
utilizando o objeto GraphicsDevice, como segue abaixo:
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.
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
48

Capitulo 4 Visualizando
imagens no jogo

o captulo anterior aprendemos a criar e a executar
um projeto (vazio) no XNA , 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 XNA
(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
GameUtil2D). Agora ser necessrio copiar todos os
arquivos da biblioteca para dentro do nosso projeto. Irei
mostrar agora os procedimentos :
N
Luciano Alves da Silva
49

1) Copie todos os arquivos presentes dentro da pasta
GameUtil2D, conforme voc pode conferir na figura
seguinte :

Diretrio GameUtil2D

2) Aps copiar (Ctrl+C) todos os elementos da pasta citada,
vamos voltar para a janela do nosso projeto e em seguida,
clique com o boto direito em cima do nome do projeto e
selecione Paste. Veja na imagem seguinte :

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
50


Copiando todos os arquivos para o projeto

Vejamos o resultado na figura seguinte:

Luciano Alves da Silva
51


Arquivos copiados para dentro do projeto

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 :

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
52

1) Copie todos as imagens presentes dentro da pasta
Capitulo 4, conforme voc pode conferir na figura seguinte
:


Diretrio Capitulo 4

2) Aps copiar (Ctrl+C) todos os elementos da pasta citada,
vamos voltar para a janela do nosso projeto e em seguida,
clique com o boto direito em cima do item Visulizando
imagensContent (Content) e selecione Paste. Veja na
imagem seguinte :



Luciano Alves da Silva
53


Copiando todas as imagens para o projeto

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
54


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 :
Luciano Alves da Silva
55


Seo de declarao de bibliotecas



Vamos digitar a seguinte instruo destacada a seguir :

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
56


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:


Luciano Alves da Silva
57



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)

Agora dentro do cdigo do mtodo LoadContent vamos
digitar a seguinte instruo, conforme mostra a figura
seguinte :



Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
58



Inicializando nosso objeto

Vamos analisar os parmetros do comando inserido acima.
O construtor da classe Image possui os seguintes
argumentos :

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 XNA 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).
Luciano Alves da Silva
59


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 cdigo destacado abaixo:



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 (tambm textos, que vamos
trabalhar futuramente) que sero exibidos na tela.

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
60

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.

Vamos executar a nossa aplicao para conferir o resultado,
conforme voc acompanha na figura seguinte:

Imagem sendo visualizada no jogo


Luciano Alves da Silva
61

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 abaixo
em negrito abaixo:

public class Game1 : Microsoft.Xna.Framework.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:



Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
62

protected override void LoadContent()
{
:
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:

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

// TODO: Add your drawing code here
spriteBatch.Begin();

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

spriteBatch.End();

base.Draw(gameTime);

}

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.
Luciano Alves da Silva
63

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

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.

Executando o nosso cdigo, teremos o seguinte resultado :
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
64


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 a seguinte
instruo destacada em negrito abaixo:


Luciano Alves da Silva
65


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

// TODO: Add your drawing code here
spriteBatch.Begin();

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

spriteBatch.End();

base.Draw(gameTime);
}


Observe que no objeto imagem (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 :

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
66


Imagem invertida na horizontal

Luciano Alves da Silva
67

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


Primeiramente, vamos criar um novo projeto no Visual C#
2010 Express voltado para XNA. 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 seo Movendo Objetos
pela TelaContent (Content) (conforme tambm j foi
mostrado).


N
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
68

Para comearmos, na seo de declarao (importao) das
bibliotecas do C# digite a seguinte linha destacada em
negrito :

:
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 : Microsoft.Xna.Framework.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);
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);
}
Luciano Alves da Silva
69

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

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

// 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).
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
70

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:


Luciano Alves da Silva
71


public class Game1 : Microsoft.Xna.Framework.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))
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
72

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

base.Update(gameTime);
}


Vamos analisar as instrues digitadas em negrito. A
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.
Luciano Alves da Silva
73

A explicao acima similar para as demais condies
seguintes.
Vamos executar a aplicao para conferir os resultados,
conforme mostra a figura seguinte:

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).
Para colocarmos a nuvem em movimento, precisaremos
adicionar mais algumas instrues. Para comear vamos
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
74

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);
}
Luciano Alves da Silva
75

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:

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
76



Nuvem em movimento

Se observarmos o nosso jogo, o nosso avio pode se
deslocar perfeitamente pela tela, porm, de 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):

Luciano Alves da Silva
77


:
int largura_tela;
int altura_tela;

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

protected override void LoadContent()
{
:
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:

protected override void Update(GameTime gameTime)
{
:
teclado = Keyboard.GetState();

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


Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
78

else if (teclado.IsKeyDown(Keys.Left))
{
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);
}
else if (teclado.IsKeyDown(Keys.Down))
{
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
Luciano Alves da Silva
79

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 a largura da tela a
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:
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
80


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)

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:

Luciano Alves da Silva
81


Agora o avio no sai mais da tela

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
82

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 os 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
Luciano Alves da Silva
83



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 XNA,
ns vamos fazer uso da classe chamada AnimationSprites,
destinada somente para esse tipo de tarefa (presente
dentro do pacote gameutil2d.classes.basic do nosso
framework).

Para comearmos vamos criar um novo projeto no XNA
chamado Animacao de Sprites. Em seguida copie todos os
arquivos do framework GameUtil2D para dentro do seu
projeto e , por ltimo, copie todas as imagens presentes
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
84

dentro da pasta Capitulo 6 (que acompanha este material)
para dentro da seo Animacao de SpritesContent
(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);
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(3, true);
}

Luciano Alves da Silva
85

Irei explicar o cdigo inserido no mtodo acima. A linha de
comando:

naruto = new AnimationSprites(context, 0, 0, 124, 164);

Carrega a instncia do objeto naruto do tipo
AnimationSprites. No primeiro argumento da classe,
sempre passamos o valor context. 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);
naruto.Add(naruto_parado_2);
naruto.Add(naruto_parado_3);
naruto.Add(naruto_parado_4);
:

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(20, 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
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
86

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:

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

// TODO: Add your drawing code here
spriteBatch.Begin();
naruto.Draw(spriteBatch);
spriteBatch.End();

base.Draw(gameTime);
}


Depois de digitar o cdigo solicitado, execute o nosso jogo e
confira o resultado, como demonstra a figura seguinte:
Luciano Alves da Silva
87


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);
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
88


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 XNA usando a classe AnimationSprites. Para
essa pratica vamos descompactar um projeto em XNA j
feito (que j acompanha este material), que o arquivo
AnimacaoSprites_GundamWing.zip (presente dentro da
pasta Capitulo 6).
Luciano Alves da Silva
89

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:
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
90


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:


Luciano Alves da Silva
91


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");

}
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
92

Agora dentro do mtodo Draw vamos substituir as
seguintes linhas de cdigo destacadas em negrito abaixo:


protected override void Draw(GameTime gameTime)
{
:
wing_gundam.Draw(spriteBatch);
heavy_arms.Draw(spriteBatch,true);
}


Pelas seguintes linhas de cdigo destacadas em negrito
abaixo:


protected override void Draw(GameTime gameTime)
{
:
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:

Luciano Alves da Silva
93


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


Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
94


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 XNA
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 seo Colisoes entre
ObjetosContent (Content).

Vamos dentro da classe Game1 na seo de declarao de
bibliotecas para digitarmos o seguinte cdigo abaixo:

using gameutil2d.classes.basic;

U
Luciano Alves da Silva
95

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:

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


Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
96

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

Luciano Alves da Silva
97

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.
Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
98

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

Luciano Alves da Silva
99

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 algum momento do deslocamento, 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.

Desenvolvendo Jogos com a plataforma XNA- Guia para
Desenvolvedores 2 Edio [VERSO DE AMOSTRA]
100



Jogo em execuo Personagem colide com o elevador

Luciano Alves da Silva
101


Consideraes Finais



Neste livro aprendemos SOMENTE AS NOES BSICAS de
desenvolvimento de jogos atravs da plataforma XNA.
Vimos um pouco sobre fundamentos de desenvolvimento
de jogos e aprendemos a instalar e configurar a plataforma
XNA (juntamente com o Visual C# 2010 Express).
Conhecemos tambm um pouco da framework de
desenvolvimento de jogos para XNA 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!