GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.
Transcript of GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.
![Page 1: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/1.jpg)
GUICriação de Interface de Usuário
1º Semestre 2010 > PUCPR > Pós Jogos
Bruno C. de PaulaBruno C. de Paula
![Page 2: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/2.jpg)
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).
![Page 3: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/3.jpg)
GUI Text
Exibe texto em 2D na tela;
Usa fontes TTF;Download de
fontes (fontes Windows);
311/04/23
![Page 4: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/4.jpg)
GUI Text
Posicionamento apenas em relação aos eixos X e Y;
(0,0) => inferior esquerda;(1,1) => superior direita.
411/04/23
![Page 5: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/5.jpg)
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
![Page 6: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/6.jpg)
GUITextureExibe imagem;Útil para criação de menus, HUD, telas
de pausa, etc;Texturas possuem bordas.
611/04/23
![Page 7: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/7.jpg)
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
![Page 8: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/8.jpg)
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;}
![Page 9: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/9.jpg)
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
![Page 10: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/10.jpg)
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"); }}
![Page 11: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/11.jpg)
1111/04/23
function OnGUI() { if(GUI.Button(Rect(10,10,150,100), "Botao")) { print("Clicou"); }}
![Page 12: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/12.jpg)
Controles do UnityGUI1211/04/23
![Page 13: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/13.jpg)
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);}
![Page 14: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/14.jpg)
Definição de estilosGUIStylePode-se alterar as
propriedades dos controles no Inspector.
1411/04/23
![Page 15: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/15.jpg)
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");}
![Page 16: GUI Criação de Interface de Usuário 1º Semestre 2010 > PUCPR > Pós Jogos Bruno C. de Paula.](https://reader036.fdocumentos.com/reader036/viewer/2022062418/552fc0f8497959413d8b4f9b/html5/thumbnails/16.jpg)
Material relacionadoReferência do GUI Text;Referências do GUI Texture;GUI Scripting Guide:
Material do Unity sobre o sistema UnityGUI.
1611/04/23