Construct do Zero: Preparação do Projeto e Navegação pela Interface

Fluxo de trabalho básico no Construct (visão geral)

O Construct organiza um jogo 2D em três pilares: Layout (a cena/“tela” onde você posiciona objetos), Event Sheet (a lógica em forma de eventos e ações, sem código) e Project (a estrutura do projeto: pastas, objetos, layouts, folhas de eventos e recursos). O fluxo típico é: criar o projeto → definir resolução/orientação → ajustar viewport e scaling → montar layouts com camadas → criar/organizar objetos → ligar layouts a event sheets.

Criação do projeto: resolução, orientação e template

O que você decide no início

• Resolução base: tamanho “de referência” do seu jogo (ex.: 1280x720). Ela influencia composição, UI e o quanto você verá na tela.
• Orientação: paisagem (landscape) ou retrato (portrait). Isso afeta como você planeja HUD, câmera e área útil.
• Modo de exibição: como o jogo se adapta a telas diferentes (scaling).

Passo a passo: criar um projeto novo

1. Abra o Construct e escolha Novo Projeto.
2. Selecione um projeto 2D (layout em branco).
3. Defina a resolução inicial (ex.: 1280 x 720 para landscape ou 720 x 1280 para portrait).
4. Confirme a criação. Você verá um Layout inicial e uma Event Sheet (dependendo do template).

Dica prática: escolha uma resolução base que seja confortável para desenhar e posicionar UI. Mesmo que o jogo rode em várias telas, você precisa de uma referência consistente para construir.

Viewport e Scaling: como o jogo se adapta a diferentes telas

Conceitos essenciais

• Viewport: a “janela” que o jogador enxerga do layout. Em jogos com câmera, o viewport pode se mover.
• Scaling: como o Construct ajusta a imagem do jogo para caber em resoluções diferentes (mantendo proporção, esticando, adicionando barras etc.).
• Letterbox/Pillarbox: barras horizontais/verticais quando a proporção da tela não bate com a do jogo.

Onde configurar

As configurações ficam nas Propriedades do Projeto (clique no nome do projeto no painel Project e observe o painel Properties).

Passo a passo: definir viewport e scaling de forma segura

1. No painel Project, clique no item do topo (o nome do projeto).
2. No painel Properties, localize as opções de Window size (tamanho base) e confirme se estão de acordo com sua resolução escolhida.
3. Procure a opção de Fullscreen/Scaling (o nome exato pode variar por versão) e selecione um modo que mantenha a proporção (evita distorção de sprites e UI).
4. Se o seu jogo tiver UI fixa, planeje uma “área segura”: posicione elementos importantes um pouco afastados das bordas, pois algumas telas podem cortar/letterbox.

Exemplo prático: se você usa 1280x720 e o jogador abre em uma tela ultrawide, um scaling que preserve proporção pode adicionar barras ou mostrar mais área lateral, dependendo do modo escolhido. Por isso, UI em camada separada ajuda a manter consistência visual.

Entendendo os painéis principais da interface

Project (estrutura do jogo)

É o “explorador” do seu projeto. Aqui você cria e organiza: Layouts, Event Sheets, Object types (sprites, textos, tilemaps, etc.) e pastas. Um projeto legível começa com organização aqui.

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

Properties (configurações do item selecionado)

Mostra e permite editar propriedades do que estiver selecionado: projeto, layout, camada, objeto no layout ou object type. É onde você ajusta tamanho do layout, parallax de camada, comportamento de objetos, aparência de texto, etc.

Layers (camadas do layout)

Camadas controlam ordem de desenho e separação lógica. Boas práticas: Fundo (background), Gameplay (jogabilidade) e UI (interface). Cada camada pode ter escala, parallax e visibilidade próprios.

Event Sheet (lógica por eventos)

É onde você cria regras do jogo com Condições e Ações. Mesmo sem programar, a lógica é estruturada: “Se acontecer X, então faça Y”. Você pode ter uma event sheet por layout ou compartilhar uma global.

Animations (editor de animações do Sprite)

Para objetos do tipo Sprite, o editor de animações permite importar frames, definir velocidade, loop, pontos de origem e colisão. Mesmo para protótipos, ter animações organizadas evita confusão quando o projeto cresce.

Atalhos essenciais para trabalhar mais rápido

Observação: alguns atalhos podem variar por sistema/versão. Se algo não funcionar, procure a lista de atalhos nas preferências do Construct e padronize seu fluxo.

Exercício guiado: criar uma cena inicial vazia com camadas e organização do Project

Objetivo do exercício

Você vai criar um layout inicial limpo, com três camadas (Fundo, Gameplay, UI) e organizar pastas e itens no painel Project para manter o projeto legível desde o começo.

Parte 1: preparar a estrutura no Project

1. No painel Project, localize a seção de Layouts. Renomeie o layout inicial para Layout_Menu (ou Layout_Inicial).
2. Localize a seção de Event sheets. Renomeie a folha de eventos associada para ES_Menu.
3. Crie uma pasta para layouts (se sua versão permitir pastas nessa seção) chamada Layouts e mova Layout_Menu para dentro.
4. Crie uma pasta para event sheets chamada EventSheets e mova ES_Menu para dentro.
5. Na seção Object types, crie as seguintes pastas: UI, Gameplay, FX e System. (Mesmo vazias, elas servem como padrão de organização.)

Regra simples: o nome do layout e da event sheet devem indicar a função. Isso evita abrir itens errados quando você tiver dezenas de telas e lógicas.

Parte 2: configurar as camadas do layout

1. Abra Layout_Menu.
2. No painel Layers, renomeie a camada padrão para Gameplay.
3. Crie uma nova camada chamada Fundo e mova-a para ficar abaixo de Gameplay (ordem de desenho: Fundo → Gameplay → UI).
4. Crie outra camada chamada UI e mova-a para ficar acima de Gameplay.
5. Selecione a camada UI e, no painel Properties, ajuste para que ela seja adequada a interface: mantenha parallax padrão (geralmente 100,100) e evite efeitos que façam a UI “andar” com o cenário. Se houver opção de Scale rate ou configurações específicas de layer, mantenha a UI consistente com a viewport.

Parte 3: adicionar placeholders para validar a organização

Mesmo sem arte final, placeholders ajudam a testar alinhamento e fluxo. Você pode usar objetos simples para marcar posições.

1. Na camada Fundo, insira um objeto simples de fundo (por exemplo, um Sprite com cor sólida ou um Tiled Background, conforme disponível). Nomeie o object type como BG_Solid e mova-o para a pasta FX ou crie uma pasta Background dentro de Gameplay (como preferir, desde que seja consistente).
2. Na camada UI, adicione um Text para título (ex.: “Jogo 2D”). Nomeie o object type como UI_Title e mova-o para a pasta UI.
3. Ainda na camada UI, adicione um segundo Text como botão placeholder (ex.: “Iniciar”). Nomeie como UI_BtnStart e mova-o para a pasta UI.

Parte 4: checagem rápida de legibilidade

• No Project, você consegue identificar rapidamente onde estão: layout do menu, event sheet do menu e objetos de UI?
• No Layers, a ordem está correta (Fundo abaixo, UI acima)?
• Ao selecionar cada item, você encontra as configurações no Properties sem precisar “caçar”?

Mini padrão de nomes (para adotar desde já)

• Layouts: Layout_Menu, Layout_Level01, Layout_GameOver
• Event Sheets: ES_Menu, ES_Level01, ES_Global
• Objetos UI: prefixo UI_ (ex.: UI_Score, UI_Pause)
• Objetos de gameplay: prefixo por categoria (ex.: PLR_ jogador, EN_ inimigo, IT_ item)

Esse padrão reduz erros comuns, como editar o objeto errado ou colocar UI na camada de gameplay, e facilita quando você começar a criar eventos e instâncias no layout.