Storyboard de Jogo: Como Planejar uma Cutscene 2D no Krita

Um storyboard de jogo é a cutscene desenhada em quadros antes de existir: cada quadro mostra o enquadramento, quem está em cena e o que acontece, com anotações de duração, câmera e som. Para uma cutscene 2D, o passo que mais economiza trabalho vem logo depois: transformar os quadros num animatic, com o tempo real e um áudio provisório, para ver se a cena funciona antes de animar um único sprite ou escrever uma linha de código.

Aqui está o fluxo completo no Krita, que é grátis e tem um Storyboard Docker próprio: roteiro curto, lista de planos, desenho dos quadros, anotações, animatic com áudio e a passagem para a engine, separando o que vira animação do que vira código.

Storyboard jogo: para que serve numa cutscene 2D

Cutscene de jogo tem um problema que filme não tem: ela tira o controle do jogador. Cada segundo de cena é um segundo em que a pessoa está segurando o controle sem poder fazer nada. O storyboard serve para responder três perguntas antes de gastar tempo de produção:

1. A cena precisa existir? Às vezes o que ela comunica cabe num diálogo curto durante o gameplay.
2. Está na ordem certa? Trocar quadros de lugar no storyboard custa um arrastar; trocar depois de animado custa dias.
3. Quanto tempo ela dura? O animatic dá a resposta em segundos reais, não em impressão.

Para jogo 2D tem um ganho a mais: o storyboard mostra quais quadros são só câmera e personagens existentes se movendo (o que a engine faz com os sprites que você já tem) e quais pedem arte nova (um close do rosto, uma ilustração do castelo). Essa separação define o custo da cena.

Roteiro curto e lista de planos

Antes de desenhar, escreva a cena em poucas linhas. Exemplo de uma cutscene de entrada de chefe:

A heroína entra na sala do trono. A porta fecha atrás dela. O chão treme. O rei-esqueleto se levanta do trono e aponta a espada. Nome do chefe na tela. Luta começa.

Depois quebre em planos, um por linha, com o tipo de enquadramento:

Em jogo 2D de câmera lateral, "geral", "médio" e "fechado" quase sempre significam zoom da câmera do jogo, não troca de câmera. Anote isso: se o plano 4 é um zoom na câmera do jogo, ele é código; se é uma ilustração do rosto do rei em tela cheia, ele é arte nova.

Desenhando os quadros: enquadramento e ação

No Krita:

1. File > New com o tamanho da tela do jogo em proporção. Para jogo 16:9, 1280x720 é suficiente para storyboard.
2. Mude para o workspace Animation no seletor de workspace (canto superior direito) ou em Window > Workspace. A Animation Timeline aparece embaixo.
3. Abra o Storyboard Docker em Settings > Dockers > Storyboard.
4. No docker, use o botão de adicionar item para criar uma cena por plano. Cada cena do storyboard é ligada a um keyframe na timeline, e o desenho que você faz no canvas com a cena selecionada é o quadro dela.

Organize as camadas para reaproveitar desenho:

• Camada de cenário: a sala do trono, desenhada uma vez e repetida nos quadros que usam o mesmo enquadramento.
• Camada de personagens: bonecos simples, um keyframe por quadro.
• Camada de anotações: setas de movimento e de câmera, em cor forte (vermelho ou azul).

Regras de desenho que poupam tempo:

• Retângulo da tela visível. Desenhe a borda do quadro em todos os planos. Se o plano é um zoom, desenhe o retângulo menor dentro do quadro geral, mostrando o que a câmera vai cortar.
• Silhueta, não detalhe. A heroína é uma forma reconhecível com a cor dela. O rei é uma forma maior com uma coroa.
• Seta para tudo que se move. Personagem que anda, porta que fecha, câmera que treme (setas curtas em zigue-zague).
• Linha do chão. Em jogo de plataforma, uma linha horizontal marca o chão e mantém a escala dos personagens coerente entre os quadros.

Anotações: duração, câmera, som

Cada cena do Storyboard Docker tem campos de nome, duração em segundos e duração em frames, e você pode criar campos de comentário no menu Comment do docker. Crie três campos e use em todas as cenas:

• Ação: o que acontece, em uma frase.
• Câmera: fixa, zoom, panorâmica, tremor, e de onde para onde.
• Som: efeito, música, fala.

A duração em segundos é a anotação mais importante. Chute um valor inicial (2 segundos para um plano de ação simples, 3 para um plano com fala curta) e ajuste no animatic.

Com os quadros prontos, o docker exporta tudo para PDF ou SVG pelo menu Export, com layout configurável. Esse PDF é o documento para mostrar para quem programa ou para quem faz o som.

Animatic no Krita com timing real

O conteúdo visual do storyboard já vive no sistema de animação do Krita, então o animatic é o próprio storyboard tocando na timeline. O que falta é tempo e som.

1. Ajuste a taxa de quadros. Nas configurações da timeline, defina a taxa (24 quadros por segundo é um padrão comum para animatic). A duração em frames de cada cena acompanha.
2. Ajuste a duração de cada cena no docker. A timeline estende o keyframe correspondente.
3. Carregue um áudio provisório. No menu de áudio da Animation Timeline (o ícone de alto-falante na barra do docker), use Load Audio File. WAV, OGG, MP3 e FLAC funcionam. Pode ser você narrando a cena, efeitos tirados de um banco grátis e uma música qualquer no ritmo certo.
4. Toque e ajuste. Com o play da timeline, o áudio toca sincronizado. Se o rumor do chão acaba antes da poeira cair, estique o plano 3.

Dois avisos práticos da documentação do Krita: o arquivo guarda só o caminho do áudio, então se você mover ou renomear o arquivo de som, precisa recarregar; e não existe forma de onda desenhada na timeline, então o ajuste é no ouvido, arrastando o cursor pelos frames.

Para exportar o animatic como vídeo, use File > Render Animation e marque Include Audio. Desde a versão 5.2 o Krita traz uma parte do FFmpeg embutida, que cobre WebM, Matroska e OGG; para outros formatos, a documentação mostra como apontar para um FFmpeg completo. A versão estável no site do Krita em outubro de 2026 é a 5.3.4.1, e a série 6.0 (com Qt 6) roda em paralelo.

Assista ao animatic segurando o controle do seu jogo. Se a mão coçar para apertar um botão antes do fim, a cena está longa.

Planejar a cena é a parte que cabe numa tarde. O que trava de verdade é transformar 6 quadros em sprites animados, câmera, efeitos e uma cena que roda dentro do jogo sem quebrar o controle do jogador.

Saber o que desenhar, em que tamanho e com quantos frames, para que a engine consiga montar a cena com o mínimo de arte nova, é o que faz uma cutscene caber no orçamento de um jogo indie.

Do storyboard para a engine: o que vira animação e o que vira código

Passe pelo storyboard plano a plano e marque cada elemento com uma de três etiquetas:

• Já existe: a heroína andando usa a animação de caminhada que o jogo já tem. A sala é o cenário da fase.
• Arte nova: o rei se levantando do trono é uma animação nova, só desta cena. O nome do chefe na tela é um elemento de UI novo.
• Código: porta fechando (um objeto que se move), tremor da câmera, zoom, poeira caindo (partículas), música entrando, tirar e devolver o controle.

Quanto mais coisa cair em "já existe" e "código", mais barata a cena. Num jogo 2D, uma cutscene costuma ser, na maior parte, movimentação de sprites existentes e câmera, e só os momentos-chave pedem animação desenhada.

Na Godot, a cutscene se monta com um AnimationPlayer que anima a posição dos personagens e da câmera, chama métodos no tempo certo e controla o fade. O post sobre cutscene simples na Godot mostra a montagem completa, incluindo tirar o controle do jogador e deixar pular a cena.

Na Unity, a ferramenta equivalente é a Timeline: um asset de Timeline com trilhas de animação para cada personagem, trilha de ativação para objetos, trilha de áudio e, com o pacote Cinemachine, trilhas de câmera. O storyboard vira quase literalmente a ordem das trilhas.

Nos dois casos, a duração de cada plano no animatic vira a posição das chaves na timeline da engine. Exporte a tabela de planos com os tempos e use como referência.

Erros comuns: cena longa demais, câmera que tira o controle sem motivo

• Cena longa demais. O animatic tem 40 segundos para dizer "o chefe acordou". Corte planos que repetem informação e encurte as pausas.
• Câmera que tira o controle sem motivo. Um plano só mostra a porta que o jogador já está vendo. Se o jogador pode ver a informação jogando, deixe o controle com ele.
• Storyboard detalhado demais. Quadros finalizados com cor e luz. Quando a ordem muda, todo esse trabalho vai fora.
• Sem anotação de som. O som carrega metade da cena (porta, rumor, música). Sem ele, o animatic engana para mais lento.
• Plano que ninguém sabe se é câmera ou arte. O zoom no rosto do rei é zoom da câmera do jogo ou ilustração em tela cheia? Decida e anote no campo de câmera.
• Pular o animatic. Os quadros estáticos sempre parecem curtos. O tempo real só aparece tocando.
• Esquecer a saída da cena. O último plano precisa devolver o controle num lugar seguro, com o jogador posicionado e o inimigo ainda não atacando.

Próximo passo

Escolha um momento do seu jogo que hoje é só texto (a chegada num chefe, a descoberta de um item) e faça um storyboard de 4 a 6 planos no Krita, com duração e som anotados. Monte o animatic com um áudio provisório e assista com o controle na mão. Para pensar em quando contar a história com cena e quando contar com o próprio cenário, o guia de narrativa em jogos é a leitura seguinte.