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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
using UnityEngine; using UnityEditor; using System.Collections; /// <summary> /// Tela de configuração /// </summary> public class TelaConfiguracoes : EditorWindow { } |
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.
|
1 2 3 4 5 |
[MenuItem("Ferramentas/Tela Configuração")] public static void AbrirTela() { } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// Variável para nossa tela de configurações public static TelaConfiguracoes window; // Guarda o valor informado no campo Textfield public static string ComponenteTexto1; // Controle para o valor do Slider public static float ValorSlider; // Indica se o checkbox está marcado public static bool IsToggleSelected; [MenuItem("Ferramentas/Tela Configuração")] public static void AbrirTela() { // Criando a nossa janela window = (TelaConfiguracoes) EditorWindow.GetWindow(typeof(TelaConfiguracoes)); // Setando nosso título window.titleContent = new GUIContent("Configurações"); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
// Desenhando nossa tela void OnGUI() { // Verifica se a janela é nula if (window == null) AbrirTela(); // Criando Label GUILayout.Label("Comp. Textbox 1"); // Cria o componente Textbox ComponenteTexto1 = GUILayout.TextField(ComponenteTexto1); // Criando Label GUILayout.Label("Comp. Textbox 2"); // Cria o componente Textbox ComponenteTexto2 = GUILayout.TextField(ComponenteTexto2); // Criando Label GUILayout.Label("Comp. Textbox 3"); // Cria o componente Textbox ComponenteTexto3 = GUILayout.TextField(ComponenteTexto3); // Criando Label GUILayout.Label("Comp. Textbox 4"); // Cria o componente Textbox ComponenteTexto4 = GUILayout.TextField(ComponenteTexto4); } |
Novo código, colocando dois itens por linha.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
// Desenhando nossa tela void OnGUI() { // Verifica se a janela é nula if (window == null) AbrirTela(); // Colocando os itens na mesma linha GUILayout.BeginHorizontal(); // Criando Label GUILayout.Label("Comp. Textbox 1"); // Cria o componente Textbox ComponenteTexto1 = GUILayout.TextField(ComponenteTexto1); // Fechando a linha GUILayout.EndHorizontal(); // Colocando os itens na mesma linha GUILayout.BeginHorizontal(); // Criando Label GUILayout.Label("Comp. Textbox 2"); // Cria o componente Textbox ComponenteTexto2 = GUILayout.TextField(ComponenteTexto2); // Fechando a linha GUILayout.EndHorizontal(); // Colocando os itens na mesma linha GUILayout.BeginHorizontal(); // Criando Label GUILayout.Label("Comp. Textbox 3"); // Cria o componente Textbox ComponenteTexto3 = GUILayout.TextField(ComponenteTexto3); // Fechando a linha GUILayout.EndHorizontal(); // Colocando os itens na mesma linha GUILayout.BeginHorizontal(); // Criando Label GUILayout.Label("Comp. Textbox 4"); // Cria o componente Textbox ComponenteTexto4 = GUILayout.TextField(ComponenteTexto4); // Fechando a linha GUILayout.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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// Colocando os itens na mesma linha GUILayout.BeginHorizontal(); // Criando Label GUILayout.Label("Comp. Textbox 1"); // Cria o componente Textbox ComponenteTexto1 = GUILayout.TextField(ComponenteTexto1); // Criando Label GUILayout.Label("Comp. Textbox 2"); // Fechando a linha GUILayout.EndHorizontal(); |
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
|
1 |
GUILayout.Label("Texto do label"); |
GUILayout.TextField
|
1 |
ComponenteTexto1 = GUILayout.TextField(ComponenteTexto1); |
GUILayout.Space
|
1 |
GUILayout.Space(10); |
Um espaço de 10 pixels foram adicionados antes da linha “Texto do label”.
GUILayout.Button
|
1 2 3 4 5 |
if (GUILayout.Button("Novo item")) { // Clique do botão } |
GUILayout.Box
|
1 2 3 |
GUILayout.Label("Quadro, para avisos"); GUILayout.Box("Aqui você pode colocar alguma informaçao importante. Este componente não permite editar o conteúdo."); |
GUILayout.Slider
|
1 2 3 4 5 6 7 |
GUILayout.Label("Slider"); ValorSlider = GUILayout.HorizontalSlider(ValorSlider, 1f, 10f); GUILayout.Label("Valor Slider"); GUILayout.TextField(ValorSlider.ToString()); |
GUILayout.Toggle (checkbox)
|
1 2 3 |
GUILayout.Label("Toggle Button"); IsToggleSelected = GUILayout.Toggle(IsToggleSelected, "Ligar ToggleButton"); |
GUILayout.BeginScrollView e GUILayout.EndScrollView
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
GUILayout.BeginScrollView(scrollPosition); GUILayout.Label("Linha 01"); GUILayout.Label("Linha 02"); GUILayout.Label("Linha 03"); GUILayout.Label("Linha 04"); GUILayout.Label("Linha 05"); GUILayout.Label("Linha 06"); GUILayout.Label("Linha 07"); GUILayout.Label("Linha 08"); GUILayout.Label("Linha 09"); GUILayout.Label("Linha 10"); GUILayout.EndScrollView(); |
GUILayout.BeginHorizontal e GUILayout.EndHorizontal
|
1 2 3 4 5 6 7 8 9 10 11 |
GUILayout.BeginHorizontal(); // Criando Label GUILayout.Label("Texto do label"); ComponenteTexto1 = GUILayout.TextField(ComponenteTexto1); GUILayout.EndHorizontal(); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
// Método chamado quando a tela fica ativa void OnEnable() { } // Método chamado quando a tela perde o foco void OnDisable() { } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// Método chamado quando a tela fica ativa void OnEnable() { // Recupera as informações ComponenteTexto1 = EditorPrefs.GetString("ComponenteTexto1"); ValorSlider = EditorPrefs.GetFloat("ValorSlider"); IsToggleSelected = EditorPrefs.GetBool("IsToggleSelected"); } // Método chamado quando a tela perde o foco void OnDisable() { // Salva as informações EditorPrefs.SetString("ComponenteTexto1", ComponenteTexto1); EditorPrefs.SetFloat("ValorSlider", ValorSlider); EditorPrefs.SetBool("IsToggleSelected", IsToggleSelected); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
bool IsToggleSelected = EditorPrefs.GetBool("IsToggleSelected"); // Método chamado quando a tela perde o foco if (IsToggleSelected) { // Faz alguma coisa quando verdadeiro } else { // Faz alguma coisa quando falso } |
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