Tutorial 2 - Manipulando imagens 2D no jogo [26.09.2011]
-
Upload
elen-arantza -
Category
Technology
-
view
405 -
download
0
description
Transcript of Tutorial 2 - Manipulando imagens 2D no jogo [26.09.2011]
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.