OTIMIZAÇÕES DE EXPORTAÇÃO DO CONSTRUCT 3

2

Stats

852 visits, 1,162 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 22 Sep, 2023.

Este tutorial é recomendado pela equipe do Construct e foi escrito por Ashley! Isso significa que ele contém informações úteis e de alta qualidade que o ajudarão a crescer como desenvolvedor de jogos, eu fiz apenas a tradução.

Você pode ter notado que, às vezes, a opção Exportar projeto leva um tempo para ser concluída, especialmente com projetos maiores. Isso ocorre porque o Construct está trabalhando arduamente para otimizar o seu projeto, reduzindo o tamanho do download e o uso de memória o máximo possível. Este tutorial aborda exatamente o que o Construct está fazendo na exportação, bem como como as configurações de exportação o afetam, e conclui com algumas dicas para economizar tempo.

PASSO 1: DEDUPLICAÇÃO DE IMAGENS

É relativamente comum que projetos contenham imagens duplicadas. Por exemplo, você pode ter clonado um tipo de objeto inteiro ou ter uma animação que reutiliza o mesmo quadro em vários lugares (por exemplo, na forma A B A C A D). Nesse caso, pode haver arquivos de imagem duplicados usados no projeto.

Para garantir que as visualizações sejam rápidas, as imagens duplicadas não são removidas durante a visualização. No entanto, ao exportar, o Construct procura e remove imagens duplicadas. Isso ajuda a reduzir o tamanho do download e o uso de memória, pois não faz sentido ter imagens idênticas baixadas ou carregadas na memória duas vezes.

Observe que o tamanho das imagens ainda é levado em consideração: uma imagem sólida preta de 10x10 é considerada diferente de uma imagem sólida preta de 11x11, porque não pode ser garantido que o projeto terá a mesma aparência e comportamento se uma delas for removida em favor da outra.

PASSO 2: CRIAÇÃO DE SPRITESHEET

As imagens são armazenadas no projeto em arquivos separados. Por exemplo, um Sprite com 10 quadros de animação terá 10 arquivos de imagem separados na pasta do projeto. Se as animações também fossem exportadas dessa forma, isso poderia causar alguns problemas. Cada imagem deve ser baixada separadamente em jogos de navegador, o que significa 10 solicitações HTTP separadas, e cada solicitação HTTP possui uma certa quantidade de sobrecarga adicional. Sprites frequentemente têm quadros de animação com partes semelhantes, e esses dados de imagem serão duplicados em cada arquivo de quadro de animação. Além disso, em alguns casos, as imagens precisam ser colocadas em uma superfície de tamanho de potência de dois (por exemplo, 128x128, 256x256, 512x512, etc.), o que pode fazer com que elas usem mais memória.

A criação de spritesheets é o processo de criar uma única imagem grande com muitos quadros de animação nela. Isso resolve todos esses problemas: há menos solicitações HTTP em jogos de navegador; a compressão PNG ou JPEG pode eliminar partes semelhantes das imagens entre os quadros de animação, tornando o download menor; e o Construct sempre usa uma spritesheet de tamanho de potência de dois, minimizando qualquer desperdício de memória. Eis como uma spritesheet para a nave do jogador em Space Blaster se parece:

As spritesheets combinadas para este único objeto têm um download de 300 KB e usam 2 MB de memória. Sem spritesheets, as imagens separadas teriam um download de cerca de 460 KB e usariam cerca de 3 MB de memória. Portanto, quando aplicado ao projeto inteiro, as economias podem ser bastante significativas.

No Construct 3, as spritesheets são geradas no editor quando você abre o projeto. Isso permite que o modo de visualização aproveite os benefícios das spritesheets também. Quando você exporta seu projeto, pode notar que obtém um conjunto de imagens de spritesheet em vez de muitos arquivos de imagem individuais.

A prioridade do Construct é minimizar o uso de memória durante a execução. Para isso, o Construct pode optar por exportar duas ou três spritesheets de tamanho menor se as imagens couberem. Por exemplo, se as imagens couberem em duas ou três spritesheets de 512x512, ele exportará isso em vez de uma única spritesheet de 1024x1024, já que usa menos memória. Em alguns casos, isso pode realmente tornar o download ligeiramente maior - há um pouco mais de dados de imagem redundantes salvos. No entanto, geralmente é mais importante minimizar o uso de memória do que economizar alguns porcentos no tamanho do download.

Para compatibilidade com a maior variedade de hardware, há um tamanho máximo de spritesheet de 2048x2048. Você também deve evitar o uso de imagens maiores que cerca de 1000x1000, pois elas desperdiçam muita memória e podem ser difíceis de ajustar em spritesheets. Se o Construct não conseguir encaixar uma imagem em uma spritesheet, ele a exportará como seu próprio arquivo novamente, perdendo os benefícios das spritesheets. Além disso, para evitar que as cores das imagens adjacentes "vazem" para outros quadros, o Construct deixa um espaço de 1 pixel entre todos os quadros em uma spritesheet. Isso significa que ele não será capaz de encaixar quatro imagens de 128x128 em uma única spritesheet de 256x256, portanto, tente garantir que as imagens de Sprite tenham um tamanho ligeiramente abaixo de uma potência de dois. O tamanho ideal é dois pixels a menos que um tamanho de potência de dois, por exemplo, 30x30, 126x126 ou 254x254. (Observe, no entanto, que os objetos Tiled Background funcionam melhor com um tamanho exatamente de potência de dois.)

Observe que se você definir a propriedade do projeto de Redimensionamento para Alta qualidade, as imagens nas spritesheets sempre serão preenchidas até tamanhos de potência de dois para mitigar dois problemas menores de renderização. Isso anula a economia de memória das spritesheets e, portanto, não deve ser usado sem motivo. Para mais informações, consulte Uso de memória.

PASSO 3: RECOMPRESSÃO DE IMAGENS

Ao exportar spritesheets, o Construct também tenta reduzir o tamanho do download o máximo possível. Este é de longe o passo mais intensivo e geralmente leva a maioria do tempo de exportação.

Em primeiro lugar, o Construct respeita o formato que você definiu para qualquer imagem na janela Formato de Imagem no Editor de Animações. Todas as imagens são armazenadas no projeto como arquivos PNG-32 sem perdas para evitar degradação durante a edição. Se alguma imagem estiver configurada para usar o formato JPEG, ela será recomprimida neste ponto. Isso é uma operação de perda de qualidade se você tiver escolhido JPEG. Observe que isso significa que não há motivo para importar arquivos JPEG para o próprio Construct - o Construct simplesmente converterá qualquer imagem importada para PNG-32 e esperará até a exportação para recomprimi-la no formato desejado definido na janela Formato de Imagem. Portanto, para evitar a degradação desnecessária da qualidade da imagem, importe apenas imagens PNG-32 para o Construct e defina o formato desejado na janela Formato de Imagem.

Também observe que as imagens são totalmente descompactadas antes da renderização em tempo de execução, portanto, o formato do arquivo não terá efeito sobre o uso de memória - apenas sobre o tamanho do download. No entanto, observe que é frequentemente importante escolher o formato JPEG para imagens de cenários grandes e detalhados, pois isso pode tornar o download consideravelmente menor. Esteja ciente de que o JPEG não suporta transparência - se alguma parte de uma imagem configurada para usar JPEG for transparente, as partes transparentes se tornarão pretas e opacas.

Em seguida, todas as imagens PNG passam por uma ferramenta chamada OptiPNG, que tenta várias maneiras diferentes de compactar a imagem e escolhe a que resulta no menor tamanho de arquivo. Isso geralmente proporciona uma economia automática e sem perdas de 10-15% no tamanho do download, mas pode levar muito tempo. Também é capaz de reduzir paletas sem perdas em PNGs de 32 bits para PNGs de 8 bits quando a imagem tem 256 cores ou menos, resultando em um tamanho de arquivo muito menor, o que é particularmente eficaz para estilos de arte que não usam muitas cores, como pixel art retrô. Se você desativar a opção de recompressão de imagem na exportação, esta etapa será pulada. Isso pode tornar as exportações muito rápidas, mas também pode aumentar significativamente o tamanho do download.

O processo de recompressão de imagens é relativamente sofisticado. Além disso, é totalmente sem perdas (preservando a qualidade da imagem exatamente) a menos que você configure explicitamente um formato com perda na janela Formato de Imagem. Como resultado, geralmente não há nada a ser ganho ao usar outras ferramentas ou serviços de compressão de imagem após a exportação; você pode confiar no Construct para fazer um excelente trabalho de compressão por conta própria na exportação. (E, como mencionado anteriormente, não há absolutamente nada a ser ganho ao usar tais ferramentas ao importar para o editor do Construct, uma vez que ele as converte imediatamente para PNG-32 e você pode ter degradado desnecessariamente a qualidade de suas imagens.)

PASSO 4: MINIFICAÇÃO DE SCRIPT

Finalmente, o código JavaScript resultante é minificado. Isso renomeia tudo o que for possível no código JavaScript para usar os nomes mais curtos possíveis, tornando o script menor e mais rápido para download. Isso também tem o efeito colateral positivo de tornar incrivelmente difícil a engenharia reversa do projeto exportado, uma vez que o que eram termos úteis no script se tornam nonsense. Isso também pode tornar o JavaScript resultante ligeiramente mais eficiente, pois emprega algumas otimizações básicas.

Em alguns casos raros, especialmente com plugins de terceiros, a minificação pode causar bugs. A opção de desativá-la está principalmente lá como um recurso de diagnóstico para ajudar a resolver esses problemas. Você sempre deve habilitar a minificação, a menos que esteja investigando um bug.

OMISSÃO DE ARQUIVOS DE ÁUDIO

O Construct 3 utiliza o WebM Opus para suportar a reprodução de áudio em todas as plataformas. No entanto, para compatibilidade com navegadores mais antigos, você pode precisar usar formatos de áudio adicionais, como MP3 ou MPEG-4 AAC (.m4a). Consulte o manual da caixa de diálogo Importar Áudio para obter mais informações.

O Construct sabe antecipadamente quais formatos de áudio são necessários para quais exportadores. Se possível, o Construct omitirá os arquivos de áudio que são conhecidos por serem desnecessários. Por exemplo, o Android pode reproduzir áudio em formato WebM Opus, portanto, se você tiver seus sons nos formatos WebM Opus e MPEG-4 AAC, o Construct ignorará o áudio em formato MPEG-4 AAC e exportará apenas o WebM Opus. Por outro lado, o exportador HTML5 precisa incluir todos os arquivos, pois pode ser executado em praticamente qualquer plataforma.

Em resumo, você nunca deve precisar excluir manualmente arquivos de áudio antes de exportar seu projeto - o Construct omitirá automaticamente quaisquer arquivos que sejam definitivamente desnecessários para a plataforma escolhida.

PROCESSAMENTO MULTINÚCLEO

As etapas de criação de spritesheets, deduplicação e recompressão são processadas em todos os núcleos da CPU disponíveis para acelerar a exportação. Por exemplo, em um computador com quatro núcleos, o Construct 3 será capaz de recomprimir quatro imagens ao mesmo tempo em paralelo, tornando essa etapa quatro vezes mais rápida. Se você perceber que a exportação está demorando muito e está pensando em comprar um novo computador, procure um com muitos núcleos de CPU!

CONCLUSÃO

O Construct faz muito trabalho por você na exportação. As principais lições são:

  • Não se preocupe com a duplicação de imagens - elas são removidas automaticamente.
  • O formato de imagem (por exemplo, PNG, JPEG) afeta apenas o tamanho do download, não o uso de memória em tempo de execução.
  • Se possível, faça imagens de sprites ligeiramente abaixo de um tamanho de potência de dois, para que possam ser agrupadas em spritesheets de forma eficiente. No entanto, tente fazer os Fundos em Mosaico exatamente do tamanho de potência de dois.
  • Não importe arquivos de imagem com perdas (por exemplo, PNG-8 ou JPEG) no Construct. Eles são sempre armazenados como PNG-32 sem perdas até a exportação, momento em que ele respeita o que você definiu na janela Formato de Imagem.
  • Não se preocupe com o fato de o Construct dividir as spritesheets em arquivos separados quando você as importa para o editor. Ele as recriará em um formato eficiente em termos de memória.
  • Não se preocupe em executar os arquivos de imagem exportados por meio de outras ferramentas ou serviços de compressão. O Construct provavelmente já está fazendo um ótimo trabalho.
  • Não tente excluir manualmente arquivos de áudio antes da exportação. O Construct remove automaticamente qualquer um que definitivamente não seja necessário na exportação.

Se a exportação estiver lenta, tente adquirir uma máquina com mais núcleos de CPU!

Saber o que o Construct faz por você na exportação pode ajudá-lo a trabalhar de forma eficaz com o Construct e evitar qualquer trabalho desnecessário.

  • 0 Comments

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