Módulo 10 · Aula 10.6 · Vídeo curto e GIF do jogo

Objetivos de aprendizagem

1. Gravar uma partida com o Modo Gravação (Movie Maker) do Godot.
2. Escolher o melhor trecho para mostrar o jogo em poucos segundos.
3. Montar um GIF leve para o portfólio e o README.

Pré-requisitos

Um jogo em Godot (Módulos 8 ou 9). Para jogos do GDevelop, ver "Jogos que não são do Godot" abaixo.

Materiais

Godot 4.7; Python com a biblioteca Pillow; ferramentas/quadros_para_gif.py.

Conceitos

Por que GIF. Quem abre um portfólio decide em segundos se vai jogar. Um GIF de 6 a 10 segundos, mostrando a parte mais legal, roda sozinho na página, sem botão de play, e aparece no README do GitHub.

Modo Gravação do Godot. O Godot grava o jogo sozinho, quadro a quadro, em ritmo fixo, mesmo se o computador for lento: a gravação fica lisa. Pela linha de comando:

Godot --path . --write-movie quadros/quadro.png --fixed-fps 15

Com o nome terminando em .png, ele salva uma imagem por quadro (quadro00000000.png, quadro00000001.png...) e um quadro.wav com o som. Terminando em .avi, salva um vídeo.

Pelo editor há um botão com a dica Ativar Modo Gravação. ("O projeto será executado em FPS estável e a saída visual e de áudio será gravada em um arquivo"). O caminho do arquivo fica em Configurações do Projeto, em Editor > Gravação.

Testado na preparação. O Chave da Porteira foi gravado assim, com um passeio automático do início à saída: 900 quadros a 15 por segundo (60 s de jogo) gravados em 39 segundos. O próprio Godot escreveu no fim:

900 frames at 15 FPS (movie length: 00:01:00:00), recorded in 00:00:39 (153% of real-time speed).

Escolher o trecho. 60 segundos de labirinto é demais. Foram escolhidos dois pedaços: pegar a chave (quadros 250 a 340) e passar pela porteira até a tela de fim (quadros 720 a 840).

Do PNG ao GIF. O script do curso quadros_para_gif.py junta os quadros, diminui o tamanho e salva o GIF. Ele precisa da biblioteca Pillow (python -m pip install pillow, que baixa da internet; peça autorização na escola).

O portfólio modelo usa o de 320 px, 1 a cada 2 quadros: menor e ainda liso.

Jogos que não são do Godot. O GDevelop e o Scratch não têm esse modo. Para eles, a saída é gravar a tela com um programa e converter. O Windows tem gravação de tela na Ferramenta de Captura e na Xbox Game Bar, mas isso não foi testado nesta versão do curso. Outra opção é usar fotos da tela, como o portfólio modelo faz com os jogos do GDevelop.

Exemplos

recursos/imagens/godot/chave-da-porteira.gif: o GIF feito nesta aula, com o labirinto, a chave, a porteira aberta e a saída.

Tutorial passo a passo

Parte A. Gravar (100 min)

1. Abra o Git Bash na pasta do seu projeto Godot. Crie a pasta quadros fora do projeto (para os PNG não serem importados pelo Godot): por exemplo, ../quadros.
2. Rode, trocando o caminho do Godot pelo do seu computador:

"CAMINHO/Godot_v4.7.2-stable_win64.exe" --path . --write-movie ../quadros/quadro.png --fixed-fps 15

3. Jogue normalmente e feche a janela no fim. Na pasta quadros estão as imagens e o som.

Parte B. Escolher o trecho (60 min)

4. Olhe os quadros na pasta (o visualizador de fotos do Windows passa de um para o outro). Anote o número do primeiro e do último quadro do melhor momento (de 6 a 10 segundos, isto é, de 90 a 150 quadros).
5. Copie só esses quadros para uma pasta trecho.

Parte C. Montar o GIF (80 min)

6. Na pasta modulos/modulo-10-publicacao/ferramentas, rode:

python quadros_para_gif.py ../../caminho/do/trecho partida.gif --largura 320 --pular 2 --fps 15

7. O script diz quantos quadros e quantos KB ficou. Abra o GIF no navegador. Se passar de 2 MB, aumente --pular ou diminua --largura.
8. Coloque o GIF na pasta imagens/ do projeto e no README (![Partida](imagens/partida.gif)).

Parte D. Vídeo curto (opcional, 120 min fora da carga)

9. Grave com --write-movie partida.avi para ter um vídeo com som, para redes da escola. (O formato .avi não foi testado nesta versão do curso; o PNG foi.)

Imagens

• ../../../recursos/imagens/godot/chave-da-porteira.gif: o GIF pronto.

Indicação da interface

Esses nomes foram lidos das traduções do Godot 4.7.2; o botão e a janela não foram fotografados. A gravação foi testada pela linha de comando.

O código completo

ferramentas/quadros_para_gif.py (trecho principal):

arquivos = sorted(glob.glob(os.path.join(opcoes.pasta, "*.png")))[:: opcoes.pular]

quadros = []
for arquivo in arquivos:
    imagem = Image.open(arquivo).convert("RGB")
    altura = round(imagem.height * opcoes.largura / imagem.width)
    quadros.append(imagem.resize((opcoes.largura, altura), Image.LANCZOS))

# Tempo de cada quadro em milissegundos, para o GIF andar na velocidade certa.
duracao = round(1000 * opcoes.pular / opcoes.fps)
quadros[0].save(opcoes.saida, save_all=True, append_images=quadros[1:], duration=duracao, loop=0, optimize=True)

Explicação do código

• sorted(...)[:: opcoes.pular] pega os PNG em ordem e, com --pular 2, um sim, um não.
• A altura acompanha a largura para a imagem não esticar.
• duration é quanto tempo cada quadro fica na tela; pulando quadros, cada um fica mais tempo, e o GIF continua na velocidade real.
• loop=0 faz o GIF repetir para sempre.

Resultado esperado

Um GIF de 6 a 10 segundos, com menos de 2 MB, de cada jogo do aluno feito em Godot, e fotos de tela dos outros.

Problemas comuns

Exercício guiado

Por que a gravação do Godot fica lisa mesmo num computador lento? (Resposta: no Modo Gravação ele não corre contra o relógio: calcula cada quadro no ritmo fixo e só passa para o próximo depois de salvar. No teste, 60 s de jogo levaram 39 s para gravar; num computador lento, levariam mais, mas o resultado seria igual.)

Desafio individual

Faça dois GIFs do mesmo jogo, um de 320 px e um de 480 px, e compare tamanho e qualidade.

Desafio avançado (opcional)

Faça um GIF que comece e termine no mesmo ponto do jogo, para a repetição parecer contínua.

Critérios de avaliação

• GIF curto, leve e mostrando o melhor do jogo.
• Sabe explicar as opções de largura e de pular quadros.

Checklist de conclusão

• Gravei uma partida com --write-movie
• Escolhi um trecho de 6 a 10 s
• Montei o GIF com menos de 2 MB
• Coloquei o GIF no README

Extensão

Repare nos GIFs de jogos em sites de lojas de jogos: quanto tempo duram? O que mostram primeiro?