[XNA] TileMap
Antes de começarmos a programar tilemaps vamos ver algumas definições.
Tiles:
Tiles são pequenos pedaços de imagens que servem para criar uma nova imagem composta conhecida como layer, utilizadas para criar o cenário de um jogo. Essa técnica é chamada de TileMaps, no qual, através de uma imagem contendo diversos pedacinhos de imagens (tiles), se pode criar um cenário para um jogo. Exemplos clássicos do uso de TileMaps, são em jogos de RPG (Role Playing Game). Os jogos de RPG geralmente possuem cenários extensos o qual se fosse feito com uma única imagem ocuparia muito espaço de memória e naquela época em que surgiram, as memórias eram bem limitadas. Então a técnica de dividir o cenário em tiles e recriá-lo em tempo de processamento fez essa técnica ser muito utilizada até hoje em dia.
Como esta técnica funciona?
A primeira etapa é definir os tiles, ou seja, seu tamanho e suas imagens dentro dele.
A segunda parte é montar o Tilemap (também conhecido como bricks), ou seja, definir a estrutura que vai descrever aquele cenário do nosso jogo.
E por fim em tempo de execução nosso algoritmo deve substituir os números da matriz de tilemap pelas posições correspondentes do nosso tile. Esse cenário é conhecido como layer.
Projeto:
Então para fixarmos a parte teórica vamos implementar um mapa básico para um jogo do Pacman, inicie um novo projeto e coloque o nome de Pacman.
Criado o projeto vamos então criar uma classe com o nome Tile.cs que servirá para definirmos as propriedades dos tiles do jogo. Veja como vai ficar a classe.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework;
namespace TileMap
{
/// <summary>
/// Controla o estado entre os tiles para ver se existe ou não colisão
/// </summary>
public enum TileCollision
{
/// <summary>
/// Define que o tile á passavel
/// </summary>
Passable,
/// <summary>
/// Define que o tile é um sólido impassavel, ou seja,
/// existe colisão caso tentem passar por este tile.
/// </summary>
Impassable
};
/// <summary>
/// Definição da classe tile
/// </summary>
public class Tile
{
public Texture2D texture;
public TileCollision collision;
public readonly Vector2 size;
/// <summary>
/// Construtor de um novo tile
/// </summary>
public Tile(Texture2D texture, TileCollision collision)
{
this.texture = texture;
this.collision = collision;
this.size = new Vector2(this.texture.Width, this.texture.Height);
}
}
}
Essa classe define a imagem do tile, seu tamanho que é conforme o tamanho da imagem e se existe ou não colisão.
Agora clique com o botão direito e faça download das imagens abaixo.
Tiles:
block00.png
block01.png
block02.png
block03.png
Sprite:
ghost.png
Logo após fazer o download das imagens as carregue em seu projeto conforme o Solution Explorer abaixo.
Agora na nossa classe Game1.cs vamos carregar nossas imagens, mas para isso vamos criar uma lista da nossa classe Tile e um Texture2D para carregar a imagem do fantasmas (personagem do nosso jogo). Adicione então as seguintes variáveis:
// Texture a ser utilizada para o personagem do tutorial Texture2D character; // Lista de tiles para montar o cenário List<Tile> tiles;
E então no método LoadContent vamos carregar as imagens.
protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
// Criando a lista de tiles
tiles = new List<Tile>();
// Adicionando os tiles a lista
tiles.Add(new Tile(Content.Load<Texture2D>(@"Tiles\block00"), TileCollision.Passable));
tiles.Add(new Tile(Content.Load<Texture2D>(@"Tiles\block01"), TileCollision.Passable));
tiles.Add(new Tile(Content.Load<Texture2D>(@"Tiles\block02"), TileCollision.Passable));
tiles.Add(new Tile(Content.Load<Texture2D>(@"Tiles\block03"), TileCollision.Impassable));
// Carrega a textura do personagem
character = Content.Load<Texture2D>(@"Sprites\ghost");
}
Com nossas imagens carregadas precisamos agora criar a estrutura do nosso mapa. E nosso mapa vai ser da seguinte forma:
Propriedades do mapa:
- Matriz de números inteiros de 28 x 25
- Valor0 para block00
- Valor1 para block01
- Valor2 para block02
- Valor3 para block03 e somente este bloco é impassível.
Abaixo então de onde colocamos nossas variáveis declare nosso mapa conforme o código abaixo.
/// <summary>
/// Este é o brick ou seja nossa estrutura do mapa para nosso jogo
/// Os números serão substituidos pelos tiles adcionados a nossa lista
/// </summary>
int[,] map = {
{3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3},
{3,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,2,2,2,2,2,2,2,2,2,2,2,3},
{3,1,3,3,3,3,3,2,3,3,3,3,2,3,3,2,3,3,3,3,2,3,3,3,3,3,1,3},
{3,2,3,3,3,3,3,2,3,3,3,3,2,3,3,2,3,3,3,3,2,3,3,3,3,3,2,3},
{3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3},
{3,2,3,3,3,3,3,2,3,2,3,3,3,3,3,3,3,3,2,3,2,3,3,3,3,3,2,3},
{3,2,2,2,2,2,2,2,3,2,2,2,2,3,3,2,2,2,2,3,2,2,2,2,2,2,2,3},
{3,3,3,3,3,3,3,2,3,3,3,3,2,3,3,2,3,3,3,3,2,3,3,3,3,3,3,3},
{0,0,0,0,0,0,3,2,3,2,2,2,2,2,2,2,2,2,2,3,2,3,0,0,0,0,0,0},
{0,3,3,3,3,3,3,2,3,2,3,3,3,0,0,3,3,3,2,3,2,3,3,3,3,3,3,0},
{0,0,0,0,0,0,0,2,2,2,3,0,0,0,0,0,0,3,2,2,2,0,0,0,0,0,0,0},
{0,3,3,3,3,3,3,2,3,2,3,3,3,3,3,3,3,3,2,3,2,3,3,3,3,3,3,0},
{0,0,0,0,0,0,3,2,3,2,2,2,2,2,2,2,2,2,2,3,2,3,0,0,0,0,0,0},
{3,3,3,3,3,3,3,2,3,2,3,3,3,3,3,3,3,3,2,3,2,3,3,3,3,3,3,3},
{3,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,2,2,2,2,2,2,2,2,2,2,2,3},
{3,2,3,3,3,3,3,2,3,3,3,3,2,3,3,2,3,3,3,3,2,3,3,3,3,3,2,3},
{3,2,3,3,3,3,3,2,3,3,3,3,2,3,3,2,3,3,3,3,2,3,3,3,3,3,2,3},
{3,2,2,2,2,2,3,2,2,2,2,2,2,0,0,2,2,2,2,2,2,3,2,2,2,2,2,3},
{3,3,3,3,3,2,3,2,3,2,3,3,3,3,3,3,3,3,2,3,2,3,2,3,3,3,3,3},
{3,3,3,3,3,2,3,2,3,2,3,3,3,3,3,3,3,3,2,3,2,3,2,3,3,3,3,3},
{3,2,2,2,2,2,2,2,3,2,2,2,2,3,3,2,2,2,2,3,2,2,2,2,2,2,2,3},
{3,2,3,3,3,3,3,2,3,3,3,3,2,3,3,2,3,3,3,3,2,3,3,3,3,3,2,3},
{3,1,3,3,3,3,3,2,3,3,3,3,2,3,3,2,3,3,3,3,2,3,3,3,3,3,1,3},
{3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3},
{3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3},
};
NOTA: O mapa não precisa ser inicializado desta maneira, você pode carregar sua matriz através de um arquivo.
Antes de desenharmos nosso mapa e personagem vamos definir uma váriavel de posição, velocidade e direção para nosso personagem. Veja abaixo como fica a declaração das variáveis
// Posição do personagem Vector2 position = new Vector2(324.0f, 408.0f); // Velocidade do personagem float speed = 2.0f; // Direção de movimento do personagem Vector2 direction = new Vector2(0.0f, 0.0f);
Com todas essas variáveis declaradas, agora podemos desenhar para ver o resultado e depois trabalhar na movimentação e colisão do personagem. Veja o método de desenho como fica.
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.Black);
spriteBatch.Begin();
// Desenhando o mapa do jogo
for (int i = 0; i < map.GetLength(0); i++)
{
for (int j = 0; j < map.GetLength(1); j++)
{
spriteBatch.Draw(tiles[map[i, j]].texture,
new Vector2(j * tiles[map[i, j]].size.X, i * tiles[map[i, j]].size.X),
Color.White);
}
}
// Desenhando o personagem
spriteBatch.Draw(character, position, Color.White);
spriteBatch.End();
base.Draw(gameTime);
}
Se você executar o programa agora poderá ver o mapa e o nosso personagem desenhado na tela, mas sem movimento. Para criarmos seu movimento precisamos fazer como já fizemos em diversos tutoriais.
protected override void Update(GameTime gameTime)
{
// Recebe o estado do teclado
KeyboardState keyboardState = Keyboard.GetState();
// Verifica se o jogador pressionou seta para cima
if (keyboardState.IsKeyDown(Keys.Up))
{
this.direction.Y = -1;
}
// Verifica se o jogador pressionou seta para baixo
if (keyboardState.IsKeyDown(Keys.Down))
{
this.direction.Y = 1;
}
// Verifica se o jogador pressionou seta para direita
if (keyboardState.IsKeyDown(Keys.Right))
{
this.direction.X = 1;
}
// Verifica se o jogador pressionou seta para esqueda
if (keyboardState.IsKeyDown(Keys.Left))
{
this.direction.X = -1;
}
// Atualiza a posição do personagem
this.position += this.direction * this.speed;
base.Update(gameTime);
}
Legal, se executar o nosso joguinho agora verá poderá movimentar o fantasma, porém ele esta atravessando a parede e andando em diagonal, ou seja, precisamos corrigir isso. Para corrigirmos isso vamos ter que verificar se existe colisão do personagem com o tile que ele esta no momento. Então vamos criar um método para verificar isso. Abaixo do método de desenho, digite o seguinte código:
/// <summary>
/// Método que detecta colisão
/// </summary>
/// <param>posição y do tile</param>
/// <param>posição x do tile</param>
/// <returns></returns>
public bool CheckTileCollision(int x, int y)
{
if (tiles[map[y, x]].collision != TileCollision.Impassable)
{
return false;
}
return true;
}
Agora temos um método que a partir de um ponto X e Y de tile ele verifica se o tile não é passável. Vamos então utilizar esse método após tentarmos movimentar nosso personagem no método Update(). Digite o seguinte código antes de atualizarmos a posição do personagem:
protected override void Update(GameTime gameTime)
{
.
.
.
.
// Define a nova posição do personagem
Vector2 newPosition = this.position;
newPosition.X += this.direction.X * speed;
newPosition.Y += this.direction.Y * speed;
// Define os tiles vizinhos do personagem conforme a nova posição
int left = (int)(newPosition.X / 24);
int top = (int)(newPosition.Y / 24);
int right = (int)((newPosition.X + (character.Width - 1)) / 24);
int bottom = (int)((newPosition.Y + (character.Height - 1)) / 24);
// Verifica colisão do personagem com todos os tiles vizinhos definidos ao deslocar-se
if (this.direction.Y == -1) // Se o personagem esta indo para Cima
{
if (CheckTileCollision(left, top) || CheckTileCollision(right, top))
{
this.direction.Y = 0;
}
}
else if (this.direction.Y == 1) // Se o personagem esta indo para baixo
{
if (CheckTileCollision(left, bottom) || CheckTileCollision(right, bottom))
{
this.direction.Y = 0;
}
}
if (this.direction.X == 1) // Se o personagem esta indo para direita
{
if (CheckTileCollision(right, top) || CheckTileCollision(right, bottom))
{
this.direction.X = 0;
}
}
else if (this.direction.X == -1) // Se o personagem esta indo para esquerda
{
if (CheckTileCollision(left, top) || CheckTileCollision(left, bottom))
{
this.direction.X = 0;
}
}
// Verifica se o personagem passou a tela pela esquerda
if (this.position.X < 24.0)
{
this.position.X = 624.0f;
}
// Verifica se o personagem passou a tela pela direita
if (this.position.X > 624.0)
{
this.position.X = 24.0f;
}
// Atualiza a posição do personagem
this.position += this.direction * this.speed;
base.Update(gameTime);
}
O que fizemos então criamos uma variável que recebe a nova posição que o personagem vai receber, então verificamos esta posição dentro do nosso mapa de tiles se ela ocupa algum espaço que existe tiles impassíveis com a função CheckTileCollision(int x, int y)
Se você acompanhou corretamente todos os passos e não digitou nada errado e resultado é para ser um fantasma se movimentando na tela colidindo com o cenário, conforme imagem abaixo.
Para fazer download do código completo clique aqui.
Abraços a todos e espero que tenham gostado. Até a próxima.
