Como usar o scrollcontainer na godot

Como eu usei o ScrollContainer para fazer um jogo de bingo na Godot.

O Desafio

Eu estava desenvolvendo um jogo de Bingo na Godot e queria que, conforme mais cartelas fossem sendo geradas, elas se organizassem automaticamente na tela — sem quebrar o layout, sem vazar.

A dificuldade era justamente essa: as cartelas não ficavam dentro dos limites da tela. Elas se empilhavam desordenadamente, quebravam o layout e atrapalhavam toda a experiência visual.

Esse obstáculo me travou bastante. A Godot ainda é nova pra mim, e venho aprendendo enquanto desenvolvo esse projeto. Isso gerou frustração, bloqueio criativo e a velha sensação de "será que essa engine serve pra isso mesmo?"

Se você já tentou fazer algo visualmente simples numa engine e passou horas empacado, você sabe como é.

Tentativas e Erros

Testei várias combinações de Control, Panel, GridContainer, BoxContainer, sempre com a ajuda do ChatGPT me dando dicas com base nos meus prints e perguntas.

Mesmo com boas sugestões, nada funcionava como eu queria.

A virada veio quando assisti a um vídeo que explicava os tipos de Container na Godot. Fui entender o papel exato de cada um — e foi aí que caiu a ficha: eu estava tentando usar ferramentas genéricas pra um problema que exigia uma solução específica.

Adicionando o Scroll

Se você está tentando fazer algo parecido na Godot, aqui vai um guia completo e didático pra montar a estrutura funcional — mesmo que esteja adicionando os elementos manualmente pelo editor.

1. Criando a Hierarquia de Nós

1. Abra sua cena principal.

Ela deve ser baseada em algum nó do tipo Control. Se ainda não tiver:

• Clique em “+” no topo do editor para adicionar um novo nó.

• Pesquise por Control e selecione.

• Esse será o nó raiz da interface.

2. Adicione um ScrollContainer como filho do Control:

• Clique com o botão direito no Control > Add Child Node

• Pesquise por ScrollContainer > selecione

3. Dentro do ScrollContainer, adicione um HFlowContainer:

• Clique com o direito no ScrollContainer > Add Child Node

• Pesquise por HFlowContainer > selecione

  
  

Sua estrutura agora deve estar assim:

🖼️ 2. Adicionando as Cartelas (TextureRects)

Importante: Na Godot, os filhos diretos de containers (como HFlowContainer) não podem ter o tamanho modificado diretamente. Para controlar o tamanho, a TextureRect precisa estar dentro de um Control (ou outro container básico).

Passo a passo:

• Dentro do HFlowContainer, adicione um Control.

• Dentro desse Control, adicione um TextureRect.

  
  

Exemplo da hierarquia:

3. Definindo o Tamanho das Cartelas

Para cada Control que envolve a TextureRect:

• Selecione o Control

• Vá no painel Inspector

• Em Layout > Min Size, defina as dimensões mínimas.

Para a TextureRect dentro dele:

• Selecione a Imagem de fundo da cartela.

• Defina o tamanho da Texture.

4. Configurando os Containers

ScrollContainer:

• No ScrollContainer, marque:

  • Scroll Vertical: ON

  • Scroll Horizontal: OFF (a não ser que você queira ambos)

HFlowContainer:

• Clique em Layout > Container Sizing

• No Container Sizing:

  • Em Horizontal, marque Fill e Expand

  • Isso permite que ele use toda a largura disponível

  • Você pode testar todos os formatos e ver como eles se comportam e ver o que funciona melhor para o seu objetivo.

5. Resultado Esperado

• As cartelas (TextureRect dentro de Control) serão automaticamente organizadas em linha. Duplique o Control das cartelas e veja que ao estourar o layout, ele cria um Scroll automaticamente.

• O ScrollContainer adicionará rolagem vertical para que o jogador possa navegar por todas as cartelas.

• O HFlow Container ira adicionar os componentes na linha de baixo sempre que o Control da Cartela não couber no Layout no sentido Horizontal.

Conclusão Pessoal

Essa experiência me ensinou bastante. No início bateu um certo pessimismo — achamos que talvez a Godot nem suportasse o que queríamos.

Mas não era um limite da engine. Era um limite do nosso entendimento sobre ela.

No fim, resolvemos algo que parecia impossível. E essa é a grande recompensa de todo game dev.

Se você tá travado em algo agora, procure. Pergunte. Assista vídeo. Pergunte pro GPT (tamo junto). Peça ajuda pra quem entende. Ainda que você perca tempo hoje, você vai ganhar confiança pro resto da sua jornada.

No fim, tudo é sobre persistência — não só conhecimento.