Uma demanda comum dos usuários é customizar a tela de loading do Construct 2. Isso pode ser feito usando um layout de carregamento (Loader Layout), o qual é um layout especial que é mostrado enquanto o projeto carrega.
Possibilidades Criativas
Aqui estão algumas ideias interessantes sobre como melhor obter vantagens de ter sua própria tela de loading:
- Você pode definir o design da sua barra de progresso no mesmo estilo do resto do seu jogo Isso ajuda a imersão do jogador no visual do seu jogo e já sentí-lo a partir do momento em que ele começa.
- A tela de loading pode ter o mesmo design da tela inicial do jogo, assim o jogador sente que está próximo de começar a jogar.
- Você pode ainda incluir informação como instruções e controles na tela de loading, assim o jogador pode ler algo útil enquanto aguarda o carregamento. (Não se esqueça de incluir instruções no decorrer do jogo também, no caso do carregamento ser mais rápido!)
- Você ainda pode incluir um mini-game, ou uma pequena seção do jogo original, assim o jogador se mantém entretido enquanto espera. Não se esqueça de usar poucos objetos neste caso, para que o carregamento do próprio layout de carregamento seja rápido. Mais sobre isso daqui a pouco.
Como os projetos carregam
Antes de criar um layout de carregamento, é melhor entender como o Construct 2 carrega seus projetos. Isso acontece em quatro fases.
1. O HTML e JavaScript da página são baixados. Já que o engine do Construct 2 não foi baixado ainda, nada é exibido.
2. Uma vez que o JavaScript é baixado (normalmente bem rápido, já que o código é bem pequeno), o loader padrão aparece. Que seria a barra de load padrão do Construct 2, o qual normalmente é a logo do HTML5 com uma barra de progresso azul. Isso é mostrado enquanto o layout de carregamento carrega a si mesmo. O estilo da barra de load padrão também pode ser alterado nas propriedades do projeto (veremos depois).
3. O resto do projeto carrega enquanto o layout de carregamento está sendo exibido.
4. E finalmente, o jogo está completamente carregado e pronto para iniciar.
Note que os passos 2 e 3 estão apenas baixando imagens. Todo o JavaScript foi baixado no passo 1 e todo o áudio está pronto para reprodução após o projeto ter iniciado. Para mais informações sobre como o áudio é reproduzido por demanda, veja Audio in the manual. Então a única coisa que está carregando durante a exibição da barra de progresso são os Sprites, os Tiled Backgrounds e por aí vai.
Isso significa que tudo o que você precisa para acelerar o carregamento to jogo é assegurar que suas imagens são poucas e as menores possíveis. Para mais informações e dicas sobre como reduzir o tamanho do projeto, veja os posts no blog Image compression in Construct 2 e Under the hood: spritesheets in Construct 2.
Como criar um layout de carregamento
Existem duas definições relevantes nas propriedades do projeto Project Properties: Use loader layout e Loader style.
Loader style altera a aparência do loader padrão. Veja Alterando o loader padrão abaixo para mais informações.
Use loader layout habilita o uso de um layout de carregamento. Como padrão a opção está desabilitada, neste caso você precisa ativá-la novamente quando estiver trabalhando em um novo projeto. Assim, o primeiro layout se transforma em um layout de carregamento. Você deve selecionar especificamente seu layout de carregamento com a opção First layout para garantir que ele será o primeiro layout à aparecer (caso contrário o Construct 2 poderá escolher um layout diferente para usar como loader).
Exibindo o progresso do carregamento
A expressão de sistema loadingprogress retorna um número entre 0 e 1 sobre o progresso do carregamento do projeto. Por exemplo, se metade do projeto está carregado o loadingprogress será 0.5. Você pode usar isso para mostrar o progresso do carregamento do projeto no seu layout de carregamento.
Por exemplo, para mostrar a porcentagem carregada como texto você pode definir o texto de um objeto Text para:
round(loadingprogress [] 100) & "%"*
Isso multiplica o progresso por 100 para transformá-lo em uma porcentagem, arredonda o resultado e inclui o caractere de porcentagem resultando em um texto como "50%".
Objetos Tiled Background também fazem boas barras de progresso. Por exemplo, se você tem um Tiled Background o qual apresenta 500 pixels de largura quando cheio, você pode usar a condição every tick e aplicar uma ação para definir a largura como:
500 [] loadingprogress*
Isso resultará na barra de loading enchendo até o máximo na largura de 500 pixels de acordo com o quanto do projeto foi carregado.
Estes passos são essenciais para retornar uma informação ao jogador de quanto o projeto foi carregado. Caso contrário os usuários em conexões mais lentas ficarão frustrados, sem ter ideia do quanto estão próximos de jogar o game e acabam o abandonando. Seria uma pena se jogador sair poucos segundos antes de completar o carregamento, simplesmente porque você não mostrou o quanto havia de progresso.
Além disso, alguns tipos de indicadores de progresso podem ganhar animações ou efeitos, por exemplo, indicadores circulares, relógios, entre outros.
Considerações
Lembre-se que toda imagem de objetos no layout de carregamento têm de acabar seu carregamento completamente antes de serem exibidas. Se você põe seu Player com 10 animações no layout de carregamento, todas as 10 animações têm de acabar seu carregamento antes do loader padrão iniciar o layout de carregamento. Se você quer mostrar apenas o ícone do Player, considere criar um objeto separado apenas para o layout de carregamento com apenas uma imagem do Player.
Considere cuidadosamente todo objeto que puser no layout de carregamento, assim como todas as suas animações. Todos eles são realmente necessários? Lembre-se que os objetos com imagens irão retardar a exibição do layout de carregamento, então pense cuidadosamente sobre cada Sprite e TiledBackground que usar, especificamente se algum deles tem longas animações. O ideal é que você queira seu layout de carregamento carregando o mais rápido possível.
Limitações
Note algumas limitações no uso de layout de carregamento:
1. Layouts de carregamento não são exibidos quando publicados como aplicativos nativos em mobiles (por exemplo, via PhoneGap, CocoonJS e appMobi). Isso porque toda a aplicação é baixada de uma vez só. Sendo assim todos os arquivos estão imediatamente disponíveis, nada precisa ser baixado. Neste caso, para essas plataformas você pode focar em uma imagem Splash customizada.
2. Layouts de carregamento são mostrados apenas a primeira vez que o jogo está sendo baixado da web. Uma vez que os jogos do Construct 2 são salvos para o disco para poderem rodar offline, a próxima vez que o usuário rodar o jogo ele carregará instantaneamente. Mesmo se você fizer uma atualização do jogo, ele ainda vai carregar instantaneamente. Neste caso o jogo carrega instantaneamente do disco e inicia o download da atualização em background. Você pode usar o objeto Browser para detectar a ocorrência de atualizações e perguntar ao usuário se ele deseja recarregar quando atualização estiver pronta. Para mais informações, veja o tutorial Offline games in Construct 2, e a seçãoAtualizações abaixo.
3. Nos layouts de carregamento, você não consegue criar ou dar Spawn em objetos que não estejam no layout e nem acessar outro layout até que o carregamento esteja completo. Obviamente, isso ocorre porque o resto do projeto ainda não foi carregado.
4. Lembre-se que o loader padrão continuará aparecendo enquanto o layout de carregamento não estiver carregado.
Carregamento completo
Quando o carregamento estiver finalizado, a expressão de sistema loadingprogress será igual a 1. Além disso, o trigger de sistema On loader layout complete estará ativado (a partir da categoria Start & end). Você pode usar este evento para mostrar um botão ‘Play’ ou ir para o menu principal ou simplesmente começar o jogo.
Alterando o estilo do loader padrão
A opção Loader style altera o estilo do loader padrão do projeto. Ele será exibido enquanto o layout de carregamento está carregando ou ele será apenas uma barra de progresso quando não houver um layout de carregamento em uso. Os quatro estilos são:
Progress bar & logo (o padrão): exibe um logo e uma barra de progresos azul. Você pode alterar a logo substituindo o arquivo logo.png na pasta do projeto após exportação. Assegure-se de que o arquivo é o menor possível para que ele possa ser exibido rapidamente – o logo do HTML5 tem apenas 1kb de tamanho! A barra de progresso está definida para ter a mesma largura do arquivo logo.png e se posiciona 12px abaixo dele.
Progress bar only: é o mesmo que o anterior, só que o logo.png não é carregado ou exibido.
Percentage text: ao invés de uma barra de progresso, será exibido um texto de cor cinza indicando a porcentagem do carregamento.
Nothing (não recomendado): está opção simplesmente irá exibir uma tela em branco enquanto o projeto carrega. Ela não é recomendada mesmo com o uso de um layout de carregamento, uma vez que usuários com conexões lentas não vão ter nenhuma resposta sobre o que está ocorrendo durante o carregamento do layout de carregamento. É altamente recomendado o uso de pelo menos o tipo Percentage text.
Atualizações
Como descrito acima, o layout de carregamento é mostrado apenas no primeiro carregamento. Mesmo que você atualize o jogo, na próxima jogada ele irá carregar instantaneamente e iniciará o download da atualização em background, como descrito no também no tutorial Offline games in Construct 2.
Você pode detectar quando isso estiver ocorrendo usando as seguintes condições no objeto Browser:
Is downloading update: true quando seu jogo está rodando, mas você já fez o upload de uma atualização e a nova versão está sendo baixada em background.
On update ready: ativa quando o update já finalizou seu download. A nova versão não será usada até que a página seja recarregada, logo você pode querer perguntar ao usuário se ele deseja recarregar a página ou usar diretamente a ação Reload do objeto Browser.
Além disso, enquanto a condição Is downloading update for true, a expressão loadingprogress também será definida pelo progresso no download da atualização.
Usando essas ferramentas você pode reutilizar seu layout de carregamento como um layout para atualizalções. De qualquer forma, quando a atualização for finalizada não se esqueça de recarregar a página, ao invés de iniciar o jogo. Como alternativa você pode não ter que manipular esses eventos deixando as atualizações ocorrerem automática e silenciosamente.
Conclusão
A criação de um layout de carregamento é vital no processo de dar uma grande primeira impressão ao jogador a partir do momento em que o game inicia o carregamento. Apenas lembre-se: sempre mostre algum tipo de informação a respeito do carregamento e tente usar a menor quantidade possível de imagens no próprio layout de carregamento.