Criando jogo de Pong (PARTE I) [ XNA ]

Olá galera, neste tutorial (dividido em aproximadamente 5 partes), veremos passo a passo como criar nosso primeiro jogo 2D de maneira bem simples e completa. Está é a primeira parte do nosso tutorial e nós estamos aprendendo como criar jogos com o XNA, por isso iremos pegar de leve na Orientação a Objetos para vocês entenderem de maneira simples como um jogo funciona. Nessa série de tutoriais, vocês vão ter a oportunidade de rever como criar um projeto, como adicionar imagens e desenhá-las na janela, assim como controlar um objeto pelo teclado, colocar texto e som no jogo.

Como primeiro jogo, nós iremos fazer um Pong por ser um jogo simples, com poucos movimentos e de lógica fácil para iniciarmos. Para quem não conhece o jogo vamos fazer uma rápida introdução de como é o jogo e seu funcionamento.

Conhecendo um pouco mais sobre o Pong

O jogo Pong possui uma grande importância para a história do videogame, pois foi simplesmente o primeiro videogame lucrativo da história dando início a uma indústria que movimenta bilhões. O videogame Pong (figura 1), foi criado por Nolan Bushnell e Ted Dabney, foi instalado num console ligado a um monitor e era movido a moedas.

Para testar sua nova criação, os inventores deixaram a máquina em um bar em São Francisco, Califórnia. No dia seguinte, quando chegaram tiveram uma surpresa, a máquina estava lotada de moedas. Aquelas moedas mudaram o ponto de vista das pessoas, fazendo surgir uma grande indústria. Os seus criadores perceberam que não era interessante vender a idéia para alguém, então no dia 27 de junho de 1972 foi fundada a empresa Atari. O objetivo do jogo é acertar a bola com sua raquete (barra vertical) e lançar para o campo adversário, marcando ponto quando a bola passa pela outra raquete.


Iniciando o projeto do jogo

Vamos inciar nosso projeto do tutorial, criando um novo projeto com as seguintes informações:

• Project Type: XNA Game Studio 4.0
  
• Templates: Windows Game (4.0)
  
• Name: TutorialPong
  
• Location: Fica a escolha de cada um, eu gosto de deixar na pasta padrão de projetos do Visual Studio
  
• Solution Name: TutorialPong
  
• Create directory for solution: Deixe marcado
  
  

Agora clique em OK. A Figura 3 exibe a tela com as informações.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Adicionando o conteúdo ao projeto

Após criar o novo projeto, já podemos abaixar as imagens que vamos utilizar no nosso jogo e adicionar ao projeto. Clique aqui para adiquirir as imagens do projeto.

Para obtermos uma organização legal de nossas imagens, vamos adicionar uma nova pasta, para isso clique com o botão direito do mouse na pasta de conteúdo do seu projeto, no meu caso é a pasta TutorialPongContent (“Content -> Add -> New Folder”) e de o nome de Textures para essa nova pasta. Todas as imagens que usaremos no nosso projeto devem ser armazenadúdos nesta pasta Textures. (Figura 3)

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Figura 3. Criando uma nova pasta para organizar as texturas

Para adicionarmos agora as imagens ao projeto, clique com o botão direito na pasta Textures que criamos, agora Add -> Existing Item e selecione as imagens que você salvou para poder adicionar. Uma imagem do Solution Explorer depois de adicionar as imagens pode ser visto na Figura 4.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Carregando e desenhando a imagem de fundo (background)

Com nossas imagens já adicionadas ao projeto dentro da pasta Textures, podemos enfim, começar a programar um pouco para ver alguns resultados. Para isso, abra o arquivo Game1.cs clicando sobre ele duas vezes. Com o arquivo aberto precisamos declarar então uma variável que será responsável pela nossa imagem de fundo, essa variável é do tipo Texture2D e receberá o nome de background. Essa variável será declarada abaixo de SpriteBatch spriteBatch que é utilizada para desenhar todas nossas imagens. Além disso altera algumas informações do jogo como, tamanho da janela e título, conforme o código abaixo.



Agora precisamos carregar nossa imagem de fundo, e para isso precisamos utilizar o método Load do objeto Content, e isso deve ser feito dentro do método protected override void LoadContent(). Logo abaixo de spriteBatch = new SpriteBatch(GraphicsDevice), vamos carregar nossa imagem da seguinte forma.



Já que carregamos nossa imagem de fundo, agora só falta desenhar ela na tela. Para isso vamos usar a classe SpriteBatch spriteBatch, e faremos isso utilizando o método protected override void Draw(GameTime gameTime). O comando GraphicsDevice.Clear(Color.CornflowerBlue), limpa nossa tela pintando ela com aquela cor azul do Windows. Logo abaixo dela precisamos acrescentar o bloco que nos permite desenhar na tela, ou seja, tudo que vamos desenhar tem que estar entre eles Begin() e End().

No método Begin(), podemos passar como parâmetro o SpriteBlendMode.AlphaBlend, que nos permite desenhar as imagens com transparência.

A imagem de fundo será desenhada utilizando o método Draw() e passaremos como parâmetros a textura, posição de desenho (0, 0) e a cor que por default é branco.



Se não nos esquecemos de nada, podemos rodar nossa aplicação e ver o resultado da nossa janela com a imagem de fundo, caso não tenha erros. A tela final pode ser visto na Figura 5.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]


Ressalto que :
Escrito por Kleber Andrade - Ponto V

O XNA?

Sim

Última edição por Freza em Dom 4 Mar 2012 - 20:28, editado 1 vez(es)

Tae , desculpa por não ter postado primeiro.