GUI Criação de Interface de Usuário

Apresentação em tema: "GUI Criação de Interface de Usuário"— Transcrição da apresentação:

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

2 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).

3 GUI Text Exibe texto em 2D na tela; Usa fontes TTF;
23/03/2017 Exibe texto em 2D na tela; Usa fontes TTF; Download de fontes (fontes Windows);

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

5 GUI Text Propriedades Text: texto mostrado;
23/03/2017 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.

6 GUITexture Exibe imagem;
23/03/2017 Exibe imagem; Útil para criação de menus, HUD, telas de pausa, etc; Texturas possuem bordas.

7 GUITexture Principais Propriedades
23/03/2017 Color: cor que pinta a textura na tela; Pixel Inset: controla o escalonamento da textura; Right / Left / Right / Top Border: borda da imagem.

8 Script Controlar posição e cor de textura
23/03/2017 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; }

9 Eventos de Mouse OnMouseDown: mouse pressionado sobre elemento;
23/03/2017 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.

10 UnityGUI Permite a criação e uso de controles via script;
23/03/2017 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"); }

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

12 Controles do UnityGUI 23/03/2017

13 Definição de estilos GUIStyle
23/03/2017 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); }

14 Definição de estilos GUIStyle
23/03/2017 Pode-se alterar as propriedades dos controles no Inspector.

15 Trabalhando com Skins Skins são coleções de estilos;
23/03/2017 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"); }

16 Material relacionado Referência do GUI Text;
23/03/2017 Referência do GUI Text; Referências do GUI Texture; GUI Scripting Guide: Material do Unity sobre o sistema UnityGUI.