GUICriação de Interface de Usuário

1º Semestre 2010 > PUCPR > Pós Jogos

Bruno C. de PaulaBruno C. de Paula

ResumoHoje 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);

311/04/23

GUI Text

Posicionamento apenas em relação aos eixos X e Y;

(0,0) => inferior esquerda;(1,1) => superior direita.

411/04/23

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.

511/04/23

GUITextureExibe imagem;Útil para criação de menus, HUD, telas

de pausa, etc;Texturas possuem bordas.

611/04/23

GUITexturePrincipais PropriedadesColor: cor que pinta a textura na tela;Pixel Inset: controla o escalonamento

da textura;Right / Left / Right / Top Border:

borda da imagem.

711/04/23

ScriptControlar posição e cor de textura

811/04/23

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.

911/04/23

UnityGUI

Permite a criação e uso de controles via script;

Baseado na função OnGUI;Esta função é chamada a cada frame;

1011/04/23

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

1111/04/23

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

Controles do UnityGUI1211/04/23

Definição de estilosGUIStyleControles podem ter sua aparência

definida através de GUIStyles;

1311/04/23

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 estilosGUIStylePode-se alterar as

propriedades dos controles no Inspector.

1411/04/23

Trabalhando com Skins

Skins são coleções de estilos;Vá em Assets > Create > Gui Asset;

1511/04/23

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 relacionadoReferência do GUI Text;Referências do GUI Texture;GUI Scripting Guide:

Material do Unity sobre o sistema UnityGUI.

1611/04/23