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.

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.

[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.

// 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.

// 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.

// 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.

// 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

GUILayout.Label("Texto do label");

GUILayout.TextField

ComponenteTexto1 = GUILayout.TextField(ComponenteTexto1);

GUILayout.Space

GUILayout.Space(10);

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

GUILayout.Button

if (GUILayout.Button("Novo item")) {

 // Clique do botão

}

GUILayout.Box

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

GUILayout.Label("Slider");

ValorSlider = GUILayout.HorizontalSlider(ValorSlider, 1f, 10f);

GUILayout.Label("Valor Slider");

GUILayout.TextField(ValorSlider.ToString());

GUILayout.Toggle (checkbox)

GUILayout.Label("Toggle Button");

IsToggleSelected = GUILayout.Toggle(IsToggleSelected, "Ligar ToggleButton");

GUILayout.BeginScrollView e GUILayout.EndScrollView

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

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:

// 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:

// 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.

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 para você.

Você quer saber como criar jogos com potencial de vender milhares de cópias e que podem ser desenvolvidos por uma pessoa sozinha ou uma pequena equipe?

Eu preparei um vídeo simples explicando como eu faço isso no meu estúdio de games. Acesse essa página para conferir: https://pdj.blog.br/aula-criar-jogos.