Pular para o conteúdo principal

Professor Julio Passos

Professor Julio Passos mostra um desenho no papel sendo transformado em jogo digital de plataforma com Gemini

Como Criar um Jogo Educativo com IA a Partir de um Simples Desenho (Gemini + Canva, Sem Saber Programar)

Imagine pegar o rascunho que você fez no caderno e, em poucos minutos, ver esse desenho virar um jogo de plataforma 2D jogável, pronto para usar com a turma. Com o Gemini, isso já é possível, mesmo que você nunca tenha escrito uma linha de código.

Neste guia, você vai ver o passo a passo que mostrei no vídeo de hoje, com os prompts que usei e dicas para adaptar o jogo ao conteúdo das suas aulas.

▶️ Assista ao vídeo completo deste tutorial:

▶ Assistir ao vídeo no YouTube

Por que transformar um desenho em jogo com IA muda a rotina do professor?

Todo professor já pensou: "Se eu tivesse um joguinho sobre este conteúdo, a turma ia prestar muito mais atenção". O problema é que criar um jogo parecia coisa de programador, caro e demorado.

Com a inteligência artificial, esse obstáculo caiu. Você desenha a ideia, o Gemini interpreta e escreve o código do jogo por você.

Veja o que você ganha com esse método:

  • Economia de tempo: do rascunho ao jogo jogável em poucos minutos.
  • Sem programação: você conversa com a IA em português, como em um bate-papo.
  • Engajamento: estudantes se envolvem mais quando aprendem jogando.
  • Personalização: o jogo nasce do seu desenho e do conteúdo que você precisa trabalhar.
  • Reuso: o jogo roda no navegador, então pode ser aberto no computador ou no celular.

Passo a Passo Prático: como criar o jogo no Gemini

Você vai precisar de um rascunho (papel ou Canva) e de acesso ao Gemini. No vídeo, usei o Gemini no modo Pro com o recurso Canvas ativado, que mostra o jogo funcionando ao lado do código.

Passo 1: Faça um rascunho simples da sua ideia

Pegue uma folha e desenhe o cenário do jogo: um personagem, os inimigos, o chão e alguns obstáculos. Pode ser um traço bem simples.

No exemplo do vídeo, o desenho tinha um boneco que dispara pequenos projéteis, três inimigos flutuantes com cara de bravos, um fosso e uma escada de blocos. Também havia uma barra de energia com um coração e uma pontuação.

Você pode desenhar à mão e fotografar, ou desenhar direto no Canva. Em ambos os casos, salve a imagem para enviar ao Gemini.

Passo 2: Envie a imagem ao Gemini e peça uma análise

Abra o Gemini, anexe a imagem do rascunho e deixe que ele "leia" o seu desenho. Ele identifica o herói, os inimigos, o cenário e a interface (pontos e vida).

Isso é importante porque confirma que a IA entendeu a sua ideia antes de você pedir qualquer coisa mais complexa.

Passo 3: Peça para transformar o desenho em uma cena colorida

Com a imagem enviada, peça que o Gemini melhore o visual. O prompt usado no vídeo foi:

"Melhore a cena transformando o desenho feito à mão em um personagem cartunizado colorido, bem como toda a cena."

O resultado é uma ilustração cartunizada com o herói, as nuvens inimigas, a pirâmide e a pontuação do seu rascunho. Ela vai servir de referência visual para o jogo.

Passo 4: Peça o jogo no estilo plataforma 2D

Agora vem a mágica. Peça ao Gemini que crie o jogo a partir da cena. No vídeo, usei um tema de saúde, para trabalhar conteúdos de Ciências:

"Agora gere um jogo no estilo Super Mario, plataforma 2D, com 2 fases. O herói arremessa frutas e alimentos saudáveis nos inimigos, que podem representar doenças ou vírus."

O Gemini respondeu com as características do jogo: movimento, pulo e arremesso de frutas (maçã, laranja, brócolis), 2 fases com dificuldade crescente e vírus patrulhando as plataformas. Também incluiu botões para jogar no celular.

Em seguida, ele gerou o código completo e abriu a prévia do jogo, chamada "Herói da Saúde", com vidas e pontuação na tela.

Passo 5: Use um prompt detalhado para um resultado mais profissional

O primeiro jogo já funciona, mas dá para ir além. Abra uma nova conversa, anexe a ilustração cartunizada e cole um prompt mais completo, em inglês, que descreve o jogo com precisão.

Veja o início e o final do prompt que usei, que mostram a estrutura:

"Act as an expert game developer and create a complete, single-file 2D web-based platformer game using HTML, CSS (Tailwind), and pure JavaScript (HTML5 Canvas API). Target Audience: Young children. The game must have very simple controls, forgiving physics (high/easy jumps, slow falling), and low difficulty. The gaps between platforms should be small and easy to clear. Visual Theme & Aesthetic (Based on reference): A vibrant, colorful cartoon style. Draw all assets using Canvas ctx paths and shapes (do not use external image URLs). Key Game Elements to Implement: [descreva herói, inimigos, cenário, pontuação e vidas] - Menus: Include a simple Start Screen, a Game Over Screen, and a Victory Screen. All screens should have large, colorful buttons to start or restart the game. Ensure the code is self-contained, well-commented, runs smoothly at 60 FPS using requestAnimationFrame, and is fully responsive to browser window resizing."

Repare em três detalhes que fazem diferença: o público-alvo (crianças pequenas), o estilo visual baseado na imagem de referência e as telas de menu (início, fim de jogo e vitória).

Passo 6: Jogue, teste e peça ajustes

Quando o Gemini terminar, abra a Prévia e jogue. No vídeo, o jogo "Wizard Adventure" abriu com uma tela inicial e o botão PLAY NOW, com o mago, as nuvens bravas e a contagem de pontos.

Teste o pulo, o arremesso e os buracos no chão. Se algo não ficou bom, peça o ajuste em português, por exemplo:

  • "Deixe o pulo mais alto e os buracos menores."
  • "Adicione uma pergunta de múltipla escolha a cada fase."
  • "Troque os inimigos por [elemento do conteúdo da aula]."

Use o menu Exportar para compartilhar ou salvar o jogo e levá-lo para a sala de aula.

Resumo visual: do desenho ao jogo em 6 etapas

Use esta tabela como guia rápido enquanto cria o seu jogo:

Etapa O que fazer Prompt ou ação Resultado
1 Desenhar o rascunho Papel ou Canva: herói, inimigos, chão, pontos Imagem do rascunho
2 Enviar ao Gemini Anexar a imagem e pedir a análise IA identifica personagens e cenário
3 Cartunizar a cena "Melhore a cena transformando o desenho em personagem cartunizado colorido" Ilustração colorida de referência
4 Gerar o primeiro jogo "Gere um jogo estilo plataforma 2D com 2 fases..." Jogo "Herói da Saúde" na prévia
5 Refinar com prompt detalhado Prompt em inglês com público, estilo, menus e 60 FPS Jogo "Wizard Adventure" com telas de início, fim e vitória
6 Testar e ajustar Pedir mudanças em português e exportar Jogo pronto para a sala de aula

Ideias para usar o jogo em sala de aula

O jogo é só o formato. O que importa é o conteúdo que você coloca nele. Veja algumas ideias:

  • Ciências: alimentação saudável contra vírus e doenças, como no exemplo do vídeo.
  • Matemática: o herói só avança ao resolver uma conta.
  • Língua Portuguesa: o personagem coleta palavras para formar frases.
  • Revisão de prova: cada fase retoma uma unidade estudada.

Se quiser alinhar a atividade à BNCC, peça ao Gemini que cite a habilidade trabalhada em cada fase e confira se ela faz sentido para a sua turma.

Materiais e links recomendados

📄 Lista de prompts

Acesse a lista de prompts para copiar e usar: https://drive.google.com/file/d/1KWX6wly6XW0Y8ZukqSuV9wpGcxUIY8Oq/view

🎓 Oficinas de Inteligências Artificiais para Professores

Participe das formações e experimente aplicações práticas de IA na educação:

https://juliopassos.com/oficinas-de-inteligencias-artificiais-para-professores

📚 Livros de referência sobre IA para professores

Montei uma vitrine com livros que indico para educadores que querem aprofundar o uso de IA em sala de aula.

📚 Ver indicações de livros na Shopee

Perguntas Frequentes (FAQ)

Preciso saber programar para criar um jogo com o Gemini?

Não. Você descreve o jogo em português (ou envia um desenho) e o Gemini escreve o código HTML, CSS e JavaScript. Basta pedir, testar na prévia e solicitar ajustes.

Posso usar um simples desenho feito à mão como base do jogo?

Sim. Faça um rascunho em papel ou no Canva, envie a imagem ao Gemini e peça que ele a transforme em cena cartunizada e depois em jogo 2D de plataforma.

Como usar esse jogo em sala de aula?

Escolha um tema do currículo (por exemplo, alimentação saudável e prevenção de doenças) e peça que os inimigos e os itens representem esse conteúdo. Depois, jogue com a turma e discuta o que cada elemento significa.

Obrigado por ler até aqui. Se este guia te ajudou, compartilhe com um colega professor e assista ao vídeo para ver cada etapa em ação.

Prof. Julio César Passos | IAducador Conectado | juliopassos.com

✨ Continue aprendendo com a gente!

Quer dominar essa e outras Inteligências Artificiais com suporte direto do Professor Julio Cesar Passos e acessar materiais/prompts exclusivos prontos para usar? Conheça a nossa Comunidade IAducador Conectado! Por apenas R$ 7,99 por mês, você economiza horas de planejamento e transforma suas aulas.

👉 Conheça a Comunidade IAducador Conectado

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *