O Unity 2018.3 introduziu o suporte para mapas de blocos isométricos, muito semelhantes aos mapas de blocos hexagonais, que foram adicionados na versão 2018.2. Os novos recursos do Tilemap permitem criar ambientes 2D de maneira rápida e eficiente, com base nas grades isométricas e hexagonais usadas em muitos jogos clássicos, incluindo as primeiras partes de Diablo e Fallout, Civilization, Age of Empires e muitos outros.
Ambos os sistemas são baseados no sistema Tilemap já existente, que apareceu no Unity 2017.2, e hoje é tão fácil trabalhar com eles! Além disso, eles têm integração nativa com o Editor. Nas versões futuras do Unity, elas podem ser portadas para o gerenciador de pacotes.
Se você estiver interessado em experimentar esses sistemas, criamos um projeto pré-preparado do Isometric Starter Kit com um personagem animado e vários conjuntos de peças do ambiente. Você pode baixá-lo
aqui .
Configurações do projeto para mapa de blocos isométrico
Antes de começarmos com o Tilemap, é importante configurar o projeto corretamente. O Tilemap isométrico funciona com sprites bidimensionais e usa a classificação correta de renderização para criar a ilusão de um mapa isométrico com uma vista superior. Precisamos deixar os ladrilhos mais afastados do visualizador e os mais próximos em cima deles.
Você pode usar a função Unity chamada Custom Axis Sort para ajustar a ordem de renderização de objetos 2D na tela. Esse parâmetro pode ser definido para a câmera (atualmente esse método é padrão para pipelines de renderização por script, incluindo LWRP e HDRP) ou globalmente, no nível do projeto.
Para definir a Classificação de eixo personalizada no nível do projeto, vá em
Editar> Configurações do projeto> Gráficos . Na seção Configurações da câmera, você verá o menu suspenso Modo de classificação de transparências, bem como as opções de valor X, YZ para o eixo de classificação de transparências.
Por padrão, o Eixo de classificação da transparência define os eixos XYZ como (0, 0, 1). No entanto, todos os nossos ladrilhos 2D estão realmente no mesmo plano Z. Portanto, para determinar quais ladrilhos estão na frente ou atrás, você precisa usar não a profundidade, mas a altura. Os ladrilhos localizados mais acima na tela serão classificados pelos mais baixos. Para classificar blocos por altura, altere o valor do Modo de classificação da transparência para Personalizado e defina Eixo da classificação da transparência como (0, 1, 0).
Para saber mais sobre como isso funciona, você pode ler a
página correspondente na classificação 2D na documentação do Unity.
Em alguns casos, também pode ser necessário alterar o valor do Eixo de classificação da transparência para Z. Falaremos mais sobre isso abaixo.
Tipos de cartão lado a lado
O sistema Tilemap consiste em vários componentes em interação. Os dois primeiros são os objetos de jogo Grid e Tilemap. Para criar uma Grade, clique com o botão direito do mouse em qualquer lugar da Hierarquia, vá para o Objeto 2D e selecione o tipo de Mapa de Mosaico que você deseja usar. Por padrão, cada nova grade é criada com um objeto de jogo filho do Tilemap do tipo correspondente. Os seguintes tipos de mapa de mosaico existem atualmente:
Tilemap - cria Grid e Tilemap retangulares. Um exemplo do uso deste Tilemap pode ser visto no
2D Game Kit do mecanismo Unity.
Hexagonal Point Top Tilemapmap - cria um Grid e Tilemap a partir de hexágonos, nos quais um dos vértices de cada hexágono é direcionado para cima.
O Hexagonal Flat Top Tilemap é outro tipo de Grade de hexágonos, na qual na parte superior do hexágono existe uma face paralela à borda superior da tela.
Os dois últimos tipos,
Isométrico e
Isométrico Z como Y , criam duas implementações diferentes da grade isométrica. A diferença entre eles aparece ao simular diferentes níveis de altura dos ladrilhos, por exemplo, quando há uma plataforma alta no nível isométrico.
Se você deseja criar objetos de jogo Tilemap separados para cada nível de altura do bloco, é melhor usar o tipo de
mapa de blocos isométrico usual. Ele simplifica o processo de criação de formas automáticas de colisões, mas tem menos flexibilidade ao trabalhar com elevações entre ladrilhos, porque todos os ladrilhos na mesma camada devem estar no mesmo "plano".
No caso de
Z isométrico como Mapa de mosaico Y, o valor da posição Z de cada bloco trabalha em conjunto com o parâmetro Classificação do eixo da transparência, fazendo com que os blocos apareçam empilhados um sobre o outro. Ao desenhar um Z como Y Tilemap, alteramos dinamicamente o parâmetro Z do pincel para alternar entre diferentes alturas. Para renderizar
Z como Y Tilemap corretamente , é necessário um valor Z adicional no modo Eixo de classificação de transparência com modo personalizado.
Nota: Os ativos mostrados nas capturas de tela foram retirados do bloco Temple do projeto Isometric Starter Kit . Eles são totalmente gratuitos, para que você possa usá-los para criar seus próprios ambientes!Pense na Grade como um “cavalete” no qual residem todos os objetos do jogo Tilemap. E eles, por sua vez, são essencialmente uma tela na qual desenharemos azulejos. Para começar a desenhar no Tilemap, também precisamos de um pincel e uma paleta. Todos os ativos de lado a lado estão localizados na Paleta de lado a lado, na qual eles podem ser selecionados usando a ferramenta Pincel e iniciando o desenho.
Para criar uma paleta de mosaicos, escolha Janela> 2D> Paleta de mosaicos. No menu suspenso superior esquerdo, selecione "Criar nova paleta". Verifique se o tipo de malha apropriado está selecionado. No exemplo, usarei o mapa de mosaico isométrico usual, bem como ativos do projeto
Isometric Starter Kit . Especificaremos Manual como o tamanho da célula da paleta (tamanho da célula) para poder redimensionar blocos isométricos. Nesse caso, eu sei que os tamanhos dos meus blocos correspondem a uma grade com um tamanho de célula de 1 por X e 0,5 por Y; no entanto, eles dependem da resolução selecionada ao importar os valores de pixels por unidade e o tamanho dos ativos - de fato, no ângulo isométrico em que os blocos são girados.
Nota sobre a importação de ativos
Talvez você não saiba quais opções de importação e tamanho do cartão lado a lado são melhores para seus ativos. Há uma regra geral que você pode seguir: primeiro você precisa observar a resolução dos blocos. Normalmente, os blocos isométricos são maiores em altura do que em largura; Os ladrilhos "planos" (que mais se parecem com um plano que com um cubo) são mais largos que altos. No entanto, a largura entre eles sempre será a mesma. Portanto, se você deseja que os ladrilhos ocupem exatamente uma unidade de medida do Unity, defina os
pixels por unidade nas configurações de importação de ladrilhos com um valor igual à largura em pixels. Em alguns casos, esse valor terá que ser alterado, geralmente na direção de diminuir (ou aumentar a resolução dos ativos); isso pode ser útil se você deseja recriar um efeito no qual alguns blocos parecem ocupar mais de uma célula da grade e se sobrepõem aos blocos adjacentes.
Para determinar o valor correto da grade em Y para os ladrilhos, tome a altura da base (ou vértice) de um ladrilho e divida-o pela largura. Isso fornecerá um valor de Y em relação a X, já que X é 1. Vejamos alguns exemplos:
Nos recursos de pixel art que usamos para este projeto, todos os blocos base têm 32 pixels de altura e 64 pixels de largura. Portanto, o tamanho da grade em Y será igual a 0,5. O segundo bloco da imagem é retirado do pacote de ativos do Golden Skull Studios; Você pode vê-lo
aqui . O bloco de exemplo foi reduzido, mas os recursos originais têm 128 pixels de largura. A base do ladrilho é de aproximadamente 66 pixels, o que fornece um tamanho de grade Y de 66/128, ou seja, aproximadamente 0,515 unidades.
O processo básico de trabalho com o Tilemap
Depois de decidir o tamanho correto da grade, adicione alguns ladrilhos à nossa paleta. Basta pegar um dos sprites de azulejos e arrastá-lo para a janela Paleta de azulejos. Isso criará o ativo de bloco. Ele contém informações sobre o próprio bloco, por exemplo, os sprites utilizados, o matiz e o tipo do colisor gerado. Se você precisar ver informações detalhadas sobre o bloco da paleta, selecione a ferramenta Selecionar (S) na parte superior da janela Paleta do bloco e clique nesse bloco. Observe que o Inspetor pode ver a qual ativo do Tile ele se refere.
Para desenhar um novo Tile by Tilemap, selecione a ferramenta Pincel (B) e clique no Tile na Paleta. Depois disso, você pode desenhar com o bloco selecionado na janela da cena. Existem outras ferramentas de desenho, como Borracha (D), Preenchimento de caixa (U), Preenchimento de inundação (G) e Seletor de lado a lado (I).
Às vezes, você precisa alterar a localização dos blocos na própria paleta. Logo abaixo da barra de ferramentas, há um botão Editar. Se você clicar nele, o modo de edição da paleta será ativado, no qual as ferramentas afetam a própria paleta de peças. Não se esqueça de sair deste modo depois de fazer as alterações necessárias.
Modos de renderizador de mosaico
Em alguns casos, blocos de tipos diferentes podem não ser classificados corretamente, apesar de estarem no mesmo Mapa de Mosaicos, como neste exemplo:
Isso é determinado pelo parâmetro Mode do componente Tilemap Renderer. Por padrão, Mode é Chunk.
O modo
Chunk é eficaz na redução do consumo de recursos do Tilemap. Em vez de renderizar cada bloco individualmente, ele os renderiza em uma única passagem como um bloco grande. No entanto, este modo tem duas principais desvantagens. Primeiro, ele não suporta classificação dinâmica com outros objetos 2D na cena. Isso significa que, se o Tilemap estiver no modo Chunk, ele não poderá classificar dinamicamente na frente ou atrás de outros objetos, por exemplo, caracteres - apenas um ou o outro será visível por vez, e isso depende do parâmetro Order in Layer. No entanto, ainda é extremamente eficaz na otimização do jogo e pode ser usado para renderizar em lotes grandes áreas do terreno.
No entanto, isso não nos salva do problema de classificação incorreta de blocos diferentes. Para a renderização em lote de peças obtidas de dois ou mais sprites diferentes (por exemplo, texturas), os sprites devem ser combinados em um único recurso do Sprite Atlas.
Para criar o Sprite Atlas, selecione
Ativos> Criar> Sprite Atlas . O Sprite Atlas possui uma lista de
objetos para embalagem . Basta arrastar e soltar nele todos os blocos que precisam ser renderizados em lotes e especificar os parâmetros de importação apropriados, geralmente correspondendo aos parâmetros de sprites individuais.
Depois disso, os ladrilhos serão classificados corretamente; mas eles só serão visíveis no modo Play ou durante a execução do jogo.
Portanto, durante o processo de edição, é melhor selecionar o modo
Individual para o Rendermap Tilemap. Nesse modo, cada sprite será classificado separadamente; isso significa que eles serão renderizados corretamente mesmo fora do modo Play, o que é muito útil ao editar um nível. Depois de concluir a criação da estrutura de níveis, é possível alternar o modo Renderizador de mapa de peças para Chunk novamente a qualquer momento.
O modo de renderização individual também é útil quando você precisa adicionar objetos como árvores, objetos e terrenos mais altos que devem ser classificados dinamicamente com caracteres ou entre si. Nesta postagem, ativaremos o modo Individual para todos os Tilemap.
Usando vários mapas de mosaicos
Às vezes, é necessário usar vários Tilemap em uma grade. No caso de Mapa de peças isométrico e hexagonal, é útil poder adicionar ao nível do item alinhado na grade ou peças que parecem mais altas que a primeira camada.
Para conectar outro Tilemap à grade, clique com o botão direito do mouse no objeto Grid e crie um novo Tilemap do tipo apropriado.
Para começar a desenhar no novo Tilemapmap, volte para a janela Tile Palette e altere o Active Tilemapmap na barra de ferramentas principal.
Adicionando áreas levantadas
Existem duas maneiras principais de adicionar áreas elevadas aos níveis. Escolher o caminho certo geralmente depende do tipo de Tilemap selecionado. Vamos considerar cada um dos casos.
Além disso, preparamos um pequeno vídeo sobre esse tópico, que demonstra essas abordagens usando o Mapa de blocos isométrico usual, além de adicionar áreas de colisão aos blocos. Assista ao vídeo se quiser entender brevemente as duas maneiras:
Usando um mapa de blocos isométrico regular
Para um mapa de mosaico isométrico regular, você pode simplesmente criar um novo mapa de mosaico com a mesma grade e atribuir um valor mais alto à ordem na camada. Você pode alterar o parâmetro Anchor Tile para que a nova camada seja ancorada em um ponto mais alto na mesma grade.
Meu Tilemap de nível inferior para X e Y tem a Âncora de telha definida como (0, 0). Quero que a nova camada seja desenhada uma unidade mais alta, então alterarei o ponto de ancoragem do novo Mapa de Mosaico para (1, 1). Também definirei Order in Layer como 1 - um a mais que o nível base.
Agora você pode alterar o Tilemap ativo para um segundo nível de altura e começar a desenhar.
Usando Z como Y Isometric Tilemap
Às vezes, pode ser útil simular diferentes alturas com um único Tilemap. Nesse caso, Z como Y Isometric Tilemap and Grid podem ser usados.
No caso de Z como Y Tilemap, o valor Z de cada bloco tem um efeito adicional na ordem em que os blocos são renderizados. Podemos alterar o valor dos blocos Z ao desenhá-los usando o parâmetro do pincel Posição Z na parte inferior da Paleta de blocos (assim como as teclas de atalho "+" e "-"):
No entanto, para que o valor Z influencie corretamente e os ladrilhos classifiquem corretamente, você precisa voltar ao valor Classificação do eixo personalizado e adicionar a influência Z. O número usado aqui está diretamente relacionado a como o Unity converte as posições das células da grade isométrica em valores no espaço do mundo.
Por exemplo, uma grade com dimensões de acordo com XYZ de (1, 0,5, 1) - padrão para isometria - terá um valor de classificação ao longo do eixo Z igual a -0,26. Se você estiver interessado em saber como esse número é calculado ou se usar uma grade com um tamanho de célula diferente, continue lendo para descobrir como encontrar o valor Z correto para o seu caso.
Ao definir o valor correto para Classificação de eixo personalizada, você pode começar a desenhar ladrilhos com diferentes valores de Z. Você também pode configurar os incrementos com os quais o valor Z move os ladrilhos elevados para cima ou para baixo, alterando o tamanho Z da grade, que é 1 por padrão.
Cálculo do valor Z
Existe uma fórmula geral que pode ser usada para determinar o valor Z da classificação dos eixos. Primeiro, pegue o tamanho Y da grade. Se você ainda não decidiu o tamanho de Y, consulte a nota sobre a importação de ativos acima. Multiplique esse valor por -0,5 e subtraia outro 0,01.
De acordo com esta fórmula, uma grade com um tamanho de (1, 0,5, 1) nos fornecerá um valor de classificação por Z de -0,26. Com esse valor de classificação, os blocos de qualquer grade (1, 0,5, 1) serão classificados corretamente.
Se você quiser saber mais sobre esse valor e sobre cálculos, estude a
documentação . Ele explica em detalhes o trabalho dos renderizadores 2D e o que acontece quando as células isométricas são convertidas em valores do espaço mundial.
Adicionando colisões
Agora que colocamos algumas peças sobre as outras, com a ajuda de colisões, podemos controlar as áreas que o jogador pode alcançar e as transições entre elas.
Existem muitas maneiras de adicionar colisões, mas, no nosso caso, é necessário que o jogador suba e desça ao longo da encosta, portanto, não é tão óbvio quais objetos devem ter colisores. Podemos definir conflitos manualmente usando o Tilemap opcional.
Neste projeto, criamos vários sprites correspondentes a várias formas que definirão áreas de colisões. Podemos desenhar essas formas no terceiro Tilemap em lugares onde o jogador não pode passar. Por exemplo, queremos que um jogador consiga escalar uma rocha apenas ao longo de uma ladeira, e não subir diretamente nela.
Também podemos adicionar material exclusivo ao Tilemap Renderer para dar aos azulejos uma tonalidade diferente e diferenciá-los do restante do nível.
Ao colocar blocos de colisão, você pode adicionar o componente Tilemap Collider às colisões de Tilemap. Nesse caso, para cada bloco individual, os coletores são criados automaticamente, determinados pela forma do sprite.
Para otimizar o desempenho, você também pode adicionar o componente 2D do Composite Collider e marcar a caixa de seleção Used by Composite para o Tilemap Collider. Isso combinará todos os coletores individuais em uma forma grande.
Adicionando itens
Adicionar itens a um nível é bastante simples. Você pode colocar manualmente sprites de itens em qualquer ponto desejado da cena ou anexar itens à Grade do Tilemap, transformando-os em blocos separados. Escolha qual solução é melhor para você.
Neste projeto, colocamos manualmente várias árvores no nível. Árvores e personagens têm a mesma ordem na camada, o que permite classificar dinamicamente o personagem na frente e atrás das árvores.
Usando o colisor, você pode especificar o ponto em que o jogador pode se aproximar da árvore. Isso também pode ser feito de várias maneiras.
O primeiro é mostrado no vídeo - basta anexar um colisor filho ao objeto e alterar sua forma, conforme necessário.
A segunda maneira é definir o
Custom Physics Shape para o objeto no Sprite Editor. Para abrir o Editor de Sprite, selecione o objeto Sprite e localize o botão Editor de Sprite no Inspetor. No menu suspenso superior esquerdo, alterne para o editor Custom Physics Shape. Aqui você pode criar formas poligonais que definem as bordas do colisor. Depois de definir o formulário físico, você pode anexar o componente Polygon Collider ao objeto, que corresponderá a esse formulário.
Se você usar objetos como blocos no Tilemap, também poderá usar o colisor de Grade. Escolha o recurso de bloco que corresponde ao bloco de itens (se você não se lembra onde encontrá-lo, consulte a seção "Processo básico do mapa de blocos"). Você verá o menu Tipo de colisor. Por padrão, um sprite é definido como o tipo, ou seja, o colisor gerado automaticamente usará o Physics Shape, sobre o qual falamos acima. Se o tipo estiver definido como grade. sempre corresponderá exatamente à forma da célula da malha à qual o item está anexado. Talvez essa não seja a maneira mais precisa de implementar coletores, mas, para alguns tipos de jogos, pode ser útil.
Para usar coletores para esses blocos, selecione o Tilemap com objetos e adicione o componente Tilemap Collider.
Usando blocos de regras
Mosaicos de regras são extremamente úteis para automatizar o processo de desenho com mosaicos. O Tile Rule funciona como um tile normal, mas possui uma lista adicional de opções de tile.
Usando esses parâmetros (regras), um bloco pode escolher automaticamente qual sprite desenhar, dependendo dos blocos vizinhos.Ladrilhos de regra são úteis quando você não deseja selecionar manualmente ladrilhos com curvas diferentes, por exemplo, ao criar uma rocha ou plataforma. Eles também podem ser usados para randomizar entre diferentes variações do mesmo bloco, para evitar padrões repetidos e até para criar blocos animados.Os blocos de regras isométricos e hexagonais estão disponíveis no repositório 2D Extras Unity no GitHub. Ele também possui muitos outros recursos úteis do Tilemap que valem a pena explorar.Adicionamos o Isometric Starter Kit ao projeto.Mosaicos de regras para cada conjunto de peças. Aqui estão alguns exemplos dos blocos de projeto que você pode experimentar:Trabalho adicional
Agora que você aprendeu sobre o dispositivo de cartões isométricos no Unity, baixe o projeto do kit Isometric Starter e tente trabalhar com eles! Se você é um programador, tem a oportunidade de interagir com o Tilemap por meio de scripts, pode usá-lo.Por exemplo, assistindo a este vídeo, você pode aprender como implementar um simples controlador de caracteres compatível com o Isometric Tilemap:Os gráficos deste projeto foram criados para o Unity por @castpixel ; seus outros trabalhos podem ser vistos aqui . Se você quiser saber mais sobre a criação de jogos 2D no Unity, deve aprender alguns ótimos cursos no site Learn . Se você estiver procurando recursos adicionais para experimentar mapas de blocos, confira a Unity Asset Store .Criando níveis pela primeira vez com o Tilemap? Aprenda a construir mundos bidimensionais neste tutorial para iniciantes do Unity Learn.