GUI Criação de Interface de Usuário

Bruno C. de Paula GUICriação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos

Resumo • Hoje vamos trabalhar com a criação de interface de usuário (GUI – Graphic User Interface) com o Unity 3d; • Vamos trabalhar com os Game Objects: • GUI Text: exibição de textos; • GUI Texture: exibição de imagens. • Também vamos entender o sistema de criação de interfaces através de scripts (UnityGUI).

GUI Text • Exibe texto em 2D na tela; • Usa fontes TTF; • Download de fontes (fontes Windows);

GUI Text • Posicionamento apenas em relação aos eixos X e Y; • (0,0) => inferior esquerda; • (1,1) => superior direita.

GUI TextPropriedades • Text: texto mostrado; • Anchor: ponto que o texto compartilha sua posição com o Transform; • Alignment: Alinhamento; • Line Spacing: Espaçamento entre textos; • Tab Size: espaço correspondente ao Tab; • Font: fonte usada; • Material: material contendo os caracteres a serem desenhados; • Pixel Correct: texto é desenhado do tamanho da fonte importada.

GUITexture • Exibe imagem; • Útil para criação de menus, HUD, telas de pausa, etc; • Texturas possuem bordas.

GUITexturePrincipais Propriedades • Color: cor que pinta a textura na tela; • Pixel Inset: controla o escalonamento da textura; • Right / Left / Right / Top Border: borda da imagem.

ScriptControlar posição e cor de textura function Update () { // color.r => intensidade de vermelho // color.g => verde // color.b => azul // a é a transparência guiTexture.color.a-=0.1 * Time.deltaTime; // position.x e position.y controlam a posição transform.position.x-=0.1 * Time.deltaTime; }

Eventos de Mouse • OnMouseDown: mouse pressionado sobre elemento; • OnMouseDrag: usuário clica e arrasta; • OnMouseEnter: mouse vai sobre o elemento; • OnMouseExit: mouse sai do elemento; • OnMouveOver: chamado a cada frame enquanto estiver sobre o elemento; • OnMouseUp: botão do mouse é solto após o usuário clicar sobre um elemento.

UnityGUI • Permite a criação e uso de controles via script; • Baseado na função OnGUI; • Esta função é chamada a cada frame; function OnGUI() { if(GUI.Button(Rect(10,10,150,100), "Botao")) { print("Clicou"); } }

function OnGUI() { if(GUI.Button(Rect(10,10,150,100), "Botao")) { print("Clicou"); } }

Controles do UnityGUI

Definição de estilosGUIStyle • Controles podem ter sua aparência definida através de GUIStyles; var botaoCustomizado : GUIStyle; function OnGUI () { // Cria um botão com o estilo definido GUI.Button( Rect(10,10,150,20), "Sou um botao customizado!", botaoCustomizado); }

Definição de estilosGUIStyle • Pode-se alterar as propriedades dos controles no Inspector.

Trabalhando com Skins • Skins são coleções de estilos; • Vá em Assets > Create > Gui Asset; var meuGUISkin : GUISkin; function OnGUI() { // Atribui o skin à variável exposta GUI.skin = meuGUISkin; // Cria um botão, com as configurações do Skin atribuido GUI.Button(Rect(10,10, 150, 20), "Botao com skin"); }

Material relacionado • Referência do GUI Text; • Referências do GUI Texture; • GUI Scripting Guide: • Material do Unity sobre o sistema UnityGUI.

GUI Criação de Interface de Usuário