Finalmente o momento mais esperado!
Vamos brincar com a codificação do XNA e ver nossa criação deslizar viva na nossa tela...
Após adicionar, renomeie a pasta para “Imagens” *Figura 3+.
Nessa pasta ficarão guardadas todas as imagens do nosso jogo. ...
suficiente adicionar as imagens ao projeto, ou seja, no Solution Explorer não é possível ainda
visualizar as imagens. Para...
2 – Programando as imagens
Agora que as imagens já estão no projeto, podemos começar a programar, ou seja, carregar as
ima...
Com a variável declarada, precisamos apenas atribuir uma imagem inicial à ela. Para isso,
navegue até o método LoadContent...
Note que entre as aspas está a pasta das Imagens e o AssetName correpondente às imagens.
Agora basta desenharmos os person...
3 – Movimento dos personagens
Nessa parte do projeto, implementaremos um método responsável por verificar
constantemente s...
>> posicaoPersonagem = new Vector2(100,100);
Obs: por padrão, a resolução da tela do jogo é de 800x600 pixels. Por isso, d...
Agora dentro do método vamos chamar um outro método para sabermos o estado do teclado,
para isso, criaremos uma variável d...
A linha do IF será verdadeira se a tecla pressionada pelo usuário for a seta para cima. Devemos
então implementar o movime...
Agora precisamos fazer o mesmo procedimento para as outras posições:
O próximo passo é atualizar o método Draw, a posição ...
Rode o programa com a tecla F5 para visualizar os resultados.
Próximos SlideShares
Carregando em…5
×

Tutorial 2 - Manipulando imagens 2D no jogo [26.09.2011]

611 visualizações

Publicada em

Tutorial desenvolvido para o grupo de estudos Esfera Microsoft XNA (O7 Games - CESUPA) em 26/09/2011

"
Bom dia, galera! :)
Preparei um novo tutorial para essa semana, assim como um desafio já valendo seu primeiro troféu!
Troféu Under Control
(Descrição: O game developer [nome] possui a habilidade de manipular objetos 2D no XNA e mante-los sob total controle dentro das dimensões da janela do jogo.)
Nos arquivos em anexo vocês encontraram o primeiro anexo "2 - Manipulando imagens 2D no jogo.pdf", esse é o tutorial que preparei. O segundo anexo "Imagens.rar" são as sprites (imagens) que utilizaremos no tutorial. Já o terceiro anexo "UnderControl.rar" é codigo completo do projeto para consultarem caso seja necessário. [Google Groups rejeitou o arquivo de código então coloquei aqui: http://www.mediafire.com/?ezjqbgrsob8icv9]

Desafio da semana:

No tutorial ensinamos passo-a-passo como importar imagens 2D e controlar o input de comandos do jogador. Porém, assim que vocês concluírem o tutorial perceberam que nosso personagem está fora de total controle, pois segue infinitamente para uma das direções, ultrapassando as bordas limites da janela! Vamos coloca-lo sobre controle e mostrar quem é que manda! dò.ó
O desafio de vocês é limitar os movimentos nas bordas, para ele não ultrapassar os limites da janela.

Dica: É o método ClientBouds da Classe Window que contém os valores das dimensões das janelas.
"

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
611
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tutorial 2 - Manipulando imagens 2D no jogo [26.09.2011]

  1. 1. 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].
  2. 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
  3. 3. 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.
  4. 4. 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;
  5. 5. 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>(@"ImagensFrente");
  6. 6. 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].
  7. 7. 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:
  8. 8. >> 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() >> { >> }
  9. 9. 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)) >> { >> >> }
  10. 10. 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:
  11. 11. 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.
  12. 12. Rode o programa com a tecla F5 para visualizar os resultados.

×