Artigo - 2D Tiled Map AS 3.0 - Utilizando tilesets

[Anderson Ferminiano 2]

Falaaaaa galera, à pedidos estou fazendo uma “continuação” do artigo Colisão Bidimensional: http://forum.imasters.com.br/index.php?/topic/391156-artigo-colisao-bidimensional desta vez vou mostrar na prática com a mesma lógica de matriz da colisão, como transformar uma matriz/mapa de bits num mapa de verdade com AS 3.0, estilo os mapas do Zelda.

É importante a leitura da lógica de colisão para entender alguns conceitos deste artigo.

 

Segue exemplo de mapa: http://www.andersonferminiano.com/artigos/tiledmap/

 

Para movimentar o mapa, clique nele para dar focus no swf e depois movimente com as setinhas pra onde quiser.

 

Sources do exemplo: http://www.andersonferminiano.com/artigos/tiledmap/TiledMap.zip

 

É importante baixar o exemplo antes de seguir o tutorial, não explicarei como construir as 2 classes: Map e TileMap e sim explicar cada método dentro delas.

Seguiremos a mesma idéia de transformar uma matriz em um mapa, mas dessa vez não usaremos uma matriz diretamente, utilizaremos uma string pra facilitar que será convertida posteriormente em matriz.

 

Um tileset!

 

Tileset é uma imagem que agrupa vários sprites utilizados na construções de um mapa, segue o tileset que utilizaremos:

 

Para recortarmos um sprite dentro do tileset utilizaremos o método copyPixels da classe BitmapData, que permite copiar apenas uma parte da imagem dando os parâmetros sobre x, y, largura e altura da área.

Identificaremos cada sprite por um número na sequência, a imagem acima tem 30 sprites por linha, então o elemento ( 1,1) chamamos de 1, elemento (2,1) chamamos de 2, (3,1) = 3... (30,1) = 30, (1,2) = 31, e é lógico que o contrário também se aplica 31 = (1,2), 30 =(30,1).

Lembrando que sempre usaremos (x, y).

 

Tendo isso em mãos, criamos uma string que separa cada elemento por uma vírgula, usaremos o método split para transformá-la em um array.

 

var mapString:String = "271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,271,";

FieldOfView e Renderização do Mapa

Digamos que meu mapa esteja com o máximo de sprites determinado para (10,10), e o máximo de visão (3,3). Então a cada 10 elementos da string/matriz o seu mapa vai criar uma nova “linha” de sprites até chegar na linha 11, ou acabar os elementos da string, e sua visão será limitada a apenas 3*3 sprites = 9 sprites.

Criamos a FieldOfView à partir da propriedade scrollRect da classe DisplayObject e todas suas derivadas (Sprite, MovieClip, Bitmap, etc).

 

FieldOfViewSpeed

Determina a quantidade de pixels que a tela é movimentada ao utilizar o método moveFieldOfView.

 

TilesetSpacement

Determina o espaçamento entre os sprites dentro do tileset, há tilesets que utilizam de linhas verticais e horizontais para dividirem melhor o espaço de cada sprite.

 

Qualquer dúvida em relação às classes, podem postar.

 

Você pode agora implementar nestas 2 classes, uma forma de juntar sprites afim de colocar, por exemplo, uma flor em cima da grama, ou um móvel em cima da madeira.

 

Bom, acho que essas dicas mais o exemplo já são suficientes para entenderem como montar um mapa 2D.

Até mais!

[Wallysson Mota 0]

Isso é interessante até porque da uma mobilidade incrível, afinal o RPG Maker trabalha com isso, e saber como montar isso é muito bom por que você não fica limitado.

[Matheus Brito 12]

É isso é muito show, mesmo. Eu já trabalhei com tiles uma vez mas era em as2, mas assim que tiver tempo vo voltar a implementar so que as 3 agora.

Parabens Anderson pelos tutos.

Abs

[Anderson Ferminiano 2]

Valeu galera! Em breve mais artigos..

 

Basicamente todo jogo 2d usa o esquema de tileset :)

[Matheus Brito 12]

E implementando mais um pouco da pra criar um gerador de mapas.

Abs