segunda-feira, 2 de julho de 2012

[Tutorial] [XNA] Jogo de Plataforma - Parte 1

Quando falamos em Jogos de Plataforma e ambientes 2D, é bem impossível não lembrar dos jogos do famoso encanador chamado Mario. ( Afinal se você não se lembrou do Mario, provavelmente você é um poser de jogos HUAUHAUHAH ) Abaixo um breve vídeo, do nosso amiguinho youtube, com um exemplo de jogada no Super Mario:




Observando a jogabilidade podemos ver que o Mário se movimenta pela fase, a todo momento a câmera está focalizada nele. O Mário pode andar, correr, pular, pular sobre inimigos, crescer com cogumelo, ganhar poderes com uma flor, ganhar vida com cogumelo, bater em tijolos, entrar por canos, por fim ganhar pontuação e terminar a fase.


Para este tutorial iremos desenvolver a classe Camera2D. Nesta classe criaremos uma câmera capaz de acompanhar o nosso jogador durante a sua movimentação pela fase. Como esse é um dos nossos primeiros tutoriais de desenvolvimento, ensinarei criar um novo projeto e a classe Camera2D. Abra o Visual C# 2008, e crie um novo projeto baseado em XNA, dê o nome ao projeto de MeuPrimeiroJogo, e clique okay. Como na imagem abaixo:




Agora no Solution Explorer, clique com o botão direito sobre o nome do seu projeto, vá até o submenu Add, e por fim em Class. Na janela que abrir digite Camera2D e clique em okay.




Antes de desenvolver a classe Camera2D, vamos identificar alguns atributos e métodos que toda câmera possui. Vamos analisar o funcionamento de uma câmera... Ela possui uma posição, um tamanho de resolução e um limite de tela. A partir dessas informações identificamos os seguintes atributos da nossa classe:
  1. Posição da Câmera 2D - Refere-se a posição nos eixos X e Y da tela.
  2. Limites da Tela - Refere-se ao limites do personagem, para que este seja seguido pela câmera.
  3. Tamanho da Tela - Refere-se as dimensões em pixels de altura e largura da tela.
Identificado os atributos, vamos verificar as possibilidades de ação de uma câmera. Como ela é um objeto do jogo que precisa ser inicializador por tanto é necessário seu construtor. Além disso a câmera precisa seguir o objeto-alvo ( no caso o jogador ) na tela, e se movimentar pelo espaço do jogo, junto com o jogador. Agora que desenvolvemos uma teoria sobre a Camera2D começaremos a desenvolver nosso código da classe. Inicialmente, como iremos trabalhar com os gráficos da tela, devido nosso objeto ser uma câmera, precisamos fazer referências ao framework que iremos utilizar, por isso adicionamos as seguintes linhas os inicio do nosso código


using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

Agora já podemos começar a produção da nossa classe dentro do bloco a seguir:

public class Camera2D 

    // Digitar dentro desse bloco o código da nossa classe 


Vamos começar declarando nossos atributos da classe:

// Definição da posição da Camera2D no ambiente do jogo. 
// Vector2 é um tipo de dado que armazena em Vector os valores de X e Y. 
// Definimos a posição inicial como Zero. 
public Vector2 posicaoCamera = Vector2.Zero; 
// Definição dos limites da Camera2D no ambiente do jogo. 
private Vector2 limites; 
// Definição das dimensões da tela do jogo. 
private float widthTela, heightTela; 


Excelente ;) Criamos os atributos da nossa classe, a posicaoCamera é um atributo público pois pode ser acessado por quaisquer classes do jogo. Já o limites, widthTela e heightTela, são atributos somente para a Camera2D, portanto são privados. Agora vamos desenvolver os métodos disponíveis. 


// Método que constrói a Camera2D ao ser inicializada 
// Recebe como parâmetro o dispositivo gráfico e a 
// posição inicial dela no ambiente 
public Camera2D (GraphicsDeviceManager graphics, Vector2 posicaoInicial) 

    // Define o tamanho da tela conforme a viewport do usuário 
    this.widthTela = graphics.GraphicsDevice.Viewport.Width; 
    this.heightTela = graphics.GraphicsDevice.Viewport.Height; 
    // Define a posição inicial da Camera2D na tela 
    this.posicao = posicaoInicial;
    // Define os limites para X e Y como a metade da tela 
    this.limites = (widthTela * 0.5f, heightTela * 0.5f); 



// Método para seguir o objeto-alvo atualizando a 
// posição da Camera2D conforme a posição do objeto 
public void Atualizar(Vector2 posicaoAlvo) 

    // Se a posição X do alvo for maior que o limite X da Camera2D 
    if (posicaoAlvo.X > limites.X) 
    
        // Atualiza a posição da Camera2D em X 
        this.posicaoCamera.X = posicaoAlvo.X - limites.X; 
        // Se a posição Y do alvo for maior que o limite Y da Camera2D 
        if (posicaoAlvo.Y > limites.Y) 
        
            // Atualiza a posição da Camera2D em Y 
            this.posicaoCamera.Y = posicaoAlvo.Y - limites.Y; 
        
    



// Método que transforma a posição de cada objeto na tela 
// na direção oposta para qual a Camera2D se locomove e 
// retorna a nova posição do objeto na tela 
public Vector2 Transformar(Vector2 posicaoAntiga) 

    return new Vector2 ( posicaoAntiga.X - posicaoCamera.X, 
                                    posicaoAntiga.Y - posicaoCamera.Y); 



Muito bem o/ agora criamos nossos métodos e nossa Camera2D está pronta para ser utilizada em nosso projeto. Como ainda não temos um objeto em nosso jogo, a câmera não será implementada agora. Mas nos próximos tutoriais conforme vamos progredindo em nossa criação aprenderemos como implementar a câmera com um objeto-alvo. Aguardo você e até a próxima. ( Um gif básico para distrair HUAUHAUHAHHUAHUHAUHUA )



2 comentários:

  1. pq ta dando erro nesta parte : this.posicao = posicaoInicial;
    // Define os limites para X e Y como a metade da tela
    this.limites = (widthTela * 0.5f, heightTela * 0.5f);

    ResponderExcluir
  2. ta dando erro , mas ta rodando, não sei porque.. aqui também gero o erro.

    ResponderExcluir