Developers BR

Um Blog sobre XNA, SilverLight e CIA.

[Guia do Iniciante Dia #6] Aprodundando no posicionamento de imagens 2D (Vector2)

leave a comment »


Olá. Faz um tempo que não trago novidades, mas hoje começo a dar continuação ao Guia do Iniciante.

O tema de hoje é sobre Vector2. Uma das estruturas que você mais irá usar quando criar algo baseado em dois eixos (X e Y = 2D = 2 Dimensões).

No ultimo capitulo do Guia do Iniciante, nós usamos apenas Vector2.Zero. Irei realizar uma explicação melhor e iremos deixar o ultimo exemplo bem mais avançado.

Vamos começar!

– “O que é um Vector2?”

Resposta: Vector2 nada mais é do que uma estrutura/classe que armazena duas coordenadas : X e Y

– “Mas se só serve para armazenar X e Y, por que não uso a classe Point?”

Resposta: As facilidades que Vector2 nos fornece são muitas. Temos funções como: Vector2.Lerp, Vector2.Subtract, Vector2.Mutiply que realizam calculos digamos que muito extensos e repetitivos.

Veja, por exemplo, como somar dois Points em um novo Point.

Point ponto1 = new Point(200, 200);
Point ponto2 = new Point(100, 100);
Point pontoResultante = new Point();

pontoResultante.X = ponto1.X + ponto2.X;
pontoResultante.Y = ponto1.Y + ponto2.Y;

O resultado é X = 300; Y = 300. Agora veja o mesmo exemplo com Vector2:

Vector2 vetor1 = new Vector2(200, 200);
Vector2 vetor2 = new Vector2(100, 100);
Vector2 resultado = new Vector2();

resultado = Vector2.Add(vetor1, vetor2);

Isto produz exatamente o mesmo resultado, obiviamente a diferença não foi grande, mas ao realizarmos, por exemplo, uma interpolação linear, a classe estatica Vector2 é de grande utilidade.

Agora vamos ver o problema de hoje.

O Problema

Precisamos mover a imagem de um lado para o outro na tela em um loop interminável.

Vamos analisar algumas palavras-chaves:

-Mover: Isso significa que precisaremos posiciona-la, ou seja, usaremos Vector2.

-De um lado para o Outro: Podemos usar velocidade para isso.

-Loop Interminavel: Isto rima com o método Update() =D

Vamos agora resolver o problema.

A Resolução

Antes de tudo, vamos resumir os passos. Lembre-se de criar um novo projeto.

-> NÃO EXIGE CÓDIGO

1. Salve a imagem abaixo:

Kakashi

2. Adicione a imagem ao projeto.

-> CÓDIGO NO TOPO DA CLASSE

3. Crie uma variavel Texture2D para armazenar a imagem

4. Crie uma variavel Vector2 para o posicionamento.

5. Crie uma variavel int para armazenar a velocidade.

-> CÓDIGO NO LOADCONTENT()

6. Carregue a imagem

7. Inicialize a posição

8. Defina a velocidade inicial

-> CÓDIGO NO UPDATE()

9. Defina o Loop principal

-> CÓDIGO NO DRAW()

10. Desenhe a imagem

Agora vamos ao Trabalho.

1. Você já salvou a imagem, certo?

2. Você já sabe adicionar imagem correto? Se não souber, Clique Aqui.

iniciante_6_Content

3. Crie a váriavel Texture2D no topo da classe (antes do Construtor)

Texture2D t_Kakashi;

4. Agora criaremos a váriavel para posiciona-lo, adicione o seguinte logo abaixo de “Texture2D t_Kakashi;”

Vector2 p_Kakashi;

5. Adicione logo abaixo, a variavel que armazenará a velocidade.

int v_Kakashi;

6. Já no método LoadContent() carregue a imagem do Kakashi-san. Lembre-se que você pode colocar uma de sua preferencia, só basta carregar e substituir “Kakashi” por “NOME_DA_IMAGEM”.

t_Kakashi = Content.Load<Texture2D>(“Kakashi”);

7. Inicialize p_Kakashi, para fazer isso adicione logo abaixo:

p_Kakashi = new Vector2( 0 , 150);

8. Agora dê um valor para a velocidade da imagem

v_Kakashi = 2;

Isso significa que a velocidade dele será 2 pixels por atualização da tela.

9. No método Update() adicione a lógica. Veja como o mesmo irá ficar:

protected override void Update(GameTime gameTime)
{

if (v_Kakashi > 0) // Se a velocidade for maior que 0, ou seja positiva, significa que está indo para a direita
{
if (p_Kakashi.X < (Window.ClientBounds.Width – t_Kakashi.Width) – v_Kakashi)
{
p_Kakashi.X += v_Kakashi;
}
else
{
v_Kakashi *= -1;
}
}
else if (v_Kakashi < 0) // Se a velocidade for menor que 0, ou seja negativa, significa que está indo para a esquerda
{
if (p_Kakashi.X > 0)
{
p_Kakashi.X += v_Kakashi;
}
else
{
v_Kakashi *= -1;
}
}

base.Update(gameTime);
}

Vou explicar a lógica envolvida neste loop que faz a mágica para nós. Siga o raciocinio:

Se estiver indo para a direita, ou seja, a velocidade é positiva…

if (p_Kakashi.X < (Window.ClientBounds.Width – t_Kakashi.Width) – v_Kakashi)
{
p_Kakashi.X += v_Kakashi;
}

Se a posição X do Kakashi for menor que a largura da tela – a largura da imagem do Kakashi – a velocidade, ele avança 2 pixels no caso.

Nota: Lembre-se que no 2D começa-se a contar do canto esquerdo-superior, se você esqueçer de considerar a largura da imagem, a imagem vai sair da tela até o canto superior-esquerdo atingir o ponto desejado.

Então lembre-se que o espaço ocupado por uma imagem é igual à:

EspaçoTotal.X = Posicao.x + Imagem.Largura

EspaçoTotal.Y = Posicao.y + Imagem.Altura

Voltando…

else
{
v_Kakashi *= -1;
}

Agora se já estiver no limite da tela, a velocidade é invertida. Lembre-se que o sinal pode ser invertido multiplicando-se um valor por –1.

Agora a velocidade é –2, ou seja, é menor que 0, portanto está indo para a direita:

if (p_Kakashi.X > 0)
{
p_Kakashi.X += v_Kakashi;
}

Se sua posição X for maior que 0 ele irá “adicionar” a velocidade, mas no caso, a velocidade é –2, então na verdade irá subtrair 2 pixels da posição.

Agora se a posição é 0, então novamente se inverte a velocidade.

Terminada a lógica envolvida.

10. No método Draw() simplemente desenhe a imagem em sua respectiva posição. Por questões de estética, mude a cor de fundo para White (Branco). Veja como ficou seu método Draw:

protected override void Draw(GameTime gameTime)
{

GraphicsDevice.Clear(Color.White);

spriteBatch.Begin();

spriteBatch.Draw(t_Kakashi, p_Kakashi, Color.White);

spriteBatch.End();

base.Draw(gameTime);
}

Pressione F5 para realizar o Debug e veja o programa em ação!

cenaFinalDia6

Obrigado! E até a próxima!

Anúncios

Written by rafaelangeline

agosto 30, 2009 às 2:23 pm

Publicado em Tutoriais, XNA

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: