Escolar Documentos
Profissional Documentos
Cultura Documentos
3 Votes
Tiles:
Tiles so pequenos pedaos de imagens que servem para criar uma nova imagem
composta conhecida como layer, utilizadas para criar o cenrio de um jogo. Essa tcnica
chamada de TileMaps, no qual, atravs de uma imagem contendo diversos pedacinhos
de imagens (tiles), se pode criar um cenrio para um jogo. Exemplos clssicos do uso de
TileMaps, so em jogos de RPG (Role Playing Game). Os jogos de RPG geralmente
possuem cenrios extensos o qual se fosse feito com uma nica imagem ocuparia muito
espao de memria e naquela poca em que surgiram, as memrias eram bem limitadas.
Ento a tcnica de dividir o cenrio em tiles e recri-lo em tempo de processamento fez
essa tcnica ser muito utilizada at hoje em dia.
A primeira etapa definir os tiles, ou seja, seu tamanho e suas imagens dentro dele.
A segunda parte montar o Tilemap (tambm conhecido como bricks), ou seja, definir
a estrutura que vai descrever aquele cenrio do nosso jogo.
E por fim em tempo de execuo nosso algoritmo deve substituir os nmeros da matriz
de tilemap pelas posies correspondentes do nosso tile. Esse cenrio conhecido como
layer.
Projeto:
Ento para fixarmos a parte terica vamos implementar um mapa bsico para um jogo
do Pacman, inicie um novo projeto e coloque o nome de Pacman.
Criado o projeto vamos ento criar uma classe com o nome Tile.cs que servir para
definirmos as propriedades dos tiles do jogo. Veja como vai ficar a classe.
01 using System;
02 using System.Collections.Generic;
03 using System.Linq;
04 using System.Text;
05 using Microsoft.Xna.Framework.Graphics;
06 using Microsoft.Xna.Framework;
07 namespace TileMap
08 {
09 /// <summary>
/// Controla o estado entre os tiles para ver se existe ou no
10
coliso
11 /// </summary>
12 public enum TileCollision
13 {
14 /// <summary>
15 /// Define que o tile passavel
16 /// </summary>
17 Passable,
18 /// <summary>
19 /// Define que o tile um slido impassavel, ou seja,
20 /// existe coliso caso tentem passar por este tile.
21 /// </summary>
22 Impassable
23 };
24
25 /// <summary>
26 /// Definio da classe tile
27 /// </summary>
28 public class Tile
29 {
30 public Texture2D texture;
31 public TileCollision collision;
32 public readonly Vector2 size;
33 /// <summary>
34 /// Construtor de um novo tile
35 /// </summary>
36 public Tile(Texture2D texture, TileCollision collision)
37 {
38 this.texture = texture;
39 this.collision = collision;
this.size = new Vector2(this.texture.Width,
40
this.texture.Height);
41 }
42 }
43 }
Essa classe define a imagem do tile, seu tamanho que conforme o tamanho da imagem
e se existe ou no coliso.
Agora clique com o boto direito e faa download das imagens abaixo.
Tiles:
block00.png
block01.png
block02.png
block03.png
Sprite:
ghost.png
Logo aps 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 ento as seguintes variveis:
Com nossas imagens carregadas precisamos agora criar a estrutura do nosso mapa. E
nosso mapa vai ser da seguinte forma:
Propriedades do mapa:
Abaixo ento de onde colocamos nossas variveis declare nosso mapa conforme o
cdigo abaixo.
01 /// <summary>
02
03 /// Este o brick ou seja nossa estrutura do mapa para nosso jogo
/// Os nmeros sero substituidos pelos tiles adcionados a nossa
04
lista
05 /// </summary>
06 int[,] map = {
07 {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},
08 {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},
09 {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},
10 {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},
11 {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},
12 {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},
13 {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},
14 {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},
15 {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},
16 {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},
17 {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},
18 {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},
19 {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},
20 {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},
21 {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},
22 {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},
23 {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},
24 {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},
25 {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},
26 {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},
27 {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},
28 {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},
29 {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},
30 {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},
31 {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},
32 };
NOTA: O mapa no precisa ser inicializado desta maneira, voc pode carregar sua
matriz atravs de um arquivo.
1 // Posio do personagem
2
3 Vector2 position = new Vector2(324.0f, 408.0f);
4 // Velocidade do personagem
5 float speed = 2.0f;
6 // Direo de movimento do personagem
7 Vector2 direction = new Vector2(0.0f, 0.0f);
Com todas essas variveis declaradas, agora podemos desenhar para ver o resultado e
depois trabalhar na movimentao e coliso do personagem. Veja o mtodo de desenho
como fica.
Legal, se executar o nosso joguinho agora ver poder movimentar o fantasma, porm
ele esta atravessando a parede e andando em diagonal, ou seja, precisamos corrigir isso.
Para corrigirmos isso vamos ter que verificar se existe coliso do personagem com o tile
que ele esta no momento. Ento vamos criar um mtodo para verificar isso. Abaixo do
mtodo de desenho, digite o seguinte cdigo:
01 /// <summary>
02 /// Mtodo que detecta coliso
03 /// </summary>
04 /// <param>posio y do tile</param>
05 /// <param>posio x do tile</param>
06 /// <returns></returns>
07 public bool CheckTileCollision(int x, int y)
08 {
09 if (tiles[map[y, x]].collision != TileCollision.Impassable)
10 {
11 return false;
12 }
13 return true;
14 }
Agora temos um mtodo que a partir de um ponto X e Y de tile ele verifica se o tile no
passvel. Vamos ento utilizar esse mtodo aps tentarmos movimentar nosso
personagem no mtodo Update(). Digite o seguinte cdigo antes de atualizarmos a
posio do personagem:
O que fizemos ento criamos uma varivel que recebe a nova posio que o personagem
vai receber, ento verificamos esta posio dentro do nosso mapa de tiles se ela ocupa
algum espao que existe tiles impassveis com a funo CheckTileCollision(int x, int y)