Apostilas I, II e III

Transcrição

1 Apostilas I, II e III Autor: Lucas Mousinho da Fonseca (lucmousinho@gmail.com)

2 Tópicos da apostila I e II: Introdução O que é o C#? Orientação a Objetos Máquina Virtual Estrutura de um programa em C# com Hello World Tipos por Valores Tipos por Referência Tipos suportados em um namespace XNA Game Programming Arquitetura de um programa em XNA Game Loop Planejamento de um jogo Funcionalidades básicas do XNA Criando um projeto XNA Content Pipeline Métodos de inicialização e finalização GameTime Sistema de coordenadas 2D de uma tela Texturas e Sprites Escrevendo textos na tela Controlando um sprite Debug do código Colisão entre objetos Colisão entre sprites Colisão Bouding Box Colisão Bounding Sphere Músicas de fundo e efeitos sonoros Músicas de fundo e efeitos sonoros Dicas para criação de um projeto Dicas para criação de um projeto Fluxo de telas Criação e gerenciamento do fluxo de telas Técnicas de Scrolling Técnica de Side Scrolling Técnica de Parallax Scrolling Colisão por Pixels Animação 2D Colisão por Pixels Animação 2D 2

3 Construção de fases Definição de tiles Descrição do funcionamento da técnica Criação do projeto Utilização de arquivos.xml Contruindo mapas com o XNA Tile Map Editor Câmera 2D Criação de uma Câmera 2D Sistema de Save e Load Salvar e carregar dados de um arquivo Física Movimento Retilíneo Uniforme (MRU) Lançamento vertical com movimento retilíneo uniformemente variado (MRUV) Lançamento oblíquo (deslocamento parabólico) 3

4 Nota: Esta apostila foi elaborada e escrita por Lucas Mousinho da Fonseca (lucmousinho@gmail.com), com exemplos criados pelo respectivo autor e (alguns) baseados em tutoriais encontrados nos sites e livro abaixo: Websites: Livro: Beginning XNA 3.0 Game Programming: From Novice to Professional 4

5 Introdução 5

6 O que é o C#? C# (ou C Sharp) é uma linguagem de Programação Orientada a Objetos (POO) fortemente tipada, desenvolvida pela Microsoft como parte da plataforma.net. A sua sintaxe orientada a objetos foi baseada no C++, mas inclui muitas influências de outras linguagens de programação, como Object Pascal e Java. (Wikipedia.org) Observação: Antes de começar, certifique-se de ter instalado corretamente a versão mais recente do Visual C# Express junto as suas dependências (pode ser encontrado para download gratuito em Em nossas aulas utilizaremos sempre esta IDE, sendo no momento a única que permite total integração com o framework XNA. Orientação a Objetos: Assim como outras linguagens (Java, C++, etc), o C# é uma linguagem orientada a objetos e oferece suporte aos seus três recursos básicos da O.O. : Encapsulamento: O ato de empacotar ao mesmo tempo dados e objetos é denominado encapsulamento. O objeto esconde seus dados de outros objetos e permite que os dados sejam acessados por intermédio de seus próprios métodos. Isso é chamado de ocultação de informações. O encapsulamento protege os dados do objeto do uso arbitrário e nãointencional; O encapsulamento é o resultado de ocultar do usuário os detalhes da implementação de um objeto; O encapsulamento é importante porque separa a maneira como um objeto se comporta da maneira como ele é implementado; Segue a definição de como implementar os conhecimentos ou ações de uma classe sem informar como isto é feito. Herança: É um relacionamento que pode ser realizado entre classes, permitindo a extensibilidade e reusabilidade de rotinas e dados já existentes (variáveis e funções). As classes podem ser divididas em dois tipos: Subclasse: uma classe que é um subtipo de uma ou mais classes. Como tal, ela herda todas as características de suas superclasses. Em outras palavras, todas as características de uma classe poderão ser reutilizadas por suas subclasses. Se a classe B herda de A, então dizemos que B é uma subclasse de A. 6

7 Superclasse: Uma classe que é um supertipo de uma ou mais classes. Como tal, ela é uma classe a partir da qual todas as suas características são herdadas por suas subclasses. Em outras palavras, todas as características de uma superclasse são reusáveis por aquelas classes que são seus subtipos. Se a classe B herda de A, então dizemos que A é uma superclasse de B. Polimorfismo: Polimorfismo significa ter muitas formas, que remete a um único nome representando um código diferente, selecionado por algum mecanismo automático. É um dos conceitos mais complicados de se entender, e também um dos mais importantes. Na orientação a objetos, isso significa que um mesmo tipo de objeto, sob certas condições, pode realizar ações diferentes ao receber uma mesma mensagem. Ou seja, apenas olhando o código fonte não sabemos exatamente qual será a ação tomada pelo sistema, sendo que o próprio sistema é quem decide qual método será executado, dependendo do contexto durante a execução do programa. Vale ressaltar que em C# tudo é parte de um tipo (por exemplo: class, interface e structs), não existem variáveis ou funções globais fora deste escopo (como em php), e toda e qualquer instância de um tipo é um objeto, sendo estes derivados de uma classe base em comum, neste caso a Object. Máquina Virtual: Assim como em Java, as aplicações em C# rodam sobre uma máquina virtual, a qual cuida da interação entre o seu sistema (alto-nível) e o hardware (baixo-nível), o que proporciona diversos benefícios como o Garbage Collector (coletor de lixo de memória) e a sua fácil portabilidade, o que, no entanto, gera uma perda no desempenho do seu sistema. Exemplo do funcionamento de uma máquina virtual (interpretador) para C# 7

8 Estrutura de um programa em C# com Hello World : Para compilar seu primeiro programa em C#, será necessário primeiramente criar um novo projeto. Para isto, vá em File > New Project e selecione o Template: Console Application em Project Types: Visual C#, conforme mostrado na imagem abaixo: Janela para escolha do tipo de projeto no Visual C# 2010 Feito isto, o Visual C# criará seu novo projeto junto a classe Program.cs. Caso a mesma não abra automaticamente na sua janela, efetue 2 cliques sobre ela na árvore do canto direito, e mãos a obra! O Visual Studio gera automaticamente o layout principal de cada classe, sendo este caracterizado da seguinte forma: Estrutura de uma aplicação simples para rodar em um terminal 8

9 Historicamente, ao se tratar do ensino de novas linguagens de programação, utiliza-se de um exemplo com Hello World. Então, para não fugir a tradição, basta inserir uma linha entre as chaves da função Main contendo o seguinte: Console.WriteLine("Hello World!"); Esta é a estrutura principal de uma classe em C#. Utiliza-se o using para usar as funcionalidades de determinada classe ao seu programa (semelhante ao import em java), o namespace é utilizado para definir um escopo para as classes e variáveis globais (geralmente com o mesmo nome do projeto), sendo a classe nomeada após o termo class. Uma observação importante é o fato de em C# ser possível de se criar mais de uma classe em um único arquivo. Assim como em outras linguagem de programação, é possível criar métodos construtores (public nomedaclasse(atributos)), e para se executar um programa, a classe principal do mesmo deverá possuir um método de entrada chamado Main(): static void Main() Neste caso, foi utilizado a palavra static na declaração da função, o que faz com que esta função seja local, podendo ser assim utilizada apenas no arquivo em que for declarada. Os comentários funcionam da mesma forma que em C. Utilize // para comentar uma única linha, ou /* texto */ para comentar um trecho de seu código. Diferente de C, o C# possui os tipos string e bool (booleano) para variáveis, além de uma infinidade de outros, como o enum, o qual funciona de forma semelhante a uma Struct, sendo que esse enumera as variáveis declaradas internamente, geralmente no tipo int. Abaixo pode-se conferir os tipos básicos utilizados na linguagem: Tipos por Valores: bool byte char decimal double enum float int long sbyte short struct uint ulong ushort Tipos por Referência: class delegate interface object string 9

10 Tipos suportados em um namespace: class interface struct enum delegate outro namespace OBS: Para fazer a conversão entre os tipos por valores, utiliza-se o objeto Convert. Este objeto tem diversas funções para realizar as conversões em questão. Abaixo você confere algumas: ToString ToInt16 ToInt32 ToDouble ToByte Exemplos de Orientação a Objetos: Criação de Objetos: A criação e inicialização de um objeto de uma classe segue o mesmo padrão de java, ou seja: <Tipo> <nome> = new <Tipo>(). Herança: Para se realizar herança, faz-se da seguinte forma: public class <nome da classe filha> : <nome da classe pai>. Encapsulamento: Para a criação de uma variável ou função utilizando-se do conceito de encapsulamento, basta acrescentar antes de sua declaração a palavra private, criando, caso necessário, métodos (funções) públicos para se manusear os dados por meio de uma classe externa. Polimorfismo: Para utilizar o polimorfismo, primeiro deve-se criar uma subclasse (herança) de outra, sendo que está só pode utilizar métodos que sobreponham (override) a sua superclasse. Ao declarar um objeto do tipo superclasse, você pode inicializá-lo como o tipo subclasse ( <Tipo superclasse> <nome> = new <Tipo subclasse>() ). Estas informações são suficientes para dar-se início ao estudo do framework XNA. Para mais informações a respeito da linguagem C#, visite o site oficial da Microsoft: 10

11 XNA Game Programming 11

12 O que é XNA? XNA é um framework criado pela Microsoft para facilitar e popularizar o desenvolvimento de jogos digitais, permitindo a sua criação através da linguagem C#, e dispõese de ricas APIs de desenvolvimento para os seguintes ambientes: PCs com Windows, console Xbox 360 e SmartPhones com Zune ou Windows Phone 7. O XNA possui facilidades e se adequa a desenvolvedores iniciantes e experientes que desejam implementar projetos ou testar soluções por meio de um jogo. Como qualquer sistema, possui suas vantagens e desvantagens, as quais são citadas abaixo: Vantagens: Desenvolvimento de jogos multiplataforma; Simplifica o processo de desenvolvimento; Diversas APIs feitas pela comunidade; Debug em tempo real; Muitos Starter Kits e tutoriais. Desvantagens: Gerenciado por um framework, perde um pouco no desempenho; Necessita de uma placa de vídeo com suporte a no mínimo Shaders 2.0; Somente roda em plataformas da Microsoft (Oficialmente). O framework XNA teve como base o DirectX, também desenvolvido pela Microsoft, e sofreu diversas atualizações desde o seu surgimento em 2006, sendo também integrado a diversas faculdades de desenvolvimento de jogos e a competições internacionais e nacionais, e ganhando um espaço para jogos de desenvolvedores indies na Xbox Live (rede do console Xbox 360). Evolução das plataformas para desenvolvimento de jogos da Microsoft 12

13 Ambiente de desenvolvimento: Como ja mostrado anteriormente, a plataforma utilizada para desenvolvimento de jogos em XNA com C# é o Visual Studio C#, em nosso caso, a versão Observação: Janela para exploração de um projeto aberto no Visual Studio C# 2010 Esta IDE é disponibilizada gratuitamente, em sua versão express, no site da Microsoft. Certifique-se de instalar o XNA framework (aqui utilizamos a versão 4) antes de prosseguir com o aprendizado. O mesmo pode ser baixado gratuitamente no seguinte site: 13

14 Arquitetura de um programa em XNA Ao se criar um projeto em XNA, são geradas automaticamente duas classes, descritas a seguir: Program.cs: Responsável por iniciar e manter a execução do jogo em si, através do seguinte método: static void Main(string[] args) using (Game1 game = new Game1()) game.run(); Note que na criação do objeto game foi utilizado o using, pois ao término da execução, o mesmo libera automaticamente qualquer informação utilizada que esteja alocada na memória do computador. Game1.cs: A classe Game (que o Game1 herda) é a central da arquitetura XNA, onde ocorrem as principais operações do jogo. Possui um método construtor, e os cinco principais métodos pertencentes ao Game Loop de um jogo feito com o framework. Game Loop: O Game Loop é um laço onde ocorrem todas as operações lógicas e gráficas, tendo anteriormente a inicialização de todos os recursos necessários para a execução de um jogo. No XNA, ele é representado basicamente pelos seguintes métodos: Initialize() - inicializa recursos lógicos não gráficos LoadContent() - utilizada para carregar recursos UnloadContent() - chamada para liberar recursos Game Loop: Update(GameTime gametime) - onde se constrói a lógica do jogo (cálculos) Draw(GameTime gametime) - utilizado para carregar as rotinas de desenho em uma tela Note que o Game Loop em si é representado apenas pelos métodos Update e Draw, os quais são chamados, respectivamente na ordem citada, a cada laço de execução. 14

15 Imagem representando a ordem de execução de um jogo feito em XNA Vale ressaltar que a quantidade de laços a serem executados por segundo está diretamente ligado à quantidade de frames por segundo (FPS) do jogo. Se um jogo roda a 60 fps, os métodos Update e Draw serão executados sessenta vezes a cada um segundo. OBS: Além dos métodos citados, o método construtor de uma classe do tipo Game1 é utilizado para carregar informações e inicializar dispositivos relacionados à execução do jogo (Game Loop), como resolução da tela, inicialização da placa de vídeo, definição do diretório para os arquivos externos utilizados no jogo, etc. Planejamento de um jogo: O planejamento de um jogo se divide basicamente em 3 etapas, sendo estas divididas e definidas da seguinte forma: Mercado alvo: Nesta etapa é escolhida a plataforma, categoria e gênero de seu jogo; se ele será feito para algum console ou pc, qual será o seu público alvo (casuais, hardcores) e o estilo de jogabilidade (plataforma, ação, point-&-click, esportes, etc). Equipe de desenvolvimento: É importante possuir uma boa equipe para desenvolver o seu projeto, a quantidade pode variar de acordo com as suas requisições e disponibilidades, podendo a mesma ter de duas ou três até centenas de pessoas. Os cargos se dividem entre os mais abrangentes ramos, como: Game Designer, Artistas, Modeladores, Animadores, Músicos, Programadores, Testers, Etc. Documentação e Metodologia: Um jogo é um software assim como qualquer outra aplicação para um sistema operacional, e como tal, requer a criação de um documento (documento de game design) para descrição de todas as informações necessárias para sua elaboração. Porém, este documento é ainda maior, já que envolve informações além das que são requisitadas pelos processos de engenharia de software, como guias de identidade visual, informações de jogabilidade, storyline, ecossistema do jogo, etc. 15

16 Funcionalidades básicas do XNA 16

17 Criando um projeto XNA: Para começar, deverá ser criado um novo projeto que utilize o framework XNA no Visual Studio C# Para isto, vá em File > New Project e selecione o Template: Windows Game em Project Types: Visual C#, conforme mostrado na imagem abaixo: Content Pipeline: Janela para escolha do tipo de projeto no Visual C# 2010 O Content Pipeline é um dos recursos mais interessantes do XNA, pois reune e trata em um único espaço todos os arquivos externos utilizados em um projeto, ou seja, não precisa se preocupar em adaptar arquivos de áudio, vídeos, imagens e etc para os tornar compatíveis com o seu jogo. São suportados no XNA, por meio do Content Pipeline, os seguintes formatos de arquivos: Formatos 2D: DDS, BMP, JPG, PNG e TGA Formatos de Áudio: XAP (projeto de audio gerado pelo XACT Tool), WAV, MP3 e WMA Formatos 3D: X (DirectX) e FBX (Formato do Autodesk, porém já é suportado por alguns softwares free e pela maioria dos softwares de modelagem comercial) Fontes: SpriteFont (Arquivo XML usado pelo XNA onde você pode descrever as caracteristicas da fonte usada, como: tamanho, tipo, etc) XML: Suporta arquivos.xml que podem ser usados para armazernar dados do jogo Shaders: Suporta arquivos.fx que são usados para descrever efeitos na renderização 17

18 de modelos 3D ou 2D. Vídeo (a partir do XNA 3.1):.WMV devidamente codificado no Main Profile Series 9. A forma de utilização do content pipeline em XNA se dá de maneira bem simples. No começo do código, no método construtor, deve-se definir o diretório em que se localiza os arquivos do content, no qual por padrão é criado em um projeto do Visual C# como Content e inicializado da seguinte forma: Content.RootDirectory = "Content"; A variável (objeto de uma classe) Content é uma das variáveis globais nativas do XNA, sendo ela a responsável pelo tratamento dos arquivos utilizados. Para carregar um certo dado presente no seu Content, utiliza-se o método Load da seguinte maneira: variavel = Content.Load<Tipo>(@"Caminho"); O Tipo representa o tipo (o mesmo da variável) para o qual o objeto Contet deverá carregar o arquivo, podendo esse ser uma Texture2D, Song, SoundEffect, dentre outros os quais serão citados mais abaixo. O Caminho nada mais é do que o caminho até o arquivo que deseja carregar, sendo a extensão do arquivo (.jpg,.png,.mp3, etc) não descrita, pois ao compilar o jogo, o compilador converte todos os arquivos do content para o formato.xnb. Um exemplo funcional do método Load seria como o abaixo: textura = Content.Load<Texture2D>(@"Sprites\ball"); Janela do Visual C# para exibição das classes e arquivos (content) de um projeto 18

19 Métodos de inicialização e finalização: Como já citado anteriormente, no XNA utiliza-se basicamente dois métodos para inicialização dos recursos de um jogo, o Initialize e o LoadContent. No Initialize se inicia os recursos não gráficos, como objetos, variáveis, etc; No LoadContent se inicializam todos os recursos externos que o seu jogo irá utilizar, como imagens, sons, fontes e etc. Além dos dois métodos citados, as classes que herdam a Game do XNA possuem um método construtor, no qual geralmente se define a resolução e título da janela do jogo, se inicializa a interação com a placa de vídeo e define o diretório raiz para os arquivos externos de um projeto, dentre outras opções. Para a liberação na memória dos recursos carregados, utiliza-se o método UnloadContent. Caso o projeto seja voltado à plataforma Windows, o seu uso torna-se opcional, pois a máquina virtual do C# oferece o garbage collector para liberação de recursos não utilizados na memória. Porém, caso o projeto seja para outras plataformas, este método torna-se essencial e de extrema importância, podendo o seu mal uso gerar diversos problemas inesperados. GameTime: O parâmetro GameTime, utilizado pelos métodos Update(GameTime gametime) e Draw(GameTime gametime), é crucial para a execução de cada laço de um jogo, pois ele, dentre outras coisas, exibe o tempo passado desde o último laço executado para fazer as operações lógicas e desenhos de forma correta, como por exemplo, seguindo a taxa de frames por segundo definida. Abaixo estão listados os métodos presentes no objeto gametime: ElapsedGameTime: Representa o montante de tempo desde a execução do laço anterior de um game loop. TotalGameTime: Representa o montante de tempo desde a execução do primeiro laço de um game loop. IsRunningSlowly: Caso a chamada ao método Update esteja demorando mais do que o tempo definido pelo sistema, este método retorna um valor afirmativo (True). 19

20 Sistema de coordenadas 2D de uma tela: Diferente do senso comum, em um jogo as coordenadas nos eixos X e Y são crescentes para a direita e para baixo, conforme a imagem abaixo: Sistema de coordenadas nos eixos X e Y de um jogo O ponto (0,0) dos eixos representa o canto esquerdo superior da janela e os seus limites são representados pela resolução, em pixels, do jogo. Ou seja, caso o seu jogo seja executado em uma resolução de 800x600, você estará em uma tela com o limite em X de 800 e em Y de 600. Texturas e Sprites: Antes de tratarmos deste assunto, você pode conferir abaixo o significado de alguns jargões que utilizamos com frequência para gráficos em 2D: Sprite: O Sprite é uma imagem objeto em 2D que pode ser manipulada independentemente do restante da cena do jogo. O termo é utilizado para descrever tanto somente a imagem mostrada como uma classe usada pelo jogo para mostrar a imagem (a qual contém propriedades como velocidade, posição, largura, altura e etc). Texturas: A textura é o nome dado à imagem 2D carregada e utilizada tanto em um modelo 3D como em um Sprite. Background: O Background é a cena de fundo de um jogo, que pode ser composta por uma ou diversas imagens sobrepostas de forma estática ou em movimento, gerando um efeito de scrolling (rolamento). Tiles: Os Tiles são pequenas imagens (partes de um cenário maior), que são dispostas de forma a gerarem um estágio ou mapa de uma fase do jogo. 20

21 Agora será mostrado um simples exemplo de como criar e exibir na tela um sprite com sua respectiva textura. Com o seu projeto criado, crie uma nova classe (clicando com o botão direito sobre o nome do projeto e seguindo por Add / New Item... ). Aqui utilizaremos o nome clssprite. Serão utilizados três tipos básicos do XNA para carregar e desenhar a imagem na tela: SpriteBatch: Utilizado para desenhar sprites e textos. Texture2D: Armazena uma imagem de textura 2D. Vector2: Utilizado para armazenar informações dos eixos da tela, um ponto em X e Y. Antes de prosseguir, certifique-se de inserir as seguintes linhas com as bibliotecas do XNA Framework: using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Graphics; Criaremos uma classe para armazenar a textura, posição, velocidade e direção de um determinado sprite. A mesma deverá possuir um método construtor para inicializar suas variáveis globais, como abaixo: class clssprite //Textura do Sprite public Texture2D textura; //Variável para armazenar a posição do sprite na janela public Vector2 posicao; //Variável para armazenar a velocidade de locomoção do sprite public Vector2 velocidade; public clssprite (Texture2D textura, Vector2 posicao, Vector2 velocidade) this.textura = textura; this.posicao = posicao; this.velocidade = velocidade; O próximo passo será adicionar uma imagem ao projeto. Para isso, clique com o botão direito do mouse sobre o Content de seu projeto e vá por Add / Existing Item.... Em seguida, selecione a imagem desejada e clique em ok. tela. Feito isto, vamos criar na classe clssprite um método Draw para desenhar o sprite na public void Draw(SpriteBatch renderizador) renderizador.draw(textura, posicao, Color.White); Este método recebe como paramêtro uma váriavel do tipo SpriteBatch, e utiliza a sua função Draw para desenhar o sprite. 21

22 OBS: A função Draw() do SpriteBatch, além do básico (textura, posição e cor base) suporta alguns parâmetro em sua declaração, como escala, rotação, origem, orientação, etc... Com a classe para tratamento do sprite pronta e com a imagem importada para o Content do projeto, vamos a classe Game1.cs para renderizar a imagem na tela. Primeiramente, declaramos as variáveis globais do tipo clssprite e SpritBatch: //Renderizador de texturas 2D (desenhas as imagens na tela) SpriteBatch renderizador; //Objeto da classe clssprite clssprite jogador; Depois deve-se inicializar as variáveis no método LoadContent(), passando ao objeto do tipo clssprite a imagem, a posição e a velocidade de locomoção, conforme abaixo (lembrando que não deve-se utilizar a extensão da imagem ao adicioná-la pelo Content): renderizador = new SpriteBatch(GraphicsDevice); jogador = new clssprite(content.load<texture2d>("imagem"), Vector2.Zero, new Vector2(1, 1)); A função Zero do Vector2 retorna o ponto inicial de uma janela (0,0) e os parâmetros (1,1) são usados para que a velocidade de locomoção da imagem seja de uma posição no eixo X e Y a cada execução do Game Loop (a ser explicado melhor mais a frente). Por fim, se adiciona ao método Draw as linhas responsáveis por renderizar a imagem na tela: renderizador.begin(); jogador.draw(renderizador); renderizador.end(); Como mostrado acima, para renderizar-se algo na tela, este trecho do código deverá começar com Begin() e terminar com End(), e ser implementado na classe Game1.cs, a qual fará o processo de renderização do jogo, neste exemplo. Se tudo ocorreu bem, ao iniciar o Debugging do seu projeto, deverá aparecer uma janela e uma imagem desenhada na posição inicial da tela. Exemplo de uma janela durante a execução do projeto 22

23 Escrevendo textos na tela: O processo de escrita e renderização de textos se dá de maneira bem simples no XNA. Para começar, você deverá criar em seu content um arquivo do tipo spritefont indo em Add / New Item... / Sprite Font. O Visual Studio criará um arquivo do tipo citado com código em XML. Imagem do XML gerado automaticamente pela IDE Com o arquivo aberto, basta configurá-lo de acordo com seus critérios, editando os campos que estiverem entre os <> </>, como nome da fonte, tamanho, negrito, etc. Utilizaremos aqui para carregar o arquivo uma variável do tipo SpriteFont (armazena uma fonte de texto (xml criado no projeto). Sendo assim, devemos declarar a variável global na classe Game1.cs : //Fonte para o texto to jogo SpriteFont fonte; E em seguida carregar o XML na variável no método LoadContent : fonte = Content.Load<SpriteFont>(@"Verdana"); Feito isto, basta ir ao método Draw e adicionar uma linha para renderizar o seu texto, conforme abaixo: //Escreve uma string na tela renderizador.drawstring(fonte, "Texto aqui", new Vector2(205, 10), Color.White); O próprio renderizador já possui um método para desenhar strings (DrawString), basta passar os parâmetros corretos (fonte, string, posição e cor) para ele renderizar na tela. 23

24 Controlando um sprite: Para movimentar um sprite utilizando o teclado, iremos utilizar três tipos básicos do XNA, sendo eles: KeyboardState: Armazena o estado atual do teclado, com métodos para verificação de teclas pressionadas, e etc. Keyboard: Utilizado para retornar status do teclado e fazer operações lógicas. Keys: Utilizado para retornar o valor de cada uma das teclas do teclado (para verificações). Para trabalhar com estes métodos, criaremos uma nova classe, chamada de clskeyboard, a qual precisa utilizar a seguinte biblioteca (além da padrão Microsoft.Xna.Framework): using Microsoft.Xna.Framework.Input; A classe clskeyboard armazenará o estado do teclado em um determinado momento e possuirá um método Update para retornar um Vector2 com as novas posições do sprite. Abaixo, segue o modelo da classe: class clskeyboard KeyboardState k; public clskeyboard() k = new KeyboardState(); public Vector2 Update(KeyboardState teclado, Vector2 posicao, Vector2 velocidade) k = teclado; if (k.iskeydown(keys.up)) posicao.y -= velocidade.y; else if (k.iskeydown(keys.down)) posicao.y += velocidade.y; return posicao; Como visto acima, a classe possui uma variável global do tipo KeyboardState, a qual serve para armazenar o estado do teclado em um determinado momento, e um método construtor para inicializar a variável. O método Update tem como parâmetro de entrada três variáveis para realizar suas operações. O teclado contém uma captura do teclado naquele momento, a posição é a 24

25 posição na qual o sprite se encontra na janela, e a velocidade é a velocidade com que o sprite se movimenta pela tela. Além do que já foi citado acima, o método Update trabalha com a função IsKeyDown da variável do tipo KeyboardState e com o objeto Keys. O método IsKeyDown verifica se naquele determinado momento uma determinada tecla está pressionada. Caso a resposta seja positiva, o método retorna true, caso contrário retorna false, ou seja, uma resposta do tipo bool. O objeto Keys contém variáveis com os valores de todas as teclas de um teclado. Sendo assim, para fazer uma verificação de uma tecla pressionada, basta inserir o objeto Keys acompanhado da variável que representa a tecla a ser verificada dentro da função IsKeyDown de uma variável do tipo KeyboardState. A movimentação do sprite dá-se de acordo com a alteração da velocidade sobre a posição em que ele está. Caso o sprite se movimente a uma velocidade de dois pixels a cada game loop, basta subtrair ou somar essa velocidade da posição (no eixo X ou Y de uma variável Vector2) em que ele se encontra para obter sua nova posição. Com a classe pronta, podemos voltar a classe Game1.cs e criar um objeto (global) do tipo clskeyboard para então o utilizarmos. //Objeto para tratamento do teclado clskeyboard k; Feito isto, vamos ao método Initialize e inicializamos a variável como abaixo: k = new clskeyboard(); No método Update e acrescentamos a seguinte linha: jogador.posicao = k.update(keyboard.getstate(),jogador.posicao, jogador.velocidade); A linha acima modifica a posição do sprite de acordo com a posição (Vector2) retornada pelo método que criamos. O objeto Keyboard com a função GetState() retorna uma captura do teclado naquele instante, sendo esta do tipo KeyboardState. Caso tudo tenha ocorrido bem, basta pressionar F5 para executar o seu projeto e testar a movimentação do sprite (neste caso somente no eixo Y). Debug do código: Para depurar o seu jogo, além das próprias ferramentas fornecidas pelo Visual Studio, pode-se utilizar o console do C# da seguinte forma: Console.WriteLine("Texto aqui"); Pode-se utilizar também uma variável do tipo string como parâmetro para a função. 25

26 Colisão entre objetos 26

27 Colisão entre sprites: A colisão entre objetos (sprites) é parte essencial de um jogo. Com ela, evitamos que um objeto sobreponha o outro, fazendo assim com que eles colidam. Primeiramente ensinaremos aqui duas técnicas de colisão entre sprites, a Bounding Box e Bounding Sphere. Colisão Bounding Box: O Bouding Box é um sistema de colisão bem simples, no qual ele analisa se o retângulo (dimensões da imagem) está sendo sobreposto ou sobrepondo um outro retângulo de uma mesma janela. O sistema de colisão trabalha inclusive com elementos em 3D, utilizando variáveis do tipo Vector3 (que não estudaremos aqui, nos limitando a considerar o eixo Z como valor 0). Este sistema pode não ser muito eficaz em alguns casos, pois se os pixels de uma determinada imagem não ocuparem todo o espaço de seu retângulo (dimensões), poderá ocorrer uma falsa impressão de colisão, onde uma imagem não chega a encostar na outra. Imagem da colisão entre 2 retângulos (fonte: kleberandrade.wordpress.com) A classe Bounding Box (a qual faz parte do XNA framework) contém diversas funções, mas nos restringiremos a utilizar a Intersects, sendo esta responsável por verificar se está havendo colisão entre dois objetos e nos retornar uma variável do tipo bool como resultado. Primeiramente iremos criar um método para verificar os limites do retângulo (Bouding Box) de um sprite na classe clssprite: public BoundingBox getboundingbox() //Retorna os limites (BoudingBox) do sprite return new BoundingBox(new Vector3(this.posicao.X, this.posicao.y, 0), new Vector3(this.posicao.X + this.textura.width, this.posicao.y + this.textura.height, 0)); 27

28 O método acima retorna os limites do sprite com base na sua posição atual. O primeiro parâmetro passado ao método construtor do BoundingBox trata-se de um Vector3 com a posição atual do sprite, o segundo trata-se do tamanho nos três eixos do retângulo que representa a imagem a partir de sua posição, por isso soma-se a posição atual com as dimensões da imagem, que podem ser obtidas por meio do método Width e Height de um Texture2D. Para utilizar o código, basta ir a classe Game1.cs, criar um novo sprite (ex: jogador2) e repetir os passos que foram citados acima (não necessariamente precisa utilizar a movimentação para este segundo, ele pode ficar fixo em um ponto qualquer da janela a sua escolha). Com o segundo sprite criado, crie também um variável global colisao do tipo bool (a inicialize como false no método Initialize ) e no método Update faça a verificação: if (jogador.getboundingbox().intersects(jogador2.getboundingbox())) colisao = true; else colisao = false; Estamos utilizando esse verificador para mudar a cor do fundo da janela ao ocorrer a colisão. Para modificarmos a cor do fundo, vamos até o método Draw da classe Game1.cs e substituímos a linha que contém o GraphicsDevice.Clear pelas linhas abaixo: //Caso acontecer a colisão, pinta a tela de vermelho, caso não, pinta de azul if (colisao) GraphicsDevice.Clear(Color.Red); else GraphicsDevice.Clear(Color.CornflowerBlue); OBS: O GraphicsDevice.Clear(Color.XXX) limpa todos os objetos da janela a cada game loop, por isso está sempre no começo do método, antes das operações de renderização. Isso evita com que a cena anterior ao game loop atual continue visível e seja sobreposta pela mais recente. Imagem do fundo da janela antes e depois da colisão (fonte: kleberandrade.wordpress.com) 28

29 Colisão Bounding Sphere: O sistema de colisão Bounding Sphere é simples e bem semelhante ao sistema de colisão Bounding Box. Como seu nome sugere, ao invés de verificar a colisão por meio de um retângulo, ele faz verificação de colisão entre esferas considerando o raio e o centro delas a partir de um determinado ponto da janela. Imagem da colisão entre 2 círculos (fonte: kleberandrade.wordpress.com) Imagem da circunferência a ser verificada (fonte: kleberandrade.wordpress.com) Aqui novamente utilizaremos apenas a função Intersect, mas o BoundingSphere também possui diversas outras funções que podem ser utilizadas em outras ocasiões (como Radius para informar o raio e Center para informar o ponto central de um Bounding Sphere). Retornaremos à classe clssprite para criar um novo método responsável pela verificação dos limites da circunferência do sprite: 29

30 public BoundingSphere getboundingsphere() //Retorna os limites (BoudingSphere) do sprite return new BoundingSphere(new Vector3(this.posicao.X + this.textura.width/2, this.posicao.y + this.textura.height/2, 0), this.textura.width/2); Os parâmetros passados ao método construtor do BoundingSphere são o ponto central da imagem (que pode ser obtido com o cálculo acima) e o seu raio. Para utilizar o código do Bounding Sphere, basta repetir os mesmos procedimentos utilizados no Bounding Box. A função Intersect funciona da mesma forma para ambos, e inclusive pode ser utilizada entre os dois tipos (verificar a colisão entre um círculo e um retângulo). OBS: As variáveis do tipo BoundingSphere e BoundigBox também possuem uma função que pode ser útil em diversas outras ocasiões. O método em questão é o Contains, que retorna uma enumeração denominada ContainmentType (Contains, Disjoint ou Intersect). Imagem ilustrando as três possíveis ocorrências entre dois sprites (fonte: kleberandrade.wordpress.com) 30

31 Músicas de fundo e efeitos sonoros 31

32 Músicas de fundo e efeitos sonoros: Para reprodução de músicas de fundo e efeitos sonoros, utilizaremos os seguintes tipos e objetos: Songs: Utilizado para armazenar arquivos de áudio. SoundEffect: Utilizado para armazenar e reproduzir efeitos sonoros. MediaPlayer: Utilizada para reprodução (play, pause, stop) e controle de Songs. MediaState: Armazena o estado atual do MediaPlayer (parado, tocando, pausado...). A reprodução de áudio no XNA dá-se de forma bem simples. Basta importar ao seu Content um arquivo de áudio (dos tipos suportados pelo XNA), os carregar nas variáveis e executar o som de acordo com o seu critério. Segue um exemplo simples de reprodução de uma música de fundo em um jogo: Inicialmente, é preciso criar uma variável global do tipo Songs na classe Game1.cs. //Música de fundo do jogo Song musica; E logo após carregar a música de seu Content e a reproduzir com o MediaPlayer no método LoadContent. //Carrega a música de fundo na variável musica musica = Content.Load<Song>(@"Sons\fundo"); //Inicia a reprodução da música por meio do MediaPlayer MediaPlayer.Play(musica); Para parar a reprodução em um determinado momento, é somente chamar a função Stop() do MediaPlayer, o qual também possui diversas outras funções. Tabela de funções e variáveis do MediaPlayer: Método / Variáveis Paramêtro Retorno Descrição Mediaplayer.Play Song void Executa um som Mediaplayer.Stop void void Para uma execução Mediaplayer.Pause void void Pausa uma execução Mediaplayer.Resume void void Reinicia a exeução a partir de um ponto Mediaplayer.PlayPosition Não é função TimeSpan Retorna o tempo de execução de um som Mediaplayer.State Não é função MediaState Retorna o estado do MediaPlayer (pausado, parado ou tocando) Mediaplayer.IsMuted Não é função / bool void Se definido como true fica mudo, se com false não fica mudo Mediaplayer.IsRepeating Não é função / bool void Se definido como true repete, se como false não repete 32

33 Com os efeitos sonoros, a reprodução ocorre um pouco diferente, pois não precisa-se do MediaPlayer. Primeiramente declaramos a variável global: //Efeitos sonoros SoundEffect efeito; E, após inicializar a variável no método LoadContent() (Content.Load<SoundEffect>(@"Sons\efeito")), executa-se o efeito em um determinado local do código (a seu critério, geralmente no método Update ), fazendo com que ele seja tocado somente uma vez e a partir daquele instante, chamando o método Play() do SoundEffect: efeito.play(); Além da forma citada acima, existe uma sobrecarga da função Play(), onde você pode ajustar o volume, velocidade e balanço do efeito: efeito.play(volume, velocidade, balanco); //Todos os parâmetros são em float O campo volume varia entre 0f e 1f (aceita valores intermediários em float, assim como os outros); O campo velocidade e o balanço variam entre -1f (lento e com balanço para esquerda) até 1f (rápido e com balanço para a direita). É importante citar que as variáveis do tipo SoundEffect suportam apenas arquivos de áudio do tipo.wav. OBS: Para saber mais detalhadamente a respeito das funções e variáveis presentes em cada objeto ou tipo, basta utilizar o próprio Visual Studio C#, o qual auto-completa mostrando todas as opções disponíveis para aquele objeto. 33

34 Dicas para criação de um projeto 34

35 Dicas para criação de um projeto: Ao elaborar um projeto de um jogo, tente ser o mais organizado possível. Alguns detalhes podem fazer toda a diferença para a eficácia do seu desenvolvimento. Procure dividir seus arquivos e classes por pastas e utilizar o máximo possível do conceito de orientação a objeto, de forma a segregar o código e evitar sua aglomeração em poucas classes. A utilização de conceitos de Engenharia de Software também são essenciais para um projeto ser bem sucedido, afinal um jogo não deixa de ser um programa. Além da engenharia de software, é necessário o estudo e elaboração de um documento de game design. O bom senso deve ser bem utilizado. Casos como a construção de inteligências artificiais extremamente difíceis, ou mesmo invencíveis devem ser evitados, além de definir controles confortáveis e compatíveis com o estilo de jogo proposto. Na construção de seu projeto é essencial a definição de alguns detalhes básicos (parte do game design) como a resolução em que o jogo será executado, o título de sua janela, se o jogo suportará a opção de ser fullscreen, entre outros. Para configurar as opções de vídeo, basta utilizar a variável do tipo GraphicsDeviceManager (em nosso caso a graphics, declarada por padrão no XNA). No método construtor da classe Game1.cs inserimos as seguintes linhas após a inicialização da varíavel graphics: //Define a largura da janela. OBS: Valores aceitos com tipo int graphics.preferredbackbufferwidth = 800; //Define a altura da janela graphics.preferredbackbufferheight = 600; //Define se o jogo sera em full screen graphics.isfullscreen = true; As definições acima farão com que o jogo tenha uma resolução de 800x600 e seja executado com a tela em full screen. Outra modificação que pode ser útil é a nomeação da janela do jogo em reprodução. Para modificar o nome basta utilizar a linha abaixo: Window.Title = "Seu Game"; O objeto Window faz parte da biblioteca padrão do framework, então ele não precisa ser declarado ou inicializado por você, basta modificar seus parâmetros para obter o resultado esperado. Lembre-se também de separar em seu projeto as inicializações do sistema ao método construtor, as inicializações lógicas ao método Initialize e o carregamento de recursos ao método LoadContent de sua classe principal. 35

36 Técnicas de Scrolling 36

37 Técnica de Side Scrolling: O scrolling é uma técnica utilizada para gerar a sensação de se estar deslizando sobre o conteúdo de uma imagem, ou seja, enquanto você joga um game como Mario, o fundo se move de acordo com a sua movimentação, o que passa a impressão de se estar caminhando pelo cenário. Para gerarmos este efeito, vamos utilizar um dos métodos de sobrecarga do método SpriteBatch.Draw, que nos possibilite a especificação de uma determinada área da textura que iremos renderizar. A sobrecarga em questão utiliza o seguinte cabeçalho: public void Draw ( Texture2D texture, Vector2 position, Nullable<Rectangle> sourcerectangle, Color color ) onde o paramêtro sourcerectangle determina uma área retangular da textura a ser renderizada na tela. Se o paramêtro passado for null, a textura será renderizada por completa. Na variável sourcerectangle, neste exemplo, os campos X e Y especificam o ponto de origem da área, enquanto os campos Width e Height especificam o tamanho da origem até o ponto final da área da textura a ser renderizada. Vamos começar declarando as variáveis para a textura e o eixo X (em nosso caso faremos apenas o scrolling horizontal, para fazer o vertical precisaríamos de uma variável Y): Texture2D fundo; //Para determinar o Rectangle.X int x = 0; No método LoadContent carregamos a textura para nossa variável: fundo = Content.Load<Texture2D>(@"fundo"); E no método Update fazemos a incrementação/decrementação da variável X para gerar o scrolling: KeyboardState k = Keyboard.GetState(); if (k.iskeydown(keys.left)) x -= 2; //Valor aleatório. Jamais atribua valores aleatórios a um jogo final. else if (k.iskeydown(keys.right)) x += 2; Aqui devemos ter cautela, pois o valor da variável X cresce muito rapidamente, podendo assim ultrapassar o valor suportado por números do tipo inteiro e gerar efeitos indesejáveis ao seu jogo. 37

38 Abaixo será sugerido uma forma simples e eficiente para evitar que esse tipo de problema ocorra: //Verificação feita para recomeçar a variável e evitar que extrapole o limite dos inteiros if (x > fundo.width x < -fundo.width) x = 0; O código acima faz a seguinte verificação: quando o valor de X se torna maior (positiva e negativamente) que a largura da textura, ele volta a ser zero, evitando que o mesmo extrapole o limite dos inteiros e gerando um resultado visual satisfatório. Para finalizar, vamos renderizar a textura na tela, mas para que o side scrolling de fato ocorra, precisamos utilizar, além da sobrecarga do método SpriteBatch.Draw, uma das sobrecargas do método SpriteBatch.Begin no método Draw de sua classe, conforme abaixo: renderizador.begin( SpriteSortMode.FrontToBack, BlendState.Opaque, SamplerState.LinearWrap, DepthStencilState.Default, RasterizerState.CullNone ); Um dos parâmetros importantes é o SpriteSortMode.FrontToBack, o qual define a ordem em que serão desenhados os sprites. No entanto, o que realmente nos importa neste caso é o parâmetro SamplerState.LinearWarp, pois este gera a continuidade da textura, ou seja, quando o scrolling atinge o fim da textura, ele desenha o seu começo logo em seguida. OBS: O parâmetro BlendState.Opaque faz com que as imagens percam sua transparência, tornando-as opacas. Por padrão, o XNA mantém o processo de renderização com o método SamplerState.LinearClamp. Caso você utilize apenas a chamada Begin(), ao executar o código, quando passar dos limites definidos pelo rectangle, o renderizador começará a borrar a tela com os últimos pixels da textura. Com o renderizador inicializado, utilizamos o Draw para desenhar o fundo e o End() para finalizar o processo de renderização: renderizador.draw(fundo,vector2.zero,new Rectangle(x,0,fundo.Width, fundo.height),color.white); renderizador.end(); A posição inicial da textura a ser desenhada varia de acordo com o X, e logo ao ser finalizada, o parâmetro SamplerState.LinearWarp faz com que o método desenhe o seu começo e ligue ao seu final. 38

39 Imagem com a textura do fundo completa e fixa Imagem com a textura do fundo deslocada pelo processo de scrolling Imagem com a textura deslocada e o parametro SamplerState.LinearClamp ativo 39

40 Técnica de Parallax Scrolling: A técnica de Parallax Scrolling não se difere muito do Scrolling comum. A diferença se dá na sensação de profundidade gerada, o que torna o seu jogo mais interessante e visualmente bonito. No Scrolling comum, ao movimentar-se, o fundo se move em uma única velocidade. Já no Parallax Scrolling, o fundo é composto por duas ou mais camadas, sendo que cada uma se movimenta em uma velocidade diferente. Imagem ilustrando as diversas camadas de um cenário com Parallax Scrolling Para gerarmos este efeito, vamos utilizar a mesma técnica utilizada no Scrolling com algumas pequenas alterações. Vamos começar declarando as variáveis que serão utilizadas: //Desta vez utilizaremos dois fundos Texture2D fundo; Texture2D fundo2; //Precisaremos de duas variáveis para controle da movimentação no eixo x int x = 0; int x2 = 0; Logo após, carregamos as texturas nas variáveis no método LoadContent e definimos a movimentação no método Update : //Inserir no método LoadContent fundo = Content.Load<Texture2D>(@"fundo"); fundo2 = Content.Load<Texture2D>(@"fundo2"); 40

41 //Inserir no método Update KeyboardState k = Keyboard.GetState(); if (k.iskeydown(keys.left)) x -= 2; //Valores aleatórios x2 -= 1; else if (k.iskeydown(keys.right)) x += 2; x2 += 1; //Verificação feita para recomeçar a variável e evitar que extrapole o limite dos inteiros if (x > fundo.width x < -fundo.width) x = 0; if (x2 > fundo2.width x2 < -fundo2.width) x2 = 0; A diferença de velocidade de X e X2 gera o efeito de profundidade na execução do jogo (é recomendado que as cenas mais a fundo tenham velocidade menor que as da frente para o efeito ficar mais próximo do real). Com o método Update pronto, vamos ao processo de renderização das cenas no método Draw : renderizador.begin( SpriteSortMode.FrontToBack, BlendState.AlphaBlend, SamplerState.LinearWrap, DepthStencilState.Default, RasterizerState.CullNone ); renderizador.draw(fundo,vector2.zero,new Rectangle(x,0,fundo.Width, fundo.height),color.white); renderizador.draw(fundo2, Vector2.Zero, new Rectangle(x2, 0, fundo2.width, fundo2.height), Color.White); renderizador.end(); A diferença com relação à renderização do Scrolling citada aqui surge na mudança do BlendState.Opaque para BlendState.AlphaBlend. Este parâmetro é responsável por conservar a transparência das imagens, de forma que elas não se sobreponham completamente. 41

42 Imagem fixa das duas texturas sobrepostas Imagem deslocada com a técnica de Parallax Scrolling Ao observar as imagens, é possível ver que ambas as texturas se movimentaram, mas devido à diferença de velocidade, e tomando como ponto de referência o fim da nuvem marcada nas imagens, percebemos que a imagem mais à frente se movimentou mais que a de trás. O efeito é melhor visualizado durante a execução do código. 42

43 Colisão por Pixels 43

44 Colisão por Pixels: A colisão por pixels é a forma mais precisa de se verificar a colisão entre duas texturas em um jogo, porém é a mais complexa, pois a verificação é feita a partir da transparência das imagens utilizadas, analisando pixel por pixel. Para criarmos o processo de verificação, vamos utilizar um vetor do tipo Color (tipo responsável por armazenar a cor de um ou mais pixels) e o método GetData do tipo Texture2D, para repassar os pixels da textura para a variável do tipo Color. Começaremos por declarar as variáveis que vamos utilizar em nosso jogo: //Textura do sprite Texture2D jogador; Texture2D jogador2; //Variáveis para armazenar os pixels das texturas //Matriz em forma de vetor Color[] matriztexturajogador; Color[] matriztexturajogador2; //Posição dos nossos 2 personagens Vector2 posicao; Vector2 posicao2; //Constante de velocidade para movimentação dos sprites const int velocidade = 2; //Variável para verificar a colisão bool colisao = false; Os vetores do tipo Color declarados acima serão utilizados como matriz. Não utilizaremos matrizes reais, pois o método GetData nos retorna um array com as informações. OBS: Procure sempre criar variáveis constantes para servirem de parâmetro na verificação da movimentação dos sprites, evitando assim inserir diretamente o valor nos algorítimos para movimentação das texturas. A inicialização das posições fica a seu critério, utilize os valores que achar melhor (no método Initialize, com new Vector(x,y) ). No método LoadContent, inicialize as texturas e as demais variáveis: //Carrega a textura dos sprites jogador = Content.Load<Texture2D>("jogador"); jogador2 = Content.Load<Texture2D>("jogador2"); //Cria um vetor/matriz com as dimensões da imagem matriztexturajogador = new Color[jogador.Width * jogador.height]; matriztexturajogador2 = new Color[jogador2.Width * jogador2.height]; //Popula a matriz com os pixels das texturas jogador.getdata(matriztexturajogador); jogador2.getdata(matriztexturajogador2); 44

45 A matriz de pixels será armazenada no vetor do tipo Color, de forma que a quantidade de linhas da matriz será definida pela quantidade de pixels verticais da textura, e a quantidade de colunas será a mesma que a de pixels horizontais. Devemos criar também um método para fazer a verificação se de fato os pixels estão colidindo. O chamaremos de ColisaoPorPixel, conforme abaixo: public bool ColisaoPorPixel(Rectangle retangulo1, Color[] dados1, Rectangle retangulo2, Color[] dados2) //Encontra os limites do retângulo de interseção //Captura o ponto acima de quem estiver mais distante da origem int cima = Math.Max(retangulo1.Top, retangulo2.top); //Captura o ponto abaixo de quem estiver mais próximo da origem int baixo = Math.Min(retangulo1.Bottom, retangulo2.bottom); //Captura o ponto esquerdo de quem estiver mais distante da origem int esquerda = Math.Max(retangulo1.Left, retangulo2.left); //Captura o ponto direito de quem estiver mais próximo da origem int direita = Math.Min(retangulo1.Right, retangulo2.right); //Verifica todos os pontos dentro do limite da interseção //Varre o retângulo de cima para baixo e da esquerda para direita for (int y = cima; y < baixo; y++) for (int x = esquerda; x < direita; x++) //Verifica a cor dos pixels no mesmo ponto da interseção Color color1 = dados1[(x - retangulo1.left) + (y - retangulo1.top) * retangulo1.width]; Color color2 = dados2[(x - retangulo2.left) + (y - retangulo2.top) * retangulo2.width]; //Se ambos os pixels não são transparentes if (color1.a!= 0 && color2.a!= 0) //Uma colisão foi encontrada return true; //Não foi encontrada uma colisão return false; O método faz a verificação se houve uma sobreposição de pixels não transparentes entre as duas texturas no retângulo de interseção. A posição a ser verificada é encontrada pela seguinte expressão: [(x - retangulo1.left) + (y - retangulo1.top) * retangulo1.width] Ou seja, pela soma da diferença entre o ponto horizontal esquerdo de cada sprite com o ponto horizontal da posição de verificação em que está o retângulo da interseção (x - 45

46 retangulo1.left), com a diferença do ponto vertical no topo do sprite com o ponto vertical da posição de verificação do retângulo de interseção, vezes a largura do sprite ((y - retangulo1.top) * retangulo1.width), para saber em que linha da matriz imaginária ele se encontra. Com as variáveis inicializadas e o método criado, vamos ao método Update e fazemos as rotinas para movimentação dos personagens e a chamada para a função ColisaoPorPixel : // Detectando o estado do teclado KeyboardState teclado = Keyboard.GetState(); //Jogador 1 if (teclado.iskeydown(keys.d)) posicao.x += velocidade; if (teclado.iskeydown(keys.a)) posicao.x -= velocidade; if (teclado.iskeydown(keys.w)) posicao.y -= velocidade; if (teclado.iskeydown(keys.s)) posicao.y += velocidade; //Jogador 2 if (teclado.iskeydown(keys.right)) posicao2.x += velocidade; if (teclado.iskeydown(keys.left)) posicao2.x -= velocidade; if (teclado.iskeydown(keys.up)) posicao2.y -= velocidade; if (teclado.iskeydown(keys.down)) posicao2.y += velocidade; //Define o retângulo delimitador do jogador 1 Rectangle RetanguloPersonagem1 = new Rectangle((int)posicao.X, (int)posicao.y, jogador.width, jogador.height); //Define o retângulo delimitador do jogador 2 Rectangle RetanguloPersonagem2 = new Rectangle((int)posicao2.X, (int)posicao2.y, jogador2.width, jogador2.height); colisao = false; if (ColisaoPorPixel(RetanguloPersonagem1, matriztexturajogador, RetanguloPersonagem2, matriztexturajogador2)) colisao = true; Passamos como parâmetro retângulos e matrizes dos jogadores para o método realizar a verificação e retornar um booleano como resposta. Para finalizar, inserimos no método Draw uma verificação para mudar a cor do fundo quando ocorrer colisão e renderizamos os personagens: 46

47 //Muda a cor do fundo para vermelho quando uma colisão for detectada if(colisao) GraphicsDevice.Clear(Color.Red); else GraphicsDevice.Clear(Color.CornflowerBlue); spritebatch.begin(); spritebatch.draw(jogador, posicao, Color.White); spritebatch.draw(jogador2, posicao2, Color.White); spritebatch.end(); Imagem ilustrando o retângulo de interseção entre os dois sprites e quando de fato há colisão Observando as imagens acima, vemos que neste caso não poderíamos utilizar a técnica com Bounding Box, pois seria detectada uma colisão onde, de fato, não ocorreu. 47

48 Animação 2D 48

49 Animação 2D: Uma animação em um jogo de duas dimensões é representada por sprites exibidos em sequência, assim como a forma de animação tradicional para desenhos animados. Em jogos normalmente utilizam-se folhas de sprite. São imagens com as posições a serem usadas no processo de animação de forma a evitar a utilização de diversas texturas, reduzindo o gasto excessivo de recursos do sistema e deixando a execução do seu jogo mais eficiente. Folha de sprites com posições do jogo Super Mario World para Super Nintendo Folha de sprites com posições laterais do Mario utilizada por nós A imagem acima tem 230x34 pixels, sendo assim temos dez frames de 23x34 pixels. É importante que os quadros estejam bem definidos para o processo de animação ocorrer de forma satisfatória. Neste caso criaremos duas novas classes para efetuarmos a animação. Uma classe será responsável por armazenar e realizar a animação de um sprite, enquanto a outra servirá para gerenciar os objetos animados criados com a classe anterior. Vamos criar então a classe para representar cada animação de um sprite. A chamaremos de Animacao e a daremos o seguinte corpo: public class Animacao public Texture2D textura; //Quantidade de frames a serem vistos por segundo public int framesporsegundo; //Tempo gasto para exibição de um frame public float tempoporframe; //Tempo total decorrido desde a exibição do frame anterior public float tempototal; //Variavel Point é semelhante a um Vector2, porém com menos métodos //Dimensões do frame public Point tamanhoframe; //Armazena a coluna que está sendo utilizada public int frameatual; //Armazena quantidade de colunas da imagem public int tamanhoimagem; 49

50 //Posição da imagem onde deve começar a animação (primeiro frame) public Point posicaoinicial; //Se igual a true ativa o Loop da animação public bool isloop; public Animacao(Texture2D textura, int framesporsegundo, int colunas, int larguraframe, int alturaframe, Point posicaoinicial) this.textura = textura; this.framesporsegundo = framesporsegundo; //Converte para float para manter a precisão //Para chegar ao resultado, dividimos 1 segundo pelo fps this.tempoporframe = 1 / (float) framesporsegundo; this.tamanhoimagem = colunas; this.tamanhoframe = new Point(larguraFrame, alturaframe); //Para começar da primeira coluna this.frameatual = 0; this.isloop = false; this.posicaoinicial = posicaoinicial; public void Update(GameTime gametime) //Converte para float pois o valor é recebido em double //O tempototal é incrementado até atingir o tempoporframe tempototal += (float)gametime.elapsedgametime.totalseconds; if (tempototal > tempoporframe) //Avança para o proximo frame na coluna frameatual++; //Caso o frame atual passe da quantidade existente, ele recomeça //Se não, ele é decrementado e fica preso ao último frame if (frameatual >= tamanhoimagem) if (isloop) frameatual = 0; else frameatual--; //Reseta a variável para que ela recomece a contagem de tempo tempototal = 0; 50

51 public void Draw(ref SpriteBatch renderizador, Vector2 posicao) renderizador.draw(textura,posicao,new Rectangle(posicaoInicial.X + (frameatual * tamanhoframe.x), posicaoinicial.y, tamanhoframe.x, tamanhoframe.y), Color.White, 0, Vector2.Zero, 1, SpriteEffects.None, 0); //Os valores 0, 1 e 0 são referentes a rotação, escala e profundidade O código foi bem comentado para melhor entender seus procedimentos. No método Draw utilizamos uma de suas sobrecargas para definir que área da folha de sprites desenhar com base nos parâmetros repassados pelo método construtor. OBS: Como puderam observar, estamos passando o renderizador por referência ao método Draw da classe Animacao. A referência é utilizada para economizar espaço na memória e deixar a execução do método mais eficiente, além de utilizar exatamente a mesma variável utilizada pela classe principal (referência direta ao endereço de memória em que se encontra). Resumidamente esta classe fica responsável por criar na tela uma animação de um sprite com base na posição inicial e dimensões do frame encontrado na textura e a quantidade de colunas que existem após ele (ambas definidas por você). Agora iremos criar a classe responsável por gerenciar as animações criadas com a classe acima. A chamaremos de AnimacaoCollection e a daremos o seguinte corpo: public class AnimacaoCollection //Cria um Dictionary com uma string como chave e uma Animacao como valor public Dictionary<string, Animacao> animacoes = new Dictionary<string, Animacao>(); public string animacaoatual; public Vector2 posicao = Vector2.Zero; public AnimacaoCollection() public void AddAnimacao(Animacao animacao, string nome) animacoes.add(nome, animacao); public void trocaanimacao(string nome) animacaoatual = nome; public void Update(GameTime gametime) animacoes[animacaoatual].update(gametime); 51

52 public void Draw(ref SpriteBatch renderizador) animacoes[animacaoatual].draw(ref renderizador, posicao); A classe acima fica responsável por registrar novas animações, trocar a animação em execução com base em uma chave (string) e chamar seus métodos Update e Draw. Com as classes criadas, vamos a classe Game1 para as inserir em nosso jogo. Primeiramente declaramos as variáveis: AnimacaoCollection marioanimacoes; Texture2D marioimagem; No método Initialize inicializamos a variável marioanimacoes : marioanimacoes = new AnimacaoCollection(); No método LoadContent carregamos a textura e criamos as animações: //Carrega a textura marioimagem = Content.Load<Texture2D>(@"mario"); //Cria a animação correr para direita rodando a 10 fps com 5 frames Animacao corredir = new Animacao(marioImagem, 10, 5, 23,34,new Point(0,0)); //Ativa o Loop da animação corredir.isloop = true; marioanimacoes.addanimacao(corredir, "corredir"); //Cria a animação correr para a esquerda, tendo seu frame inicial a partir do ponto 115 no eixo x Animacao correesq = new Animacao(marioImagem, 10, 5, 23, 34, new Point(115, 0)); //Ativa o Loop da animação correesq.isloop = true; marioanimacoes.addanimacao(correesq, "correesq"); //Define uma posição qualquer na janela marioanimacoes.posicao = new Vector2(200, 200); //Define a animação inicial do sprite ao iniciar o jogo marioanimacoes.animacaoatual = "corredir"; 52

53 No método Update fazemos a troca entre as animações de acordo com as teclas pressionadas e chamamos o Update da variável do tipo AnimacaoCollection : KeyboardState k = Keyboard.GetState(); if (k.iskeydown(keys.left)) marioanimacoes.trocaanimacao("correesq"); marioanimacoes.posicao.x -= 3; else if (k.iskeydown(keys.right)) marioanimacoes.trocaanimacao("corredir"); marioanimacoes.posicao.x += 3; marioanimacoes.update(gametime); Feito isto basta adicionarmos a chamada para o método Draw da variável no método Draw da classe Game1 : renderizador.begin(); marioanimacoes.draw(ref renderizador); renderizador.end(); Se o seu programa foi codificado corretamente, ao executa-lo será iniciada a animação do sprite, tendo suas trocas alteradas de acordo com a movimentação definida pelas teclas que forem pressionadas. 53

54 Fluxo de Telas 54

55 Criação e gerenciamento do fluxo de telas: O fluxo de telas é indispensável em qualquer jogo, ele que define e realiza a troca entre a tela de iniciar e o começo do jogo ao pressionar Enter por exemplo. Para aplicar o gerenciamento do fluxo de telas são utilizados conceitos de herança, polimorfismo, override e enumeradores. Neste exemplo trabalharemos com duas telas, uma tela de introdução e a outra do jogo, sendo que ambas serão derivadas (herança) de uma classe chamada Tela. Imagem ilustrativa da comunicação entre as telas Intro e Game que herdam a classe Tela Além das três classes citadas, utilizaremos uma classe contendo um enumerador para identificar em que estado se encontra a cena atual. Antes de começarmos, é importante saber a respeito do funcionamento de variáveis do tipo Dictionary. De forma simplificada, podemos dizer que um Dictionary trata-se de uma lista indexada (assim como o HashMap, do Java). Ele nos permite armazenar uma chave e um valor de qualquer tipo por posição. Ex: Dictionary<chave,valor> lista; Primeiramente, crie uma classe chamada Estado e crie um enum conforme abaixo: public enum Estado //Vazio None, //Introdução Intro, //Game Game Vale ressaltar que o arquivo não deve contar nenhuma classe definida (public class), tendo então apenas o enum. Agora iremos criar a classe Tela como uma classe abstrata (pode ser herdada mas não instanciada) que terá dois métodos virtuais (que podem ser sobrepostos pelas suas classes derivadas com override) Update e Draw: 55

56 public abstract class Tela // Referência para o jogo que chamou a cena protected Game1 game; protected SpriteBatch renderizador; public Tela(Game1 game) this.game = game; // Recebe o renderizador do jogo via services do XNA this.renderizador = (SpriteBatch)game.Services.GetService(typeof(SpriteBatch)); public virtual void Update(GameTime gametime) public virtual void Draw(GameTime gametime) A classe tem a função de receber o objeto do tipo Game1 para então utilizar os serviços do jogo, neste caso o renderizador. OBS: O objeto Services faz parte das classes derivadas de Game, que faz parte da estrutura do XNA. Ele permite a interação de componentes entre as classes que de outras formas seriam difíceis ou impossíveis. Feito isto, criaremos agora as duas classes herdeiras da classe Tela e iremos sobrepor os métodos Update e Draw. A primeira chamaremos de Intro e a segunda de Game, conforme abaixo: public class Intro : Tela // Classe para a cena de introdução private Texture2D textura; // O commando base abaixo chama o método construtor da classe Tela e repassa a variável game public Intro (Game1 game) : base(game) this.texture = game.content.load<texture2d>(@"intro"); public override void Update(GameTime gametime) KeyboardState keystate = Keyboard.GetState(); // Verifica se foi pressionado a tecla Enter if (keystate.iskeydown(keys.enter)) //Troca de Cena (para o game) base.update(gametime); public override void Draw(GameTime gametime) renderizador.draw(textura, Vector2.Zero, Color.White); 56

57 base.draw(gametime); --- public class Game : Tela // Classe para o game private Texture2D textura; public Game(Game1 game) : base(game) this.texture = game.content.load<texture2d>(@"game"); public override void Update(GameTime gametime) KeyboardState keystate = Keyboard.GetState(); // Verifica se foi pressionado a tecla ESC if (keystate.iskeydown(keys.escape)) // Troca de Cena (para a introdução) base.update(gametime); public override void Draw(GameTime gametime) renderizador.draw(textura, Vector2.Zero, Color.White); base.draw(gametime); Neste caso, as duas classes são semelhantes, alterando apenas as imagens e a verificação da tecla pressionada para alterar a tela do jogo, mas em seu projeto você pode modificar de acordo com as suas necessidades, desde que a lógica do fluxo se mantenha. Com as classes criadas, vamos a classe Game1 e declaramos duas novas variáveis globais, sendo uma do tipo Dictionary e outra do tipo Estado (criado por nós): //Dicionário de cenas Dictionary<Estado, Tela> telas; //Cena atual do jogo Estado telaatual; jogo: Agora iremos criar na classe Game1 um método para fazer a troca entre as telas do public void TrocarTela(Estado proximatela) //Caso a cena atual seja diferente de vazia, remove do dicionário if (this.telaatual!= Estado.None) this.telas.remove(telaatual); // A cena atual recebe a próxima cena desejada telaatual = proximatela; // Caso a cena seja alguma especificada realiza a inserção da mesma no dicionário switch (proximatela) case Estado.Intro: // Adiciona a cena de introdução ao dicionário this.telas.add(estado.intro, new Intro(this)); break; 57

58 case Estado.Game: // Adiciona a cena de jogo ao dicionário this.telas.add(estado.game, new Game(this)); break; Com o método pronto, inicializamos o nosso Dictionary no método Initialize e adicionamos na função LoadContent o renderizador do Game1 aos serviços disponibilizados e a troca inicial para a cena de introdução: telas = new Dictionary<Estado, Tela>(); // Inicializa o dictionary telas // Adicionando sprite batch aos serviços do jogo Services.AddService(typeof(SpriteBatch), renderizador); // Trocando a cena para a cena de introdução TrocarTela(Estado.Intro); Nos métodos Draw e Update, adicionamos uma chamada para atualizar e desenhar a tela atual do jogo: protected override void Update(GameTime gametime) this.telas[telaatual].update(gametime); // Atualizando a cena atual base.update(gametime); protected override void Draw(GameTime gametime) GraphicsDevice.Clear(Color.CornflowerBlue); renderizador.begin(); this.telas[telaatual].draw(gametime); // Desenhando a cena atual renderizador.end(); base.draw(gametime); E por fim, adicionamos as trocas a serem realizadas pelas classes Intro e Game ao pressionar as teclas Enter e Esc: // Troca de Cena (cena de jogo) Inserir na verificação do Update do Intro game.trocartela(gamestate.game); // Troca de Cena (cena de introdução) Inserir na verificação do Update do Game game.trocartela(gamestate.intro); Transição entre duas telas utilizando o algoritimo ensinado acima Feito o passo a passo, basta compilar e executar o código para testar o resultado final. 58

59 Contrução de fases 59

60 Definição de Tiles: Os Tiles são pequenas imagens (em blocos, parte de um cenário maior), que são dispostas de forma a gerarem um estágio ou mapa de uma fase em um jogo, com uma ou mais camadas (layers). Imagem ilustrando um cenário formado por tiles (fonte: Essa técnica é conhecida como TileMap, e foi desenvolvida devido a falta de espaço nas mídias de armazenamento e poder de processamento na época de seu surgimento, onde utilizar grandes imagens como cenários era inviável. Abaixo alguns jargões utilizados para o trabalho com tiles: Tileset: Paleta de imagens contendo diversos tiles. Utilizada para construção dos mapas. Tilemap: Mapa formado por tiles. Layer: Cada layer representa uma camada de tiles, ou seja, em um jogo podemos ter mais de um layer (tiles sobrepondo outros tiles). Descrição do funcionamento da ténica: Primeiramente define-se os tiles que serão utilizados, com seu tamanho, imagem e posição: Imagem com tiles e suas respectivas numerações (fonte: 60

61 Logo após se monta um tilemap com especificações da posição de cada tile (com base em sua numeração e/ou posição) que comporá o cenário: Imagem de um tilemap, composto por uma matriz de números (fonte: E por fim construímos um algorítimo que substitua o número da matriz no tilemap pelos seus tiles equivalentes: Imagem com um mapa construído por tiles (fonte: 61

62 Criação do projeto: Para criarmos e desenharmos um mapa com tiles criaremos duas classes, uma chamada Tiles e outra chamada Mapa. Tileset utilizada em nosso exemplo A imagem utilizada em nosso exemplo contém duzentos e cinquenta e seis tiles, cada um com dimensões de 32x32. Criaremos um tilemap (matriz) com 15x15 tiles, ou seja, terá 480 pixels de largura e altura. A começar pela classe Tile, criaremos três variáveis globais, um método construtor para inicializá-las e um método para verificar se houve colisão entre o tile e um outro retângulo qualquer: public class Tile public Rectangle retangulo; public int tipo; public bool andavel; public Tile(int tipo, bool andavel, int x, int y, int larguratile, int alturatile) this.tipo = tipo; this.andavel = andavel; this.retangulo = new Rectangle(x, y, larguratile, alturatile); public bool Collide(Rectangle box) return this.retangulo.intersects(box); Cada tile é formado por um retângulo de uma imagem maior, sendo este inicializado no método construtor com os pontos x e y em que se encontra o tile na tileset e a sua largura e altura. 62

63 As variáveis tipo e andavel vão servir para verificar se podemos passar ou não sobre o tile, sendo que o tipo é a numeração que utilizamos em nossa matriz (tilemap). O método Collide fará a verificação de uma possível colisão entre dois retângulos (semelhante ao Bounding Box). forma: O mapa que utilizaremos é uma matriz com dimensões de 15x15, disposta da seguinte 147, 148, 148, 148, 148, 148, 145, 147, 148, 148, 148, 148, 148, 145, 146, 86, 86, 142, 86, 142, 86, 86, 86, 86, 86, 142, 86, 86, 142, 87, 86, 86, 86, 86, 142, 86, 86, 86, 86, 159, 86, 86, 86, 86, 87, 0, 0, 85, 86, 86, 87, 0, 0, 85, 86, 86, 86, 87, 0, 0, 0, 0, 85, 142, 86, 103, 0, 0, 101, 86, 142, 86, 103, 0, 0, 0, 0, 101, 102, 103, 0, 0, 0, 0, 101, 102, 103, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 70, 70, 72, 0, 0, 0, 0, 221, 0, 0, 223, 0, 0, 0, 119, 119, 142, 121, 122, 0, 0, 0, 221, 0, 0, 223, 0, 0, 0, 139, 86, 159, 86, 144, 0, 0, 0, 237, 238, 238, 239, 0, 0, 0, 139, 86, 86, 137, 103, 0, 0, 0, 237, 238, 238, 239, 0, 0, 0, 101, 102, 102, 138, 0, 0, 0, 0, 253, 254, 254, 255, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 Cada número da matriz acima representa um dos tiles de nossa tileset, a começar do 0 e finalizando com o 255 (256 no total). Criaremos a classe Mapa para realizar a leitura da matriz e desenhar os tiles em nossa janela. Primeiro declaramos as suas variáveis e o seu método construtor: //Imagem com os tiles private Texture2D tileset; //Vetor com as posições de cada tile do tileset private Rectangle[] tileframes; //Matriz de tiles private Tile[,] tiles; //Número de linhas da matriz de tiles private int linhas; //Número de colunas da matriz de tiles private int colunas; //Altura do tile private int tilealtura; //Largura do tile private int tilelargura; //Cria uma constante inteira para representar o tipo de um tile não andavel private const int TIPO_NAO_ANDAVEL = 0; 63

64 //Método construtor para inicializar as variaveis public Mapa(Texture2D tileset, int linhas, int colunas, int tilelargura, int tilealtura) this.linhas = linhas; this.colunas = colunas; this.tilelargura = tilelargura; this.tilealtura = tilealtura; this.tiles = new Tile[linhas, colunas]; this.tileset = tileset; Agora criaremos um método para armazenar um retângulo com a posição (frame) de cada tile da tileset utilizada, o chamaremos de GerarTileFrames : public void GerarTileFrames() //Armazena a quantidade de tiles da tileset int tilesprites = (this.tileset.width / this.tilelargura) * (this.tileset.height / this.tilealtura); this.tileframes = new Rectangle[tileSprites]; //Indice para contar as posições do array tileframes int indice = 0; //Largura da imagem do tile int width = this.tileset.width; //Altura da imagem do tile int height = this.tileset.height; //Percorre todos os tiles da tileset for (int y = 0; y < height; y += this.tilealtura) for (int x = 0; x < width; x += this.tilelargura) //Armazena as posições (rectangle) correspondentes a cada tipo de tile this.tileframes[indice] = new Rectangle(x, y, this.tilelargura, this.tilealtura); indice++; tileset. O método acima inicializa nosso array e passa a ele todas as posições dos tiles de nossa Criaremos mais dois métodos, desta vez para carregar nosso mapa (matriz) e definir a posição de cada tile em nossa tela e um outro para percorrer a nova matriz gerada e desenhar um de cada vez em nossa janela: public void CarregarMapa(int[,] matriz) /* testa se a matriz parâmetro tem * dimensões diferentes da matriz de tiles */ if (matriz.getlength(0)!= this.tiles.getlength(0) matriz.getlength(1)!= this.tiles.getlength(1)) 64

65 Mapa"); throw new Exception("Matriz não possui a mesma dimensão do //testa se a imagem dos tiles foi carregada if (this.tileset == null) throw new Exception("Imagem do mapa não foi carregada"); //gera os frames dos tiles this.gerartileframes(); //posição x do tile int x = 0; //posição y do tile int y = 0; //Tipo do tile que vai ser lido da matriz (inicializa com -1) int tipo = -1; //indica se o tile pode ser atravessado bool andavel = true; for (int i = 0; i < this.linhas; i++) for (int j = 0; j < this.colunas; j++) //Atribui a "tipo" o tipo (número) do tile tipo = matriz[i, j]; //Verifica se a posição da matriz é menor que zero ou maior que a quantidade de tiles ("frames") if (tipo < 0 tipo > this.tileframes.length) throw new Exception("Tipo de tile inválido"); else //Testa se o tipo lido é não-andável //Em nosso exemplo temos apenas um, porém poderia-se criar um vetor com os tiles que não são andáveis e realizar a verificação if (tipo == TIPO_NAO_ANDAVEL) andavel = false; //Cria o tile na posição x, y de nossa janela com as suas dimensões this.tiles[i, j] = new Tile(tipo, andavel, x, y, this.tilelargura, this.tilealtura); //"Reseta" a variável para true andavel = true; //Soma em X a largura do tile x += this.tilelargura; //"Reseta" a posição no eixo X x = 0; //Soma em Y a altura do tile y += this.tilealtura; 65

66 public void Draw(ref SpriteBatch renderizador) for (int i = 0; i < this.linhas; i++) for (int j = 0; j < this.colunas; j++) Rectangle destino = new Rectangle( this.tiles[i, j].retangulo.x, this.tiles[i, j].retangulo.y, this.tilelargura, this.tilealtura); int frame = this.tiles[i, j].tipo; renderizador.draw(this.tileset, destino, this.tileframes[frame], Color.White); Para renderizarmos os tiles, um de cada vez, utilizamos uma sobrecarga do método Draw onde passamos como parâmetro a imagem, o local da tela onde ela será desenhada, a área da imagem que será desenhada e a cor. Com as classes finalizadas, vamos a classe Game1 utilizá-las em nosso projeto. Primeiramente declaramos as variáveis necessárias: Mapa mapa; //estrutura do mapa int[,] matrizmapa = 148, 149, 149, 149, 149, 149, 146, 148, 149, 149, 149, 149, 149, 146, 147, 87, 87, 143, 87, 143, 87, 87, 87, 87, 87, 143, 87, 87, 143, 87, 87, 87, 87, 87, 143, 87, 87, 87, 87, 159, 87, 87, 87, 87, 87, 1, 1, 86, 87, 87, 88, 1, 1, 86, 87, 87, 87, 88, 1, 1, 1, 1, 86, 143, 87, 104, 1, 1, 102, 87, 143, 87, 104, 1, 1, 1, 1, 102, 103, 104, 1, 1, 1, 1, 102, 103, 104, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 70, 71, 72, 1, 1, 1, 1, 222, 1, 1, 224, 1, 1, 1, 120, 121, 143, 122, 123, 1, 1, 1, 222, 1, 1, 224, 1, 1, 1, 141, 87, 159, 87, 144, 1, 1, 1, 238, 239, 239, 240, 1, 1, 1, 141, 87, 87, 138, 104, 1, 1, 1, 238, 239, 239, 240, 1, 1, 1, 102, 103, 103, 139, 1, 1, 1, 1, 254, 255, 255, 256, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ; //largura do tile const int LARGURA_TILE = 32; //altura do tile const int ALTURA_TILE = 32; //largura da tela const int LARGURA_TELA; //altura da tela const int ALTURA_TELA; Como mencionado anteriormente, nosso mapa é representado por uma matriz de 15x15, sendo que cada tile possui 32x32 pixels, sendo assim nosso mapa tem uma extensão total de 480x

67 No método construtor ( Game1 ) calculamos a resolução da tela de acordo com o tamanho da matriz e dos pixels (dimensão do mapa) e com base no resultado mudamos a resolução da janela: //Multiplica a largura do tile pelo numero de colunas da matriz LARGURA_TELA = LARGURA_TILE * matrizmapa.getlength(0); //Multiplica a altura do tile pelo numero de linhas da matriz ALTURA_TELA = ALTURA_TILE * matrizmapa.getlength(0); //define a largura da tela this.graphics.preferredbackbufferwidth = LARGURA_TELA; //define a altura da tela this.graphics.preferredbackbufferheight = ALTURA_TELA; No método Initialize inicializamos a nossa variável mapa e chamamos o método CarregarMapa da mesma: //Cria o mapa this.mapa = new Mapa(Content.Load<Texture2D>("tiles"),matrizMapa.GetLength(0), matrizmapa.getlength(1), LARGURA_TILE, ALTURA_TILE); //Carrega o mapa this.mapa.carregarmapa(this.matrizmapa); E por fim, no método Draw desenhamos nosso mapa: this.spritebatch.begin(); //Desenha o mapa na tela this.mapa.draw(ref this.spritebatch); this.spritebatch.end(); Imagem com os tiles desenhados utilizando a técnica ensinada acima. OBS: A técnica ensinada nos permite trabalhar com apenas um layer de tiles. Para criarmos um segundo ou terceiro layer precisaríamos construir uma nova matriz com o novo layer, declarar um novo objeto do tipo Mapa e o desenhar sob ou sobre o layer atual no método Draw, ou então modificar a classe Mapa para que suporte mais que um. 67

68 Utilização de arquivos.xml: Antes de continuarmos com o estudo dos tiles, precisamos saber melhor a respeito da utilização de arquivos.xml em um projeto no XNA (O editor de mapa que usaremos mais adiante trabalha com este formato). Para realizarmos a leitura direta de um arquivo.xml (que não seja no formato estabelecido pelo xna) utilizamos uma variável do tipo XmlTextReader. Vale ressaltar que não devemos inserir o arquivo no Content de nosso projeto, já que ele será carregado externamente sem a utilização do framework XNA. OBS: O xna tem suporte nativo a arquivos.xml, desde que sigam um padrão pré-estabelecido em sua escrita, o que não é o caso do arquivo gerado pelo editor de mapas que usaremos. Com o nosso arquivo.xml gerado, o copiamos para a pasta Debug de nosso projeto. Vamos agora a nossa classe que desejamos realizar a leitura e declaramos uma variável para a operação (após importar a biblioteca System.Xml): XmlTextReader leitorxml; Agora iremos a um método qualquer que desejemos utilizar para a inicialização, e carregamos nosso arquivo para a variável da seguinte forma: leitorxml = new XmlTextReader("arquivo.xml"); Com a variável declarada e inicializada podemos utilizar os métodos para manipulação do arquivo (somente leitura). Abaixo pode-se conferir alguns dos principais:.read(): Utilizado para avançar até a próxima informação do arquivo. Geralmente inserido dentro de laços while para realizar a leitura do arquivo até o seu fim;.nodetype: Retorna o tipo do nó atual;.name: Retorna o nome do campo atual;.value: Retorna o valor (em string) da linha atual;.getattribute((int) index): Utilizado para obter o atributo da declaração do campo atual. Além da leitura convencional podemos ler e salvar aquivos serializáveis, o que facilita bastante todo o processo. Abaixo uma pequena descrição a respeito da serialização: De forma genérica a serialização é uma técnica usada para persistir objetos, ou seja : gravar objetos em disco, fazer a transmissão remota de objetos via rede, armazenar os objetos em um banco de dados e/ou arquivos (binários, xml, etc.) Serializar nada mais é do que colocar os valores que o objeto está utilizando juntamente com suas propriedades de uma forma que fique em série (sequencial). Fazendo isto estamos tornando o objeto Serializable, e, tornando um objeto Serializable, estamos atribuindo essa qualidade a ele, e dando privilégios para que o mesmo possa ser gravado em disco ou enviado por rede. 68

69 A serialização é o processo de armazenar um objeto, incluindo todos os atributos públicos e privados para um stream. ( No C# para realizarmos o processo de serialização em xml utilizamos uma variável do tipo XmlSerializer (precisamos importar primeiramente a biblioteca System.Xml.Serialization). Sua utilização se da de maneira bem simples. Primeiramente declaramos uma variável e a inicializamos: XmlSerializer serializer = new XmlSerializer(typeof(TIPO)); A nossa variável é inicializada com o tipo do arquivo que queremos serializar (geralmente do tipo de uma struct ou classe). E por fim nós o serializamos com o método Serialize() : serializer.serialize(stream, data); O objeto data é do tipo que deseja-se serializar, o stream é do tipo FileStream, utilizado para fluxo de dados em um arquivo carregado por meio do File.Open(). OBS: Para carregar um arquivo utilizando o File.Open, primeiramente devemos importar a bibliotéca System.IO para nosso projeto, e em uma sobrecarga do método passamos dois paramêtros básicos (possui outras sobrecargas), o caminho para o arquivo e o modo da operação, por exemplo: File.Open(filename, FileMode.OpenOrCreate); Onde o filename é uma string, e o modo da operação é de abertura e criação (caso não exista). Para realizarmos o processo inverso (desserializar) nós utilizamos o método Deserialize(), como abaixo: data = (TIPO)serializer.Deserialize(stream); Passamos como parâmetro um objeto do tipo FileStream (com o fluxo para um determinado arquivo) e fazemos um cast para o tipo de nosso objeto na hora de atribui-lo a uma variável. 69

70 Construindo mapas com o XNA Tile Map Editor: O XNA Tile Map Editor é uma ferramente livre desenvolvida pelo programador Armando Alva da desenvolvedora NandoSoft e pode ser baixada gratuitamente pelo seu site ( OBS: Para utilizar o programa é necessário instalar o Microsoft XNA Framework Redistributable 3.1 (apenas para execução), pois o mesmo foi feito com o XNA 3.1. Tela inicial do XNA Tile Map Editor Ao iniciar o programa, será aberta a tela acima com um espaço para criarmos nosso mapa. Para modificarmos as dimensões do mapa e a quantidade de layers que utilizaremos, vamos a janela Resize Map atráves do caminho Edit/Resize Map. Janela Resize Map Em nosso exemplo criaremos um mapa de 15 tiles de largura por 10 tiles de altura. 70

71 Para modificarmos o tamanho de um tile, vamos em Edit / Change Tile Size (em nosso mapa manteremos o tamanho padrão de uma tileset, ou seja, 32): Janela Change Tile Size Com o tamanho dos tiles e a dimensão definidos, vamos importar uma tileset para desenharmos nosso mapa. Para importar uma tileset, vamos em File / Load Tileset e selecionamos a tileset desejada. Tileset utilizada para construção do nosso mapa Com a tileset carregada você pode desenhar seu mapa utilizando as opções na barra abaixo do menu, dentre as quais você pode definir o layer que deseja desenhar, se utilizar o pincel, o marcador, o balde de tinta ou a borracha. Mapa desenhado em três layers diferentes 71

72 Com o mapa pronto, basta clicar em Options / Export to XML e selecionar o diretório que deseja salvar o arquivo. Lembrando que para utilizar esse arquivo em seu projeto, o mesmo deve ser posto dentro da pasta Debug. OBS: O XNA Tile Map Editor conta com uma opção para selecionar os locais em que haverá colisão no seu mapa, o mesmo é utilizado como o marcador do pincel e pode ser selecionado na barra de opções. Para utilizarmos o arquivo xml gerado pelo programa criaremos uma nova classe CarregarMapaXML e faremos algumas alterações nas classe Mapa e Tile mostradas anteriormente. Primeiramente alteramos a classe Tile acrescentando uma variável booleana para definir se o tile deve ser desenhado: public class Tile public Rectangle retangulo; //numeração usada na matriz public int tipo; public bool andavel; //Atributo para definir se o tile vai ser desenhado (para caso o tile seja transparente ou não exista) public bool transparente; public Tile(int tipo, bool andavel, bool transparente, int x, int y, int larguratile, int alturatile) this.tipo = tipo; this.andavel = andavel; this.retangulo = new Rectangle(x, y, larguratile, alturatile); this.transparente = transparente; public bool Collide(Rectangle box) return this.retangulo.intersects(box); Agora modificaremos a classe Mapa para que aceite mais de um layer, dentre outras pequenas alterações que podem ser conferidas abaixo: public class Mapa //Imagem com os tiles public Texture2D tileset; //Vetor com as posições de cada tile do tileset public Rectangle[] tileframes; //Lista de matrizes de tiles public List<Tile[,]> tiles; //Número de linhas da matriz de tiles public int linhas; //Número de colunas da matriz de tiles public int colunas; //Altura do tile public int tilealtura; 72

73 //Largura do tile public int tilelargura; //Lista de matrizes de inteiros (para os layers) public List<int[,]> matrizlayer; //Matriz para locais com colisão ativa public int[,] matrizcolisao; //Método construtor para inicializar algumas variaveis public Mapa(Texture2D tileset) this.tileset = tileset; this.tiles = new List<Tile[,]>(); this.matrizlayer = new List<int[,]>(); public void GerarTileFrames() //Armazena a quantidade de tiles da tileset int tilesprites = (this.tileset.width / this.tilelargura) * (this.tileset.height / this.tilealtura); tile this.tilealtura); Mapa"); this.tileframes = new Rectangle[tileSprites]; //Indice para contar as posições do array tileframes int indice = 0; //Largura da imagem do tile int width = this.tileset.width; //Altura da imagem do tile int height = this.tileset.height; //Percorre todos os tiles da tileset for (int y = 0; y < height; y += this.tilealtura) for (int x = 0; x < width; x += this.tilelargura) //Armazena as posições (rectangle) correspondentes a cada tipo de this.tileframes[indice] = new Rectangle(x, y, this.tilelargura, indice++; public void CarregarMapa(int[,] matriz, int layer) /* Testa se a matriz colisão tem dimensões diferentes da matriz de tiles */ if (matrizcolisao.getlength(0)!= this.tiles[layer].getlength(0) matrizcolisao.getlength(1)!= this.tiles[layer].getlength(1)) throw new Exception("Matriz de Colisão não possui a mesma dimensão do //Gera os frames dos tiles this.gerartileframes(); //posição x do tile int x = 0; //posição y do tile int y = 0; //Tipo do tile que vai ser lido da matriz (inicializa com -1) int tipo = -1; //indica se o tile pode ser atravessado bool andavel = true; //Indica se o espaço do tile vai ser desenhado 73

74 bool transparente = false; for (int i = 0; i < this.linhas; i++) for (int j = 0; j < this.colunas; j++) //Atribui a "tipo" o tipo (número) do tile tipo = matriz[i, j]; //Verifica se a posição da matriz é menor que -1 ou maior que a quantidade de tiles ("frames") if (tipo < -1 tipo > this.tileframes.length) throw new Exception("Tipo de tile inválido"); else //Testa se o tipo lido deve ser desenhado if (tipo == -1) transparente = true; //Testa se o tipo lido é não-andável //Em nosso exemplo temos apenas um, porém poderia-se criar um vetor com os tiles que não são andáveis e realizar a verificação if (matrizcolisao[i, j] == 0) andavel = false; //Cria o tile na posição x, y de nossa janela com as suas dimensões this.tiles[layer][i, j] = new Tile(tipo, andavel, transparente, x, y, this.tilelargura, this.tilealtura); //"Reseta" as variáveis andavel = true; transparente = false; //Soma em X a largura do tile x += this.tilelargura; //"Reseta" a posição no eixo X x = 0; //Soma em Y a altura do tile y += this.tilealtura; //O método Draw desenha apenas o layer que for passado como paramêtro public void Draw(ref SpriteBatch batch, int layer) for (int i = 0; i < this.linhas; i++) for (int j = 0; j < this.colunas; j++) Vector2 destino = new Vector2(this.tiles[layer][i, j].retangulo.x, this.tiles[layer][i, j].retangulo.y); int frame = this.tiles[layer][i, j].tipo; Color.White); //Caso o tile não seja transparente, o desenhar if (this.tiles[layer][i, j].transparente == false) batch.draw(this.tileset, destino, this.tileframes[frame], 74

75 Os objetos do tipo List<> utilizados funcionam como um vetor dinâmico, ou seja, criam uma lista indexada que pode receber novos valores em novas posições. Em nosso caso declaramos listas de matrizes. Com as classes alteradas, criaremos agora a CarregarMapaXML. Como não temos acesso ao modelo seriálizavel do xml gerado pelo editor (o que pode ser obtido estudando o seu código fonte), nós criaremos um modelo bem rudimentar para realizar a leitura do arquivo: //Biblioteca extras utilizadas using System.Xml; using Microsoft.Xna.Framework.Graphics; class CarregarMapaXML #region Variáveis Globais XmlTextReader mapaxml; bool layer1ativo; bool layer2ativo; bool layer3ativo; bool layercolisaoativo; List<List<int>> listalayer1x = new List<List<int>>(); List<int> listalayer1y = new List<int>(); List<List<int>> listalayer2x = new List<List<int>>(); List<int> listalayer2y = new List<int>(); List<List<int>> listalayer3x = new List<List<int>>(); List<int> listalayer3y = new List<int>(); List<List<int>> listalayercolisaox = new List<List<int>>(); List<int> listalayercolisaoy = new List<int>(); Mapa mapa; int contadorlayer; #endregion #region Métodos para Inicialização public CarregarMapaXML(string ARQUIVO, Texture2D tileset) //Carrega o arquivo xml para a variável this.mapaxml = new XmlTextReader(ARQUIVO); //Armazena a quantidade de layers existentes this.contadorlayer = getquantidadelayer(new XmlTextReader(ARQUIVO)); //Verifica se a quantidade é maior que o máximo de layers suportados if (this.contadorlayer > 3 this.contadorlayer <= 0) throw new Exception("Erro! Numero de layers nao suportado."); //Inicializa o mapa this.mapa = new Mapa(tileset); //Inicializa os boleanos this.layer1ativo = false; this.layer2ativo = false; this.layer3ativo = false; this.layercolisaoativo = false; //Retorna a quantidade de layers do arquivo xml public int getquantidadelayer(xmltextreader arquivo) while (arquivo.read()) if (arquivo.name == "Layers") arquivo.read(); return Convert.ToInt32(arquivo.Value); //Caso não encontre nada, retorna 0 return 0; 75

76 #endregion #region Métodos Públicos (Carregar informações do.xml) //Lê o arquivo xml e nos retorna um objeto do tipo mapa inicializado com os valores carregados public Mapa lermapa() while (mapaxml.read()) //Verifica se o nó em que se encontra a leitra é igual a uma declaração <declaração> if (mapaxml.nodetype == XmlNodeType.Element) switchlinha(mapaxml); //Carrega para a matriz de inteiros nossa lista dinâmica de colisão carregarmatrizcolisao(listalayercolisaox); for (int i = 0; i < this.contadorlayer; i++) //Adiciona a lista uma nova matriz de tiles referente ao layer atual this.mapa.tiles.add(new Tile[this.mapa.linhas, this.mapa.colunas]); //Carrega para a matriz de inteiros nossa lista dinâmica do primeiro layer if (i == 0) carregarmatrizlayer(listalayer1x, 0); //Carrega para a matriz de inteiros nossa lista dinâmica do segundo layer else if (i == 1) carregarmatrizlayer(listalayer2x, 1); //Carrega para a matriz de inteiros nossa lista dinâmica do terceiro layer else if (i == 2) carregarmatrizlayer(listalayer3x, 2); //Carrega o mapa na classe Mapa (para a matriz de tiles) this.mapa.carregarmapa(this.mapa.matrizlayer[i],i); return mapa; public void switchlinha(xmltextreader mapaxml) switch (mapaxml.name) case "Width": //Passa para a próxima linha mapaxml.read(); //Inicializa a quantidade de colunas this.mapa.colunas = Convert.ToInt32(mapaxml.Value); break; case "Height": mapaxml.read(); //Inicializa a quantidade de linhas this.mapa.linhas = Convert.ToInt32(mapaxml.Value); break; case "Tile_Size": mapaxml.read(); //Inicializa as dimensões do tile (somente quadrados) this.mapa.tilealtura = this.mapa.tilelargura = Convert.ToInt32(mapaxml.Value); break; case "Layer": //Caso seja o layer 1 if (Convert.ToInt32(mapaxml.GetAttribute(0)) == 0) this.layer1ativo = true; 76

77 //Caso seja o layer 2 else if (Convert.ToInt32(mapaxml.GetAttribute(0)) == 1) this.layer1ativo = false; this.layer2ativo = true; //Caso seja o layer 3 else if (Convert.ToInt32(mapaxml.GetAttribute(0)) == 2) this.layer2ativo = false; this.layer3ativo = true; break; case "CollisionLayer": //Caso seja o layer de colisão this.layer1ativo = false; this.layer2ativo = false; this.layer3ativo = false; this.layercolisaoativo = true; break; case "RowInfo": mapaxml.read(); String linha = mapaxml.value; //Captura os elementos entre as virgulas da linha string[] coluna = linha.split(','); do 1 e não do 0 transparente //Caso seja uma linha do layer 1 if (layer1ativo) for (int i = 0; i < coluna.length; i++) //Subtrai 1 pois o Map Editor gera uma matriz com os tiles a partir //O valor -1 é utilizado para espaços sem tiles, ou seja, com fundo if (Convert.ToInt32(coluna[i])!= -1) this.listalayer1y.add(convert.toint32(coluna[i]) - 1); else this.listalayer1y.add(convert.toint32(coluna[i])); //Adiciona a lista de colunas na lista de linhas this.listalayer1x.add(listalayer1y); //Reseta a lista de colunas this.listalayer1y = new List<int>(); do 1 e não do 0 else if (layer2ativo) for (int i = 0; i < coluna.length; i++) //Subtrai 1 pois o Map Editor gera uma matriz com os tiles a partir if (Convert.ToInt32(coluna[i])!= -1) this.listalayer2y.add(convert.toint32(coluna[i]) - 1); else this.listalayer2y.add(convert.toint32(coluna[i])); //Adiciona a lista de colunas na lista de linhas this.listalayer2x.add(listalayer2y); //Reseta a lista de colunas this.listalayer2y = new List<int>(); else if (layer3ativo) for (int i = 0; i < coluna.length; i++) 77

78 do 1 e não do 0 //Subtrai 1 pois o Map Editor gera uma matriz com os tiles a partir if (Convert.ToInt32(coluna[i])!= -1) this.listalayer3y.add(convert.toint32(coluna[i]) - 1); else this.listalayer3y.add(convert.toint32(coluna[i])); //Adiciona a lista de colunas na lista de linhas this.listalayer3x.add(listalayer3y); //Reseta a lista de colunas this.listalayer3y = new List<int>(); else if (layercolisaoativo) for (int i = 0; i < coluna.length; i++) this.listalayercolisaoy.add(convert.toint32(coluna[i])); break; //Adiciona a lista de colunas na lista de linhas this.listalayercolisaox.add(listalayercolisaoy); //Reseta a lista de colunas this.listalayercolisaoy = new List<int>(); //Repassa os valores da lista dinâmica para a matriz de layers do Mapa public void carregarmatrizlayer(list<list<int>> mlayer, int layer) //Adiciona a lista uma nova matriz com os dados do layer passado this.mapa.matrizlayer.add(new int[this.mapa.linhas, this.mapa.colunas]); for (int x = 0; x < this.mapa.linhas; x++) for (int y = 0; y < this.mapa.colunas; y++) this.mapa.matrizlayer[layer][x, y] = mlayer[x][y]; //Repassa os valores da lista dinâmica para a matriz de colisão do Mapa public void carregarmatrizcolisao(list<list<int>> listalayercolisao) //Adiciona a lista uma nova matriz com os dados do layer de colisão passado this.mapa.matrizcolisao = new int[this.mapa.linhas, this.mapa.colunas]; for (int x = 0; x < this.mapa.linhas; x++) for (int y = 0; y < this.mapa.colunas; y++) this.mapa.matrizcolisao[x, y] = listalayercolisao[x][y]; #endregion A classe foi devidamente comentada para seu melhor entendimento. Como puderam observar, a classe foi criada para aceitar até no máximo três layers, o que pode ser modificado de acordo com as suas preferências. 78

79 Após finalizar as classes, vamos a classe Game1 para utilizá-las em nosso jogo. Primeiramente iremos declarar uma variável global do tipo Mapa para armazenas as informações de nosso mapa e as desenhar na janela. Mapa mapa; Com a variável declarada, vamos ao método Initialize e carregamos o arquivo xml por meio da classe CarregarMapaXML : CarregarMapaXML mapaxml = new CarregarMapaXML("arquivo.xml", Content.Load<Texture2D>("tileset")); mapa = mapaxml.lermapa(); O primeiro parâmetro é uma string com o nosso arquivo xml e o segundo é a nossa tileset carregada pelo Contet. Chamamos o método lermapa() e atribuímos o seu retorno a nossa variável mapa. Por fim vamos ao método Draw e desenhamos nosso mapa na janela: mapa.draw(ref this.spritebatch,0); mapa.draw(ref this.spritebatch,1); mapa.draw(ref this.spritebatch,2); Como nosso mapa possui três layers, fazemos três chamadas ao método Draw do nosso mapa. Deixamos desta forma pois podemos gerar efeitos como desenhar nossos personagens por trás de um determinado layer, fazendo com que, por exemplo, ele passe por trás de uma árvore Imagens com mapa gerado em três layers e o efeito de nosso personagem se posicionar atrás da cabana 79