Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Configurando a área de jogo

Nesta primeira parte, vamos configurar a área de jogo. Vamos começar importando os assets iniciais e configurando a cena do jogo.

Preparamos um projeto Godot com os modelos 3D e sons que usaremos para este tutorial, com link na página principal. Se você ainda não o fez, pode baixar o arquivo aqui: Squash the Creeps assets.

Depois de baixá-lo, extraia o arquivo .zip em seu computador. Abra o Gerenciador de Projetos do Godot e clique no botão Importar.

../../_images/01.import_button.webp

No pop-up de importação, insira o caminho completo para o diretório recém-criado squash_the_creeps_start/. Você pode clicar no botão Procurar à direita para abrir um navegador de arquivos e navegar até o arquivo project.godot que a pasta contém.

../../_images/02.browse_to_project_folder.webp

Clique em Importar & Editar para abrir o projeto no editor.

../../_images/03.import_and_edit.webp

A window notifying you that the project was generated by an older Godot version may appear. Click Convert Full Project to convert the project to your current Godot version.

../../_images/import_project_to_4.x_prompt.webp

O projeto inicial contém um ícone e duas pastas: art/ e fonts/. Lá, você encontrará os recursos de arte e música que usaremos no jogo.

../../_images/04.start_assets.png

Existem dois modelos 3D, player.glb e mob.glb, alguns materiais que pertencem a esses modelos e uma faixa de música.

Configurando a área jogável

We're going to create our main scene with a plain Node as its root. In the Scene dock, click the Add Child Node button represented by a "+" icon in the top-left and double-click on Node. Name the node Main. An alternate method to rename the node is to right-click on Node and choose Rename (or F2). Alternatively, to add a node to the scene, you can press Ctrl + A (Cmd + A on macOS).

../../_images/05.main_node.png

Save the scene as main.tscn by pressing Ctrl + S (Cmd + S on macOS).

Começaremos adicionando um chão que impedirá que os personagens caiam. Para criar colisores estáticos como chão, paredes ou tetos, você pode usar nós StaticBody3D. Eles exigem nós CollisionShape3D como filho para definir a área de colisão. Com o nó Main` selecionado, adicione um :ref:`StaticBody3D <class_StaticBody3D>`, então um :ref:`CollisionShape3D <class_CollisionShape3D>`. Renomei o :ref:`StaticBody3D <class_StaticBody3D>` para ``Ground.

../../_images/adding_static_body3D.webp

A tua árvore de cena deve parecer assim

../../_images/06.staticbody_node.png

Um sinal de aviso ao lado do CollisionShape3D aparece porque não definiu sua forma. Se você clicar no ícone, um popup aparece para lhe dar mais informações.

../../_images/07.collision_shape_warning.png

Para criar uma forma, selecione o nó CollisionShape3D , vá para o Inspector e clique no campo <empty> ao lado da propriedade Shape. Crie um novo BoxShape3D.

../../_images/08.create_box_shape3D.jpg

A forma de caixa é perfeita para terrenos planos e paredes. Sua espessura o torna confiável para bloquear até mesmo objetos em movimento rápido.

A box's wireframe appears in the viewport with three orange dots. You can click and drag these to edit the shape's extents interactively. We can also precisely set the size in the inspector. Click on the BoxShape3D to expand the resource. Set its Size to 60 on the X-axis, 2 for the Y-axis, and 60 for the Z-axis.

../../_images/09.box_size.webp

Formas de colisão são invisíveis. Precisamos adicionar um chão visual que o acompanhe. Selecione o nó Ground e adicione um MeshInstance3D como seu filho.

../../_images/10.mesh_instance3d.png

No Inspector, clique no campo ao lado de Mesh e crie um recurso BoxMesh para criar um cubo visível.

../../_images/11.box_mesh.webp

Mais uma vez, é muito pequeno por padrão. Clique no ícone da caixa para expandir o recurso e definir o seu Size para 60`, ``2, e 60`.

../../_images/12.cube_resized.png

Você deve ver uma ampla placa cinza que cobre a grade e os eixos azul e vermelho na janela de visualização.

Vamos mover o chão para baixo para que possamos ver a grade do piso. Para fazer isso, a funcionalidade de alinhamento à grade pode ser usado. O alinhamento à grade pode ser ativado de duas maneiras no editor 3D. A primeira é pressionando o botão Use Encaixe (ou pressionando a tecla Y). A segunda é selecionando um nó, arrastando uma alça no gizmo e então segurando Ctrl enquanto ainda estiver clicando, para ativar o alinhamento enquanto Ctrl estiver pressionado.

../../_images/use_snap.webp

Comece ativando o alinhamento à grade com o método de sua preferência. Em seguida, mova o nó Ground usando o eixo Y (a seta verde no gizmo).

../../_images/move_gizmo_y_axis.webp

Nota

Se você não conseguir ver o manipulador de objetos 3D como na imagem acima, certifique-se de que Modo de seleção esteja ativo na barra de ferramentas acima da visualização.

../../_images/14.select_mode_icon.png

Mova o chão para baixo `` 1` metro, a fim de ter uma grade de editor visível. Um rótulo no canto inferior esquerdo do viewport diz-lhe quanto você está movendo o nó.

../../_images/15.translation_amount.png

Nota

Moving the Ground node down moves both children along with it. Ensure you move the Ground node, not the MeshInstance3D or the CollisionShape3D.

Finalmente, a transform.position.y do Ground deve ser -1

../../_images/ground_down1meter.webp

Vamos adicionar uma luz direcional para que a nossa cena não seja toda cinzenta. Selecione o nó Main e adicione um nó filho DirectionalLight3D.

../../_images/create_directional_light3d.webp

We need to move and rotate the DirectionalLight3D node. Move it up by clicking and dragging on the manipulator's green arrow and click and drag on the red arc to rotate it around the X-axis, until the ground is lit.

No Inspetor, ative Sombra -> Ativado clicando na caixa de seleção.

../../_images/16.turn_on_shadows.webp

Neste ponto, seu projeto deve se parecer com isso.

../../_images/17.project_with_light.webp

Esse é o nosso ponto de partida. Na próxima parte, trabalharemos a cena do jogador e o movimento da base.