Unity EditorWindow: Personalize sua Tela e Crie Frameworks Dentro da Unity

4 Flares 4 Flares ×

Este é um artigo convidado escrito pelo Gabriel Marinho sobre como personalizar a Unity utilizando o Unity EditorWindow.

Gabriel é de Campinas, ele trabalha como programador C# e desenvolve seus jogos usando a Unity, que é hoje uma das game engines favoritas pelos desenvolvedores.

Ele também é membro da Academia de Produção de Jogos, nosso treinamento online com cursos, entrevistas, maratonas de desenvolvimento e uma comunidade incrível de desenvolvedores de games.

Neste artigo, o Gabriel mostra como você pode personalizar sua própria tela na Unity para aplicar configurações em seu jogo ou criar um framework.

Sem mais delongas, fique agora com o tutorial do Gabriel.

Com vocês, Gabriel Marinho

A Unity permite você criar suas próprias telas. Elas terão a mesma aparência das telas nativas e poderão ficar livres ou fixadas em algum lugar. Você pode criar a sua tela para efetuar configurações do seu jogo ou criar um framework, por exemplo.

Neste primeiro momento, irei mostrar como você cria sua tela utilizando os principais componentes (textbox, botão, mensagem de aviso, etc.).

Geralmente, essas nossas telas são chamadas a partir de algum item de menu. Veremos como criar a opção de menu mais adiante.

Ah, e continue lendo o artigo até o final, pois assim você entenderá tudo o que eu falo e depois poderá baixar o projeto completo. 🙂

Unity EditorWindow: criando a tela de configuração

Observação importante: estou utilizando a versão 5.3.2f1. Pode mudar alguma coisa caso você utilize versões anteriores, principalmente se for versões anteriores a 4.x.

Crie um novo projeto na Unity. Crie o diretório chamado Editor. Depois crie o script com o nome da sua tela, que para nosso exemplo chamaremos de TelaConfiguracoes. Veja a imagem abaixo.

Unity EditorWindow
Imagem após ter criado o diretório “Editor”e o script “TelaConfiguracao”.

Abra o script no seu editor e vamos começar a adicionar nosso código. Faça as alterações conforme abaixo, depois as explicarei.

Nossas alterações incluem adicionar o namespace UnityEditor e nossa tela deverá extender a classe EditorWindow ao invés da classe MonoBehaviour como de padrão quando criamos algum script. Também removemos os métodos Start e Update.

Criando o menu no Unity EditorWindow

Não adianta termos uma super tela se não conseguirmos abri-la. Para isso, vamos criar uma opção no menu. Utilize o código abaixo para adicionar um item ao menu ou criar o seu menu.

Unity EditorWindow
Menu para abrir a nossa tela de configurações

A tag MenuItem é utilizada para criarmos opções nos menus ou criar nossa opção.

Customizando nossa tela no Unity EditorWindow

Caso você clique na nossa opção de menu verá que nada acontece, isso porque não criamos nossa janela ainda. O código abaixo cria a janela e adiciona um título.

Primeiro, criamos uma variável chamada window, é apenas uma sugestão, mas obviamente você pode usar qualquer nome. Na função AbrirTela colocamos as linhas para criar nossa janela. O método EditorWindow.GetWindow() cria ou “chama” a janela, caso esteja escondida ou já criada. Este método irá retornar um objeto “janela” do tipo TelaConfiguracao.

As variáveis ComponenteTexto1, ValorSlider e IsToggleSelected que criamos agora serão utilizadas mais tarde.

Vou reforçar aqui que, para cada componente que você criar, deverá existir uma variável referente, pois você deverá guardar o valor nelas, que depois serão guardadas no EditorPrefs.

Unity EditorWindow: desenhando nossa tela

Agora vamos adicionar os componentes na nossa janela, faremos isso no método OnGUI da Unity. Abaixo, colocarei exemplos de como criar os componentes mais comuns.

No exemplo de código abaixo, criamos os componetes que desejamos mas eles estão ficando “um por linha”, ou seja, o label e depois o campo texto.

unity editorwindow
Tela com os componentes “um por linha”

Novo código, colocando dois itens por linha.

Unity EditorWindow
Resultado da tela após inserirmos os métodos “BeginHorizontal” e “EndHorizontal”

Note que utilizamos os comandos GUILayout.BeginHorizontal() e GUILayout.EndHorizontal() para indicar que os componentes que estão entre estes comandos devem ficar alinhados horizontalmente.

Veja um exemplo abaixo quando colocamos mais de um componente na mesma linha.

Unity EditorWindow
Exemplo de vários componentes na mesma linha

Note que o label “Com. Textbox 2” está na primeira linha juntamente com os outros componentes.

A partir de agora, vou colocar o comando e o resultado.

GUILayout.Label

Unity EditorWindow
Exemplo do label

GUILayout.TextField

Unity EditorWindow
Exemplo de TextField

GUILayout.Space

Unity EditorWindow
Exemplo de Space

Um espaço de 10 pixels foram adicionados antes da linha “Texto do label”.

GUILayout.Button

Unity EditorWindow
Exemplo de botão

GUILayout.Box

Unity EditorWindow
Exemplo de box, quadro de avisos

GUILayout.Slider

Unity EditorWindow
Exemplo de Slider

GUILayout.Toggle (checkbox)

Unity EditorWindow
Exemplo de checkbox

GUILayout.BeginScrollView e GUILayout.EndScrollView

Unity EditorWindow
Exemplo de Scroll

GUILayout.BeginHorizontal e GUILayout.EndHorizontal

Unity EditorWIndow
Exemplo de campos na mesma linha

Salvando as configurações

Do que adiantaria termos uma super tela se não conseguirmos utilizar os valores que informamos nela?

Iremos salvar os valores informados na nossa janela utilizando o EditorPrefs. Para isso, vamos adicionar dois novos métodos no nosso script. Veja abaixo:

No método OnEnable() iremos recuperar as informações e, por outro lado, no método OnDisable() iremos salvar as informações. Veja como fica abaixo:

Recuperando as informações salvas

Bom, fizemos nossa super tela, que pode até ser um super framework que irá nos ajudar no desenvolvimento. Mas vamos precisar recuperar esta informação no nosso script. A recuperação da informação é a mesma que usamos no método OnEnable() da nossa tela.

Conclusão

Primeiramente, quero agradecer ao Raphael Dias pela oportunidade de escrever este artigo e poder contribuir um pouco com meus colegas desenvolvedores.

Espero que o artigo seja bem útil a todos, pois agora é só deixar as ideias fluírem e criar seus frameworks com o Unity EditorWindow.

Para baixar os arquivos desse projeto basta clicar neste link.

Quero trazer no próximo artigo como você pode customizar o Inspector, pois dá para fazer diversas coisas e grandes frameworks também.

Qualquer dúvida entre em contato comigo pelo e-mail [email protected]

Abraço!

Comentários Finais (por Raphael Dias)

E aí, curtiu esse artigo sobre o Unity EditorWindow?

Agora, eu tenho uma dica e uma pergunta para você.

A dica é que você dê uma olhada nos três materiais abaixo sobre desenvolvimento utilizando a engine Unity:

>> Fazendo jogos e aplicativos com Unity 3D

>> Como Calcular o Tamanho da Visão da Câmera Ortográfica no Unity

>> Programando em Equipe na Unity: Exemplos Práticos de uso do SVN

Depois de ler os artigos acima, volte aqui e me responda a seguinte pergunta:

Para você, quais as preferências mais úteis para acrescentar em sua própria tela no Unity EditorWindow?

Espero sua resposta aqui embaixo.

Abraços,
Raphael Dias

  • Patrícia Tamega

    Parabéns, Gabriel!

    Explicação muito clara para um tema tão difícil, pelo menos para um leigo.

    Continue escrevendo, abraços!

    • Gabriel Marinho

      Obrigado Patrícia…

      Abraço

  • J&S Enterprise

    Cara, você me esclareceu demais sobre esse assunto.
    Eu já li e reli a documentação da Unity sobre isso, assisti a alguns videos, mas os caras mais complicam do que explicam, e você, em um artigo, explicou bonitamente. Valeu mesmo!

    Eu to querendo me aprofundar na criação de jogos assim como muitos aqui e quando leio artigos como esse me inspiro muito. Tenho muitas ideias e tenho alguns conhecimentos em Blender, Sketchup e lógica de programação e também sei desenhar, mas me faltam outras coisas como, por exemplo um PC que preste (kkk) e me aprofundar nos conhecimentos sobre a Unity e linguagem de programação e trabalhar com algum tipo de gestão estratégica também pra organizar as coisas.