INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA, MATO

GROSSO

RAFAEL SANZIO MACEDO PORTO

MINICURSO DE INTRODUÇÃO A JOGOS, UTILIZANDO O MOTOR GRÁFICO DA

MICROSOFT (XNA FRAMEWORK)

CUIABÁ-MT

24/11/2013
 PRIMIERO PROGRAMA NO XAMARIN STUDIO

Iniciaremos este minicurso para valer desenvolvendo o nosso primeiro

“joguinho”. Agora abra o Xamarin Studio:

Click em New:
 Vá em C#, MonoGame, e vai na opção “MonoGame Windows OpenGL
Application”, e o nome do nosso projeto vai ser PrimeiroJogo e clique no botão OK:

Depois de clicar no botão, é criado o projeto, onde você poderá começar a

desenvolver o primeiro jogo. Agora começaremos a programar, iremos adicionar
uma variável que é responsável por colocar uma imagem ou um Sprite na tela,
chamada Texture2D, adicionaremos uma imagem, na Contetnt:
Ao clicar em Adicionar Arquivos... Aparecerá uma janela, onde você terá que
localizar a sua imagem ou Sprite, veja o exemplo abaixo:

Após isto é preciso copiar os conteúdos na pasta Content para o diretório de saída,
pois quando o nosso software for executado, e neste local que ele buscará os
dados, no nosso caso, é a imagem ball.png.
Agora crie dois atributos, um chamado de bolaTextura da classe Texture2D e outro
chamado de posicaBola da classe Vector2D pois elas que manipularam a imagem,
carregue a imagem e a posição dela no método LoadContent. Defina o tamanho da
tela manipulando os atributos do atributo graphics, que está no método construtor
da classe Game1, definindo a altura e largura para 500 pixels e alterem para false, o
valor de graphics.IsFullScreen. E no final pinte ou desenhe a bola na tela, abrindo
um spriteBatch.Begin() e fechando ele com um spriteBatch.End(), e utilizaremos
estes métodos do atributo spriteBatch, no método Draw().

Continuação....
Executando a tela fica assim:
 Agora que já tivemos, um pequeno contato com a linguagem C#, utilizando o
Framework XNA da Microsoft. O jogo que iremos fazer é o famoso joguinho de tênis
maquina contra usuário.

Adicionaremos mais duas texturas (texturaBarra, inimigaBarra) e será

adicionado mais uma imagem (“barra.png”), adicionaremos três atributos novos
(bolaRetangulo, barraRetangulo, inimigoRetangulo), que vem da classe Rectangle,
estes atributos e são responsáveis por delimitarem os limites e o tamanho da
imagem, e com isso poderemos verificar as colisões, que aconteceram
eventualmente neste exemplo de “jogo”. Veja o código:

A próxima etapa, vamos criar uma variável que gere números aleatórios
(Random), ela será a responsável por gerar as localizações aleatórias inicias da
bolinha. Controlaremos os eventos e as ações do teclado com a classe
KeyboardState, ela retornará qual tecla foi apertada e com isso, nós trataremos
estes eventos. Serão criadas também duas variáveis do tipo int, responsáveis por
pegar o valor do tamanho da tela, para que podemos efetuar os cálculos:
 Na etapa atual, precisamos que as coisas tenham movimento, portanto
criaremos o método CarregarRandom, responsável por gerar os valores aleatórios
e responsáveis pelo movimento indeterminado da bola. Veja o código abaixo:

Após desenvolver o método CarregarRandom, chame-o no método

LoadContent, para que os valores possam ser carregados. Já que a bola se
movimenta, agora é a hora de desenvolvermos a lógica do inimigo, pois ele precisa
saber, fazer algo, será preciso criar duas variáveis do tipo int, bolaCentrada e
inimigoCentrado, pois eles que retornaram os dados, que serão usados para que o
inimigo se movimente. Veja o código abaixo:

OBS: Não esqueçam de criar as duas variáveis pois elas são de extrema
importância.
 Agora que os movimentos da bola e do inimigo, foram implementados, é
preciso implementar o do jogador, mas os métodos tanto da bola como do inimigo,
não funcionaram, pois eles, não estão sendo pintados e nem atualizados. Va no
método Update e faça as seguintes alterações:
 Mas, ainda não irá funcionar, é preciso que as imagens sejam pintadas já tela,
portanto, veja as modificações efetuadas no método Draw():
 Agora é só executar o código e jogar:

SCROLLING BACKGROUND (ROLAGEM DO FUNDO)

Neste exemplo será desenvolvido, uma tela onde o fundo se move, dando a
impressão de movimento da tela, agora crie um novo projeto no Xamarin Studio,
chamado de RolagemFundo. Crie uma nova classe chamada RolageFundo:
 Nesta classe adicione uma textura, e duas posições (dois Vector2), um int
chamado velocidade e será adicionada uma imagem chamada de “space.png”, está
imagem será o nosso fundo. Estes atributos serão responsáveis pelo movimento da
escorrido do fundo da tela, pois, as posições controlaram o tamanho da imagem, e
no momento em que a imagem acabar, ela será repintada, evitando que a imagem
suma. A velocidade será determinada pela variável do tipo int que criamos, porque
será preciso ter um controle deste movimento, veja o código abaixo:
 Vá para a classe Game1, e crie um objeto da classe RolageFundo, agora o
implementaremos os métodos desta classe na classe Game1, e definiremos a altura
e a largura da tela veja o código fonte abaixo:
 Execute e veja o movimento da tela:

SPRITE SHEET ou Animação

No mesmo projeto, iremos fazer uma animação utilizando um aviãozinho, veja

o Sprite:

Agora crie uma nova classe chamada de SpriteSheetAviao, e cria os

seguintes elementos, a textura do Sprite mostrado; Um retângulo, pois ele será
responsável por delimitar os cada quadro da imagem que será utilizado para montar
a animação e atualiza-la.

Criarão também dois Vector2, um responsável pela posição da nave e outro

que terá a origem dela. Serão criadas também três variáveis do tipo int a 1º terá o
quadro atual do Sprite da imagem, e as outras duas serão as medidas deste
quadrado (altura e largura). E as ultimas variáveis são variáveis flutuantes, uma será
o cronometro, que será responsável por cronometrar os milissegundos do tempo de
execução do jogo, que será utilizado para desenvolver a animação e a outra é o
intervalo deste cronometro, e ele será inicializado por 25. Veja o código abaixo:

Infelizmente o efeito de animação não irá funcionar, é preciso que o código

faça uma atualização dele, pois sem a atualização o os quadros não iram para o
próximo, e com isto o efeito do “avião voando” não irá acontecer. E agora
implementaremos a atualização dos dados, e os eventos do teclado no avião,
criando uma variável teclado do tipo KeyboardState ela recuperará as teclas, agora
veja a implementação no código abaixo:

É preciso também colocar um objeto da classe SpriteSheetAviao na Game1,

pois só veremos o avião funcionando, nela:
Agora basta só executar, e este é o resultado:
 JOGO DE NAVE DE TIRO COM INIMIGOS (SPACE SHOOTER)

Agora com os conhecimentos adquiridos, vamos começar a desenvolver um

jogo, com inimigos, barra de vida, movimentação e com efeito de som. Crie um
projeto chamado MeuPrimeiroJogo, e adicione os seguintes conteúdos (imagens e
sons): asteroid.png, bgMusicCC.wav, EnemyBullet.png, enemyship.png,
explode.wav, explosion3.png, GameOver.png, GameOver.wav, healthbar.png,
MenuInicial.png, playerbullet.png, playershoot.wav, ship.png, space.png, theme.wav.

Crie uma nova classe chamada CampoDeEstrela está classe terá as mesma
características da classe RolageFundo, assim:
 Criaremos agora uma nova classe Tiro, onde ela será a responsável por cada
tiro que o jogador ou o inimigo der. Será criado uma textura, um retângulo para
delimitar a textura, serão criados dois Vector2 onde um será a posição do tiro e o
outro a origem, será criado uma variável do tipo bool (booleano) ela será
responsável em controlar a visibilidade do tiro e o ultimo elemento será um numero
flutuante (float) responsável pela velocidade abaixo. Veja o código da classe:

Crie uma nova classe, chamada de GerenciadorSom, ela conterá todos os

sons e musicas do jogo. Veja o código fonte da classe abaixo:
 Agora crie uma nova classe chamada Jogador, ela conterá os mesmo
atributos e métodos da classe SpriteSheetAviao, mas ela não conterá o efeito de
animação, porem ela poderá dar tiros com o som deles, se manter dentro da tela e
terá uma barra de vida.

Para realizar os tiros é preciso criar uma Lista destes tiros, pois cada vez que
o usuário atirar, um novo tiro será adicionado à lista, e está lista será verificada e
atualizada. Porem isto não será tratado nesta classe.
 O efeito da barra de vida é algo bem simples, pois cada vez que o jogador
receber um tiro, a imagem será cortada de proporção que for determinada no
código, isto dará o efeito de diminuição da barra. Veja o código abaixo da classe:
 Crie a classe Asteroide, os asteroides serão alguns dos inimigos que
apareceram na tela. Está classe conterá uma textura, um retângulo que delimitará
esta textura, dois Vector2 um terá a posição desta imagem e outro a origem dela,
serão criadas três variáveis do tipo flutuante, onde duas serão os valores
randômicos dos eixos X e Y de onde ficará a imagem e uma ângulo da rotação, pois
quando o asteroide estiver se movimentando ele girara com base no valor do ângulo
de rotação, uma variável do tipo inteiro que conterá a velocidade desta imagem e
por ultimo um Random que gerará números aleatório paras as duas variáveis
flutuantes.

Continuação...
 Crie uma nova classe Explosao, ela será a animação da explosão e será
idêntica a classe SpriteSheetAviao que criamos anteriormente, porem a única
diferença será que utilizaremos um Sprite com 17 quadros, e na classe anterior
utilizamos um Sprite com 3 quadros, veja o código da classe abaixo:
 Crie a classe Inimigo, ela possuirá as mesmas características que a classe
do jogador, mas porem ela não poderá ser controlada, neste casso serão utilizadas
técnicas, como o enemy Spawn (logica utilizada para determinar local onde o inimigo
irá nascer) e o inimigo movimentará como o asteroide de cima para baixo. Veja o
código fonte da classe Inimigo:
 Crie um Enum, onde serão armazenados todos os estados do jogo.

Depois de criar todas estas classes, é preciso implementar isto na classe

principal a Game1. Crie os atributos que serão importantes para que o jogo
funcione:
 De nome ao titulo da janela via o método construtor e anule os valores das
texturas do menu e do fim do jogo e inicialize o valor do dano do inimigo e a
pontuação e carregue todos os componentes no método LoadContent:

Crie o método CarregarAsteroide(), ele criara valores aleatórios para os

asteroides nos eixos X e Y, para que os asteroides apareçam em locais diferentes.
Depois ele verificara a quantidade de asteroides na lista é menor igual a 5, se for
será adicionado um novo asteroide na lista.

Depois disso verifica se a lista possui algum asteroide que tiver o valor da
variável visível for false, para poder remover este asteroide da lista.

Veja o código do método:

 Agora adicionaremos outro método depois do anterior, chamado
CarregarInimigos(), este método irá fazer as mesmas coisas que foram feitas no
método anterior, porem a objeto que será verificado, não iram ser os asteroides,
serão os inimigos. A quantidade de máxima de inimigos na lista será 3 diferente dá
de asteroides que é 5.

Depois do método anterior, adicionaremos outro chamado de

ManegeExplosion(), ele gerenciará as explosões, verificando se a variável visível do
objeto Explosao() está falso, caso esteja, ele será eliminado da lista de explosões.
Veja o código abaixo:
 Agora vamos desenhar todos os conteúdos desta classe, primeiro criaremos
uma estrutura switch/case, onde separaremos os tipos de pintura, com os valores o
Enum Estados.

Quando o valor for Menu, ele pintara o fundo do jogo e a textura do menu.
Quando o valor for Jogando, ele pintara o fundo do jogo, o jogador, a lista de
explosões, a lista de asteroides e a lista de inimigos. E quando for GameOver, será
pintado o fundo e a textura do fim do jogo. Veja o código fonte do método de
Desenho:
 E por fim teremos que implementar o método Update(), pois ele que
atualizará as informações de todos os objetos e métodos envolvidos. Dividiremos as
atualizações com a mesma estrutura utilizada no método Draw().

Quando a estrutura for Menu, terá uma condicional que verificará se a tecla
ENTER foi pressionada, se for verdadeiro o Enum Estados será alterado para
Jogando e a musica de fundo será inicializada, caso a afirmação for falsa ela saída
do escopo e o fundo será atualizado e a sua velocidade será inicializada com o valor
de 1. Veja o código fonte abaixo:
 Quando for Jogando, a velocidade do fundo será inicializada com o valor 5.
Serão feitas verificações se a nave do jogador colidiu com a do inimigo, se isso for
verdadeiro, o som de explosão será iniciado, uma nova explosão será adicionada á
lista, o jogador perdera 40 de vida e o inimigo se tornará invisível; Será verificado os
tiros do inimigo que colidem com o jogador, se for verdadeiro, então o valor dano do
inimigo será decrementado da vida do jogador e o tiro do inimigo torna-se invisível; E
a ultima verificações se os tiros do jogador colidem com o inimigo, se sim o som de
explosão será ligado, uma nova explosão será adicionada, aumentará mais 20 na
pontuação, o tiro e o inimigo se tornarão invisíveis. E no final os inimigos serão
atualizados. Veja o código abaixo:

Agora é a vez de verificar e atualizar os asteroides, código e praticamente

idêntico com a verificação dos inimigos. Depois disto as explosões serão
atualizados, e a vida será verifica e caso ela seja, menor ou igual à zero, o estado do
jogo passa para GameOver e o som do Game Over é iniciado. Depois o jogador e o
fundo são atualizados, os asteroides e os inimigos são carregados e o
MenegeExplosion() é chamado . Veja o código abaixo:

Quando o estado do jogo estiver no game over, as musica são encerradas e

ele fica esperando que a tecla Esc seja apertada, e se ela for verdadeira, então a
lista de inimigos, explosões, asteroides e tiros do jogador são esvaziadas, e a
posição do jogador, vida e pontuação são reiniciadas e o estado do jogo é mudado
para Menu. Veja o código fonte abaixo:

Agora só executar, e ver o resultado final:

JUST BELIEVE IN YOURSELF