Ir para


* * * * * 1 Votos

[Unity 3D] Gui - Graphical User Interface

Unity 3D Game Development Game Design Desenvolvimento de Jogos GUI Graphical User Interface Interface Gráfica do Usuário

10 replies to this topic

#1 ixnaydk

    Enciclopédia

  • Administrador
  • 9.456 Posts:
  • Gender:Male

Postou 14 dezembro 2011 - 08:59

E ai pessoal, blz?

Seguindo com os tutoriais sobre Unity 3D, dessa vez venho falar um pouco sobre a GUI, Interface Gráfica de Usuário.

A GUI no Unity pode ser usada para fazer menus, mostrar imagens, criar botões, janelas, caixa de texto e mais uma penca de coisas.

Imagem anexa: 000.png

Antes de mais nada, precisamos acertar algumas opções no Unity para ele mostrar corretamente nossos testes com a interface gráfica.
Assim que criar um Projeto, clique em Main Camera e na aba Inspector altere a opção Projection para Orthographic.
Altere a opção Size para 20 e Far para 30.

Imagem anexa: 001.png

Também precisamos salvar nossa cena e adicionar ela na Build Settings.
Para isso vá em File -> Save Scene, após salvar clique em File -> Build Settings e clique no botão Add Current.

Imagem anexa: 002.png

Depois desse pequeno trabalho estamos pronto para começar a brincar com os comandos GUI do Unity.

Label
Vamos começar pelo mais simples, mostrar um pequeno texto na tela utilizando o Label.
Um Label não tem interação com o usuário, não pode ser clicado com o mouse e é apenas renderizado da maneira mais simples. Além de textos, podemos colocar imagens no Label.

Para isso clique com o botão direito em Project e depois Create -> JavaScript. Clique duas vezes no arquivo criar para abrir o MonoDevelop.
Digite o seguinte código:
function OnGUI () {
GUI.Label(new Rect(10,10,120,20),"Olá PdM");
}
Salve o código e arraste ele até o item Main Camera que está na aba Hierarchy.
Clique em Play e nosso Olá Mundo irá aparecer.

Mas o que significa esse monte de coisas que escrevemos nessa linha?
Em toda função GUI que for usada, é necessário criar um "retângulo" onde será gravado os dados da posição de seu texto na tela.
No caso, estamos criando o retângulo com os seguintes dados: new Rect(posição x, posição y, largura, altura).
E onde escrevemos "Olá PdM", é possível colocar uma variável no lugar de um texto.

Imagem anexa: 003.png

Agora vamos mostrar um exemplo de imagem sendo utilizado junto com a Label.
Precisamos de uma imagem qualquer para importar no Unity, para importar é só clicar com o botão direito em Project e depois Import New Asset.
Estou importando o mapa que estamos usando atualmente na PdM City como exemplo, ela é uma imagem de 254x247 pixels.

Vamos alterar algumas coisas no código que fizemos:
var imagem : Texture2D;
function OnGUI () {
GUI.Label(new Rect(10,10,254,247),imagem);
}
Salve o código e volte a clicar em Main Camera, repare que na aba Inspector bem lá embaixo está mostrando uma nova opção chamada Imagem, arraste a imagem que vc importou para essa opção.
Feito isso aperte Play e veremos a nossa imagem na tela.

Imagem anexa: 004.png

E assim terminamos de explicar o básico sobre o GUI Label.

Button
Agora vamos aprender um pouco sobre como fazer e controlar um botão pelo Unity.
Botões servem para... ué, para serem clicados :P
Outro uso comum deles no Unity é para carregar uma fase de seu jogo logo após o menu inicial.

Vamos alterar nosso código para criar um botão.
function OnGUI () {
GUI.Button(new Rect(10,10,120,30),"Eu sou um Botão");
}
Como podemos ver, o método de chamada é praticamente igual ao Label e quase todos os outros métodos GUI, a única coisa diferente é o Button logo após o GUI.

Imagem anexa: 005.png

O botão por padrão vem com o valor de boolean = false e quando clicamos nele o valor muda para true.
Então vamos alterar mais uma vez nosso código para o botão ser um pouco mais útil.
function OnGUI () {
if (Time.time % 2 < 1) {
if (GUI.Button (Rect (10,10,200,20), "Eu sou um Botão")) {
print ("Fui Clicado!");
}
}
}
O que esse código faz?
No primeiro if, fiz apenas uma brincadeira para o botão sumir e reaparecer :P
No segundo if, quando vc clicar no botão irá aparecer uma mensagem que ele foi clicado.
Observação: O print é muito útil quando vc quer testar se algo está funcionando da maneira que vc quer ou não.

Imagem anexa: 006.png

A parte com botão é só isso, lembrando que sempre que for ativar um botão vc precisa colocar um if no mesmo (assim como o segundo if do nosso exemplo).
E além disso, assim como o GUI Label, é possível adicionar uma imagem no botão se vc trocar o texto por uma var do tipo Texture2D.

Box
O GUI Box é apenas uma janela em que podemos criar e agrupar botões e outras coisas dentro da mesmo.
Vamos alterar nosso código para criar dois botões dentro de uma Box
function OnGUI () {
GUI.Box(Rect(10,10,200,100),"GUI Box");
GUI.Button(Rect(10,45,200,20),"Eu sou um Botão");
GUI.Button(Rect(10,70,200,20),"Eu tambe sou um Botão");
}

Imagem anexa: 007.png

TextField e TextArea
Aqui estarei explicando dois controles que tem uma única diferença, enquanto o TextField mostra um campo de texto editável com uma única linha o TextArea mostra o mesmo campo de texto editável só que tem o suporte para multiplas linhas de texto.
Vamos alterar nosso código para mostrar a diferença entre esses dois campos:
var textField = "TextField tem 1 linha";
var textArea = "TextArea\nTem\nvárias\nlinhas";

function OnGUI () {
GUI.TextField(Rect(10,10,200,20),textField);
GUI.TextArea(Rect(300,10,200,100),textArea);
}

Lembrando que o \n na variável textArea serve para pular linhas, se vc tentar usar a mesma no textField irá mostrar um erro.

Imagem anexa: 008.png


Toggle
O componente Toggle é o equivalente ao checkbox no Unity.
Para ser usado, é necessário declarar uma variável false/true e a mesma receber os dados do clique, como no código abaixo:
var toggle = true;

function OnGUI () {
toggle = GUI.Toggle(Rect(25,25,100,30), toggle, "Toggle");
print(toggle);
}
Reparem que foi colocado a linha print(toggle); para que seja mostrado a valor do Toggle na barra de informações.
Imagem anexa: foto 000.png
Imagem anexa: foto 001.png

Toolbar
A Toolbar não é nada mais que uma linha de botões, sendo que apenas um botão pode ser ativado por vez.
Para saber qual botão foi clicado, é usado uma variável do tipo integer.
Também é usado uma variável do tipo String para colocar os nomes dos botões.
var botao = 0;
var toolbar : String[] = ["Botão 1", "Botão 2", "Botão 3"];

function OnGUI () {
botao = GUI.Toolbar (Rect (25, 25, 250, 30), botao, toolbar);
print(botao);
}
Repare na imagem que o segundo botão está clicado e o valor referente ao segundo botão na barra inferior.
Imagem anexa: foto002.png

SelectionGrid
O SelectionGrid é muito parecido com o Toolbar, a única diferença é que o SelectionGrid suporta linhas e colunas de botões.
var botao = 0;
var grid : String[] = ["Botão 1", "Botão 2", "Botão 3", "Botão 4", "Botão 5", "Botão 6"];

function OnGUI () {
botao = GUI.SelectionGrid (Rect (25, 25, 250, 90), botao, grid,2);
}
Imagem anexa: foto 003.png

Horizontal e Vertical Slider
Esses componentes servem como barras horizontais e verticais que podem ser arrastadas alterando o valor da variável anexada a elas.
var hSlider : float = 0.0;
var vSlider : float = 0.0;

function OnGUI () {
hSlider = GUI.HorizontalSlider (Rect (25, 25, 100, 30), hSlider, 0.0, 10.0);
vSlider = GUI.VerticalSlider (Rect (50, 50, 100, 30), vSlider, 0.0, 10.0);
print(hSlider);
}
Imagem anexa: foto004.png

Horizontal e Vertical Scrollbar
Componentes bem semelhantes aos Sliders, com a diferença que serve como barra de rolagem para ser usados com TextArea ou outros componentes.
var hScrollbar : float;
var vScrollbar : float;

function OnGUI () {
hScrollbar = GUI.HorizontalScrollbar (Rect (25, 25, 100, 30), hScrollbar, 1.0, 10.0, 0.0);
vScrollbar = GUI.VerticalScrollbar (Rect (50, 50, 100, 30), vScrollbar, 1.0, 10.0, 0.0);
}
Imagem anexa: foto005.png

Window
Componente usado para criar janelas dentro de seu sistema. As janelas criadas podem ser usadas para receber coisas que estão fora dela apenas clicando e arrastando.
E assim como no Windows, é possível ter várias janelas na tela ao mesmo tempo, selecionando a que desejamos usar.
var windowRect : Rect = Rect (20, 20, 120, 50);

function OnGUI () {
windowRect = GUI.Window (0, windowRect, WindowFunction, "Window");
}

function WindowFunction (windowID : int) {
//Adicionando comandos dentro dessa função, vc criará as coisas dentro de sua janela
}
Imagem anexa: foto006.png

Bom, e por aqui terminamos o tutorial básico sobre GUI.
É isso ai, qualquer dúvida só postar, valeu!

#2 Perfect Lion

    `o: lá patada !

  • Administrador
  • 3.879 Posts:
  • Gender:Male
  • Location:Brasil/SBC

Postou 15 dezembro 2011 - 10:57

Show de bola o tuto.... assim dá para criarmos logo logo um login para o PdM City =D
Posted Image

#3 ixnaydk

    Enciclopédia

  • Administrador
  • 9.456 Posts:
  • Gender:Male

Postou 15 dezembro 2011 - 10:59

assim que eu parar de bater cabeça com a conexão do banco de dados :P

#4 Shadaloo

    Face the might Bison!!

  • Members
  • 289 Posts:
  • Gender:Male
  • Location:Base secreta
  • Interests:Dominar o mundo.

Postou 15 dezembro 2011 - 05:12

Aew! Coencidência ou não: GUI são minhas iniciais =)
Gentem, Pode parecer uma pergunta besta, mas o blender e o unity é o mesmo programa né?
Imagem

#5 ixnaydk

    Enciclopédia

  • Administrador
  • 9.456 Posts:
  • Gender:Male

Postou 15 dezembro 2011 - 06:03

não :P

Blender serve para fazer modelagem em 3D (apesar de também ter uma engine de jogos integrada), vc pode obter ótimas informações sobre o Blender nesses sites
www.blender.com.br (nesse daqui vc vai encontrar direto o Lion por lá :P)
www.blender.org

O Unity 3D é uma engine para desenvolvimento de jogos em 2D, 2.5D, 3D, 4D e dimensões paralelas e alternativas :P
o site oficial do Unity é www.unity3d.com

#6 EM3

    S O N S O N 3 0 0 0

  • Download Machine
  • 1.039 Posts:
  • Gender:Male
  • Location:Rio Grande do Sul, Brasil
  • Interests:...

Postou 16 dezembro 2011 - 06:29

cara, se continuar nesse ritmo, daqui a pouco estarei estudando o unity. :P
ótimo trabalho, mano! p

#7 ixnaydk

    Enciclopédia

  • Administrador
  • 9.456 Posts:
  • Gender:Male

Postou 16 dezembro 2011 - 08:27

ué, começa estudar :P
já tem vários estúdios no brasil contratando nego para trabalhar com Unity, e estão pagando uma média de R$ 1500,00 no caso de CLT (presencial) ou pagando por produção.

#8 EM3

    S O N S O N 3 0 0 0

  • Download Machine
  • 1.039 Posts:
  • Gender:Male
  • Location:Rio Grande do Sul, Brasil
  • Interests:...

Postou 16 dezembro 2011 - 08:37

Credo. XD
Que bacana. O Unity permite programar engines, né?
Parece que já li você falando sobre isso (eu acho :P).

#9 ixnaydk

    Enciclopédia

  • Administrador
  • 9.456 Posts:
  • Gender:Male

Postou 16 dezembro 2011 - 09:21

permite sim, a pdm city é uma engine fps, a qualquer hora eu posso meter uma arma lá e sair atirando que nem louco :P

#10 EM3

    S O N S O N 3 0 0 0

  • Download Machine
  • 1.039 Posts:
  • Gender:Male
  • Location:Rio Grande do Sul, Brasil
  • Interests:...

Postou 16 dezembro 2011 - 10:02

shooooooooow, cara!
vou ver se começo a ler um pouco sobre o unity, nessas férias. *-*

#11 ixnaydk

    Enciclopédia

  • Administrador
  • 9.456 Posts:
  • Gender:Male

Postou 05 janeiro 2012 - 08:38

tutorial atualizado com os componentes que estavam faltando.





1 usuário(s) está(ão) lendo este tópico

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)