domingo, 19 de julho de 2015

Níveis 2D com Tile Maps

Tile Maps são usados para criação de níveis 2D baseados em Tile Sets. Neste artigo vamos usar a versão 4.8 do editor Unreal para criar um nível baseado nos tiles que estão na imagem abaixo que foi criada por Silveira Neto:

Clique para aumentar

Importe a imagem acima e renomeie a textura para "Tiles". Clique com o botão direito na textura e escolha a opção "Sprite Actions -> Apply Paper2D Texture Settings". Depois escolha a opção "Sprite Actions -> Create Tile Set".


Dê dois cliques no "Tile Set" para abrir o editor de Tile Set:

Clique para aumentar

Neste editor você pode alterar o tamanho dos tiles, o padrão é 32x32. É possível também definir os tiles que possuem colisão. Basta selecionar o tile e clicar no botão "Add Box" que está na parte superior do editor.

Depois de definir os tiles que possuem colisão, salve e feche o editor de tile set.

Clique com o botão direito no "Tile Set" e escolha a opção "Create Tile Map":


Dê dois cliques no "Tile Map" para abrir o editor de Tile Map:

Clique para aumentar

Antes de começar a editar o nível, vamos fazer algumas configurações. No lado direito do editor, na categoria "Setup", coloque 20 em "Map Width" (largura do mapa) e 15 em "Map Height" (altura do mapa). Como o tamanho de cada tile é 32x32 então o tamanho deste Tile Map ficará 640x480 pixels.


Vamos adicionar camadas (layers) a este Tile Map. Isto permite que os Tiles possam ser sobrepostos. O nosso exemplo terá 3 camadas:


A imagem abaixo mostra como as camadas podem ser utilizadas. No lado esquerdo está sendo usado apenas a camada 1, no centro temos tiles na camada 1 e 2, na direita as 3 camadas estão sendo usadas.

Clique para aumentar

Para editar o nível, basta selecionar um tile na esquerda e depois clicar na posição desejada no Tile Map. O editor fornece algumas opções:


Usando os botões acima você pode inverter e rotacionar um tile, apagar um tile ou preencher uma área com o tile selecionado.

É possível selecionar vários Tiles, basta clicar com o botão esquerdo e arrastar. O retângulo amarelo abaixo mostra a seleção que está sendo feita:


O meu nível 2D ficou desta forma:

Clique para aumentar

Depois de concluir a edição do Tile Map, salve e feche o editor de Tile Map.

Arraste o Tile Map e solte em qualquer lugar da Viewport do editor. O editor automaticamente cria um "PaperTileMapActor":

Clique para aumentar


Com este artigo foi concluída a 2ª Parte deste blog: "Dicas de Blueprints".