O que você está procurando?
Games

Conheça Dragon Crashers – nosso mais recente projeto de amostra 2D

EDUARDO ORIZ / UNITY TECHNOLOGIESSenior Content Marketing Manager
Mar 19, 2021|10 Min
Conheça Dragon Crashers – nosso mais recente projeto de amostra 2D
Esta página da Web foi automaticamente traduzida para sua conveniência. Não podemos garantir a precisão ou a confiabilidade do conteúdo traduzido. Se tiver dúvidas sobre a precisão do conteúdo traduzido, consulte a versão oficial em inglês da página da Web.
Descubra como levamos um jogo de RPG ocioso para o próximo nível com as ferramentas 2D nativas do Unity.

No ciclo de lançamento do Unity em 2019, concretizamos nossa visão de capacitar artistas e criadores 2D com um conjunto completo de ferramentas 2D. O lançamento dos nossos pacotes 2D incluiu animação esquelética de personagens e cinemática inversa (IK), design de níveis com mapas de blocos, formas de spline e ferramentas de pixel art. Confira nosso site 2D para uma visão geral.

Imagem de demonstração de Dragon Crashers
Rubrica: Você pode experimentar a demonstração jogável na web aqui. Certifique-se de usar um navegador compatível com WebGL 2.0, como o Google Chrome, para executar a demonstração em seu navegador, pois um jogo RPG ocioso é reproduzido automaticamente e você pode desencadear ataques especiais quando um medidor é carregado.

Desde então, nossa equipe 2D otimizou esses fluxos de trabalho e refinou a tecnologia gráfica: o Renderizador 2D dentro do Universal Render Pipeline. Não há melhor maneira de testar essas ferramentas e ver como elas podem fazer seus visuais 2D brilharem do que explorando um novo projeto de amostra. Dragon Crashers já está disponível gratuitamente na Asset Store.

Baixar da Asset Store

Sobre Dragon Crashers

Dragon Crashers é um projeto de amostra oficial feito no Unity 2020.2 que mostra o conjunto nativo de ferramentas 2D e tecnologia gráfica do Unity. A jogabilidade é uma fatia vertical de um RPG Idle de rolagem lateral, popular em plataformas móveis atualmente.

Enquanto o grupo de heróis ataca automaticamente seus inimigos, você pode desencadear ataques especiais simplesmente tocando/clicando nos diferentes avatares.

O projeto de amostra foi testado em plataformas de desktop, dispositivos móveis e web.

Próximo webinar

Além das informações compartilhadas neste artigo, junte-se a nós no nosso webinar de visão geral do Dragon Crashers no dia 14 de abril às 11h EST (17h CET) para dicas importantes e um passo a passo ao vivo do nosso desenvolvedor de conteúdo global, Andy Touch. Leve-me para a seção de registro.

Dragão e cavaleiros
Como começou, como terminou: A arte conceitual e os recursos feitos pelo artista Jaroslaw forneceram a orientação necessária para construir a cena.
Começando

Certifique-se de ter o Unity 2020.2 ou 2020 LTS para obter o projeto na Asset Store. Primeiro, inicie um novo projeto 2D e vá para Gerenciador de Pacotes > Meus Ativos para importar Dragon Crashers. Você verá algumas mensagens pop-up de Configurações do Projeto; aceite todas elas.

Se você encontrar algum problema, informe-nos no fórumdedicado ao Dragon Crashers 2D.

captura de tela do hub de unidade

Depois que o projeto for importado, você verá uma nova opção na barra de menu que oferece atalhos para as cenas do projeto. Selecione Carregar menu do jogo e pressione Jogar para experimentar.

Imagem tirada no Unity ao selecionar 'carregar menu do jogo'

Recomendamos usar configurações de exibição de alta definição na visualização do jogo, como a configuração Full HD (1920×1080) ou 4K UHD (3840×2160).

Captura de tela do jogo
Seis personagens de um manequim animado

Nosso grupo de heróis e inimigos básicos é diversificado e equipado com diferentes trajes, acessórios e variações. No entanto, todos eles são bípedes com constituição semelhante.

Para evitar animar cada um deles com suas respectivas restrições de IK 2D, criamos um manequim. O animador usou este manequim, enquanto o artista de personagens criou skins e acessórios exclusivos para os personagens.

Imagem do modelo do personagem

O Mannequin Prefab (PV_Character_Base_Bipedal.prefab) foi usado para criar variantes do Prefab para cada personagem. A única diferença nessas variantes é o Sprite Library Asset, onde trocamos a aparência visual do personagem bípede.

Todos os recursos da biblioteca de sprites dos personagens têm a mesma categoria e rótulo para definir as partes do corpo e suas variantes. Por exemplo, os inimigos cavaleiro e esqueleto têm uma categoria chamada “boca”, com variantes de sprite rotuladas como “boca aberta”, “boca dentes” e “boca normal” usadas durante a animação.

Para aplicar as animações a todos os personagens, certifique-se de que o recurso visual ou PSB de cada personagem tenha um equipamento semelhante. Em outras palavras, eles devem ter ossos nomeados da mesma forma, anexados a partes do corpo da mesma Categoria e Rótulo. Para economizar tempo, você pode copiar o esqueleto do manequim (ou ossos dos personagens de referência) e colá-lo nos diferentes personagens. Esta opção está disponível no Editor de Skinning, parte do Editor de Sprites.

Imagem de modelo de personagem com chapéu.
Para copiar e colar informações de ossos de outro personagem, certifique-se de que a categoria do sprite e os nomes dos ossos correspondam. Talvez você também queira ajustar a geometria para que funcione bem com os novos sprites.

Os Prefabs incluem recursos que tornam os personagens mais vivos, como Cinemática Inversa e mapas Normal e Máscara para melhor integração no ambiente iluminado em 2D.

Imagem do modelo do personagem dragão
Compondo a cena, sprites, tilemaps e formas de sprites

Não há necessidade de definir o design do seu nível tão cedo no processo de prototipagem. As ferramentas 2D de construção de mundos incluídas no Unity permitem que você se divirta projetando níveis e depois itere neles facilmente. O Tilemap Editor e o Sprite Shape ajudam a automatizar tarefas, como configurar colisores para se adaptarem às formas de objetos ou terrenos, enquanto a visualização de cena é seu playground para tornar o jogo mais emocionante e esteticamente agradável.

O aspecto mais importante é ter todos os seus “pincéis” prontos na Paleta de Azulejos, que pode conter azulejos repetíveis, azulejos animados, azulejos isométricos ou hexagonais, ou mesmo GameObjects que os renderizem todos com alto desempenho, com apenas um renderizador (Tilemap Renderer). Para todos os elementos na grade, consulte a paleta de blocosPalette_GroundAndWalls.

Captura de tela do jogo no editor
Os ladrilhos de chão que são brancos aqui não aparecem brancos no jogo devido às luzes atmosféricas 2D adicionadas ao ambiente.

Outro recurso frequentemente esquecido que pode ser útil no design de níveis é o Modo de Desenho de Sprites. Sprites em mosaico usados para camadas de fundo podem cobrir uma grande área de cena com um pequeno sprite para criar um belo efeito de paralaxe.

Captura de tela do jogo no editor. Há cavernas.
Essas quatro camadas de fundo são sprites simples e repetíveis.

Uma grade Tilemap pode não ser a solução mais prática para adicionar objetos com aparência mais orgânica ou elementos baseados em splines ao seu projeto. Em vez disso, recomendamos uma ferramenta baseada em spline, como o 2D Sprite Shape, que desenha como um software de desenho vetorial. Use-o em adereços de fundo ou como parte do jogo. O SpriteShape Renderer permite que você renderize com eficiência muitos sprites anexados à spline ou borda de suas formas. Veja o PrefabP_MineCartTracks_Apara observar como as trilhas são desenhadas com a linha spline, e a arte da estrutura de suporte é feita a partir da textura de preenchimento do Perfil de Forma do Sprite.

Captura de tela do jogo no editor. Há trilhos de trem.

PrefabP_BridgeouP_MineCartTracks_Bsão outros exemplos que demonstram como uma borda de forma de Sprite não precisa ser uma linha simples, mas sim representar elementos mais elaborados – neste caso, uma ponte e uma ferrovia.

Imagem de sprites decorativos sendo usados.
O Sprite Shape foi usado para elementos decorativos, como os trilhos ferroviários, ou mesmo elementos de primeiro plano, como a estrutura de madeira.
Shaders 2D, mapas normais e adereços animados

Com o 2D Renderer, use o shader Sprite-Lit para efeitos de iluminação avançados. Aproveite ao máximo esses efeitos dando texturas secundárias aos seus sprites.

Imagem mostrando o processo desde o modelo básico do personagem até o personagem totalmente funcional.
O Sprite Shape foi usado para elementos decorativos, como os trilhos ferroviários, ou mesmo elementos de primeiro plano, como a estrutura de madeira.

Mapas normais podem ser adicionados no Editor de Sprites. Essas imagens RGB representam a direção XYZ para a qual o pixel está voltado e sinalizam às luzes 2D o quanto elas devem ser afetadas. Mapas de máscara também podem ser aproveitados pelo ativo de dados do Renderizador 2D (RenderData_2D.assetno projeto), parte do recurso Estilos de mesclagem de luz. O estilo Light Blend chamado “Fresnel” é usado para acentuar a luz de contorno ao redor de personagens e sprites. Para obter o efeito Fresnel, por exemplo, selecione usar as informações do canal R dos mapas de máscara. Neste projeto em particular, temos apenas um Light Blend Style, então os três canais – R, G e B – parecem iguais (preto e branco). Isso torna o processo de criação de mapas de máscara mais conveniente.

Captura de tela do editor com arte/objetos do jogo.
Esta arte do jogo foi criada com o Affinity Designer. O artista Jaroslaw criou simultaneamente mapas Normais e mapas de Máscaras – um processo que abordaremos em um blog futuro.

O Shader Graph é frequentemente usado na demonstração para animar acessórios sem sobrecarregar a CPU. Você pode observar elementos como o vento movendo as teias de aranha (pré-fabricadoP_SpiderWeb_Blur), cristais brilhando (P_Crystals_Cluster), bem como a animação do fluxo de lava (P_Lava_Flowing_Vertical), que aproveitam uma textura de mapa de fluxo para controlar a direção das coordenadas UV da textura principal. A textura de fluxo usa as cores vermelho e verde para indicar a direção XY que os pixels seguem em cada quadro. Abra o SubGraph FlowMap para saber como obter esse efeito.

Captura de tela do jogo no editor. Lava!
O mapa de fluxo pintado à mão dá ao fluxo de lava seu efeito viscoso e caricatural, que combina com a direção de arte do projeto.

Na mesma cena de batalha de dragões, há outra técnica de animação de shader chamada “recorte alfa animado”, que cria uma animação suave a partir de uma única textura. Isso ocorre mostrando um intervalo específico de pixels em cada quadro com base em seus valores alfa. Efeitos visuais como respingos de lava (ParticleSystem_Splatters) ou animação de impacto (P_VFX_HitEffect)foram feitos usando essa técnica com Shader Graph.

Desvanecimento do Splatter Alpha
A animação suave dessa partícula foi feita a partir de uma única textura e da técnica de recorte alfa animado aplicada com Shader Graph.
Colorindo a cena com luzes 2D

O estilo de arte da demonstração foi criado considerando as luzes 2D – e suas muitas possibilidades. Como você pode ver, os sprites aprimorados pelos mapas Normais e Máscaras artesanais são relativamente planos. Alguns sprites, como o piso do tilemap, são em escala de cinza; o que significa que eles são coloridos usando a opção Cor do Tilemap Renderer combinado com as áreas iluminadas do ambiente.

Captura de tela do jogo - Luzes 3D acesas vs. Luzes 3D apagadas.
É importante considerar as possibilidades dos gráficos 2D do Unity para criar arte para o jogo que aproveite ao máximo todas as opções disponíveis.

Luzes 2D em tempo real permitem que você passe mais tempo na cena final do jogo no Unity Editor. Observar os resultados diretos enquanto compõe sua cena com luzes e objetos, ou mesmo poder jogar o nível conforme avança, permite que você estabeleça melhor o clima e a atmosfera desejados para seu jogo.

Além disso, você pode aumentar a imersão animando esses elementos. Por exemplo, o PrefabP_Lantern_HangingFromPostmostra como anexar uma luz a um objeto animado ou dar ao personagem bruxa um cajado com partículas Sprite-Lit

Outro benefício de usar luzes 2D em seu projeto é a capacidade de reutilizar elementos. Ambientes e acessórios podem parecer muito diferentes dependendo das condições de iluminação, o que permite recriar muitos níveis diferentes com os mesmos sprites.

Arquitetura de jogabilidade

Para criar, estruturar, gerenciar e iterar a jogabilidade, nosso projeto de demonstração usou uma combinação deObjetos ScriptáveisePrefabs.

Todos os sete personagens, independentemente de serem heróis ou vilões, herdam sua estrutura central da Unidade Prefab base e usam o mesmo código de comportamento. Para diferenciar valores entre caracteres, usamos Objetos Scriptáveis para diferentes "blocos" de valores baseados em unidades. Valores codificados dificultam o balanceamento do jogo para não programadores e fazem com que a jogabilidade seja rígida, então configuramos valores de unidade como 'Quantidade de dano de ataque', 'Tempo de recarga de habilidade em segundos' e 'Saúde da unidade' em objetos programáveis; para que qualquer um que esteja trabalhando no projeto possa fazer ajustes rápidos. Essas mudanças de valor são então manipuladas dinamicamente pelo código do jogo.

Captura de tela do editor Unity

Cada Unit Prefab tem um script central 'UnitController' que atua como o 'cérebro' da unidade e manipula referências de script e sequenciamento de comportamento do prefab interno. Quando o Dragão é atacado, por exemplo, o 'UnitController' executa eventos de comportamento relacionados, como a transição para uma animação de recuo, reproduzindo um efeito sonoro de rugido e reduzindo a quantidade de saúde do Dragão. Esses comportamentos principais aderem ao conceito de encapsulamento e lidam apenas com seus respectivos propósitos e tarefas. Por exemplo, UnitHealthBehaviour manipula apenas lógica, incluindo a definição e remoção de valores de integridade de uma unidade e o relato de retornos de chamada de eventos importantes, como 'HealthChanged' ou 'HealthIsZero'. Entretanto, o 'UnitController' envia valores para o 'UnitHealthBehaviour' com base nos cenários e ações que ocorrem durante o jogo.

Fluxograma do controlador da unidade

Em alguns casos, sistemas externos às Unidades precisariam ser atualizados caso um evento específico acontecesse. Delegadossão utilizados para essas configurações.

Por exemplo: Quando a Bruxa recebe dano de um ataque, e 'UnitHealthBehaviour' executa o evento 'HealthChanged(int healthAmount)', então o 'UIUnitHealthBehaviour' inscrito externamente pode atualizar a Barra de Saúde da Bruxa de acordo com esse valor.

O uso de Delegados nos permite isolar e testar áreas sem depender de outros sistemas. Por exemplo; isso incluiu testar o desempenho do Sistema de Número de Exibição de Danos pop-up em uma cena separada, sem a necessidade de simular a jogabilidade da batalha.

Fluxograma de pacotes
Timeline e sinais

O recursoTimelinedo Unity foi usado em duas áreas: Cenas lineares e sequências de habilidades de cada Unidade.

As cenas lineares ocorrem no início e no fim de uma batalha. Eles cuidam do sequenciamento para uma variedade de áreas, como transições de câmera (usandoCinemachine), animações de personagens (usandoAnimator), clipes de áudio, efeitos de partículas e animações de interface do usuário. Cada trilha foi vinculada à instância de cena relevante.

Umsinal de Timelinefoi incorporado no final da cinemática de introdução para invocar um evento Unity quando a cutscene termina. Isso 'sinaliza' quando começar a lógica do jogo de batalha.

A Timeline foi usada para criar sequências de habilidades pré-fabricadas para cada unidade. Isso permite que cada Unidade tenha suas próprias habilidades especiais que são conectadas e associadas ao seu personagem; semelhantes às habilidades de campeões em um jogo MOBA.

Cada unidade contém duas linhas de tempo de habilidade: um ataque automático "básico" e um ataque "especial" ativado manualmente. O script 'UnitAbilitiesBehaviour' manipula a lógica para ambas as linhas de tempo de habilidade em termos da habilidade que está sendo jogada no momento, a fila de sequência de habilidade e o início/interrupção dos tempos de recarga da habilidade (dependendo da lógica de jogo de alto nível, como se a cena de introdução está sendo jogada ou se uma unidade morreu). Trilhas da Timeline de habilidades vinculadas aos sistemas locais do Prefab da unidade, incluindo o Animador de personagem para animação de ataque e os Sistemas de partículas para efeitos visuais. Isso permitiu que tanto o programador quanto o artista criassem, reproduzissem e iterassem a habilidade específica de uma Unidade isoladamente usandoo Modo de Edição de Prefabantes de aplicar as alterações a cada instância do Prefab da Unidade no jogo.

Personagem batendo com um machado.

Os Sinais da Timeline eram usados ​​quando uma habilidade aplicava algum tipo de modificador de valor à saúde de um alvo da Unidade. Quando o Cavaleiro brande sua espada, por exemplo, queremos que o dano seja aplicado assim que a espada atingir um ponto crítico na animação, em vez do início ou do fim do golpe. Como o tempo das animações e efeitos visuais foi iterado durante o desenvolvimento, o artista reposicionou o sinal "Habilidade Aconteceu" no novo ponto desejado da sequência em um fluxo de trabalho muito rápido, sem depender do programador para alterar quaisquer valores no código.

Isso também nos permitiu adicionar vários sinais de "Habilidade Ocorrida" em um ataque contínuo, como o dragão cuspindo fogo no grupo de heróis.

Personagens de Dragon Crashers lutando com um dragão com o editor aberto na metade inferior da tela
Assista ao webinar Dragon Crashers (e ganhe alguns brindes)

O desenvolvedor sênior de conteúdo globalAndy Touchapresentou um webinar com uma demonstração no editor do fluxo de trabalho do Character Pipeline que foi usado para criar o projeto. Este webinar explicou como:

  • Exportar um personagem 2D do Photoshop para o Unity
  • Configurar o equipamento de sprite de um personagem
  • Configurar IK para os membros de um personagem
  • Use Sprite Swapping para diferentes visuais de personagens
  • Use Prefabs aninhados para acessórios de armas
  • Aplique mapas Sprite Normal e Mask para estilos de iluminação 2D
  • Sequencie as habilidades dos personagens usando a Timeline

Como forma de agradecimento por explorarDragon Crashersconosco, gostaríamos de compartilhar um conjunto de papéis de parede, fundos de tela do Zoom e outros elementos visuais para inspirar você em sua jornada de desenvolvimento de jogos 2D. Obtenha os fundosdo Dragon Crasheraqui.

Planos de fundo do Dragon Crashers no PC, laptop e tablet.
Mais recursos 2D

Para quem está começando um novo projeto 2D, já existem alguns ótimos guias no blog e nos fóruns. Se você é novo nas ferramentas, recomendamos verificar apágina da web 2D,o blog e a apresentação do 2D Tips Lightning Roundpara obter dicas úteis. Para saber ainda mais, confira um mergulho profundo em nosso sistema de animação esqueléticaaqui,ou em nosso projeto anterior, oLost Crypte seuwebinarcorrespondente. Como sempre, também recomendamos a leitura de nossadocumentaçãomais recente e, claro, a seçãoRenderizador 2Dpara obter mais informações sobre recursos ou APIs específicos.