Fluxo de trabalho de ativos do Tilemap 2D: Da imagem ao nível
No Unity 2017.2, introduzimos uma nova adição ao Conjunto de Recursos 2D: Mapas de blocos! Usando Tilemaps, você pode rapidamente criar e dispor níveis 2D usando uma combinação de Sprites e GameObjects, e ter controle sobre propriedades como ordenação de camadas, colisões de tilemap, tiles animados e muito mais! Nesta postagem do blog, explicarei o fluxo de trabalho completo, desde a importação do arquivo de imagem para o Unity até o nível de layout de um jogo de plataforma 2D!
Como uma visão geral TL;DR; o fluxo de trabalho pode ser resumido assim, com cada elemento relacionado a um Ativo ou Componente no Editor Unity :
Sprite -> Tile -> Paleta -> Pincel -> Mapa de Tiles
Do ponto de vista da Não-Unidade, esses termos podem parecer um pouco abstratos. Imagine o processo de uma pintura real em uma tela real:
Cor -> Tinta -> Paleta de Azulejos -> Pincel -> Tela
Há uma lógica semelhante para cada etapa do processo e até nomes semelhantes para cada etapa!
Para esta postagem, usarei esta imagem 'GrassPlatform_TileSet' como exemplo principal:
O resultado final é um nível construído com essas peças, no qual um personagem 2D pode correr como um "nível":
Importar uma imagem para o Unity pode ser feito de várias maneiras:
- Salvando o arquivo de imagem desejado na pasta 'Assets' do projeto.
- No menu superior, selecione 'Ativos -> Importar novo ativo' e depois selecione o arquivo desejado.
- Arrastando o arquivo de imagem do seu navegador de arquivos para a 'Janela do projeto' no Editor Unity (esta é provavelmente a maneira mais fácil!)
Depois que a imagem é importada para seu projeto, suas configurações de importação de Tipo de Textura padrão são definidas pelo modo de comportamento em que seu projeto está atualmente: 2D ou 3D.
Este modo é definido originalmente quando um novo projeto é criado:
Ou pode ser alterado nas Configurações do Editor:
Como meu projeto já está configurado para o Modo de Comportamento 2D, então 'GrassPlatform_TileSet' será importado automaticamente com o Tipo de Textura de 'Sprite (2D e UI)', que é a configuração que o ativo Tile exigirá para referenciar o Sprite.
Como 'GrassPlatform_TileSet' é uma série de sprites em uma imagem, precisaremos dividi-lo em sprites individuais; isso pode ser feito definindo o Modo Sprite de 'Único' para 'Múltiplo' e abrindo o Editor de Sprites:
A janela do Editor de Sprites permite que você "divida" uma imagem em vários sprites; assim, você pode trabalhar em uma única folha de sprites no software de edição de imagens desejado e definir quais áreas da imagem serão tratadas como sprites "individuais" diretamente no Unity. Não há necessidade de fazer malabarismos e gerenciar centenas de arquivos de imagem individuais!
Como 'GrassPlatform_TileSet' é uma imagem composta de uma série de blocos, podemos usar as configurações de fatiamento de grade do Editor de Sprites para dividir automaticamente a imagem em vários sprites. As dimensões de cada 'bloco de célula' neste conjunto de blocos são 64 pixels por 64 pixels, então podemos inserir essas configurações e deixar o Editor de Sprites gerar automaticamente as fatias de sprite necessárias:
E depois que o botão "Fatiar" é clicado, agora temos um conjunto de sprites fatiados!
Na janela do Editor de Sprites, cada sprite fatiado pode ser selecionado e editado. Por exemplo, você pode definir nomes para cada sprite e até mesmo ajustar manualmente valores como posição e pivôs.
Precisamos então 'Aplicar' as alterações no Sprite Asset (clicando no botão apropriadamente chamado 'Aplicar' próximo ao canto superior direito do Editor de Sprites), o que nos permitirá referenciar cada sprite fatiado individualmente na janela Projeto:
Agora que nossa Sprite Sheet foi dividida em Sprites individuais, precisamos "convertê-los" em Tiles.
O Tile é um novo recurso adicionado no Unity 2017.2. Sua finalidade é armazenar dados para o Tilemap usar em uma célula específica na grade.
O recurso Tile padrão base (que pode ser gerado em 'Criar -> Tile' na janela Projeto) permite que um Sprite seja atribuído a ele e também outras personalizações, como a Matiz do Sprite e o tipo de Colisor que ele usaria no Tilemap (que será explicado mais tarde).
O Unity 2017.2 apresenta uma nova janela: a Paleta de Blocos! Esta janela é essencial para usar o novo sistema Tilemap, pois atua como uma interface para selecionar quais Tiles usar e como o Tilemap deve ser editado com eles.
Antes de adicionarmos o bloco 'TopGrassTile' à janela Paleta de Blocos, primeiro precisamos criar uma nova Paleta. Paletas podem ser usadas para organizar seus conjuntos de Tiles em vez de "armazenar" todos eles (podem ser centenas ou mais!) em um espaço de trabalho na janela.
No menu suspenso Paleta, há uma opção para criar uma nova Paleta:
É tão simples e fácil quanto arrastar e soltar para adicionar 'TopGrassTile' a esta paleta recém-criada!
Entretanto, em algumas situações, podemos estar trabalhando com centenas e centenas de Sprites que constroem nossa cena 2D. Seria muito demorado criar manualmente um recurso Tile para cada um desses Sprites e então arrastar e soltar cada um individualmente na Paleta.
Felizmente, há um fluxo de trabalho que pode ser usado para gerar automaticamente um conjunto de Tiles (um para cada Sprite) e atribuir todos eles à Paleta desejada. E também é tão simples e fácil quanto arrastar e soltar! Em vez de arrastar um ativo de bloco para a paleta, arraste a planilha de sprites de origem que contém os sprites fatiados. Neste caso, 'GrassPlatform_TileSet':
Agora que nossa spritesheet 'GrassPlatform_TileSet' foi configurada com sucesso na janela Tile Palette, é hora de começar a construir um nível 2D!
Para começar, precisamos criar um novo 'Tilemap' em nossa cena atual; isso pode ser feito no menu suspenso 'GameObject -> Objetos 2D -> Tilemap'. No entanto, isso não apenas cria um GameObject 'Tilemap' (com componentes relacionados), mas também um GameObject 'Grid' do qual o gameObject Tilemap é automaticamente um filho.
A estrutura de GameObject mais semelhante à configuração 'Grid <-> Tilemap' é o Sistema de IU do Unity; onde o GameObject pai Canvas atua como um contêiner de layout para todos os seus GameObjects de IU filhos (como texto e imagens). O GameObject 'Grid' usa o Componente 'Grid' para definir as dimensões de todos os seus GameObjects Tilemap filhos. Existem opções que permitem alguma personalização no layout:
O Tilemap GameObject filho é então construído pelos componentes Tilemap e Tilemap Renderer; o primeiro contém os dados dos Tiles pintados nele e o último define as configurações visuais de como ele é renderizado.
O sistema Tilemap foi projetado para que vários Tilemap GameObjects possam ser filhos da mesma Grade, o que significa que o resultado final do seu nível pode ser facilmente composto por várias camadas de diferentes Tiles:
Cada renderizador de Tilemap dá a você controle sobre o material usado para renderizar seus tiles, a camada de classificação que ele usa (que é o mesmo sistema de camadas que os renderizadores de Sprite, UI Canvases e sistemas de partículas usam!) e também como ele reage à máscara de Sprite.
Antes que os Tiles possam ser pintados no Tilemap, duas coisas precisam ser selecionadas: qual Tilemap está em foco no momento e qual Brush está em uso no momento.
O primeiro pode ser escolhido no menu suspenso 'Mapa de blocos ativo' na janela Paleta de blocos, abaixo das Opções de edição:
Esta lista suspensa mostrará todas as instâncias do componente 'Tilemap' na cena e permitirá que você selecione uma para ser pintada e editada. A captura de tela acima mostra apenas uma opção 'Tilemap', cujo nome é baseado no Tilemap GameObject padrão, enquanto uma cena mais complexa com vários Tilemaps poderia exibir uma lista de possíveis Tilemaps ativos, como esta:
Para o exemplo 'GrassPlatform_TileSet', renomear o GameObject “Tilemap” para ser mais preciso também atualizará os nomes da lista de Tilemaps ativos:
A próxima coisa a selecionar é o pincel atual. Enquanto o ativo Tile determina quais dados uma célula conteria (Visuais, Tipo de Colisor, etc.), um ativo Brush define como um Tile (ou Tiles) seriam colocados em um Tilemap. Atualmente, o Unity tem apenas um pincel (chamado 'Pincel Padrão') integrado para ser selecionado; e ele tem a funcionalidade esperada de seu nome, como colocar, apagar, mover e preencher blocos no Tilemap. No entanto, no GitHub da equipe da Unity Technologies há um repositório de extras 2D que tem uma variedade de exemplos de como você pode criar seus próprios pincéis e blocos personalizados! Depois que eles forem importados para o seu projeto, o menu Pincel atual (na parte inferior da janela Paleta de Blocos) permitirá que você escolha qual Pincel usar:
Embora este artigo não se aprofunde no uso de pincéis programáveis e blocos programáveis, é uma área muito poderosa para estudar e integrar ao seu conjunto de ferramentas de design de níveis baseado em mapas de blocos.
Com o Tilemap ativo e o conjunto de pincéis atuais, podemos selecionar um Tile específico na janela Paleta de Tiles e pintá-lo no Tilemap na cena! Você também precisará certificar-se de que o ícone "Pincel" nas Ferramentas de Edição também esteja selecionado:
Sucesso! Os ladrilhos estão sendo pintados no Tilemap! No entanto, você pode notar que os blocos são ligeiramente menores que o tamanho das células da grade. Isso não é um bug, mas precisamos recuar um pouco para explicar o porquê e como você pode alterar o padrão.
O tamanho da célula do componente Grade usa as unidades de distância do espaço mundial do Unity (por exemplo, um cubo primitivo do Unity com escala padrão de 1 para cada eixo terá o mesmo tamanho de uma célula na Grade padrão). Cada ativo Sprite tem um valor de Pixels por Unidade em suas Configurações de Importação, com o valor padrão sendo 100:
