www.devtuts.com.br

Espero que aprecie o conteudo, que mesmo ainda sendo pouco, está sendo feito com muita dedicação!

Peço também o apoio ao site que pode ser dado com a compra de uma conta premium que dá diversos tutoriais exclusivos!

Obrigado a todos do devBR! Nos vemos no novo site!

Obrigado!

Como foi dito acima, falta bem pouco mesmo! Estamos trabalhando duro para fornecer conteudo de primeira!

Será lançado o site e junto com ele, muitas aulas Gratuitas e Pagas.

Para visualizar as aulas pagas, deve-se pagar uma taxa mensal de 25,00 reais. Pagamento realizado através do PagSeguro

Mas, quem comprar até dia 10/12/2009 ganha o mês de Janeiro de Graça!

Aguardem muitas novidades!

Obrigado!

Descrição: Você irá aprender a reproduzir um video usando o XNA 3.1. De forma simples.

LINK DOWNLOAD ARQUIVO DE VIDEO (.WMV) DE EXEMPLO

LINK DOWNLOAD DA VIDEO-AULA

Até e bom feriado!

Encontrei uma hospedagem que vale a pena. Hospedei a primeira video-aula e ficaria agradecido se você comentar o que achou…

Pode ser aqui mesmo!

Segue o Link para a Video-Aula: Clique Aqui

Lembrando que o site ainda está em desenvolvimento =D

Obrigado! Até!

Estou migrando para um servidor pago, onde poderei colocar as video-aulas e tudo mais…

Esse processo deve levar alguns dias ( + ou – uns 2 dias), então peço paciencia =D

Obrigado! E continue a nos visitar.

Por isso peço que vote na enquete logo ao lado ————->

Agradeço a colaboração de todos!

Posso dizer que se você não souber matemática ou não ter interesse em aprender, não programará um bom jogo.

O motivo de tal afirmação ser verdadeira, é que na programação, tudo é lógica e matemática, a linguagem é apenas um meio para o programador se “expressar” para o computador.

Matemática em Jogos 2D

Vou citar aqui o porque de você não poder programar um jogo 2D sem a matemática.

Citarei como exemplo, um jogo clássico, Sonic, mas os conceitos se aplicam a qualquer jogo. Imagine o seguinte:

O computador coloca uma imagem em coordenadas especificadas por você, e advinhe o que você usa para posicionar um simples desenho na tela?

A resposta é Coordenadas, dadas pelo ponto Horizontal (X) e pelo ponto Vertical (Y). Sem a matemática você não pode nem mesmo posicionar um desenho na tela.

Agora vamos partir para algo mais complexo que simplesmente colocar uma imagem na tela, vamos falar de Gravidade, Aceleração e Velocidade, Fricção (presente na maioria dos jogos)!

Começemos pela Gravidade:

Gravidade é a força que puxa todos os corpos para o baixo (simplificadamente dizendo). Na Terra este valor é geralmente arredondado para 10 m/s².

Então significa que, em um jogo, você deve deixar o Personagem cair até que colida com algo. Nossa! Falamos de subtração de valores, ai entra a matemática, já que você deverá ter que fazer isso:

Enquanto não colidiu com algo:

Subtraia (No caso das coordenadas do Computador, deve-se Adicionar) X_de_Gravidade da Posição atual do Personagem.

Agora vamos falar de Aceleração e Velocidade:

Velocidade é o quanto deverá ser adicionado ( se for positiva ) ou subtraida ( se for negativa ) da posição atual do jogar. Isso óbviamente inclui a matemática.

A Aceleração é o quanto sua velocidade irá aumentar ou diminuir, por exemplo, se sua velocidade é 10 e sua aceleração é –3, então você está parando, porque sua velocidade irá ir diminuindo de 3 em 3.

Então, não há movimento em jogo, sem a Matemática!

Agora vamos falar de Fricção:

A Fricção é uma força que puxa em direção contraria ao movimento de um corpo. É essa força que pára um carro, onde há fricção entre a Pastilha do Freio e o Disco.

A fricção geralmente é maior ou igual que 0 e menor ou igual que 1 (Lembrando que 1 significa que não há nenhuma fricção e 0 significa que há fricção total. Por exemplo:

Temos uma velocidade que é igual à 10, e um valor de fricção igual à 0. Então a velocidade final é 10 * 0 = 0! Ou seja, não há movimento.

Agora temos uma velocidade que é igual à 10, e um valor de fricção igual à 1. Então a velocidade final é 10 * 1 = 10. Não há fricção.

Agora, ao usar, por exemplo, um valor de fricção igual à 0.9, teremos 10 * 0.9 = 9, houve uma diminuição de 10%, então há fricção!

Você deve ter conseguido entender que sem matemática, não há jogos 2D. Agora vamos dar uma olhada nos jogos 3D.

Matemática em Jogos 3D

Em jogos 3D a matemática é intensamente, supremamente, e qualquer outro termo exagerado, indispensável! É impossivel fazer um jogo 3D sem usar a matemática.

A razão é que sem matemática, não há 3D, pois o computador simula o 3D em nossa tela, e para fazer isso, faz uso intenso de matrizes e não podemos nos esqueçer dos vetores também.

Matrizes e Vetores são elementos que apareçem sempre em um jogo 3D.

Os vetores marcam a posição dos pontos dos modelos 3D, além da posição, aceleração, velocidade, direção.

Para poder dizer ao computador a posição do observador e a projeção ( que inclui a perspectiva e tamanho do mundo 3D ) usa-se matrizes! Que é matemática pura.

Para rotacionar, transladar (mover) e escalar um modelo, usa-se multiplicações de matrizes.

Para se obter a direção de um corpo rotacionado e move-lo nesta direção, usa-se calculo vetorial e transformações com matrizes. Além disso existem os Quatérnios, que são estruturas matemáticas que ajudam ao realizar rotações de modelos 3D.

Então podesse concluir que sem a matemática, não há jogos digitais!

Conclusão:

Se você quiser programar jogos, mas não gostaria de ter que aprender matemática, então esqueça.

Abraços, Rafael S. Angeline

Antes de começar, queria pedir para participarem da enquete ai ao lado, seria muito bom ter a sua opinião.

Vamos usar uma imagem pequena para testes. Salve a seguinte imagem:

Agora você deve adicionar a imagem na pasta Content. (Você já deve saber fazer isso. Se ainda não sabe, veja o seguinte tutorial: Clique! )

Após ter adicionado a imagem acima. Nós devemos criar o que já foi abordado no ultimo tutorial.

Ou seja, após criar um novo projeto, devemos criar uma variavel Vector2 (Posição) e Texture2D (Imagem) e por ultimo uma coisa nova, uma váriavel KeyboardState.

O que é KeyBoardState?

Esta é a classe que irá permitir pegar o estado do teclado toda vez que precisarmos!

Então nosso topo da classe (antes do construtor) ficará assim:

public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;

Vector2 Posicao;
Texture2D Textura;
KeyboardState estadoTeclado;

public Game1()
{

…

A parte em negrito é o que você deverá adicionar, o que não está em negrito é só para você se localizar =D

Ok, vamos carregar a imagem e inicializar as posições no método LoadContent().

protected override void LoadContent()
{
// Create a new SpriteBatch, which can be used to draw textures.
spriteBatch = new SpriteBatch(GraphicsDevice);

Textura = Content.Load<Texture2D>(“kakashinho”);
Posicao = new Vector2(100, 100);

// TODO: use this.Content to load your game content here
}

Lembrando que o que está em negrito é o que deve ser digitado, o resto é só para se localizar.

Agora a novidade vem no método Update(). Não há segredos! Faremos o personagem se mover para a direita – esquerda E cima – baixo.

Antes vou passar a lógica para você, confira:

-> Pega o ultimo estado do teclado

-> Se o botão para a Direita estiver sendo pressionado

– Adiciona 2 pixels na posição do personagem em X

-> Mas se o botão para a Esquerda estiver sendo pressionado

– Diminui 2 pixels da posição do personagem em X

-> Se o botão para Cima estiver sendo pressionado

– Diminui 2 pixels da posição do personagem em Y

-> Mas se o botão para Baixo estiver sendo pressionado

– Aumenta 2 pixels na posição do personagem em Y

Agora vamos passa isso para o código. No método Update() digite o seguinte:

protected override void Update(GameTime gameTime)
{
estadoTeclado = Keyboard.GetState();

if (estadoTeclado.IsKeyDown(Keys.Right) == true)
{
Posicao.X += 2;
}
else if (estadoTeclado.IsKeyDown(Keys.Left) == true)
{
Posicao.X -= 2;
}

if (estadoTeclado.IsKeyDown(Keys.Up) == true)
{
Posicao.Y -= 2;
}
else if (estadoTeclado.IsKeyDown(Keys.Down) == true)
{
Posicao.Y += 2;
}

base.Update(gameTime);
}

É muito simples, para pegar o estado Atual do teclado você deve usar o seguinte método:

estadoTeclado = Keyboard.GetState();

Ele irá retornar um Array com as teclas que estão sendo pressionadas e então passará o Array para “estadoTeclado” no nosso caso.

Tendo isso em mãos é só usar if’s e else’s para fazer as verificações.

Veja os métodos de uma váriavel KeyboardState e um exemplo de cada:

OBS: Ambas as funções retornam true ou false, então é fácil usa-las nos IF’s e ELSE’s.

Exemplo IsKeyDown:

if (estadoTeclado.IsKeyDown(Keys.Up) == true)

// Verifica se a tecla está pressionada

Exemplo IsKeyUp:

if(estadoTeclado.IsKeyUp(Keys.Up) == true)

// Verifica se não está sendo pressionada

Voltando…

Agora voltando ao exemplo … Só falta o código para desenhar na tela. Digite o seguinte no método Draw().

protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.White);

spriteBatch.Begin();

spriteBatch.Draw(Textura, Posicao, Color.White);

spriteBatch.End();

base.Draw(gameTime);
}

Teste o programa (F5) e confira os resultados!

Controles: Setas para Direita, Esquerda, Cima e Baixo.

Irei tratar das teclas possiveis em um próximo tutorial, mas você pode explorar as possibilidades substituindo Keys.Up por Keys.A ou Keys.B. Acho que você já captou a mensagem =D

Até a próxima! Abraços.

Vamos lá. Vou citar as que ainda dá tempo de se inscrever, então é melhor correr!

1. 2BeeGames

- Data Final para Submissão de Jogos: 15 de Setembro de 2009 (CORRE!!!)

- Prêmio: $10.000 para o grande vencedor. $5.000 para o favorito da comunidade. E a possibilidade de contrato e publicação em consoles (me cheirou à XNA =))

- Mais detalhes no site: Clique aqui.

2. Concurso do Perdido – BrMaker

- Comentários: O concurso é relativamente novo. Mas o prêmio até que é bom (pelo menos não é só troféu virtual =D).

- Prêmio: Ainda não foi decidido ao certo. Mas irá ser uma das seguintes opções, sendo a primeira a mais provavel.

1º Opção: Prêmio de R$150,00 para o Campeão

2º Opção: Prêmio de R$75,00; R$50,00; R$25,00 respectivamente para 1º, 2º e 3º colocado.

- Mais detalhes no tópico: Clique Aqui.

Conclusão.

Sei que não foi o grande Post aqui da DevBR mas é interessante se manter antenado com os concursos para faturar uma grana, certo?

Irei citar mais competições e seus detalhes, como a Imagine Cup, Xna Challenge (Brasil) e a Dream Build Play quanto estiverem mais próximas =)

Até a próxima e boa sorte aos participantes!

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:

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.

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!

Obrigado! E até a próxima!