Sistema de Diálogo em Unity com Nomes, Retratos e Layouts | Tutorial de Unity + Ink
Tabela de Conteúdos
Introdução
Olá a todos, meu nome é Trever e neste tutorial vou mostrar a vocês uma maneira simples, mas eficaz, de exibir e gerenciar nomes de NPC, retratos e layouts diferentes para um sistema de diálogo construído no Unity e que utiliza a ferramenta Ink. Ao final deste vídeo, teremos construído um sistema no qual é possível alterar facilmente o retrato e o nome a cada linha de diálogo e também mudar o layout do painel de diálogo. Vamos começar!
Criação de um Sistema de Diálogo em Unity
Antes de detalharmos o processo de criação do sistema de diálogo, é importante mencionar que este tutorial é uma continuação de um vídeo anterior no qual construímos um sistema de diálogo com escolhas. Se você ainda não assistiu a esse vídeo, recomendo que o veja antes de continuar com este tutorial. No entanto, mesmo se você não tiver assistido ao vídeo anterior, é possível acompanhar este tutorial sem problemas.
Para começar, vamos utilizar a ferramenta Ink para escrever nosso diálogo. O Ink é uma ferramenta de escrita de diálogos que permite estruturar o texto de forma a facilitar o seu uso no Unity. Não vamos nos aprofundar muito na sintaxe do Ink neste tutorial, mas se você tiver interesse em explorar essa ferramenta mais a fundo, eu incluirei um link para um vídeo específico sobre como escrever diálogos com o Ink na descrição deste vídeo.
Uso de Tags de Diálogo
No Ink, podemos usar tags para adicionar metadados a cada linha de diálogo. Cada tag é lida pelo Unity como uma string e nós podemos estruturá-las da maneira que for mais conveniente para nós. Em nosso caso, vamos utilizar tags para definir algumas ações específicas no código em C# para cada linha de diálogo. Uma boa maneira de estruturar as tags é utilizar pares de chave e valor, onde a chave representa uma ação que queremos executar em nosso código C# e o valor representa os dados a serem utilizados nessa ação. Por exemplo, utilizando o símbolo "#" para indicar que se trata de uma tag, podemos definir uma tag com a chave "speaker" (para o falante) e o valor "Bob". Desse modo, podemos ler essa tag como uma string no Unity, separá-la em um par de chave e valor e, em seguida, executar a ação correspondente à chave utilizando o valor.
Definindo os Nomes dos Personagens
Uma das ações que podemos controlar utilizando tags é a exibição do nome do personagem no painel de diálogo. Para isso, vamos definir uma tag com a chave "speaker" e o valor correspondente ao nome do personagem em cada linha de diálogo. No script de gerenciamento de diálogos em Unity, vamos criar uma variável do tipo TextMeshProUGUI para representar o texto do nome do personagem no painel de diálogo. Em seguida, vamos verificar se a tag atual possui a chave "speaker" e, se possuir, vamos definir o texto do nome do personagem como o valor da tag.
Definindo Retratos dos Personagens
Outra ação que podemos controlar utilizando tags é a exibição do retrato do personagem no painel de diálogo. Para isso, vamos criar uma pasta chamada "Portraits" em nosso projeto Unity e adicionar um Animator Controller chamado "PortraitAnimator". Dentro desse Animator Controller, vamos criar animações para diferentes expressões faciais do personagem, como "neutral", "happy" e "sad". Para cada expressão facial, vamos criar uma animação no Animator Controller e definir a sprite correspondente ao retrato do personagem para cada animação.
No script de gerenciamento de diálogos em Unity, vamos criar uma variável privada do tipo Animator para representar o Animator Controller do painel de diálogo. Em seguida, vamos verificar se a tag atual possui a chave "portrait" e, se possuir, vamos chamar o método "Play" do Animator passando o valor da tag como parâmetro. Esse método irá reproduzir a animação correspondente ao retrato do personagem no painel de diálogo.
Definindo a Estrutura do Diálogo
Agora que já sabemos como definir os nomes dos personagens e os retratos no diálogo, vamos estruturar o próprio diálogo. Vamos criar um arquivo de diálogo no formato Ink para cada personagem. No arquivo de diálogo, vamos definir as falas de cada personagem, utilizando as tags de "speaker" e "portrait" para controlar a exibição do nome e do retrato. Por exemplo:
Bob: Olá!
Alice: Oi, tudo bem?
Bob: Sim, e com você?
No script de gerenciamento de diálogos em Unity, vamos utilizar a ferramenta Ink para ler o arquivo de diálogo e definir o texto do diálogo de acordo com cada linha do arquivo. Para isso, vamos utilizar a biblioteca de integração do Ink com o Unity.
Alterando a Aparência do Diálogo
Agora que já sabemos como controlar os nomes dos personagens e os retratos no painel de diálogo, vamos ver como podemos alterar o layout do painel. Vamos criar um novo Animator Controller chamado "LayoutAnimator" para controlar as diferentes disposições dos elementos no painel de diálogo. Por exemplo, podemos ter um layout em que o nome do personagem e o retrato ficam à esquerda e outro layout em que eles ficam à direita. Vamos adicionar as animações "Left" e "Right" no Animator Controller e definir as posições dos elementos no layout correspondente a cada animação.
No script de gerenciamento de diálogos em Unity, vamos criar uma variável privada do tipo Animator para representar o Animator Controller do painel de diálogo. Em seguida, vamos verificar se a tag atual possui a chave "layout" e, se possuir, vamos chamar o método "Play" do Animator passando o valor da tag como parâmetro. Esse método irá reproduzir a animação correspondente ao layout do painel de diálogo.
Gerenciando Diferentes Layouts
Por fim, vamos ver como podemos gerenciar diferentes layouts no painel de diálogo. Vamos criar uma nova pasta chamada "Layouts" em nosso projeto Unity e adicionar um Animator Controller chamado "LayoutAnimator". Dentro desse Animator Controller, vamos criar duas animações chamadas "Left" e "Right". Cada animação irá controlar a disposição dos elementos do painel de diálogo, como o nome do personagem, o retrato e o texto.
No script de gerenciamento de diálogos em Unity, vamos adicionar um novo campo serializado do tipo GameObject para representar o objeto do painel de diálogo em si. Em seguida, vamos utilizar o método GetComponent() para obter uma referência ao componente Animator do painel de diálogo. Com essa referência, vamos utilizar o método Play() para reproduzir a animação correspondente ao layout do diálogo. Por exemplo, se a tag atual possuir a chave "layout" e o valor for "left", iremos reproduzir a animação "Left" no animator do painel de diálogo.
Resetando as Configurações do Diálogo
Para evitar que as configurações do diálogo de um NPC sejam mantidas durante a conversa com outro NPC, é importante resetar as configurações do diálogo quando uma nova conversa é iniciada. No script de gerenciamento de diálogos em Unity, vamos adicionar um método chamado EnterDialogMode() que será chamado no início de uma nova conversa. Dentro desse método, vamos resetar as configurações do nome do personagem, retrato e layout para seus valores padrão.
Conclusão
Neste tutorial, vimos como criar um sistema de diálogo em Unity usando a ferramenta Ink. Através do uso de tags, conseguimos controlar aspectos como o nome dos personagens, os retratos e os layouts no painel de diálogo. Espero que este tutorial tenha sido útil e que você possa aplicar essas técnicas em seus próprios projetos. Se tiver alguma dúvida, não deixe de perguntar nos comentários. Obrigado por assistir e até o próximo vídeo!