Finalmente o momento mais esperado!

Vamos brincar com a codificação do XNA e ver nossa criação deslizar viva na nossa tela! /o/

Manipulando imagens 2D no jogo

Esta parte tem como objetivo carregar as imagens em uma textura, que será responsável por

manipular as imagens 2D do jogo. Cada imagem 2D recebe o nome de Sprite, e o conjunto de

Sprites se chama SpriteBatch.

1 – Importando imagens

Para carregarmos as imagens, primeiro deveremos importá-las para o jogo. Neste caso, o jogo

terá 1 personagens que terá 4 imagens (de frente, costas, lado direito, lado esquerdo), cada

uma representando uma posição. Essas imagens estão disponíveis no arquivo “Imagens.rar”

em anexo.

Agora vamos importar as imagens de fato. Crie um projeto chamado “UnderControl” (File

New Project..)[Figura 1].

Porém, para facilitar o encontro das imagens no nosso projeto, criaremos uma pasta de

Imagens para uma melhor organização. Para isso, abra o Solution Explorer, e clique com o

botão direito na extensão do projeto “UnderControl” “UnderControlContent(Content)” e

selecione Add e depois New Folder [Figura 2].

Após adicionar, renomeie a pasta para “Imagens” *Figura 3+.

Nessa pasta ficarão guardadas todas as imagens do nosso jogo. Essas imagens estão

disponíveis no arquivo “Imagens.rar” em anexo. Apenas descompactar o arquivo não é o

suficiente adicionar as imagens ao projeto, ou seja, no Solution Explorer não é possível ainda

visualizar as imagens. Para adicionar ao projeto, abra a Solution Explorer, clique com o botão

direito na pasta Imagens, selecione Add e depois Existing Item [Figura 4]. Surgirá uma nova

janela de diálogo.

Navegue até a pasta Imagens e selecione todas as imagens para adicionar. Caso não esteja

visualizando as imagens, altere o campo Nome para Content Pipeline Files. Após selecionar

todas as imagens, clique em Add [Figura 5]. Agora todas as imagens estão adicionadas ao

projeto.

2 – Programando as imagens

Agora que as imagens já estão no projeto, podemos começar a programar, ou seja, carregar as

imagens no jogo. Para isso, na janela de código, criaremos um sprite, que será transformado

em textura.

Declare uma variável do tipo Texture2D, que será responsável por armazenar a imagem do

personagem [Figura 6].

>> Texture2D personagem;

Com a variável declarada, precisamos apenas atribuir uma imagem inicial à ela. Para isso,

navegue até o método LoadContent() (Este método é responsável por carregar as imagens

iniciais).

Devemos chamar um método Load, porém para chamarmos da maneira correta, precisamos

saber uma informação: o nome das imagens (chamado de AssetName). Para descobrir qual o

AssetName de cada imagem, abra o Solution Explorer, e depois expanda a pasta Imagens caso

ainda não esteja expandida [Figura 7].

Agora podemos chamar o método load, para isso, insira essas linhas de código [Figura 8]:

>> personagem = Content.Load<Texture2D>(@"Imagens\Frente");

Note que entre as aspas está a pasta das Imagens e o AssetName correpondente às imagens.

Agora basta desenharmos os personagens na tela. Para isso, precisamos ir em outro método

responsável pelo desenho, que é o método Draw.

Navegue até o método Draw e dentro dele precisamos chamar métodos: Begin, responsável

por iniciar a renderização, Draw, que efetivamente desenha imagem na tela, e End, que

termina a renderização. Esses métodos são da classe SpriteBatch, portanto podemos acessá-

los da seguinte maneira:

>> spriteBatch.Begin(); >> spriteBatch.Draw(personagem, Vector2.Zero, Color.White); >> spriteBatch.End();

Observação: no método Draw são solicitados 3 argumentos: o primeiro é a imagem que

devemos desenhar, o segundo é um vetor, ou seja, especificamos em que posição na tela

deverá ser desenhada a imagem, imaginando que a tela é um plano cartesiano e que os 2

números são, respectivamente, os eixos X e Y do plano, e por fim deverá ser passada a cor da

imagem. Como neste caso não aplicaremos nenhuma cor adicional à imagem, deixaremos

transparente (Color.White). Experimente posteriormente modificar as cores para ver os

diferentes resultados.

Após esse procedimento, podemos rodar nosso jogo simplemente apertando a tecla F5 e

visualizando os resultados obtidos [Figura 9].

3 – Movimento dos personagens

Nessa parte do projeto, implementaremos um método responsável por verificar

constantemente se o usuário pressionou alguma tecla de movimentação. Caso ele tenha

pressionado, movimentaremos o personagem ao longo da tela, modificando sua imagem.

Para movimentarmos o personagem pela tela, precisamos saber primeiramente qual a posição

(ou seja, o par de coordenadas X e Y) do personagem, onde a origem (o ponto 0,0 é no canto

superior esquerdo). Para definirmos qual será essa posição devemos criar uma variável.

Declare junto com as outras variáveis já declaradas anteriormente, mais uma variável do tipo

Vector2:

>> Vector2 posicaoPersonagem;

Definiremos a posição no método initialize:

>> posicaoPersonagem = new Vector2(100,100);

Obs: por padrão, a resolução da tela do jogo é de 800x600 pixels. Por isso, devemos posicionar o personagem dentro dessas medidas. Se, por exemplo, posicionarmos ele na posição (900,500), a imagem não poderá ser visualizada, pois está fora da resolução. Agora que já definimos as posições dos personagens, precisamos criar um método que fique

na escuta constante de qualquer tecla que o usuário pressionou, para realizar alguma ação, ou

seja, o movimento dos personagens. Para isso, vamos definir o método, que deve ficar dentro

do escopo da classe:

>> public void EntradaTeclado()

>> {

>> }

Agora dentro do método vamos chamar um outro método para sabermos o estado do teclado,

para isso, criaremos uma variável do tipo keyBoardState e chamaremos um método da classe

Keyboard chamado GetState:

>> KeyboardState teclas = Keyboard.GetState();

Após essa linha, teremos que fazer uma série de verificações, ou seja, precisamos saber se a

tecla pressionada foi a seta para baixo, para movimentar o personagem para baixo, ou se foi a

tecla para cima, para movimentar o personagem para cima e assim por diante. Quem define as

teclas de movimentação somos nós, mas vamos tomar como exemplo as setas para o

personagem. Para realizarmos a verificação basta utilizar a estrutura IF.

>> if(teclas.IsKeyDown(Keys.Up))

>> {

>>

>> }

A linha do IF será verdadeira se a tecla pressionada pelo usuário for a seta para cima. Devemos

então implementar o movimento para cima. Isso é possível se modificarmos a posição do

jogador, e para isso precisamos mexer no eixo Y (o eixo vertical). Basta, portanto, somarmos

um valor que será o número de passos que ele deslocará. Quanto maior o valor, mais rápido

ele se movimentará:

Além de movimentar o personagem, precisamos modificar sua figura, que agora será a de

costas. Para isso basta chamarmos novamente o método Load:

Agora precisamos fazer o mesmo procedimento para as outras posições:

O próximo passo é atualizar o método Draw, a posição que o spritebatch renderizará está fixa na posição Zero(0,0), e devemos atualziar para a variável posicaoPersonagem que acabamos de criar. Por isso vá até o método Draw e modifique-a da seguinte maneira:

Para terminar, basta chamar o método EntradaTeclado dentro do método Update que já está

construído na classe Game1, que é o ciclo do jogo.

Rode o programa com a tecla F5 para visualizar os resultados.