SlideShare une entreprise Scribd logo
1  sur  11
Projeto de jogos RAD 
Classe GUI: Menus e Interfaces 
Augusto Bülow
Unity 3D 
• Classe GUI todos recursos para interfaces de 
tela (de forma facilitada): 
• Box (caixas de menu) 
• Menus (botões) 
• Labels (textos simples) 
• TextField (entrada de textos) 
• DrawTexture (apresentação de imagens) 
• ...
Unity 3D 
• Renderização GUI – evento pos render do 
mundo virtual 3D 
• Elementos GUI colocados sobre (a frente) dos 
elementos de jogo 
• TODOS objetos podem referenciar a classe 
GUI e compor / exibir elementos de tela 
function OnGUI () { 
.... 
}
Unity 3D 
• BOX – Caixas de menus, caixas para 
diálogos do jogo 
• Parâmetros 
• Posição e dimensão: Rect(x,y,sizex,sizey) 
• Texto, título da Box 
function OnGUI () { 
GUI.Box(Rect (0, 0, 
400,200),“Título"); 
}
Unity 3D 
• LABEL – texto simples para exibição na tela 
• Parâmetros 
• Posição e dimensão: Rect(x,y,sizex,sizey) 
• Tamanho é respeitado pelo texto, sendo quebrado 
(automaticamente) dentro da área 
• Texto 
var numero = 1.3; 
var texto1 = “Variável String” 
function OnGUI () { 
GUI.Label(Rect (0, 0, 400,200),“Qualquer 
texto"); 
//permite uso de variáveis string + numéricas 
GUI.Label(Rect (0, 20, 400,200), texto1 + 
numero); 
}
Unity 3D 
• BUTTON – Botões 
• Parâmetros 
• Posição e dimensão: Rect(x,y,sizex,sizey) 
• Texto 
• Código botão usado para exibição e avaliação do 
click / uso ao mesmo tempo 
function OnGUI () { 
if (GUI.Button( Rect(10, 10, 100,20),“Texto Botão“)) { 
.... 
// se botão pressionado = código 
} 
}
Unity 3D 
– TEXTFIELD : caixa para entrada de textos 
– Parâmetros 
– Posição e dimensão: Rect(x,y,sizex,sizey) 
– String (variável) para entrada / input 
– Número máximo de caracteres 
var nome = “”; 
function OnGUI () { 
GUI.Label(Rect (0, 0, 400,200),“Digite seu nome:"); 
nome = GUI.TextField (Rect (0, 20, 100, 30), nome, 25); 
// TextField – retorna valor para variável String 
}
Unity 3D 
– DRAWTEXTURE: exibir imagens (BMPs) na tela 
– Parâmetros 
– Posição e dimensão: Rect(x,y,sizex,sizey) 
– Imagem (Texture2D) para exibição 
var imagem_menu : Texture2D; //declara BMP – seta via Inspector 
function OnGUI () { 
sizex = imagem_menu.width; //possível pegar dimensões da imagem 
sizey = imagem_menu.height; 
GUI.DrawTexture(Rect(posx,posy,sizex,sizey), imagem_menu); 
}
Unity 3D 
– Elementos apresentados permitem construção dos 
menus que precisamos 
– Classe GUI mais completa, checar documentação 
(manual) para controles extras: 
– Toggle, TextArea, VerticalSlider ... 
– GUI permite customização por meio de GUISkins 
– GUISkin: definição geral de estilo do menu, incluindo 
fontes, imagens, cores, etc, definíveis por elemento.
Unity 3D 
– Criamos uma nova GUISkin 
para criarmos nosso 
“design” de menus 
– Assets -> Create -> GUISkin
Unity 3D 
– Por código, declaramos as GUISkins e determinamos 
qual Skin deve ser usada antes de criar os elementos 
GUI 
var Skin1 : GUISkin; 
var Skin2 : GUISkin; //defino via Inspector as Skins 
function OnGUI () { 
GUI.skin = Skin1; 
GUI.Label(Rect (0, 0, 400,200),“Texto com Skin1"); 
GUI.skin = Skin2; 
GUI.Label(Rect (0, 20, 400,200),“Texto com Skin2"); 
}

Contenu connexe

Plus de Marcos Batista (17)

Aula maps
Aula mapsAula maps
Aula maps
 
Aula ia2
Aula ia2Aula ia2
Aula ia2
 
Aula ia
Aula iaAula ia
Aula ia
 
Aula disparos
Aula disparosAula disparos
Aula disparos
 
Aula disparos
Aula disparosAula disparos
Aula disparos
 
Aula cameras
Aula camerasAula cameras
Aula cameras
 
Aula anima-modelos
Aula anima-modelosAula anima-modelos
Aula anima-modelos
 
Aula anima1
Aula anima1Aula anima1
Aula anima1
 
Aula9 material
Aula9 materialAula9 material
Aula9 material
 
Aula8 instancias
Aula8 instanciasAula8 instancias
Aula8 instancias
 
Aula7 velocidade
Aula7 velocidadeAula7 velocidade
Aula7 velocidade
 
Aula6 colisao2
Aula6 colisao2Aula6 colisao2
Aula6 colisao2
 
Aula5 colisao1
Aula5 colisao1Aula5 colisao1
Aula5 colisao1
 
Aula4 debug
Aula4   debugAula4   debug
Aula4 debug
 
Aula3 input
Aula3   inputAula3   input
Aula3 input
 
Aula2 intro2
Aula2   intro2Aula2   intro2
Aula2 intro2
 
Aula1 intro
Aula1  introAula1  intro
Aula1 intro
 

Dernier

DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...IsabelPereira2010
 
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdfLeloIurk1
 
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfPROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfHELENO FAVACHO
 
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de..."É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...Rosalina Simão Nunes
 
SLIDE DE Revolução Mexicana 1910 da disciplina cultura espanhola
SLIDE DE Revolução Mexicana 1910 da disciplina cultura espanholaSLIDE DE Revolução Mexicana 1910 da disciplina cultura espanhola
SLIDE DE Revolução Mexicana 1910 da disciplina cultura espanholacleanelima11
 
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdfLeloIurk1
 
Dicionário de Genealogia, autor Gilber Rubim Rangel
Dicionário de Genealogia, autor Gilber Rubim RangelDicionário de Genealogia, autor Gilber Rubim Rangel
Dicionário de Genealogia, autor Gilber Rubim RangelGilber Rubim Rangel
 
FASE 1 MÉTODO LUMA E PONTO. TUDO SOBRE REDAÇÃO
FASE 1 MÉTODO LUMA E PONTO. TUDO SOBRE REDAÇÃOFASE 1 MÉTODO LUMA E PONTO. TUDO SOBRE REDAÇÃO
FASE 1 MÉTODO LUMA E PONTO. TUDO SOBRE REDAÇÃOAulasgravadas3
 
Araribá slides 9ano.pdf para os alunos do medio
Araribá slides 9ano.pdf para os alunos do medioAraribá slides 9ano.pdf para os alunos do medio
Araribá slides 9ano.pdf para os alunos do medioDomingasMariaRomao
 
Análise poema país de abril (Mauel alegre)
Análise poema país de abril (Mauel alegre)Análise poema país de abril (Mauel alegre)
Análise poema país de abril (Mauel alegre)ElliotFerreira
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...azulassessoria9
 
Estudar, para quê? Ciência, para quê? Parte 1 e Parte 2
Estudar, para quê?  Ciência, para quê? Parte 1 e Parte 2Estudar, para quê?  Ciência, para quê? Parte 1 e Parte 2
Estudar, para quê? Ciência, para quê? Parte 1 e Parte 2Maria Teresa Thomaz
 
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕES
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕESCOMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕES
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕESEduardaReis50
 
Revolução russa e mexicana. Slides explicativos e atividades
Revolução russa e mexicana. Slides explicativos e atividadesRevolução russa e mexicana. Slides explicativos e atividades
Revolução russa e mexicana. Slides explicativos e atividadesFabianeMartins35
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...azulassessoria9
 
apostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médioapostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médiorosenilrucks
 
Introdução a Caminhada do Interior......
Introdução a Caminhada do Interior......Introdução a Caminhada do Interior......
Introdução a Caminhada do Interior......suporte24hcamin
 
AULA DE CARIOLOGIA TSB introdução tudo sobre
AULA DE CARIOLOGIA TSB introdução tudo sobreAULA DE CARIOLOGIA TSB introdução tudo sobre
AULA DE CARIOLOGIA TSB introdução tudo sobremaryalouhannedelimao
 
o ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfo ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfCamillaBrito19
 
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSOLeloIurk1
 

Dernier (20)

DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
 
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
 
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfPROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
 
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de..."É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
 
SLIDE DE Revolução Mexicana 1910 da disciplina cultura espanhola
SLIDE DE Revolução Mexicana 1910 da disciplina cultura espanholaSLIDE DE Revolução Mexicana 1910 da disciplina cultura espanhola
SLIDE DE Revolução Mexicana 1910 da disciplina cultura espanhola
 
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf
 
Dicionário de Genealogia, autor Gilber Rubim Rangel
Dicionário de Genealogia, autor Gilber Rubim RangelDicionário de Genealogia, autor Gilber Rubim Rangel
Dicionário de Genealogia, autor Gilber Rubim Rangel
 
FASE 1 MÉTODO LUMA E PONTO. TUDO SOBRE REDAÇÃO
FASE 1 MÉTODO LUMA E PONTO. TUDO SOBRE REDAÇÃOFASE 1 MÉTODO LUMA E PONTO. TUDO SOBRE REDAÇÃO
FASE 1 MÉTODO LUMA E PONTO. TUDO SOBRE REDAÇÃO
 
Araribá slides 9ano.pdf para os alunos do medio
Araribá slides 9ano.pdf para os alunos do medioAraribá slides 9ano.pdf para os alunos do medio
Araribá slides 9ano.pdf para os alunos do medio
 
Análise poema país de abril (Mauel alegre)
Análise poema país de abril (Mauel alegre)Análise poema país de abril (Mauel alegre)
Análise poema país de abril (Mauel alegre)
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
 
Estudar, para quê? Ciência, para quê? Parte 1 e Parte 2
Estudar, para quê?  Ciência, para quê? Parte 1 e Parte 2Estudar, para quê?  Ciência, para quê? Parte 1 e Parte 2
Estudar, para quê? Ciência, para quê? Parte 1 e Parte 2
 
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕES
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕESCOMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕES
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕES
 
Revolução russa e mexicana. Slides explicativos e atividades
Revolução russa e mexicana. Slides explicativos e atividadesRevolução russa e mexicana. Slides explicativos e atividades
Revolução russa e mexicana. Slides explicativos e atividades
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
 
apostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médioapostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médio
 
Introdução a Caminhada do Interior......
Introdução a Caminhada do Interior......Introdução a Caminhada do Interior......
Introdução a Caminhada do Interior......
 
AULA DE CARIOLOGIA TSB introdução tudo sobre
AULA DE CARIOLOGIA TSB introdução tudo sobreAULA DE CARIOLOGIA TSB introdução tudo sobre
AULA DE CARIOLOGIA TSB introdução tudo sobre
 
o ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfo ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdf
 
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO
2° ANO - ENSINO FUNDAMENTAL ENSINO RELIGIOSO
 

GUI e interfaces de usuário em Unity 3D

  • 1. Projeto de jogos RAD Classe GUI: Menus e Interfaces Augusto Bülow
  • 2. Unity 3D • Classe GUI todos recursos para interfaces de tela (de forma facilitada): • Box (caixas de menu) • Menus (botões) • Labels (textos simples) • TextField (entrada de textos) • DrawTexture (apresentação de imagens) • ...
  • 3. Unity 3D • Renderização GUI – evento pos render do mundo virtual 3D • Elementos GUI colocados sobre (a frente) dos elementos de jogo • TODOS objetos podem referenciar a classe GUI e compor / exibir elementos de tela function OnGUI () { .... }
  • 4. Unity 3D • BOX – Caixas de menus, caixas para diálogos do jogo • Parâmetros • Posição e dimensão: Rect(x,y,sizex,sizey) • Texto, título da Box function OnGUI () { GUI.Box(Rect (0, 0, 400,200),“Título"); }
  • 5. Unity 3D • LABEL – texto simples para exibição na tela • Parâmetros • Posição e dimensão: Rect(x,y,sizex,sizey) • Tamanho é respeitado pelo texto, sendo quebrado (automaticamente) dentro da área • Texto var numero = 1.3; var texto1 = “Variável String” function OnGUI () { GUI.Label(Rect (0, 0, 400,200),“Qualquer texto"); //permite uso de variáveis string + numéricas GUI.Label(Rect (0, 20, 400,200), texto1 + numero); }
  • 6. Unity 3D • BUTTON – Botões • Parâmetros • Posição e dimensão: Rect(x,y,sizex,sizey) • Texto • Código botão usado para exibição e avaliação do click / uso ao mesmo tempo function OnGUI () { if (GUI.Button( Rect(10, 10, 100,20),“Texto Botão“)) { .... // se botão pressionado = código } }
  • 7. Unity 3D – TEXTFIELD : caixa para entrada de textos – Parâmetros – Posição e dimensão: Rect(x,y,sizex,sizey) – String (variável) para entrada / input – Número máximo de caracteres var nome = “”; function OnGUI () { GUI.Label(Rect (0, 0, 400,200),“Digite seu nome:"); nome = GUI.TextField (Rect (0, 20, 100, 30), nome, 25); // TextField – retorna valor para variável String }
  • 8. Unity 3D – DRAWTEXTURE: exibir imagens (BMPs) na tela – Parâmetros – Posição e dimensão: Rect(x,y,sizex,sizey) – Imagem (Texture2D) para exibição var imagem_menu : Texture2D; //declara BMP – seta via Inspector function OnGUI () { sizex = imagem_menu.width; //possível pegar dimensões da imagem sizey = imagem_menu.height; GUI.DrawTexture(Rect(posx,posy,sizex,sizey), imagem_menu); }
  • 9. Unity 3D – Elementos apresentados permitem construção dos menus que precisamos – Classe GUI mais completa, checar documentação (manual) para controles extras: – Toggle, TextArea, VerticalSlider ... – GUI permite customização por meio de GUISkins – GUISkin: definição geral de estilo do menu, incluindo fontes, imagens, cores, etc, definíveis por elemento.
  • 10. Unity 3D – Criamos uma nova GUISkin para criarmos nosso “design” de menus – Assets -> Create -> GUISkin
  • 11. Unity 3D – Por código, declaramos as GUISkins e determinamos qual Skin deve ser usada antes de criar os elementos GUI var Skin1 : GUISkin; var Skin2 : GUISkin; //defino via Inspector as Skins function OnGUI () { GUI.skin = Skin1; GUI.Label(Rect (0, 0, 400,200),“Texto com Skin1"); GUI.skin = Skin2; GUI.Label(Rect (0, 20, 400,200),“Texto com Skin2"); }