COMO USAR O LOADER LAYOUT PARA FAZER TELAS DE CARREGAMENTO PERSONALIZADAS.

2

Stats

2,028 visits, 3,058 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 5 Jan, 2021.

Uma solicitação comum é personalizar a tela de carregamento do Construct 3. Isso pode ser feito usando um loader layout (layout de carregamento), que é um layout especial mostrado enquanto o projeto ainda está sendo carregado.

POSSIBILIDADES CRIATIVAS

Aqui estão algumas idéias interessantes sobre como melhor aproveitar as vantagens de ter sua própria tela de carregamento:

  • Você pode projetar a barra de progresso no mesmo estilo do resto do jogo. Isso ajuda a imergir o jogador na aparência do jogo a partir do momento em que o jogo começa a ser carregado.
  • A tela de carregamento pode ser projetada como a tela de título principal, para que o jogador sinta que está mais perto de poder jogar o jogo.
  • Você também pode incluir informações como instruções e controles na tela de carregamento, para que o jogador possa ler algo útil enquanto espera. (Não se esqueça de incluir as instruções no jogo principal também, caso o jogo carregue rapidamente!)
  • Você pode até incluir um minijogo ou uma pequena seção do jogo real, para que o jogador possa se divertir enquanto espera. Não se esqueça de que você deve tentar usar o mínimo possível de objetos no layout do carregador para que ele seja carregado rapidamente! Mais sobre isso em um momento.

COMO OS PROJETOS CARREGAM

  1. Antes de fazer um layout de carregador, é melhor entender como os projetos do Construct são carregados. Em termos gerais, isso acontece em quatro fases.
  2. A página HTML e o JavaScript são baixados. Como o motor do Construct ainda não foi baixado, nada é mostrado.
  3. Depois que o JavaScript é baixado (normalmente muito rapidamente, já que o código é pequeno), o carregador padrão aparece. Esta é a barra de carregamento do Construct, que normalmente é um logotipo com uma barra de progresso. Isso é mostrado enquanto o próprio layout loader está carregando. O estilo do carregador padrão também pode ser alterado nas Propriedades do projeto (veja mais adiante).
  4. O resto do projeto é carregado enquanto o layout loader é exibido.
  5. Finalmente, o jogo está totalmente carregado e pronto para começar.

Observe que nos estágios 2 e 3, geralmente é apenas o download de imagens. Toda a lógica do JavaScript foi baixada na etapa 1. Por padrão, o áudio é transmitido após o início do projeto, mas também será baixado na etapa 3 se o pré-carregamento de sons estiver ativado. (Para obter mais informações sobre como carregar áudio, consulte Áudio no manual.) Portanto, a única coisa que carrega enquanto a barra de progresso é exibida são as imagens e, possivelmente, o áudio usados no jogo.

COMO CRIAR UM LAYOUT DE CARREGADOR

Existem três configurações relevantes nas Propriedades do Projeto (Project Properties): Use loader layout, First layout and Loader style. Tudo isso está na seção Startup.

Loader Style altera a aparência do carregador padrão. Consulte Alterando o Layout Loader Padrão, abaixo para obter mais informações.

Use Loader Layout permite o uso de um layout de carregamento. Por padrão, ele está desabilitado, então você precisa ativá-lo especificamente para cada projeto. Então, o primeiro layout se torna o layout de carregamento. Você deve selecionar especificamente o seu layout de carregamento com a opção First Layout para ter certeza de que é o primeiro layout a aparecer (caso contrário, o Construct pode escolher um layout diferente para usar para o carregamento).

MOSTRANDO O PROGRESSO

A expressão do sistema loadingprogress retorna um número de 0 a 1 para o andamento do carregamento do projeto. Por exemplo, se o projeto estiver meio carregado, o loadingprogress será 0,5. Você pode usar isso para mostrar o progresso no layout do carregador.

Por exemplo, para exibir a porcentagem carregada como texto, você pode definir o texto de um objeto de texto para:

round(loadingprogress * 100) & "%"

Isso multiplica o progresso por 100 para torná-lo uma porcentagem, arredonda o resultado e acrescenta o caractere de porcentagem, resultando em um texto como "50%".

Objetos Tiled Background também são boas barras de progresso. Por exemplo, se você tem um tiled background com 500 pixels de largura quando cheio, cada marca de seleção define sua largura para:

500 * loadingprogress

Isso resultará no preenchimento da barra de carregamento até a largura total de 500 pixels de acordo com quanto do projeto foi carregado.

É essencial mostrar o feedback sobre quanto do projeto foi carregado. Caso contrário, os usuários em conexões lentas podem ficar frustrados, não tendo ideia de quão perto estão de jogar o jogo, e sair. Seria uma pena se eles parassem alguns segundos antes do jogo carregar porque você não mostrou nenhum feedback de progresso.

Além de algum tipo de indicador de progresso, você também pode adicionar outras animações ou efeitos, por exemplo, spinners, ampulhetas e assim por diante.

CONSIDERAÇÕES

Lembre-se de que todas as imagens de objeto no layout do carregador devem terminar de carregar completamente antes que o layout do carregador seja mostrado. Se você colocar seu objeto Player com 10 animações no layout do carregador, todas as 10 animações devem terminar de carregar antes que o carregador padrão alterne para o layout do carregador. Se você quiser mostrar apenas um ícone do jogador, considere fazer um objeto separado para o layout do carregador com apenas uma das imagens do jogador.

Considere cuidadosamente cada objeto que você coloca no layout do carregador, bem como todas as suas animações. Todos eles são necessários? Lembre-se de que objetos com imagens irão atrasar a exibição do layout do carregador, então pense cuidadosamente sobre cada Sprite e Fundo Tiled que você usa, especialmente se algum deles tiver animações longas. O ideal é que o layout do carregador seja exibido o mais rápido possível.

LIMITAÇÕES

Observe algumas limitações no uso de layouts de carregamento:

  1. Os layouts de carregamento não são exibidos ao publicar como aplicativos (por exemplo, via Cordova ou NW.js). Isso ocorre porque todo o aplicativo é baixado de uma vez. Como todos os arquivos estão imediatamente disponíveis, não é necessário fazer download de nada. Para essas plataformas, você provavelmente deseja focar em uma imagem inicial personalizada.
  2. Os layouts de carregamento geralmente são exibidos apenas na primeira vez que o jogo é baixado da web. Como os jogos do Construct são salvos no disco para que possam funcionar offline, na próxima vez que o usuário iniciar o jogo, ele será carregado instantaneamente. Mesmo se você atualizar seu jogo, ele ainda carregará instantaneamente. Em vez disso, o jogo carrega instantaneamente do disco novamente e começa a baixar a atualização em segundo plano. Você pode usar o objeto Browser para detectar atualizações ocorrendo e solicitar que o usuário recarregue quando a atualização estiver pronta. Para obter mais informações, consulte o tutorial Jogos offline no Construct 3.
  3. Nos layouts de carregamento, você não pode criar ou gerar objetos fora do layout, nem pode alternar para outro layout até que o carregamento seja concluído. Isso, obviamente, porque o resto do projeto ainda não foi carregado.
  4. Lembre-se de que o carregador padrão ainda é mostrado enquanto o layout loader está carregando.

LOADING COMPLETING

Quando o carregamento terminar, o loadingprogress será igual a 1. Além disso, o layout de carregamento dispara o gatilho de sistema completo. Você pode usar este evento para mostrar um botão 'Jogar', mudar para um menu principal ou simplesmente iniciar o jogo.

ALTERANDO O CARREGADOR PADRÃO

A propriedade Loader Style altera o carregador padrão do projeto. Ele ainda é mostrado quando o layout do carregamento está carregando, ou é a única barra de progresso quando nenhum layout do carregamento é usado. Os quatro estilos são:

Progress bar & logo (o padrão): mostra um logotipo e uma barra de progresso azul. Você pode alterar o logotipo editando o ícone do Loading logo na pasta Project Bar Icons. A barra de progresso é definida para a largura da imagem do logotipo de carregamento e fica 12px abaixo dela. Para obter mais informações, consulte Ícones e splash.

Progress bar only: o mesmo que antes, mas o logotipo de carregamento não é carregado ou exibido.

Percentage text: em vez de uma barra de progresso, aum texto cinza indicando a porcentagem de carga é mostrado.

Nothing (não recomendado): simplesmente exibirá uma tela em branco durante o carregamento. Isso não é recomendado mesmo com um layout de carregador, uma vez que os usuários em conexões lentas não verão nenhum feedback enquanto o layout do carregador está carregando. É altamente recomendável usar o texto de porcentagem, no mínimo.

CONCLUSÃO

Criar um layout de carregamento é um modo essencail de criar uma ótima primeira impressão desde o momento em que o jogo começa a carregar. Apenas lembre-se: sempre mostre algum tipo de feedback de carregamento e tente usar o mínimo de imagens possível no próprio layout do carregador.

  • 0 Comments

Want to leave a comment? Login or Register an account!