Tutorial CF25 - Dicas de compressão e otimização nos seus jogos

[SC19]

Introdução​

Hoje quero compartilhar algumas dicas importantes de otimização e compressão no CF25 (Clickteam Fusion 2.5).

Quando comecei a desenvolver nessa engine, percebi que as primeiras builds dos meus projetos ficavam muito pesadas, bem mais do que deveriam ser. Além disso, o desempenho deixava a desejar em alguns momentos: os jogos demoravam para carregar certas informações e, às vezes, pareciam "engasgar" durante a execução.

Pesquisando e me informando, aprendi várias práticas que ajudam a melhorar o desempenho e a reduzir o peso dos arquivos na engine. E é exatamente isso que quero compartilhar com vocês hoje

Este tutorial pode servir de complemento para um vídeo do canal Skode, que possui uma playlist excelente de CF25 ótima para iniciantes.

---

1. Entendendo os tipos de objetos gráficos​

No CF25, existem diferentes tipos de objetos que você pode usar para adicionar elementos gráficos ao seu jogo. Cada tipo tem uma função específica, então é importante escolher o mais adequado para cada situação.

Active object​

O Active object é o tipo de objeto mais versátil e poderoso do CF25, ideal para:

• Objetos que precisam de animação.
• Elementos interativos, como personagens, itens coletáveis, botões, etc.
• Casos em que você deseja redimensionar ou escalonar o objeto dinamicamente.

Porém, atenção: não recomendo usar o Active object para elementos inanimados, como backgrounds, imagens estáticas ou colisões simples. Isso porque ele não possui compressão, o que pode aumentar desnecessariamente o tamanho final do projeto e prejudicar o desempenho.

Picture object​

O Picture object é perfeito para elementos estáticos, como cenários, texturas ou qualquer imagem que não exija animação. Ele é otimizado para imagens que ficam fixas na tela e não precisam de interação ou movimento.

Importante: Sempre que puxar algum arquivo dessa forma, o insira no Data Elements para que ele seja reconhecido na build.

Animation object
O Animation object é semelhante ao Picture object, mas foi projetado especificamente para trabalhar com arquivos de imagens animados, como .GIF. É útil para adicionar pequenos detalhes animados ao seu jogo.

Por exemplo, no meu projeto atual, uso o Animation object para reproduzir animações como o savepoint, que é feito em 3D pré-renderizado.

Nota: Use o Animation object com moderação. Arquivos .GIF podem ser pesados e difíceis de comprimir, então reserve-os para situações onde eles realmente sejam necessários.

Importante: Também insira os arquivos no Data Elements da mesma forma como explicado no Picture object.

Backdrop object​

O Backdrop object é uma excelente escolha para elementos estáticos que não precisam de interação ou animação, como:

• Cenários de fundo: Ele é ideal para criar camadas de background no seu jogo.
• Objetos decorativos: Elementos que estão apenas ali para compor o ambiente, como árvores, pedras ou construções.

Mas nessa ocasião, vamos focar em colisões. Ele também serve para isso, e é muito útil para delimitar o espaço de movimentação dos personagens ou criar obstáculos no cenário sem precisar usar Active objects, o que economiza memória e melhora o desempenho.

---

2. Edição e compressão de imagens e áudio​

Agora que você sabe qual objeto usar em cada situação, vamos falar sobre como preparar suas imagens antes de adicioná-las ao jogo.

Imagens Estáticas (.JPG)​

Para imagens que não precisam de transparência, como backgrounds ou texturas, o formato .JPG é uma ótima escolha. Aqui está o que você pode fazer para otimizar essas imagens:

1. No Photoshop (ou outro editor de imagens), salve o arquivo como .JPG com qualidade média para alta. Isso oferece um bom equilíbrio entre qualidade visual e tamanho do arquivo.
2. Depois de salvar, use uma ferramenta como FFmpeg para comprimir ainda mais o arquivo. Isso ajuda a reduzir o tamanho sem comprometer muito a qualidade.

Imagens com Transparência (.PNG)​

Se a imagem precisar de transparência (por exemplo, um sprite), o formato .PNG é a melhor opção. O processo de edição é semelhante ao das imagens estáticas:

1. Salve no Photoshop como .PNG e, se possível, otimize o tamanho reduzindo o número de cores ou usando ferramentas como TinyPNG ou o próprio FFmpeg.
2. Lembre-se de que o .PNG não suporta compressão com perda de qualidade, então o foco será em reduzir o peso do arquivo sem perder a transparência.

Imagens Animadas (.GIF)​

Trabalhar com .GIFs exige um pouco mais de cuidado. Esse formato é limitado em termos de compressão, então aqui estão algumas dicas para otimizar:

1. Reduza o número de cores usadas na animação, se possível.
2. Tente diminuir o número de frames da animação, mantendo apenas os essenciais para que ela pareça fluida.
3. Use ferramentas como ezGIF ou o próprio Photoshop para otimizar o arquivo.

Dica: Evite usar .GIFs extensivamente no seu jogo. Reserve-os apenas para situações onde não há muitas outras alternativas.

Áudio (.OGG)​

Não existe um objeto para áudio no CF25, visto que só se usam nos eventos, mas para tocar eles o formato .OGG é altamente recomendado para todos os tipos de áudio no seu jogo devido à sua eficiência e qualidade. Aqui estão algumas diretrizes para otimizar o uso:

1. Configuração Inicial no Audacity (ou similar):
   • Ao exportar o áudio, escolha a opção qualidade 0 (sim, isso mesmo) para um equilíbrio ideal entre tamanho e qualidade.
2. Compressão Adicional com FFmpeg:
   • Após salvar, utilize ferramentas como FFmpeg para reduzir ainda mais o tamanho do arquivo sem perda perceptível de qualidade.
3. Configurações Recomendadas:
   • BGM/BGS (músicas e sons de Fundo): Configure a frequência em 44100 Hz para garantir alta qualidade sonora.
   • SFX (efeitos sonoros): Reduza a frequência para 16000 Hz, já que efeitos sonoros geralmente não precisam de frequências mais altas.

---

3. Escolhendo o objeto certo para cada situação​

Com tudo isso explicado até então, vamos às recomendações:

3.1 Objetos animados e interativos​

Use o Active object.

• Exemplos de uso: Personagens jogáveis, NPCs, inimigos, itens coletáveis, botões interativos.
• Por que escolher? O Active object é ideal para elementos que precisam de animações ou múltiplos estados (correr, pular, atacar).

3.2 Efeitos visuais e transições​

Use o Active object.

• Exemplos de uso: Fades, transições de cena, efeitos de opacidade, certas interfaces.
• No caso de efeitos de transição (mas também pode ser adaptado para diversos usos):
  • Posicione o Active object em X = 0, Y = 0 com tamanho de 1 pixel.
  • Use behaviors para ajustar dinamicamente sua escala ao tamanho da tela, criando transições suaves sem ocupar espaço desnecessário.
  • Exemplo de posicionamento: Start of Frame > Object: Set X position to X Left Frame + Object: Set Y position to Y Top Frame
  • Exemplo de escalonamento: Start of Frame > Object: Set X scale to Frame Width (Quality = 0) + Object: Set Y scale to Frame Height (Quality = 0)

3.3 Sensores e gatilhos de eventos​

Use o Active object.

• Exemplos de uso: Detectar colisões, proximidade ou entrada em áreas específicas. Escalone o active como no último exemplo citado, trocando Frame Width / Frame Height por números.

3.4 Cenários e elementos estáticos​

Use o Picture object.

• Exemplos de uso: Backgrounds, objetos decorativos (árvores, pedras, construções).
• Por que escolher?
  • O Picture object é ideal para carregar imagens externas de forma eficiente, permitindo maior flexibilidade no uso de gráficos estáticos.
  • Pode ser atualizado dinamicamente durante o jogo, se necessário, e suporta diversos formatos de imagem.
  • Consome menos memória para elementos que não precisam de interação ou animação.

3.5 Colisões no cenário​

Use o Backdrop object.

• Como configurar:
  • No editor de propriedades, defina o Backdrop object como "Obstacle" ou "Platform", dependendo da necessidade.
  • Isso permite que o motor de física reconheça o objeto como parte do ambiente de colisão, sem a necessidade de eventos extras.
• Exemplo prático:
  • Nos meus projetos, uso linhas conectadas para colisões no cenário, garantindo maior precisão em jogos com movimentação complexa. Embora desenhar essas linhas seja trabalhoso, o resultado final compensa, melhorando o desempenho e a adaptação ao ambiente.

3.6 Animações em formato .GIF​

Use o Animation object.

• Exemplos de uso: Pequenos detalhes animados, como savepoints ou efeitos visuais simples.
• Por que escolher? É otimizado para lidar com arquivos .GIF animados, sendo ideal para adicionar toques de movimento ao jogo.
• Nota: Use com moderação, pois .GIFs podem ser pesados e difíceis de comprimir.

---

Conclusão​

Otimizar seu jogo no CF25 pode parecer complicado no começo, pois realmente são muitos objetos e pode acontecer de usarmos eles incorretamente diversas vezes. Mas com as práticas certas, tudo fica mais simples, bastando entender o audiovisual e usar os objetos corretos.

Essas dicas foram aprendidas com bastante tentativa e erro, e espero que ajudem você a evitar alguns dos problemas que enfrentei no início. Lembre-se de que otimizar é um processo contínuo, então vá ajustando e testando conforme o desenvolvimento avança.

Boa sorte com seus projetos e, que fique aqui minha contribuição.