Unity4Kids

Aula 01 - Introdução ao Canvas

Introdução – UI (User Interface)

O Unity 2017 utiliza um sistema de objetos para ajudá-lo a criar a sua interface. Cada objeto tem uma utilidade e eles trabalharão juntos na composição dos menus, medidores de status, marcadores e tudo que for necessário mostrar ao Player.

Na hierarquia do Unity, conforme você acrescenta os objetos, eles vão sendo inseridos sempre na frente dos que já estão na tela, sendo os de cima menos importantes que os de baixo. Portanto, se na hierarquia você tiver três objetos:

- janela A

- janela B

- janela C

A janela A aparecerá na tela do jogo atrás da janela B, que estará atrás da janela C, que ficará na frente de todas. O Unity usa a própria ordem da hierarquia para colocar os objetos em ordem no jogo.

Dica da Asset Store:

Há um asset chamado Sorting View (free) que pode ajudá-lo a organizar as imagens no seu jogo, se você estiver com problemas.

 

 

 

 

 

 

Objetos da UI

A  princípio, o primeiro objeto que deve ser criado é o CANVAS, que será a “tela” onde você colocará todos os outros objetos da UI. Um jogo p2D pode ser praticamente feito no Canvas, a não ser que use elementos 3d. No entanto, por vários motivos, vamos dar preferência a usar objetos 2d que estejam fora do Canvas, quando formos fazer esse tipo de jogo.

O Canvas é inicialmente muito maior que o cenário, justamente para não atrapalhar a visão da sua cena. Ao rodar o jogo, ele ocupará a tela normalmente, não se preocupe. Os objetos que podem ser colocados como filhos do Canvas são:

  1. Image - ao adicionar uma imagem, o objeto virá com um transformador diferente do usual, além de um componente chamado IMAGE, que pede um sprite (uma imagem inteligente). É importante lembrar que essa imagem deve ser configurada como SPRITE antes de ser adicionada ao componente Image.
  2. Panel - o panel é basicamente o mesmo que Image, porém ele já começa ocupando todo o espaço do Canvas, portanto é mais útil para criar janelas e espaços maiores.
  3. Button – esse é o objeto que cria os botões do jogo, um dos mais importantes. Você pode escolher como o botão se comporta quando o mouse entra na sua área, quando o Player clica ou o ativa. Também determina, por script, o que acontece quando clicarmos o botão (ou qualquer outro evento).
  4. Text – esse é o objeto que insere texto no Canvas.
  5. Raw Image – a imagem crua. Permite que você crie uma imagem que não seja um sprite. Como não são inteligentes, são mais pesadas, mas preservam todas as condições originais da imagem original.
  6. Slider – o slider é um medidor que dá valores em float ou int para diversos fins. É a barra de hit points, stamina, mana de um jogo. A imagem diminui ou aumenta conforme os valores.
  7. Scrollbar – na prática, funciona como o slider, ela distribui valores, mas está configurada para ser usada com janelas. É a barra de rolagem das janelas. Deve ser utilizada junto com um IMAGE com o componente SCROLLRECT que permitirá criar janelas que não cabem na tela e precisam de rolagem. É um processo relativamente simples que trataremos nas próximas aulas ou conforme a necessidade.
  8. Toggle – aciona true ou false. É usado para receber informação do jogador.
  9. InputField – Um dos objetos mais importantes, é o campo de texto, em que o jogador poderá entrar com alguma informação de texto que será utilizada no jogo, como seu “nome”.
Dica da Asset Store:

Há um asset chamado TextFx ($ 30,00) que pode ajudá-lo a criar efeitos interessantes de texto no seu jogo.

  • EventSystem – O event system é o gerente de todos os eventos provocados pela UI, especialmente importante para configurar os botões. Não é necessário alterá-lo, a menos que saiba o que está fazendo, e nunca se deve apagá-lo, pois o Canvas não funciona sem ele.

 

 

 

Introdução à programação

Vamos cobrir a programação necessária para fazermos nossos botões funcionarem, assim teremos um botão NEW GAME e um botão QUIT que já farão o que quisermos.

O que é um método?

Método (ou função) é um comando, uma ordem que daremos ao programa. É bem simples, se queremos que o programa faça um conjunto de ações, como abrir uma cena nova, tocar um som e disparar partículas, podemos juntar essas ações em um método chamado NewGame( )

Sua forma é a seguinte:

public void LoadNewGame( ) {

}

Observe: usamos o “public” porque queremos que o botão acesse este método de fora dele, se fosse private, nada fora do script poderia acessá-lo. Também usamos o void, porque esse método não vai retornar um valor, vai só executar algumas ações. LoadNewGame foi o nome que eu escolhi para esta função (a notação do método sempre deve ser com letra maiúscula para cada palavra, todas juntas). Tudo que queremos fazer vai ficar entre as chaves.

No Unity, sempre que queremos fazer algo, como carregar uma cena ou sair do jogo, começamos a ação com o “lugar” onde aquela ação está. Dentro desse lugar, separado por ponto, encontraremos a nossa ação (ou seja, o método que queremos executar).

Para uma cena chamada prologue, podemos fazer assim:

Application.LoadLevel(“prologue”);

Application.Quit( );

Observação! Sempre que você fizer uma linha de comando, ela deve terminar com ;

Mesmo que o comando não receba parâmetros (como ‘prologue’) ele deve vir com parênteses vazios, como por exemplo Application.Quit ( ) ;

Agora coloque esses comandos nos métodos que criamos e defina os botões no Inspector para acessar o script, a função e executar o comando!