Construct do Zero: Exportação para Web e Mobile e Preparação do Build

O que é “build” e o que muda ao exportar

No Construct, exportar é transformar seu projeto em um pacote executável para uma plataforma específica. Esse pacote é chamado de build. A plataforma escolhida define regras de: tamanho de tela, orientação, carregamento, compressão de assets, permissões e até limitações de memória.

Na prática, você vai preparar o projeto para dois destinos comuns: Web (HTML5) e Mobile (normalmente empacotado a partir do HTML5 usando ferramentas compatíveis, como wrappers que geram APK/AAB no Android e IPA no iOS).

Checklist de preparação antes de exportar

1) Identidade do app: nome, versão e ícones

• Nome do projeto: defina um nome curto e consistente (o que aparece no build e em metadados).
• Versão: use um padrão simples (ex.: 1.0.0). Aumente a cada build entregue.
• Ícones: prepare um ícone quadrado em alta resolução (ex.: 1024x1024) e deixe o Construct gerar os tamanhos necessários quando possível. Evite bordas muito finas (elas “somem” em tamanhos pequenos).

2) Orientação e comportamento de tela

Decida se o jogo é portrait (vertical) ou landscape (horizontal). Essa escolha impacta UI, câmera e a experiência no mobile.

• Portrait: ideal para jogos de toque com uma mão, menus longos e HUD vertical.
• Landscape: ideal para ação, plataforma e visibilidade horizontal.

Em configurações do projeto, defina a orientação e mantenha consistente com o layout principal. Se você pretende suportar as duas orientações, teste cuidadosamente o redimensionamento (scaling) e reposicionamento de UI.

3) Scaling (redimensionamento) e resolução

O scaling determina como o jogo se adapta a telas diferentes. Para exportação, o objetivo é evitar barras pretas inesperadas, cortes de UI e distorções.

Continue em nosso aplicativo e ...

• Ouça o áudio com a tela desligada
• Ganhe Certificado após a conclusão
• + de 5000 cursos para você explorar!

ou continue lendo abaixo...

Baixar o aplicativo

• Manter proporção (aspect ratio): evita distorção, mas pode sobrar espaço em algumas telas.
• Preencher tela: ocupa tudo, mas pode cortar laterais/topo.
• Escala inteira (pixel art): preserva pixels, mas pode gerar bordas dependendo da resolução.

Boas práticas: mantenha uma área segura para HUD (margens internas) e teste em proporções comuns: 16:9, 19.5:9, 4:3 e telas ultrawide.

4) Carregamento (loading) e primeira impressão

O carregamento é parte do produto. Um build web sem feedback parece “travado”. Configure uma tela de loading simples e leve.

• Use um fundo sólido e um indicador (barra/ícone) simples.
• Evite carregar fontes e imagens gigantes sem necessidade.
• Se houver áudio, considere iniciar música apenas após interação do usuário (especialmente na Web).

Validação de assets e redução de tamanho do build

Auditoria rápida: o que mais pesa?

Antes de exportar, identifique os maiores responsáveis pelo tamanho final:

• Spritesheets muito grandes (principalmente com transparência).
• Áudios longos em formatos pesados.
• Fontes embutidas e variações desnecessárias.
• Imagens duplicadas (mesmo arquivo importado mais de uma vez).

Boas práticas de compressão (sem perder qualidade visível)

• Imagens: prefira dimensões adequadas ao uso real. Evite usar 4096px para um elemento que aparece com 200px na tela.
• Sprites: recorte áreas vazias, reduza frames redundantes e revise animações longas.
• Áudio: use compressão adequada (música mais comprimida, SFX curtos). Mantenha versões curtas quando possível.
• Remover assets não usados: revise objetos e arquivos importados que não aparecem em nenhum layout.

Checklist de validação antes do build

Exportação para Web (HTML5): passo a passo

1) Preparar configurações essenciais do projeto

• Confirme nome e versão.
• Defina orientação (portrait/landscape).
• Ajuste scaling para o comportamento desejado.
• Configure loading (cor de fundo e indicador simples).

2) Escolher o tipo de export

No menu de exportação, selecione HTML5/Web. Em geral, você terá opções relacionadas a minificação, compactação e modo de execução.

• Build de teste: priorize velocidade de exportação e facilidade de depurar.
• Build de entrega: priorize tamanho menor e carregamento mais eficiente.

3) Gerar o build e organizar a pasta

Exporte para uma pasta dedicada, por exemplo:

builds/WEB/v1.0.0/

Mantenha um padrão de pastas por versão. Isso facilita comparar mudanças e voltar atrás se algo quebrar.

4) Testar corretamente no navegador (evite abrir só pelo arquivo)

Para Web, o ideal é testar com um servidor local (muitos navegadores limitam recursos quando você abre o arquivo diretamente).

• Teste em pelo menos dois navegadores (ex.: Chromium e Firefox).
• Teste em janela redimensionável (simulando telas diferentes).
• Verifique: tempo de carregamento, áudio iniciando no momento esperado, botões clicáveis, textos legíveis.

5) Teste de performance e carregamento

• Recarregue a página e observe se o loading aparece e some corretamente.
• Abra as ferramentas do navegador e verifique se há erros no console.
• Se o jogo “engasga” no início, revise tamanho de imagens e áudio.

Preparação para Mobile: empacotamento a partir do HTML5

Conceito: por que empacotar?

O Construct gera HTML5. Para virar um app instalável, você usa um wrapper (uma camada que abre seu jogo em um componente de navegador interno e gera um pacote de loja). O resultado costuma ser:

• Android: APK (teste) e AAB (publicação na Play Store).
• iOS: IPA (publicação via Xcode/Store).

1) Ajustes no projeto pensando em mobile

• Orientação travada: defina a orientação e evite rotação automática se o jogo não foi desenhado para isso.
• Scaling: confirme que HUD e botões ficam dentro da área segura em telas altas (19.5:9, 20:9).
• Toque: garanta que botões tenham área clicável confortável (não só visualmente pequenos).
• Memória: reduza texturas muito grandes e áudio longo para evitar travamentos em aparelhos intermediários.

2) Exportar um build “base” para mobile

Exporte novamente como HTML5, mas agora com mentalidade de app:

• Use uma pasta separada, por exemplo: builds/MOBILE_BASE/v1.0.0/
• Garanta que o build esteja estável no navegador antes de empacotar.

3) Empacotar com ferramenta compatível (visão prática)

O processo varia por ferramenta, mas o fluxo é parecido:

1. Crie um projeto no wrapper (Android/iOS).
2. Informe o caminho do build HTML5 exportado.
3. Defina Package ID (ex.: com.seuestudio.seujogo), versão e orientação.
4. Adicione ícones e, se necessário, splash screen (sem texto).
5. Gere um pacote de teste (APK) e instale no dispositivo.

Regras importantes:

• Package ID não deve mudar depois que você publica (mudar cria “outro app”).
• Versão deve subir a cada envio para loja.
• Teste em aparelho real, não só em emulador.

4) Teste no dispositivo: o que validar

• Tempo de abertura: o app abre rápido? o loading aparece?
• Toque: botões respondem bem? há cliques acidentais?
• Áudio: volume e disparos corretos; sem “mudo” inesperado.
• Orientação: não gira se não deve; não “quebra” UI ao alternar apps.
• Performance: quedas de FPS em cenas com muitos efeitos/partículas.

Registro de configurações finais (para repetir builds com consistência)

Crie um arquivo simples (ex.: BUILD_NOTES_v1.0.0.txt) e registre:

• Nome do projeto e versão
• Orientação (portrait/landscape)
• Modo de scaling escolhido
• Resolução base do layout
• Configurações de loading (cor/indicador)
• Opções de export usadas (Web e Mobile base)
• Package ID (mobile)
• Data do build e observações de teste

Versão: 1.0.0  Data: 2026-01-25<br>Web: HTML5, scaling=Manter proporção, orientação=Landscape<br>Mobile: base HTML5 para wrapper, PackageID=com.estudio.jogo, orientação=Landscape<br>Notas: Ajustado ícone 1024, reduzido música do menu, loading com fundo #111

Exercício guiado: build web funcional + pacote preparado para mobile + tela de créditos

Parte A — Criar uma tela de créditos simples

Objetivo: adicionar uma tela leve, que não dependa de assets pesados e funcione bem em Web/Mobile.

1. Crie um layout chamado Creditos.
2. Adicione um fundo simples (cor sólida ou imagem leve).
3. Adicione textos: nome do jogo, autoria, ferramentas/áudios (se aplicável) e ano.
4. Adicione um botão Voltar (ou área clicável) para retornar ao menu.
5. No menu principal, adicione um botão Créditos que leva ao layout Creditos.

Dica: mantenha os créditos em poucas linhas e use fonte legível em telas pequenas.

Parte B — Gerar um build Web funcional

1. Revise: nome, versão, orientação, scaling e loading.
2. Exporte como HTML5/Web para builds/WEB/v1.0.0/.
3. Teste em servidor local e em dois navegadores.
4. Valide: menu → créditos → voltar → jogar (fluxo completo).

Parte C — Preparar um pacote para mobile (base + empacotamento)

1. Exporte novamente o HTML5 para builds/MOBILE_BASE/v1.0.0/.
2. No wrapper escolhido, crie o projeto com Package ID e versão.
3. Defina orientação e adicione ícones.
4. Gere um pacote de teste (ex.: APK) e instale no aparelho.
5. Teste: abertura, toque, áudio, scaling e retorno do app (minimizar/voltar).

Parte D — Registrar as configurações finais

Preencha seu BUILD_NOTES_v1.0.0.txt com as escolhas finais e anote qualquer ajuste feito após testes (por exemplo: reduzir uma imagem, trocar scaling, alterar tamanho de fonte nos créditos).