terça-feira, 14 de outubro de 2008

Tutorial - Nosso Primeiro Jogo 2D - Parte 1

Neste tutorial veremos, passo a passo, como criar um jogo 2D simples. Este tutorial foi baseado nos videos Begginers Guide 2D encontrados no site creators.xna.com.

Esta é a primeira parte do nosso tutorial de como criar um jogo 2D com o XNA Game Studio. Aqui vamos rever como criar um novo projeto e como adicionar imagens ao nosso projeto. Vamos ver também como carregar e desenhar na tela uma imagem de fundo no nosso jogo.

No nosso jogo teremos basicamente um navio, seus mísseis e aviões. O objetivo do jogo é, controlando o canhão do navio, conseguir acertar o maior número de aviões que passarem voando na tela.

Criando um Novo Projeto

Primeiramente vamos começar criando um novo projeto. No Visual C# 2005 Express Edition vamos no menu File->New Project..., ou apenas Ctrl+Shift+N. Selecionaremos como Project Type: XNA Game Studio 2.0 e como Template: Windows Game. O Name do projeto eu chamei de Belonave e procurando na Wikipédia temos a seguinte definição: "Belonave é a designação de qualquer tipo de embarcação, fluvial ou marítima, para utilização em combate.", o que tem muito a ver com nosso jogo. Também selecionaremos o Location que acharmos melhor para armazenarmos nosso projeto em nosso PC. Em Solution escolheremos a opção Create a new Solution, deixaremos a opção Create directory for solution marcada e clicaremos em OK.


Salvando as Imagens e Adicionando ao Projeto

Agora que criamos nosso novo projeto, já podemos ver no Solution Explorer os arquivos que o compõem. Ainda não modificaremos nenhum arquivo. Antes vamos baixar e adicionar ao projeto as imagens que usaremos em nosso jogo. Clique em cada imagem abaixo e, com o botão direito do mouse, salve elas em seu PC com os seguintes nomes:

backgroundTexture:

shipCannon:

cannonMissile:

enemyPlane:



Para organizarmos melhor nossas imagens, após telas salvo em nosso PC, vamos voltar ao Visual C# 2005 Express Edition e vamos clicar com o botão direito do mouse em Content, no Solution Explorer, Add->New Folder e nomearems essa nova pasta como Sprites. Mais uma vez na Wikipédia encontramos a seguinte definição: "Sprite é um objeto gráfico bi ou tridimensional que se move numa tela sem deixar traços de sua passagem.". Nessa pasta ficarão armazenadas todas as imagens que usaremos em nosso projeto.
Clicando com o botão direito do mouse na pasta recém criada, no Solution Explorer dentro de Content, Add->Existing Item e vamos ao local onde salvamos nossas imagens. Selecionaremos e adicionaremos cada uma delas.


Carregando e Desenhando a Imagem de Fundo

Depois que já tivermos todas as imagens adicionadas ao projeto na pasta Sprites vamos começar a modificar nosso código. Caso ainda não esteja aberto, abriremos o arquivo Game1.cs clicando duas vezes nele no Solution Explorer. Com o arquivo aberto, procuraremos a classe Game1 dentro dele. Abaixo de GraphicsDeviceManager graphics; iremos declarar a variável que será responsável pela imagem de fundo do nosso jogo. Essa variável será do tipo Texture2D e se chamará backgroundTexture. Abaixo de nossa variável backgroundTexture vamos declarar outra variável, que será responsável por definir a área máxima que um objeto poderá ter. Esta será do tipo Rectangle e a chamaremos de viewportRect. Essas variáveis que acabamos de declarar ficaram acima do SpriteBatch spriteBatch; que é uma classe do XNA framework que utilizaremos para desenhar todas as imagens que usamos nesse tutorial.


Para carregarmos nossa imagem de fundo no nosso jogo, vamos ao método protected override void LoadContent() que como vimos em nosso primeiro tutorial, é um método que é chamado quando o jogo inicia e ele carrega todas as imagens que precisamos durante o jogo. Logo abaixo de spriteBatch = new SpriteBatch(GraphicsDevice); vamos carregar nossa imagem de fundo na nossa variável backgroundTexture. Para isso vamos usar o método Load<>() da classe Content Manager.


Ainda no método protected override void LoadContent(), abaixo da atribuição que acabamos de fazer para carregar nossa imagem de fundo, vamos instanciar nosso viewportRect atribuindo a ele as nossas medidas da tela começando em (0, 0) e termonando em (width, height) da Viewport.


Agora que a carregamos, desenharemos a nossa imagem de fundo na tela. Para isso usaremos a classe SpriteBatch spriteBatch; e nosso Rectangle viewportRect; que acabamos de inicializar. Vamos então ao método protected override void Draw(GameTime gameTime). Como vimos no nosso primeiro tutorial o método Draw() é o responsável por redesenhar a tela a cada quadro. É nele que a tela é limpa e que desenhamos cada objeto que desejamos que apareça no nosso jogo. Abaixo do graphics.GraphicsDevice.Clear(Color.CornflowerBlue); vamos acrescentar o bloco que nos permite desenhar na tela.
Iniciamos com o método Begin() do spriteBatch, desenhamos com o método Draw() do spriteBatch e ao terminarmos finalizamos com o método End() do spriteBatch. No método Begin() podemos passar como parametro o SpriteBlendMode.AlphaBlend que nos permite desenhar imagens com transparencia. No método Draw() iremos passar como parametros nossa textura, um retangulo que especifica onde a sprite será desenhada, e uma cor que por default estamos usando o branco. O método End() não recebe parametros.


Se não tivermos esquecido de nada, podemos rodar nossa aplicação sem erros e conseguiremos ver a janela do nosso jogo já com a nossa imagem de fundo no lugar.


Resumo

Nesta primeira parte do nosso tutorial de como criar um jogo 2D com o XNA Game Studio revimos como criar um novo projeto e como adicionar imagens ao nosso projeto. Vimos como carregar e desenhar na tela uma imagem de fundo no nosso jogo.

Na segunda parte do nosso tutorial de como criar um jogo 2D com o XNA Game Studio veremos como criar uma nova classe para representar os outros objetos do nosso jogo. Com essa classe iremos carregar o canhão do navio no nosso projeto. Iremos também desenha-lo na tela e faze-lo girar com os comandos do teclado ou de um controle do xbox360.


14 comentários:

Unknown disse...

que tou aprendendo pakcete!

Anônimo disse...

legal !!!

Anônimo disse...

estou tentando fazer essa parte mas pq o C# num acha a imagem?
Sempre da file not found, alguem pode me ajudar

Anônimo disse...

Não sei se é essa a dúvida, mas se a imagem estiver em outra pasta você coloca com duas barras, exemplo:

this.mySoundEffect = this.Content.Load(menor)SoundEffect(maior)("Sons\\Musica");

obs. o (menor) e (maior) é porque ele pensa que isso é uma tag, veja o comando mesmo no post que você entende.

Anônimo disse...

bom estava com o mesmo problema que vc, dava file not found na imagem, mais isso era pq as imagens estavaum na pasta "imagens" que criei no solution explorer do c#, e na hora de add essa linha :

" imagemfundo = Content.Load Texture2D ("Sprites\\texturafundo");"

eu deixei "Sprites\\texturafundo",
ao inves "imagens\\texturafundo",

o conteudo do parenteses se refere ao diretorio em que se encontra as imagens

pede parecer obvio para algumas pessoas, mas eu como exemplo quebrei a kbç p descobrir isso

Mantega disse...

eu estava com o mesmo problema...o modo q achei para resolver isso foi:

coloque sua pasta Sprites (ou o nome q vc deu) dentro da pasta Content (no solution explorer)

e no código, na linha antes do content.load adicione o seguinte:

Content.RootDirectory = "Content"

Anônimo disse...

A imagem ficou achatada no eixo vertical. Será porque estou usando o XNA 4.0 e deve ter alterado algum comando? Gostaria de receber alguma ajuda. Obrigado.

Anônimo disse...

Complementando a mensagem acima, medi a imagem capturada na tela e elas está com as seguintes dimensões: 800 x 480 (é como se misturasse as duas resoluções padrão: 800x600 com 640x480. Alguma idéia?

Anônimo disse...

como eu nao achei o o botao solution explorer eu pensei q bastava criar umas pasta dentro da pasta content mas quando eu testava nao encontrava a imagem, so depois encontrei o botao solution explorer mas nao dava pra criar a pasta com o nome spites msm depois de eu ter deletado a q eu tinha criado antes, entao tive q criar com o nome sprit e mudar no codigo tbm para ("Sprit\\backgroundTexture")
so ai deu certo mas tive q quebrar a cabeça com isso ^^

Anônimo disse...

È o meu erro corrigi assim ao envés de dei-char assim> Content.Load(Sprites\\"backgroundTexture");
eu deixei assim > ("backgroundTexture");

Patrick Felix disse...
Este comentário foi removido pelo autor.
Patrick Felix disse...

E ae Leo. Legal saber que também é estudante de Eng.Computação lá da PUC.

Muito maneiro seu blog. Vou visitá-lo mais vezes com certeza. Ótimo trabalho sobre essa maravilhosa framework.

Abração.

P.s.: pessoal que está tendo problemas com a imagem, dêem uma olhada se a pasta está dentro de 'Content' no Solution Explorer.

Anônimo disse...

eu to usando a versao 4.0 Não sei como fazer a spriteBatch.Begin(BlendState.Opaque);

Pode me ajudar??

Anônimo disse...

Aqui na última linha que foi add um erro apareceu no SpriteBlendMode,apresenta um erro no código,dizendo que não está naquele contexto.O que poder ser?