Módulo 3 · Aula 3.11 · Exportar para web

Carga horária	Dificuldade	Ferramenta	Competências
8 h/a	⭐⭐	GDevelop 5 (gdevelop.io); Python 3 para o servidor local	C5, C6

Objetivos de aprendizagem

Exportar o jogo como HTML5 para uma pasta (exportação manual, sem conta).
Explicar por que o index.html exportado não abre com dois cliques.
Rodar o jogo exportado num servidor local e testar no navegador.
Testar no celular da mesma rede, quando possível.

Pré-requisitos

Aulas 3.1 a 3.10.

Materiais

Computador com GDevelop e Python 3; navegador; celular conectado ao mesmo Wi-Fi (opcional).

Conceitos

Exportar. Transformar o projeto do GDevelop em arquivos que qualquer navegador roda: index.html, arquivos de código (.js), imagens e sons. Depois disso o jogo não precisa mais do GDevelop.

Exportação manual. O GDevelop oferece dois caminhos: gd.games (publica na internet com conta, marcado como "Muito fácil") e HTML5 (sites externos), que só gera a pasta. O curso usa o segundo, porque não depende de conta nem de limite de plano.

Servidor web. O próprio GDevelop avisa, ao terminar a exportação: "Seu jogo não funcionará se você abrir o arquivo index.html no seu computador. Você deve carregá-lo para uma plataforma de hospedagem web (Itch.io, Poki, CrazyGames, etc...) ou um servidor web para executá-lo." No laboratório, o servidor pode ser o do Python, com um comando.

Publicar de verdade. Colocar a pasta num site (itch.io, GitHub Pages) é conteúdo do Módulo 10. Aqui o objetivo é exportar e provar que roda.

Exemplos

Caminho	Precisa de conta?	Quando usar
Compartilhar → Navegador → gd.games	sim	publicar rápido com conta autorizada pela escola
Compartilhar → Navegador → HTML5 (sites externos)	não	entrega do curso, testes, publicar depois em outro lugar

Tutorial passo a passo

Parte A. Exportar (40 min)

Salve o projeto.
Clique em Compartilhar (botão roxo ao lado de Visualizar).
Aba Publicar → Navegador → HTML5 (sites externos).
Clique em Escolher Pasta e crie uma pasta nova e vazia, por exemplo sementes-web.
Clique em Exportar como jogo HTML5. Aguarde a mensagem Concluído!
Clique em Abrir a Pasta de Exportação e veja os arquivos.

Parte B. O teste que falha (10 min)

Dê dois cliques no index.html. Anote o que acontece (o jogo não carrega direito, como o GDevelop avisou).

Parte C. Servidor local (40 min)

Abra o terminal (Prompt de Comando) dentro da pasta sementes-web e rode:

python -m http.server 8000

No navegador, abra http://localhost:8000. O jogo carrega.
Jogue uma partida completa: início, jogo, fim, jogar de novo.

Parte D. Celular (opcional, 40 min)

Descubra o endereço do computador na rede (comando ipconfig, linha "Endereço IPv4").
No celular, no mesmo Wi-Fi, abra http://ENDEREÇO:8000. Teste o toque. Se a rede da escola bloquear, registre e pule.

Parte E. Entrega (30 min)

Compacte a pasta sementes-web em .zip e entregue junto com a pasta do projeto.

Imagens

Captura real, tela de exportação HTML5 com Escolher Pasta e Exportar como jogo HTML5: recursos/imagens/gdevelop/captura-exportar-html5.png.
Captura real, jogo exportado rodando: recursos/imagens/gdevelop/sementes-tela-jogo.png.

Indicação da interface

Item	Onde fica
Compartilhar	barra de cima, botão roxo
Publicar / Convidar	abas no topo da janela Compartilhar
Navegador	primeira opção da aba Publicar
Escolher Pasta	à direita do campo do caminho
Exportar como jogo HTML5	abaixo do campo do caminho; fica cinza até escolher a pasta
Ver todas as exportações	rodapé da janela, para Windows, Android e outros

O código completo

Não há eventos novos. O "código" desta aula é o comando do servidor:

python -m http.server 8000

Explicação do código

python -m http.server liga um servidor web simples que entrega os arquivos da pasta onde o terminal está.
8000 é a porta. O endereço fica http://localhost:8000.
Para desligar, aperte Ctrl+C no terminal.

Resultado esperado (testado)

Em 30/10/2026 o Sementes do Sertão foi exportado pelo caminho desta aula no GDevelop 5.6.285, a mensagem Concluído! apareceu e o jogo exportado foi aberto num servidor local e jogado no navegador: começou na tela inicial, [Espaço] levou para a partida e a coleta somou ponto. O teste no celular não foi feito.

Problemas comuns

Sintoma	Causa	Solução
Exportar como jogo HTML5 cinza	nenhuma pasta escolhida	Escolher Pasta
Tela preta ou só a barra de carregar	abriu o `index.html` com dois cliques	usar o servidor
`python` não é reconhecido	Python não instalado ou fora do caminho	pedir ao professor; no Windows, tentar `py -m http.server 8000`
Celular não abre	rede bloqueia ou firewall do Windows	testar em outra rede ou pular
Pasta com arquivos velhos	exportou em cima de outra exportação	usar pasta vazia

Exercício guiado

Liste os arquivos e pastas que apareceram na exportação e diga o papel de 3 deles. (Resposta conferível: index.html abre o jogo; os .png e .wav são as imagens e os sons; os code0.js, code1.js, code2.js são os eventos das três cenas convertidos em código.)

Desafio individual

Exporte de novo depois de mudar a velocidade do redemoinho e confira, pelo servidor, que a mudança apareceu.

Desafio avançado (opcional)

Abra o code1.js exportado num editor de texto e encontre o trecho que soma 1 aos pontos. Anote: o que o GDevelop escreveu por você?

Critérios de avaliação

Pasta exportada e .zip entregue.
Jogo rodando pelo servidor local, com print da tela.
Explicação de por que o duplo clique não funciona.

Checklist de conclusão

Extensão

Mostre o jogo para a família rodando no seu computador e anote a reação, como num teste com jogadores.