City Builder – Parte 1: Ponto de partida

City Builder

Artigos Recentes

Como Criar a Base de um City Builder no Godot 4: Guia Passo a Passo

Se você sempre quis criar o seu próprio simulador de cidade no estilo SimCity ou Cities: Skylines, mas não sabe por onde começar, este guia foi feito para você. Vamos estruturar a base mecânica e visual de um City Builder usando a engine Godot 4, focando na organização de arquivos, hierarquia de nós, configuração de câmeras, interface e sistema de posicionamento de estruturas.

Para acelerar o desenvolvimento de forma profissional, utilizaremos como ponto de partida a lógica clássica do City Builder Starter Kit do renomado criador de assets Kenney, adaptando-a para modelos 3D customizados.

1. Preparando o Terreno: Organização de Arquivos e Assets

O segredo de qualquer projeto de simulação robusto é uma estrutura de pastas limpa. Antes de abrir a engine ou escrever qualquer linha de código, configure o diretório do seu projeto da seguinte forma:

  • assets/: Pasta raiz para recursos visuais.
    • models/: Onde ficarão os arquivos geométricos (recomenda-se descompactar e importar os arquivos no formato .glb).
  • scripts/: Dedicada aos scripts de controle da lógica do jogo.
  • sprites/: Para imagens 2D e ícones de interface.
  • scenes/: Destinada a armazenar a cena principal e sub-cenas.
  • structures/: Onde guardaremos os arquivos de dados (Resources) de cada construção.
  • maps/: Para armazenar os dados de salvamento dos mapas gerados.

2. Arquitetura de Nós da Cena Principal (main.tscn)

Crie uma nova cena 3D e salve-a na pasta scenes com o nome main. A árvore de nós desse projeto deve ser modular, separando a lógica de inputs, a visualização da câmera, o mapa de grade e a interface do usuário (UI).

Monte a seguinte hierarquia:

  • main (Node3D raiz)
    • Builder (Node3D): Gerencia a colocação e rotação de estruturas.
      • Selector (Node3D): Indica visualmente onde o mouse está apontando.
        • Sprite3D: O indicador visual de seleção no chão (rotacionar 90° no eixo X para deitá-lo sobre o grid).
        • Container (Node3D): Nó temporário para renderizar o preview 3D da estrutura selecionada.
    • View (Node3D): Pivot para controle de movimentação e rotação da visão.
      • Camera3D: A câmera física do jogador.
    • GridMap: A malha tridimensional onde as estradas e prédios serão assentados.
    • CanvasLayer: Camada isolada para renderização da interface 2D.
      • Control (Nó de UI)
        • TextureRect (Nomeado como CashIcon): Ícone de moeda (ajuste a escala para 0.3 no painel Transform se o sprite original for muito grande).
        • Label (Nomeado como Cash): Texto que exibirá o saldo do jogador.

Ajustando o Foco da Câmera

Para garantir que a câmera enquadre perfeitamente o seletor no início do jogo, selecione o nó Camera3D e altere o campo FOV (Field of View) para 20 e a posição de Transform para 30. No nó pai View, aplique uma rotação de -35° no eixo X e 45° no eixo Y. Isso proporcionará aquela clássica perspectiva isométrica/top-down dos jogos de simulação.

3. Configurando o Mapeamento de Entradas (Input Map)

Para dar vida aos scripts que controlam o jogo, precisamos registrar as ações do jogador no menu de configurações do projeto (Project Settings > Input Map). Vamos prever controles modernos e mecânicas de atalho para otimizar a experiência:

Controles do Builder (Construção)

  • rotate: Atribuído ao Botão Direito do Mouse ou tecla R (rotaciona a estrutura selecionada).
  • next_structure: Tecla I (avança para a próxima construção da lista).
  • prev_structure: Tecla U (retorna para a construção anterior).
  • action_save: Tecla K (salva o estado atual da cidade).
  • action_load: Tecla L (carrega o progresso salvo anteriormente).

Controles da View (Câmera)

Utilizaremos o tradicional padrão WASD para navegação no mapa:

  • camera_left: Tecla A
  • camera_right: Tecla D
  • camera_forward: Tecla W
  • camera_back: Tecla S
  • camera_center: Tecla C (resgata o foco para o centro do mapa)

4. Implementação de Scripts e Lógica Core

Vincule os scripts correspondentes aos nós Builder e View.

  1. Vincular builder.gd ao nó Builder: Este script monitora os cliques do jogador, gerencia o dinheiro do jogo e atualiza o display de saldo. Dica de customização: Dentro do método update_cash, altere o prefixo monetário original adicionando um “R$” para adaptar a interface à moeda brasileira.
  2. Vincular view.gd ao nó View: Um script leve focado em capturar as entradas WASD do handle_input para deslocar linearmente o pivot da câmera pelo cenário 3D.

5. Criando os Recursos de Construção (Custom Resources)

Em vez de criar uma cena inteira para cada tipo de prédio ou estrada, o método mais inteligente e escalável no Godot é utilizar Resources. Eles funcionam como cartões de dados reutilizáveis.

  1. Navegue até a pasta structures/, clique com o botão direito e selecione Create New Resource.
  2. Busque pelo tipo customizado Structure (definido pelo kit base) e crie o seu primeiro arquivo, por exemplo: road_straight.tres (Estrada Reta).
  3. Dê um duplo clique no recurso criado para abrir suas propriedades no Inspector:
    • Defina o Preço (ex: 100).
    • No campo Model, arraste o arquivo .glb correspondente da estrada localizado em assets/models/.

Repita este processo de forma sequencial para criar o catálogo de blocos do seu jogo (curvas, cruzamentos, prédios residenciais, indústrias, etc.).

6. Conectando as Engrenagens no Inspector

Com todas as peças criadas, volte à cena main e selecione o nó Builder. No painel Inspector, você verá diversos campos de exportação vazios esperando por referências. Preencha-os arrastando os nós correspondentes da cena:

  • structures: Crie um Array e arraste todos os arquivos .tres de recursos criados na pasta structures/ para dentro dele de uma só vez. Isso formará a biblioteca de construções do seu jogo.
  • selector: Arraste o nó Selector.
  • container: Arraste o nó Container.
  • camera: Arraste o nó Camera3D.
  • grid_map: Arraste o nó GridMap.
  • cash_display: Arraste o nó Label (Cash) da interface.

7. Ajustes Finais Cruciais e Teste Prático

Antes de pressionar o botão de Play, precisamos alinhar as escalas físicas do motor de jogo:

  • Ajuste do GridMap: Por padrão, o nó GridMap vem configurado com células de tamanho 2x2x2 metros. Como a grande maioria dos pacotes de modelos modulares 3D (incluindo os de Kenney) são modelados em escala unitária, mude o tamanho da célula do seu GridMap no Inspector para 1x1x1 metro. Isso evitará frestas e problemas de sobreposição.
  • Ajuste do Offset: No script do Builder, certifique-se de ajustar ligeiramente o parâmetro de deslocamento (offset) na função update_structure para calibrar o alinhamento visual do preview do mouse com a grade.
  • Iluminação: A pré-visualização na tela de edição da Godot pode parecer clara, mas ao rodar o jogo o cenário ficará completamente escuro se você não tiver uma fonte de luz. Adicione um nó DirectionalLight3D à raiz da cena e renomeie-o para Sun para simular a luz do sol.

O Resultado

Ao dar o Play, você terá a fundação perfeita de um City Builder funcional:

  1. O mouse moverá o seletor grid por grid de forma responsiva.
  2. Pressionando I ou U, o modelo fantasma sob o mouse mudará, exibindo as diferentes opções do catálogo.
  3. O Botão Direito do Mouse (ou a tecla R) rotacionará perfeitamente a estrutura antes do posicionamento.
  4. O display de caixa (UI) responderá dinamicamente de acordo com o custo das ações.

Pronto! Você acaba de construir o alicerce técnico da sua própria engine de simulação de cidades. A partir daqui, a base está sólida para a adição de recursos avançados, como sistemas automáticos de conexões de estradas (autotiling), simulação de tráfego de veículos e gerenciamento de recursos urbanos.

City Builder Super Fácil

Vídeo completo no YouTube.

Revisado em

em

,

por

Mario Xavier

Tags:

,

Comments

Deixe um comentário

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

Arquivo

Categorias