Como criar uma cena de loading com barra de progresso na Unity

0 Flares 0 Flares ×

Este é um artigo convidado escrito por Leonardo Thurler sobre como criar uma cena de loading com barra de progresso na Unity.

Leonardo é cientista da computação e trabalha com análise de sistemas, desenvolvendo jogos em seu tempo livre.

Ele também é aluno da Academia de Produção de Jogos, nosso treinamento online com cursos, entrevistas e uma comunidade incrível de desenvolvedores de games.

O Leonardo já escreveu outros dois mega posts aqui no Produção de Jogos:

Você pode conferir os artigos acima quando terminar este aqui. Agora, continua aqui comigo…

Assim como o último artigo do Leonardo, este post é um tutorial extremamente detalhado que vai te permitir entender todos os passos do processo.

Sem mais delongas, fique aí com esse excelente tutorial de Unity.

Nota para os iniciantes: Se você não sabe do que estou falando, confira nesse artigo o que é e para que serve uma game engine e depois descubra neste artigo o que é e como utilizar a Unity

Com vocês, Leonardo Thurler

Olá pessoal,

Todo mundo que já jogou qualquer jogo digital já se deparou com as telas de Loading, elas servem para informar ao usuário quando uma outra fase ou algo pesado está sendo carregado e para isso geralmente elas possuem uma barra ou uma porcentagem de carregamento.

Neste artigo eu busco explicar como criar uma cena de Loading na Unity. A tela que iremos criar apresenta tanto a barra de progresso como um texto com a porcentagem, esta forma de tela de Loading pode ser utilizada tanto em jogos 2D como em jogos 3D. Abaixo, segue um gif do comportamento que produziremos neste artigo.

telaLoading

O código produzido neste artigo é compatível com o Unity 5.3 ou posterior, pois utiliza o novo recurso SceneManager já que o Application.LoadLevel se tornou obsoleto.

É possível adaptar o código para que funcione nas versões anteriores do Unity para isto basta modificar os pontos em que é utilizado o SceneManager e colocar para utilizar o método equivalente no Application. Caso queira baixar o projeto ou o exe construído neste artigo, confira os links abaixo:

Criando as Scenes e animações

Primeiro crie uma imagem toda preta que servirá para fazer um efeito nas transições das cenas. Esse efeito será escurecer a tela quando for carregar uma nova tela e clarear a tela quando ela for carregada.

A imagem criada pode ser em qualquer resolução já que será totalmente preta não irá perder qualidade ao esticar. A imagem pode ser semelhante à da imagem abaixo.

Unity - Tela de loading

Agora vamos criar um novo projeto no Unity, no caso do artigo eu criei um projeto 2D, porém este artigo se aplica tanto a jogos 2D quanto 3D.

Ao iniciar o projeto crie uma pasta chamada “Images” e importe a imagem criada para dentro do projeto e crie uma Imagem utilizando o sistema UI na Unity, para criar a imagem basta ir no menu Game Object > UI > Image.

Renomeie o game object para “FadeImage”, coloque para utilizar a imagem que foi criada e redimensione para que ela ocupe todo o espaço do canvas. A sua tela deve ficar semelhante à da imagem abaixo.

loading-unity-2

Feito isso vamos criar uma animação para esta imagem aparecer e sumir, este será o nosso efeito antes e depois de realizar a transição entre as cenas. Crie uma pasta chamada “Animations” e dentro dela crie um AnimatorControler com o nome de “FadeImageAC”.

Adicione o Animator Controller ao objeto “FadeImage”. Na aba animator, para habilitar esta aba basta ir no menu Window > Animator, adicione um parâmetro do tipo Trigger com o nome “show”. Com isso sua tela deve ficar semelhante a imagem abaixo.

loading-unity-3

Agora vamos criar 3 animações para este objeto, para isto vamos na aba animation, para habilitar esta aba basta ir no menu Window > Animation, e criamos as animações para este Animator Controller. Salve todas as animações dentro da pasta Animations.

A primeira animação terá o nome de “Visible” e terá as propriedades indicas na imagem abaixo.

loading-unity-4

A segunda animação terá o nome de “FadeIn” e terá as propriedades indicas nas imagens abaixo.

loading-unity-5

loading-unity-6

E a última terá o nome de “FadeOut” e terá as propriedades indicadas nas imagens abaixo.

loading-unity-7

loading-unity-8

Com as três animações criadas vamos voltar a aba animator e configurar o fluxo entre as animações. Primeiro vamos apagar o State default e definir o State “Visible” como o default, além disso vamos criar uma transição dele para o State “FadeOut”, está transição irá servir para quando a tela carregar a imagem preta sumir automaticamente. A configuração da transição deve ficar conforme demostrado na imagem abaixo.

loading-unity-9

Agora vamos criar uma transição entre o State “Any State” para o “Fade In”, está transição irá servir para fazer a imagem preta aparecer antes de carregar a cena de loading.  A configuração da transição deve ficar conforme demonstrado na imagem abaixo.

loading-unity-10

Agora que já criamos as animações e transições entre elas, vamos criar uma pasta chamada “Scenes” e salvar a nossa cena com o nome “MainScene” dentro dela.

Além disso, vamos criar um botão, dentro do canvas, e alterar o texto dele para “Go To Next Scene”, este botão servirá para carregar a nova cena. Caso você dê play no jogo nesse momento você pode ver que a imagem preta some, mas o botão sempre está à frente dela.

Para corrigir isto basta colocar o game object do botão acima do objeto da imagem na aba de hierarquia, este é um detalhe bem importante pois queremos que essa imagem fique à frente de qualquer coisa então qualquer outra coisa que formos adicionar ao canvas devem ficar acima do objeto que contém a imagem.

Além dessa alteração vamos deixar a imagem preta invisível para que possamos ver o botão no editor, para fazer isto basta selecionar a imagem e na cor dela diminuir todo o alpha. Com isso, a sua tela deve ficar semelhante à da imagem abaixo.

loading-unity-11

Caso o Unity não tenha criado o game object “Event System” automaticamente, você deve ir no menu Game Object > UI > Event System. Esse objeto é muito importante pois ele vai garantir que os cliques no botão sejam interpretados pelo Unity.

Caso você dê play agora, verá que a imagem preta irá aparecer e sumir, isso acontece por conta da nossa animação “Visible”. Ela faz a imagem aparecer e logo depois ela troca automaticamente para a animação “FadeOut” que escurece e desativa o objeto da imagem.

Agora vamos criar duas novas cenas com base nesta que já está criada. Vamos no menu File > Save Scene as… e criamos duas cópias dessa cena, uma com o nome de “LoadingScene” e outro com o nome de “GameScene”.

Na “GameScene” vamos alterar o texto do botão para “Go To Game Scene” e vamos criar vários cubos na tela, isso vai servir para que a cena fique um pouco pesada e seja possível ver a barra de progresso sendo carregada na cena de Loading. Agora sua tela deve estar semelhante a imagem abaixo.

loading-unity-12

Na “LoadingScene” vamos remover o game object “FadeImage” pois está tela não terá efeito depois de carregada. Vamos remover o botão e criar dois game object de texto no canvas, um terá o texto “Loading:” e o outro terá o nome “Percent” e o texto “0%”.

Além de criar os game object de texto, vamos criar também um Slider que será a barra de progresso. Ao criar o Slider vamos remover o objeto “Handle Slide Area” que fica dentro dele, além disso vamos mudar o nome do game object “Slider” para “ProgessBar” e configurar seus atributos conforme demonstrado na imagem abaixo.

loading-unity-13

Agora que temos as telas configuradas vamos criar os scripts e depois colocar os botões para ativar as funções de trocar de cenas.

Criando os Scripts

Para que as transições entre as cenas controladas de forma mais fácil, vamos utilizar um padrão de projeto chamado Singleton.

Este padrão é muito utilizado em desenvolvimento de softwares, basicamente ele serve para quando você quer ter somente uma instância de um determinado objeto em toda sua aplicação, caso queriam saber mais aconselho a pesquisarem sobre este padrão no Google pois tem bastante material legal sobre isso na internet.

A utilização desse padrão se deve ao fato de que teremos um objeto controlador de cenas, este objeto será responsável por indicar ao Unity como as transições deverão ser feitas. Com isso só precisamos de um objeto desse no nosso jogo inteiro e esse é exatamente o motivo de utilizarmos este padrão.

Então, vamos criar uma pasta chamada “Scripts” e criar o nosso primeiro script, esse script vai indicar que o objeto que fizer referência a ele através de herança (conceito de orientação a objeto)  utilizará o padrão mencionado.

Segue o código abaixo.

Agora vamos criar o script do objeto que irá servir para controlar as cenas, note que na definição da classe ele é Filho da classe Singleton e define o template mencionado no script anterior. Segue o código abaixo.

E agora vamos criar mais um script, esse script servirá para que os botões que criamos nas cenas ativem a função de trocar de cena. Segue o código abaixo.

Configurando os botões e trocando as cenas na Unity

Bem agora falta pouco, vamos voltar as cenas para criar os objetos que irão controlar as ações e colocar os botões para ativar essas ações.

A “MainScene” é a nossa cena inicial, então ela deve conter o objeto do controlador de cenas. As outras não precisarão desse objeto pois ele vai ser mantido ao trocar as cenas.

Então nessa Scene vamos criar 2 objetos: um com o nome de “SceneController” e vamos adicionar o script “SceneController” a ele; e o outro objeto terá o nome de “GuiController” e vamos adicionar o script “GuiController” a ele.

Além disso, vamos colocar para que o botão que existe na tela ative o método “Go To Scene”, do game object “GuiController”, passando o nome da cena “GameScene”. Conforme pode ser visto na imagem abaixo.

loading-unity-14

Agora vamos à “GameScene”, nela vamos criar apenas o objeto “GuiController” e vamos adicionar o script “GuiController” a ele. Além disso vamos colocar para que o botão que existe na tela ative o método “Go To Scene”, do game object “GuiController”, passando o nome da cena “MainScene”:

loading-unity-15

Corrigindo possíveis erros e testando

Agora se executarmos o jogo e clicarmos no botão, podemos receber 3 erros. Um erro se deve ao fato de que você tem que executar primeiro a “MainScene” pois ela é a única que cria o objeto “SceneController”.

É possível resolver este erro copiando o objeto “SceneController” da “MainScene” para esta cena, mesmo fazendo isso não serão criadas duas instâncias do objeto pois o script “Singleton” que criamos tem um tratamento para resolver isto, mas caso não queria fazer isso é só iniciar a execução através da “MainScene”.

O segundo erro que pode acontecer é porque as 3 cenas não estão configuradas no build do jogo e para que seja possível navegar entre elas precisamos realizar essa configuração. Para isso basta ir no menu File > Build Settings… e configurar as cenas como mostra na imagem abaixo.

loading-unity-16

O terceiro não é bem um erro e não trava a execução. A princípio, parece que o texto e a barra da cena de Loading não estão funcionando. Isso se deve ao fato de que o editor da Unity nem sempre consegue emular o build do jogo perfeitamente, e com isso ele várias vezes acaba carregando a cena toda de uma vez só.

Para realizar o teste corretamente você deve realizar o Build do projeto para alguma plataforma, e quando você testar nessa plataforma verá que está correto. Porém, se a cena for bem leve ele continuará carregando toda a cena de uma vez só e a barra de load vai do 0 direto para o 100.

Conclusão

Acredito que este artigo possa ajudar a vocês a entenderem como é feito uma cena Loading na Unity, além dos scripts servirem como um template que vocês podem aproveitar em seus projetos.

Da forma que a cena de Loading foi criada você consegue modificar ela da maneira que quiser sem que ela afete as outras cenas.

Além disso, espero que tenham aprendido uma forma de utilizar o Singleton no Unity, ele pode ser utilizado em muitos casos relacionados ao desenvolvimento de jogos.

Espero que este artigo tenha sido útil e que tenham gostado da leitura. Um abraço e até o próximo artigo!

Comentários Finais (por Raphael Dias)

E aí, o que achou do artigo do Leonardo?

Agora, como sempre, eu queria te deixar uma dica e uma pergunta.

A dica é conferir os outros excelentes artigos que o Leonardo Thurler escreveu para o Produção de Jogos:

E caso você queira saber mais sobre a Unity, dá uma olhada neste guia que eu criei com tudo sobre a game engine:

Mas, antes de dar uma olhada nos materiais acima, a minha pergunta para você é:

Você já implementou uma tela de loading no seu game? Se ainda não, qual foi o motivo?

Fico esperando sua resposta abaixo.

Abraços,

Raphael Dias

  • Roberta Granja

    Mais um artigo muito bem explicado pelo Leonardo Thurler! Parabéns!!! 🙂

  • Diego Rosa dos Santos

    Parabens pelo tuto!

    • Valeu ai em cara, espero que tenha sido útil 😀

  • Matheus Mercer

    Eu estou fazendo uma equipe de desenvolvimento de jogos para tablet para computador se você quiser participar entre em contato comigo eu trabalho na “Gracom” fazer jogos para Android e quero fazer jogos para Xbox 360

  • Bruno

    Muito bom o artigo, linha por linha de código comentado 😀