Usando TileMaps

Introdução

Um tilemap é uma grade de blocos usada para criar o layout de um jogo. Existem vários benefícios em usar nós TileMap para projetar seus níveis. Primeiro, eles tornam possível desenhar o layout "pintando" os ladrilhos em uma grade, o que é muito mais rápido do que colocar nós individuais Sprite um por um. Em segundo lugar, eles permitem níveis muito maiores porque são otimizados para desenhar um grande número de tiles. Por fim, você pode adicionar formas de colisão, oclusão e navegação aos blocos, adicionando funcionalidade adicional ao TileMap.

Configuração do projeto

Esta demo usará os seguintes tiles retirados do pacote de arte "Abstract Platformer" de Kenney. Você pode encontrar o conjunto completo aqui mas para esta demonstração vamos nos ater a este pequeno conjunto.

Crie um novo projeto e coloque a imagem acima na pasta do projeto.

Ao usar um conjunto de tilesets, é importante que os tiles adjacentes coincidam. O padrão do Godot é importar imagens 2D usando um modo de "filtro" interpolado, o que resultará em bordas feias entre os tiles. Selecione a imagem e clique na guia Importar. Desligue Filtro e clique em "Reimportar". Veja Importação de imagens para detalhes.

Nó TileMap

Adicione um novo nó TileMap à cena. Por padrão, um TileMap usa uma grade quadrada de tiles Você também pode usar um modo "isométrico" baseado em perspectiva ou definir seu próprio formato de tiles personalizado.

Na seção "Cell" no Inspetor, há muitas propriedades que você pode ajustar para personalizar o comportamento do seu tilemap:

• Cell Size

  Isso define o tamanho da grade. Isso deve corresponder ao tamanho do pixel de seus tiles. O valor padrão é (64, 64).

• YSort

  Isso faz com que os tiles sejam desenhados na ordem de sua posição Y, de modo que os tiles "inferiores" sejam desenhados em cima dos "superiores".

• Half Offset e Tile Origin

  Essas propriedades afetam a posição do tile em relação à posição da grade.

• Quadrant

  Define o tamanho do bloco usado para desenho em lote. Isso pode afetar negativamente o desempenho. Não mude a menos que você saiba o que está fazendo.

• Custom Transform

  Usado para alterar a forma do tile. Use isso se você tiver tiles não quadrados.

Todas essas opções podem ser deixadas em seus padrões para esta demo.

Criando um TileSet

Depois de configurar seu tilemap, é hora de adicionar um TileSet. Um TileSet é um Resource que contém os dados sobre seus tiles - suas texturas, formas de colisão e outras propriedades. Quando o jogo é executado, o TileMap combina as peças individuais em um único objeto.

Para adicionar um novo TileSet, clique na propriedade "Tile Set" e selecione "Novo TileSet".

Clique na propriedade TileSet e o painel "TileSet" será aberto na parte inferior da janela do editor:

Primeiro, você precisa adicionar a(s) textura(s) que usará para os tiles. Clique no botão "Add Texture(s) to TileSet" e selecione a imagem tilesheet.png.

Em seguida, clique em "New Single Tile" e arraste na imagem para selecionar o tile que você deseja. Clique no botão "Ativar Snap" para facilitar a seleção de todo tile. Um retângulo amarelo aparece em torno do tile selecionado.

Clique no TileMap na árvore da cena e você verá que o tile recém-criado agora aparece no lado direito. Clique na janela de visualização e você pode colocar tiles. Clique com o botão direito para removê-los.

É fácil selecionar e mover acidentalmente o nó tilemap. Para evitar isso, use o botão de bloqueio do nó:

Formas de colisão

Se você estiver criando um mapa que precise de colisões - paredes, piso ou outros obstáculos, por exemplo -, será necessário adicionar formas de colisão a quaisquer ladrilhos que deseja que sejam considerados "sólidos".

Clique em "TileSet" na parte inferior da janela do editor para retornar à ferramenta tileset. Clique no tile definido anteriormente (destacado em amarelo). Selecione a guia "Colisão" e clique no botão "Criar um novo retângulo". Verifique se você ainda tem o ajuste de grade habilitado e clique e arraste no bloco. Uma forma de colisão quadrada aparece em azul claro:

Você pode adicionar formas de oclusão e navegação ao tile da mesma maneira.

Tiles de atlas

Em vez de adicionar tiles individuais, um de cada vez, você pode definir um grupo de tiles de uma só vez usando um atlas. Isso também permite que você gere aleatoriamente tiles do grupo.

Clique em "Novo Atlas" e arraste para selecionar todo o tile sheet.

Se ainda não o fez, certifique-se de alterar o "Step" nas configurações de encaixe para (64, 64), ou seus tiles podem ser cortados em pedaços menores. Você pode encontrar isso no Inspetor:

Depois de definir o atlas, você pode adicionar formas de colisão aos tiles individuais como antes. Você também pode clicar em "Ícone" para selecionar um dos tiles para representar o atlas.

De volta ao TileMap, você pode selecionar o tile do atlas e verá todos os tiles que ele contém:

Além de economizar tempo ao definir os tiles, isso pode ajudar agrupando tiles semelhantes quando você estiver trabalhando com um grande número de tiles.

Prioridades aleatórias de tiles

Ao desenhar com atlas de tiles, ativar a opção "Usar prioridade" faz com que os ladrilhos sejam selecionados aleatoriamente. Por padrão, cada tile no conjunto de ladrilhos tem a mesma probabilidade de ocorrer. Você pode alterar a probabilidade definindo prioridades diferentes para cada bloco. Por exemplo, um tile com prioridade 2 tem duas vezes mais chances de ser selecionado do que um tile com prioridade 1, e um tile com prioridade 3 tem 50% mais chances de ser selecionado do que um tile com prioridade 2.

Autotiles

Autotiles permitem que você defina um grupo de tiles e, em seguida, adicione regras para controlar qual tile é usado para desenhar com base no conteúdo das células adjacentes.

Clique em "Novo Autotile" e arraste para selecionar os tiles que deseja usar. Você pode adicionar colisões, oclusões, formas de navegação, prioridades de tiles e selecionar um tile de ícone da mesma maneira que para atlas de tiles.

A seleção de tiles é controlada por máscaras de bits. As máscaras de bits podem ser adicionadas clicando em "Bitmask" e, em seguida, clicando em partes dos tiles para adicionar ou remover bits na máscara. Clicar com o botão esquerdo do mouse em uma área do tile adiciona um bit, clicar com o botão direito do mouse remove "off" e shift-left-click define um bit "ignore".

Sempre que Godot atualiza uma célula usando um autotile, ele primeiro cria um padrão com base no qual as células adjacentes já estão definidas. Em seguida, ele procura no autotile um único tile com uma máscara de bits correspondente ao padrão criado. Se nenhuma máscara de bits correspondente for encontrada, o tile "ícone" será usado. Se mais de uma máscara de bits correspondente for encontrada, uma delas será selecionada aleatoriamente, usando as prioridades do bloco.

As regras para combinar uma bitmask com um padrão dependem do modo de bitmask autotile do tileset. Isso pode ser definido na guia "Inspetor", sob o cabeçalho "Tile selecionado". Os valores permitidos são "2x2", "3x3 (mínimo)" e "3x3".

Todos os bits "ligados" e "desligados" devem ser satisfeitos para que uma máscara de bits corresponda, mas os bits "ignorados" são ignorados.

2x2

No modo 2x2, cada máscara de bits contém quatro bits, um para cada canto.

Onde um bit está "ligado", todas as células conectadas a esse canto devem ser preenchidas usando o mesmo autotile, para que a máscara de bits corresponda. Por exemplo, se o bit superior esquerdo estiver definido, a célula diretamente acima, diretamente à esquerda e diagonalmente acima da esquerda deverá ser preenchida.

Quando um bit está "desligado", pelo menos uma célula conectada a esse canto não deve ser definida usando o mesmo autotile.

Pelo menos um bit deve ser definido para o tile a ser usado, portanto, um total de 15 tiles seria necessário para fornecer exatamente um tile para cada arranjo que este modo pode testar.

O modo 2x2 só pode corresponder a células que fazem parte de um bloco 2 por 2 - células sem vizinhos e linhas de apenas uma célula de largura não são suportadas.

Modelo - Genérico:

Este modelo pode ser usado para perspectivas laterais ou totalmente de cima para baixo. Ele foi projetado para um tamanho de célula TileMap de 64x64.

Chave:

• Vermelho: "ligado"

• Branco: "desligado"

3x3 (mínimo)

No modo 3x3 (mínimo), cada máscara de bits contém 9 bits (4 cantos, 4 bordas, 1 centro). Os 4 bits de canto funcionam da mesma forma que no modo 2x2.

Quando um bit de borda está "ligado", a célula que compartilha essa borda deve ser preenchida. Quando um bit de borda está "desligado", a célula que compartilha essa borda deve estar vazia.

O bit central deve estar "ligado" para qualquer ladrilho que você deseja usar. Observe que, neste modo, não faz sentido que um bit de canto esteja "ligado" quando qualquer bit de borda adjacente a ele não estiver "ligado".

Um total de 47 tiles seria necessário para fornecer exatamente uma máscara de bits para cada arranjo que esse modo pode testar.

Nota

Clique com o botão direito do mouse em uma imagem e escolha Salvar imagem como... para salvá-la.

Modelo - Genérico:

Este modelo pode ser usado para perspectivas laterais ou totalmente de cima para baixo. Todos os modelos abaixo são projetados para um tamanho de célula TileMap de 64x64, mas talvez seja necessário usar tamanhos de subtiles diferentes para modelos de cima para baixo, conforme descrito abaixo.

Chave:

• Vermelho: "ligado"

• Branco: "desligado"

Modelo - 16 tiles genéricos:

Este modelo pode ser usado para tilesets que tenham apenas 16 tiles - para estilos de arte mais simples, os tiles ausentes não serão notados.

Chave:

• Vermelho: "ligado"

• Branco: "desligado"

• Blue-checkered: "ignore"

Modelo - Piso de cima para baixo (Top-down) em perspectiva 3/4:

Chave (aplica-se aos quatro modelos abaixo):

• Verde: chão

• Ciano: parede

• Amarelo: topo da parede

• Cinza: oculto devido à sobreposição

• Transparente: ar

Modelo - Parede de cima para baixo (Top-down) em perspectiva 3/4:

Modelo - Parede de cima para baixo (Top-down) em perspectiva 3/4 (paredes grossas):

Ao usar esse modelo, defina o tamanho do subtile do TileSet como Vector2(64, 88).

Modelo - Parede de cima para baixo (Top-down) em perspectiva 3/4 (paredes altas):

Ao usar este modelo, defina a etapa "Opções de encaixe" para Vector2(64, 184) e o deslocamento da textura "Tile Selecionado" para a altura menos o tamanho da célula. Isso significa que o deslocamento da textura deve ser Vector2(0, -120):

3x3

No modo 3x3, cada máscara de bits contém 9 bits (4 cantos, 4 bordas, 1 centro)

Cada bit verifica uma única célula adjacente. Os bits de canto verificam apenas as células adjacentes na diagonal. O bit central deve estar "ligado" para qualquer bloco que você deseja usar.

Um total de 256 tiles seria necessário para fornecer exatamente uma máscara de bits para cada arranjo que esse modo pode testar.

Desativando o autotile

Ao usar um autotile, é possível desativar o comportamento do autotile e selecionar os tiles manualmente, clicando em "Desativar Autotile" na parte superior da janela de seleção de tile.

Adesão de Azulejo Automatico

Por padrão, o autotile verifica apenas as células adjacentes preenchidas usando o mesmo autotile. Este comportamento pode ser anulado para que os autotiles se liguem uns aos outros, ou mesmo para que se liguem a células vazias. No momento, isto só pode ser feito script. Você precisará adicionar um script ao seu tileset, e definir uma função chamada "_is_tile_bound(draw_id, neighbor_id)". Esta função será chamada para cada célula adjacente que não contenha o mesmo autotile, e deverá retornar verdadeiro se você quiser que a célula desenhada "amarre" à célula vizinha. Você pode encontrar o id de um autotile usando "find_tile_by_name(name)", as células vazias recebem um id de -1.

Observe que, para usar isso no editor, o script deve começar com uma declaração de "tool" e talvez seja necessário fechar e recarregar a cena para que essas alterações entrem em vigor.

Dicas e truques

• Se você estiver usando uma Camera2D para capturar sua fase, você pode notar linhas aparecendo entre seus blocos. Para corrigir isso, abra Project Settings e habilite Use Gpu Pixel Snap na seção Rendering > 2d > Snapping.

• Você pode virar e girar tiles usando os ícones no canto superior direito do editor.

• Para desenhar linhas retas, segure Shift enquanto clica e arrasta um tile.

• Ferramentas como copiar, colar e preenchimento de balde podem ser encontradas no menu "TileMap" no canto superior direito.