Módulo 10 · Aula 10.8 · Otimização: imagens e objetos

Objetivos de aprendizagem

1. Medir o tamanho de um jogo e de cada arquivo dele.
2. Reduzir imagens (tamanho em pixels e formato) e comparar antes e depois.
3. Reduzir o detalhe de modelos 3D que a câmera nem mostra de perto.
4. Contar objetos e chamadas de desenho e diminuir o que não aparece.

Pré-requisitos

Aula 9.7; Aula 10.6.

Materiais

Projetos da turma; chave-da-porteira; Python com Pillow.

Conceitos

Por que otimizar. Um jogo na web é baixado inteiro antes de começar. No celular, com internet fraca, 10 MB a mais é muita espera. E computador de laboratório não é computador de jogo.

Regra de ouro (de novo). Medir antes, mudar uma coisa, medir depois. Sem número, "ficou mais leve" é palpite.

Imagens. Duas coisas mandam no peso: a quantidade de pixels e o formato. Medido na preparação do curso, com uma captura do editor de 1920 × 991:

PNG guarda tudo sem perder nada (bom para pixel art e desenho com cor lisa). JPG perde um pouco de detalhe e fica bem menor (bom para fotos e capturas). Nos desenhos de pixel art do curso, o PNG pequeno já é o melhor: os sprites do Sementes têm poucos KB.

GIF. Na Aula 10.6, o mesmo trecho caiu de 1953 KB para 1014 KB só mudando a largura e quantos quadros pular.

Modelos 3D. Uma cápsula redonda é feita de muitos triângulos. O mandacaru do Chave da Porteira usa cápsulas com o detalhe padrão do Godot. Gerando de novo com menos lados (radial_segments = 12 e rings = 2 em cada cápsula):

Mais de 10 vezes menor. Os mandacarus ficam fora do labirinto, longe da câmera: vale conferir no jogo se a diferença aparece. (A comparação visual não foi feita nesta versão do curso; só o tamanho foi medido.)

Objetos e chamadas de desenho. Lembra da Aula 9.7: com sombra e neblina, 146 objetos e 102 chamadas de desenho; sem, 69 e 25. Outras ideias que diminuem: juntar objetos que nunca se mexem, reaproveitar malha e material, apagar (queue_free) o que saiu da tela e não volta.

Exemplos

Trecho do gerador do mandacaru com o detalhe reduzido (só duas linhas a mais):

var malha := CapsuleMesh.new()
malha.radius = raio
malha.height = altura
malha.material = material
malha.radial_segments = 12
malha.rings = 2

Tutorial passo a passo

Parte A. Onde está o peso? (60 min)

1. No explorador de arquivos, abra a pasta exportada de um jogo seu (ou a pasta do projeto). Ordene por tamanho. Anote os cinco maiores arquivos.
2. Some o total da pasta (botão direito → Propriedades).

Parte B. Imagens (100 min)

3. Escolha uma imagem grande do seu jogo ou do portfólio. Faça três versões: metade do tamanho, JPG e as duas coisas juntas. Pode usar o script abaixo.
4. Abra cada versão no jogo ou na página. Qual dá para usar sem a turma perceber diferença?

from PIL import Image
import os

nome = "minha_imagem.png"
imagem = Image.open(nome).convert("RGB")
metade = imagem.resize((imagem.width // 2, imagem.height // 2))
imagem.save("teste_qualidade85.jpg", quality=85)
metade.save("teste_metade.png")
metade.save("teste_metade85.jpg", quality=85)
for arquivo in [nome, "teste_qualidade85.jpg", "teste_metade.png", "teste_metade85.jpg"]:
    print(arquivo, os.path.getsize(arquivo) // 1024, "KB")

Parte C. Modelo 3D (60 min)

5. Numa cópia do Chave da Porteira, acrescente as duas linhas do Exemplo em ferramentas/gerar_mandacaru.gd e rode a ferramenta (Aula 9.2). Compare o tamanho do .glb e olhe no jogo.

Parte D. Relatório (40 min)

6. Tabela "antes e depois" do seu jogo: tamanho total da pasta, maior arquivo, objetos e chamadas de desenho (Aula 9.7). Qual mudança deu mais resultado com menos trabalho?

Imagens

Não há capturas nesta aula; o resultado é a tabela de cada aluno.

Indicação da interface

O código completo

O script de imagens está na Parte B. O gerador do mandacaru está em modulos/modulo-09-3d/projetos/chave-da-porteira/ferramentas/gerar_mandacaru.gd.

Explicação do código

• quality=85 é um bom meio-termo do JPG; abaixo de 70 os borrões começam a aparecer.
• imagem.width // 2 divide e descarta a parte quebrada (pixel não tem metade).
• radial_segments é quantos lados a cápsula tem em volta; rings, quantos anéis no meio. Menos lados, menos triângulos, arquivo menor.

Resultado esperado

Tabela de antes e depois de um jogo próprio, com pelo menos duas otimizações medidas.

Problemas comuns

Exercício guiado

Por que o curso diz para medir antes de otimizar? (Resposta: o trabalho deve ir para o que pesa mais. No Chave da Porteira, o mandacaru.glb sozinho tinha 207 KB, mais que qualquer script ou cena.)

Desafio individual

Deixe o seu portfólio com menos de 5 MB no total, sem tirar nenhum jogo.

Desafio avançado (opcional)

Faça o labirinto apagar a sombra quando o jogador estiver parado numa tela de aviso, e meça.

Critérios de avaliação

• Medições antes e depois, com números.
• Escolhas justificadas (PNG ou JPG, quanto reduzir).

Checklist de conclusão

• Achei os cinco maiores arquivos
• Testei três versões de uma imagem
• Testei o mandacaru com menos detalhe
• Fiz a tabela de antes e depois

Extensão

Veja quanto espaço os jogos ocupam no seu celular. Qual é o maior? Ele precisa ser tão grande?