Introdução ao novo sistema de cartões lado a lado da Unity

A familiaridade com o sistema de blocos 2D da Unity oferece uma excelente oportunidade para economizar tempo para desenvolvedores independentes e estúdios de jogos prototiparem e criarem jogos 2D de alta qualidade.

Sem esse sistema, você pode passar dias, se não semanas, escrevendo seu próprio sistema de cartão ou processando o de outra pessoa. E isso é apenas programação, mas e o editor de mapa de blocos?

O novo sistema é gratuito e é construído diretamente no editor do Unity. Ele fornece muitos recursos que abordaremos neste tutorial.

Neste artigo, usaremos um jogo 2D de blocos simples para descobrir o seguinte:

• Como cartões de telha funcionam.
• Como habilitar mapas de blocos no Unity e personalizar a grade.
• Como adicionar sprites a um projeto, convertê-los em ladrilhos e adicioná-los à paleta de ladrilhos.
• Como usar as ferramentas do editor de blocos para criar níveis.
• Como classificar peças e colocá-las em diferentes camadas.
• Como adicionar blocos de física do Unity.
• Como colorir dinamicamente azulejos.
• Como alterar os blocos pré-fabricados usando código e lógica nativos.
• Como adicionar suas próprias extensões e scripts de mapas de mosaico ao projeto.

Sim, a lista foi ótima. Mas não tenha medo - quando começarmos a entender, você entenderá rapidamente como essas ferramentas são simples.

Nota: este tutorial assume que você é bom em trabalhar com o editor do Unity. Se você acha que não está familiarizado com isso, o tutorial Introdução à Unity tem tudo o que você precisa para aprender este tutorial. Além disso, você precisa do Unity versão 2017.3 ou superior.

O que é um jogo de peças?

Um jogo de peças em 2D é qualquer jogo em que os níveis ou áreas de jogo consistem em muitas peças pequenas (peças) que juntas formam uma grade de peças. Às vezes, as diferenças entre as peças podem ser óbvias, e às vezes parecem sólidas e indistinguíveis para os jogadores.

A coleção de peças no jogo é chamada de conjunto de peças e cada peça é geralmente um sprite, parte de uma planilha. Se você deseja lidar melhor com as folhas de sprite, temos um tutorial que descreve as folhas de sprite do Unity.

Como você pode ver neste tutorial, geralmente os blocos são quadrados. Mas eles podem assumir outra forma - retângulos, paralelogramos ou hexágonos. Nos jogos, geralmente é usada uma vista superior ou lateral, mas às vezes nos jogos de peças, 2.5D também é usado.

Talvez você já conheça os dois jogos mais populares que usam o sistema de cartões lado a lado: Starbound e Terraria .

Começando a trabalhar

Faça o download dos materiais do projeto para este tutorial e descompacte o arquivo .zip.

Inicie o editor Unity e carregue o projeto Rayzor-starter a partir dos materiais descompactados do projeto.

Aqui está o que você trabalhará neste projeto:

• Cinemachine / Gizmos: O Unity Cinemachine é adicionado apenas para implementar uma câmera fácil de usar seguindo o player.
• Paletas: nesta pasta, armazenaremos nossas próprias paletas de blocos.
• Pré-fabricados: algumas pré-fabricadas que usamos mais tarde no jogo.
• Cenas: aqui vamos abrir e salvar cenas.
• Scripts: alguns scripts simples para controlar o movimento do jogador, a lógica da colisão de armadilhas e ganhar / perder no jogo. Essa pasta também contém scripts do Unity Tilemap do repositório do Unity 2D Extras Github , que usaremos mais tarde.
• Sfx: sons para o jogo.
• Sprites: sprites 2D a partir dos quais criaremos paletas de azulejos. Eles são retirados de um pacote de cavernas e masmorras para roguelike . O autor do pacote é kenney.nl.

Criação de jogos

Abra a cena do jogo na pasta Cenas .

Clique no botão Play no editor para iniciar o jogo. Na janela do jogo , mova o herói com as teclas WASD ou as "setas".


Enquanto o herói vagueia pelo fundo aparentemente interminável da câmera com a cor # 00000, perdida no vazio.

Para consertar isso, precisamos de ferramentas de blocos 2D para criar níveis interessantes e mecânica de jogo.

Conhecendo a paleta de azulejos

No editor, clique em Janela -> Paleta de Ladrilhos para abrir a janela Paleta de Ladrilhos 2D.


Essa janela será sua melhor amiga quando estiver trabalhando em jogos de peças no Unity.

1. Esta série de ícones fornece ferramentas básicas para manipulação de blocos, desenho e exclusão
2. Este seletor permite criar diferentes paletas que podem ser percebidas como paletas para desenho, nas quais colocamos as "cores" e, neste caso, os ladrilhos.
3. Esse seletor permite criar pincéis com comportamentos diferentes. Você pode adicionar seus próprios pincéis, cujo comportamento é diferente do pincel padrão (por exemplo, desenhando blocos pré-fabricados com funcionalidade adicional)

Clique em Criar nova paleta e nomeie a paleta RoguelikeCave . Não altere as opções de grade e célula.


Clique em Criar e escolha salvar a nova paleta na pasta Assets \ Palettes do projeto. Nele, crie uma nova pasta RoguelikeCave .

Agora a estrutura de pastas do seu projeto deve ficar assim:


Na janela do editor da paleta lado a lado , RoguelikeCave deve ser selecionado; neste ponto, ainda não temos nenhum bloco:


Como um artista pode criar suas obras-primas se não tem materiais?

Sem fechar a janela Paleta de peças, selecione a pasta do projeto Sprites / roguelike-cave-pack e expanda o recurso roguelikeDungeon transparent.png . Em seguida, selecione todos os sprites nesta folha de sprite: selecione o primeiro sprite, mantenha pressionada a tecla Shift e selecione o último sprite.

Arraste todos os sprites selecionados para a janela Tile Palette RoguelikeCave:


Arraste e solte os sprites na janela Paleta de peças e selecione um local para armazenar ativos no Unity.

Crie uma nova pasta Tiles em Assets / Palettes / RoguelikeCave e selecione esta pasta como o local de armazenamento:


O Unity gerará um recurso de bloco para cada sprite adicionado a partir da folha de sprite. Aguarde a conclusão do processo, aumente o tamanho da janela Paleta de azulejos e admire as linhas pares de belos novos azulejos localizados na paleta RoguelikeCave:


Repita o processo acima para criar uma paleta de blocos usando a janela Paleta de blocos, mas desta vez nomeie a nova paleta RoguelikeCustom .

Coloque a nova paleta em uma nova pasta. Nomeie a pasta RoguelikeCustom e mova-a para a pasta Assets / Palettes do projeto.

Dessa vez, usando o processo descrito acima, use os sprites da folha Assets / Sprites / roguelike-custom / roguelike-normal-cutdown-sheet.png para preencher os blocos da nova paleta. Crie uma pasta Tiles dentro da pasta da paleta RoguelikeCustom e mova os ativos de tile para lá:


Alegre-se, agora você sabe a mágica de criar uma paleta de azulejos!

Tile Map Mesh

Abra o menu GameObject na parte superior do editor do Unity (ou a barra de menus do Unity, se você estiver usando o MacOS), clique em Objeto 2D e, em seguida, Tilemap para criar uma nova grade do Tilemap:


Você deve ver que uma nova GameObject Grid foi adicionada à hierarquia da cena. Expanda-o e selecione o mapa de blocos GameObject interno .

Pense neste Tilemap como uma camada (talvez uma de muitas) no seu jogo. Você pode adicionar novos objetos para criar camadas adicionais do Tilemap.

No inspetor, você verá dois componentes que o Unity adicionou automaticamente a este GameObject:

• O componente Tilemap usado pelo mecanismo do Unity para armazenar sprites no circuito marcado com o componente Grid - no nosso caso, esse é o GameObject Grid . Quando você cria o Tilemap pela primeira vez, não precisa se preocupar com todos os recursos técnicos de como o Unity se comunica entre todos esses componentes.
• Tilemap Renderer designa o material que será usado para renderizar blocos no Tilemap. Também permite configurar as propriedades de classificação dessa camada do Tilemap.

Renomeie o GameObject Tilemap para BaseLayer .

Usando várias ferramentas de desenho da paleta de blocos

Alterne o editor para o modo Cena.

Sem fechar a Paleta de peças, selecione a paleta RoguelikeCave e selecione a ferramenta Pincel (ou pressione B ). Selecione um ladrilho de areia como mostrado abaixo:


Na janela Cena, mova o cursor para a grade ao lado do player. A escova de ladrilhos de areia se encaixa na grade.

Mantendo pressionado o botão esquerdo do mouse, desenhe uma área retangular ao redor do player. Ele será desenhado na camada Tilemap BaseLayer:


Desenhar grandes áreas pode ser uma tarefa monótona; portanto, há um pincel Filled Box que pode ser usado para pintar grandes áreas. Na janela Paleta de peças, clique no ícone de pincel quadrado (ou pressione U ).

Volte ao editor e desenhe um retângulo ainda maior ao redor do player, mantendo pressionado o botão esquerdo do mouse, arrastando o cursor do canto superior esquerdo para o canto inferior direito:


Embora tenhamos adicionado um pouco de cor ao jogo, esta masmorra de areia parece sem graça. É hora de adicionar alguns detalhes!

Use a opção de menu GameObject -> 2D Object -> Tilemap para criar uma nova camada de Tilemap. Desta vez, será o único objeto criado na hierarquia, porque já temos uma grade adequada. Renomeie esta camada para DungeonFloorDecoration :


Na janela Tile Palette, alterne o Active Tilemap para a camada DungeonFloorDecoration :


Selecione a ferramenta Pincel ( B ) e desenhe os objetos espalhados no mapa na janela Cena:


Desabilite e reative o DungeonFloorDecoration na hierarquia GameObject para ver como a renderização no Tilemap ativo altera a camada DungeonFloorDecoration e todos os blocos renderizados caem nessa nova camada:


Crie uma nova camada Tilemap usando a opção GameObject -> Objeto 2D -> Tilemap novamente . Chame de colidível . No futuro, usá-lo para criar paredes e bordas.

Alterne o Mapa de mosaico ativo na janela Paleta de mosaicos para Colidível . Selecione a ferramenta Pincel ( B ) e desenhe os seguintes blocos para construir uma parede ao redor da área de jogo. As áreas destacadas em vermelho na imagem abaixo são as novas peças que precisam ser adicionadas:


Dê uma olhada na captura de tela abaixo da janela Paleta de peças para descobrir onde encontrar as peças necessárias para construir a parede. Não esqueça que você pode usar as combinações CTRL-Z ou CMD-Z para desfazer a ação ou apagar erros usando o pincel atual (enquanto mantém pressionada a tecla Shift ):


Inicie o jogo no editor e tente atravessar a parede:


Você não esperava isso?

O problema é que acabamos de desenhar os ladrilhos padrão e ainda não aplicamos a unidade física mágica na camada Tilemap.

Selecione GameObject Collideable e adicione um novo componente clicando no botão Add Component na janela Inspector ; No campo de pesquisa, digite Tilemap Collider 2D :


Este componente foi criado especificamente para jogos de blocos 2D do Unity. Simplesmente aplica a forma do colisor físico a todos os blocos na camada à qual foi adicionado, sem fazer nenhum outro trabalho.

Comece o jogo novamente e tente atravessar a parede. Acesso negado!

Nota: às vezes, ao mover a câmera, você pode notar pequenas linhas pretas entre alguns ladrilhos. Parece ser um problema de movimento da câmera em projetos com o sistema 2D Tilemap Unity. Você pode se livrar completamente dele desabilitando o Anti-Aliasing nas configurações gráficas. No entanto, mesmo que isso seja feito no projeto de compras, o efeito ainda é um pouco perceptível. A solução para esse problema pode ser adicionar seu próprio script de movimento da câmera com deslocamento de pixel. Uma boa discussão sobre esse problema pode ser encontrada aqui .

As colisões funcionam bem, e você pode pensar que isso é suficiente. Mas, por enquanto, os coletores não são otimizados com eficiência. No modo Cena, aumente o zoom em uma parte da parede e observe os contornos dos coletores:


Há um colisor ao redor de cada bloco. As seções da parede do meio não precisam desses dispositivos adicionais.

Com GameObject Collideable selecionado , adicione o componente 2D Composite Collider a ele. Isso também adicionará automaticamente o RigidBody2D.

Defina o parâmetro BodyType RigidBody2D como Estático e marque a caixa de seleção Usado por composto no componente 2D do Tilemap Collider :


Depois disso, você notará que esses coletores quadrados desnecessários no meio das paredes desaparecem.

Termine de criar as paredes, construindo-as e fechando na parte superior, com cerca de 16 peças de altura. Não esqueça que o Collideable deve ser selecionado como o Mapa de mosaico ativo da janela Paleta de mosaicos:


A seção de masmorra não terá nenhuma dificuldade para o nosso herói sem obstáculos. Agora começaremos a trabalhar na criação da sala da morte, complementada por belos corredores de mármore antigos. Depois de superar todos esses obstáculos, o jogador receberá uma recompensa - uma montanha de ouro.

Para desenhar esses corredores, usaremos o pincel especial Tile Rule Tile . Como você viu no início do tutorial, scripts de bloco adicionais do repositório do Unity 2D Extras Github já foram adicionados ao projeto. Um deles é o Rule Tile.

O Tile Rule permite definir regras sobre quais blocos desenhar, dependendo dos blocos vizinhos que temos.

Clique com o botão direito do mouse na pasta Prefabs do projeto e selecione Criar -> Bloco de Regras (este item deve estar na parte superior do menu). Nomeie o novo elemento MarbleFloorRuleTile :


Selecione esse novo MarbleFloorRuleTile e use o inspetor para definir o Sprite padrão como roguelikeDungeon_transparent_335 . Em seguida, adicione uma nova regra de regra de mosaico clicando no ícone + . Selecione o valor de roguelikeDungeon_transparent_339 para Sprite desta regra e clique em todos os quadrados externos no esquema de regras para que cada um tenha uma seta verde apontando para fora:


Usando a ferramenta Pincel de preenchimento da caixa ( B ) na Paleta de azulejos e selecionando o Basemap da Tilemap , desenhe uma seção reta da parede de mármore. É necessário que cubra todo o espaço livre do piso.

Você pode perceber que, quando fizermos isso, a camada fechará os revestimentos com coletores, porque a ordem das camadas ainda não foi definida. Isso pode ser facilmente corrigido selecionando GameObject Collideable e alterando a ordem na camada do componente Tilemap Renderer para um valor mais alto ( 5 será suficiente):


Volte para a pasta Prefabs do projeto, abra a janela Tile e selecione a paleta RoguelikeCave e arraste MarbleFloorRuleTile para um espaço vazio na paleta:


Use o pincel de preenchimento da caixa e desenhe algumas seções do piso de mármore da sala:


Observe que um bloco de regras personalizado, completamente cercado de todos os ângulos e faces, se torna um bloco decorado (o sprite selecionado no editor de regras de bloco).

Isso é uma armadilha!

Não, não adicionaremos o almirante Akbar ao jogo como personagem. Criaremos um pincel de ladrilhos para a pré-fabricada da armadilha, que usaremos para desenhar armadilhas que atiram com lâminas rotativas!

Crie um novo GameObject vazio na hierarquia e chame-o de ShootingTrap . Crie um filho GameObject vazio no ShootingTrap. Nomeie-o Sprite :


Selecione Sprite e adicione o componente Sprite Renderer a ele. Defina a Camada de classificação como Player e a Ordem na camada como 1, para que seja renderizada em cima do restante das camadas. Selecione o campo Sprite e defina roguelikeDungeon_transparent_180 como o sprite.

Agora gire o objeto Transform of Sprite em -90 no eixo Z :


Em seguida, volte ao GameObject ShootingTrap e adicione um novo componente usando o inspetor. No campo de pesquisa, localize Shooting Trap e anexe este script.

Este script é adicionado aos arquivos do projeto que você baixou; de fato, ele lança corutin a cada dois segundos, criando uma instância pré-fabricada da lâmina de serra rotativa (ou qualquer outra pré-fabricada) na posição atual da armadilha.

Defina o item como Shoot Prefab parâmetro do componente Shooting Trap como Projectile (a pré-fabricada está localizada em / Assets / Prefabs ):


Inicie o jogo novamente no editor e use o modo Cena para encontrar a armadilha. Ela trabalha!


Arraste uma cópia do ShootingTrap da hierarquia para a pasta / Assets / Prefabs do projeto para criar uma pré-fabricada. Remova ShootingTrap da hierarquia.

Usamos outro script de pincel de bloco chamado PrefabBrush para criar um pincel que pode desenhar prefabs nas camadas Tilemap.

Clique com o botão direito do mouse na pasta / Assets / Prefabs do projeto e selecione Create -> Prefab Brush . Nome do objeto PrefabBrush .

Use o inspetor para definir o parâmetro Prefabs Size PrefabBrush como 1 e o elemento 0 para ShootingTrap .


Crie uma nova camada Tilemap chamada Traps na Grade e abra a janela Paleta de azulejos.

Selecione o pincel de ladrilhos comum ( B ) e use o menu suspenso na parte inferior da janela Paleta de ladrilhos para selecionar PrefabBrush . Selecione Armadilhas ativas de mapa de mosaico como camada e use a janela Cena para desenhar várias armadilhas pré-fabricadas ao longo da borda esquerda da sala.


Expanda as armadilhas GameObject na hierarquia e experimente o valor Atraso no início da gravação para cada valor em cada Gameobject ShootingTrap usando o script Shooting Trap no inspetor. Adicione 0,25 ao valor de cada armadilha, ou seja:

• Primeiro tiro -> Atraso no início da filmagem = 0.1
• Segundo tiro -> Atraso no início do disparo = 0,35
• Terceiro tiro -> Atraso no início do disparo = 0,6
• E assim por diante ...

Inicie o jogo e passe no teste, se tiver coragem.

Objetivo final

O objetivo deste mini calabouço é conseguir uma pilha de ouro. Fama e fortuna aguardam aqueles que a alcançam, evitando lâminas voadoras mortais.

Crie uma nova camada Tilemap chamada Objetivo na GameObject Grid . Selecione Objetivo e altere o valor da ordem do renderizador de mosaico na camada para 2 :


Sem fechar a janela Paleta de peças, verifique se o PrefabBrush ainda está selecionado. Faça o elemento 0 se referir à predefinição de meta da pasta / Assets / Prefabs do projeto.

Esta é uma casa pré-fabricada com uma montanha de sprites de ouro, com o Box Collider 2D com o Is Trigger ativado, uma fonte de som adicional e um script Goal.cs simples que reproduz o som de atingir o alvo e reinicia o nível quando o jogador cai na área do gatilho.

Use o pincel de ladrilhos padrão para desenhar um ladrilho pré-fabricado alvo na parte superior da sala, atrás das armadilhas:


Comece o jogo novamente e tente alcançar a meta. Quando você chegar a esse bloco, a lógica OnTriggerEnter2D() do Goal.cs , reproduzindo o efeito sonoro e reiniciando o nível.

Toques finais

Agora a masmorra está muito clara e livre. Podemos adicionar estilo alternando para um material de sprite 2D que possa responder à luz.

Selecione os objetos Sprite Player, Goal e ShootingTrap e faça com que o Material do renderizador Sprite use SpriteLightingMaterial :


Este é um material com um sombreador Sprite / Difuso conectado a ele. Permite que a iluminação da cena afete os sprites.

No GameObject Grid, selecione os objetos BaseLayer, DungeonFloorDecoration, Collideable e Goal e use o inspetor para usar o Renderer Material SpriteLightingMaterial também no material Tilemap .

Em seguida, selecione Luz direcional no GameObject Lights e reduza a intensidade da luz para 0,3 .

Muito melhor!


Além disso, agora você notará que o jogador carrega uma luz pontual , ou seja, lanterna brilhando ao seu redor.

Agora que os sprites da cena usam o material certo, a iluminação do Unity afeta todos os sprites ao redor.

Arraste duas cópias da prefab FlickerLight da pasta / Assets / Prefabs do projeto em Scene e coloque-as no GameObject Lights .

Defina a primeira posição pré-fabricada (X: -11,25, Y: 4, Z: -1,35) e a segunda - (X: 2,75, Y: 4, Z: -1,35) .

Crie uma nova camada de Tilemap chamada WallsAndObjects e defina a Ordem do renderizador de Tilemap no inspetor Layer como 15 . Lembre-se de que o Material também usa SpriteLightingMaterial .

Alterne o pincel da paleta de lado a lado novamente para o Pincel padrão e o Mapa de lado ativo para WallsAndObjects .

Use a ferramenta Pincel ( B ) para desenhar duas peças de “lâmpada de luz” sob cada um dos novos FlickerLight que colocamos nos cantos da área inicial:

Tempo de dificuldade

Vamos ver se podemos melhorar a masmorra ainda mais. Use a camada Tilemap WallsAndObjects para criar estantes de livros na parte superior da sala de masmorra usando outra paleta de blocos chamada RoguelikeCustom . Também desenhe uma ou duas partes da parede rachada.

Volte para a camada Tilemap DungeonFloorDecoration e adicione mais alguns detalhes ao piso de mármore, por exemplo, rachaduras em vários ladrilhos:


Parabéns, você completou seu primeiro nível de mini dungeon! Como resultado, você deve obter algo semelhante:

Para onde ir a seguir?

Se você perdeu uma etapa, pode ver o resultado final deste tutorial abrindo o projeto final do Unity Rayzor a partir de materiais para download.

Aprendemos muito neste tutorial, mas como em qualquer outro negócio, sempre há algo mais!

Existem scripts interessantes de pincel lado a lado não abordados neste tutorial. Leia sobre eles aqui e pense se você pode usá-los.

Você também pode aprender como criar blocos animados aqui .