Preparazione dell'area di gioco

In this first part, we're going to set up the game area. Let's get started by importing the start assets and setting up the game scene.

We've prepared a Godot project with the 3D models and sounds we'll use for this tutorial, linked in the index page. If you haven't done so yet, you can download the archive here: Squash the Creeps assets.

Una volta scaricato, estrai l'archivio .zip sul tuo computer. Apri il Gestore del progetti di Godot e clicca sul pulsante Importa.

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

In the import popup, enter the full path to the freshly created directory 3d_squash_the_creeps_starter/. You can click the Browse button on the right to open a file browser and navigate to the project.godot file the folder contains.

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

Click Import to open the project in the editor.

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

Una finestra potrebbe informarti che il progetto è stato generato da una versione precedente di Godot. Clicca su Converti l'intero progetto per convertire il progetto alla versione attuale di Godot.

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

If it doesn't open immediately open the project from your project list.

Il progetto iniziale contiene un'icona e due cartelle: art/ e fonts/. Lì, troverai le risorse grafiche e sonore che useremo nel gioco.

../../_images/04.start_assets.webp

Ci sono due modelli 3D, player.glb e mob.glb, alcuni materiali che appartengono a questi modelli e una traccia musicale.

Preparazione dell'area giocabile

Andremo a creare la nostra scena principale con un Node base come sua radice (root). Nel pannello Scena, clicca sul pulsante Aggiungi nodo figlio rappresentato dal simbolo "+" in alto a sinistra e fai doppio-clic su Nodo. Rinomina il nodo in Main. Alternativamente, per rinominare un nodo, è possibile fare clic destro su Nodo e scegliere Rinomina (oppure F2). Oppure, per aggiungere un nodo alla scena, è possibile premere Ctrl + A (Cmd + A su macOS).

../../_images/05.main_node.webp

Salva la scena come main.tscn premendo Ctrl + S (Cmd + S su macOS).

Cominceremo aggiungendo un pavimento che impedirà ai personaggi di cadere nel vuoto. Per creare collisori statici come pavimenti, mura, o soffitti, possiamo usare dei nodi StaticBody3D. Questi richiedono nodi CollisionShape3D come figli per definire un'area di collisione. Con il nodo Main selezionato, aggiungi un nodo StaticBody3D, e successivamente un nodo CollisionShape3D come figlio del precedente. Rinomina il nodo StaticBody3D in Ground.

../../_images/adding_static_body3D.webp

Il tuo albero di scena dovrebbe assomigliare a questo

../../_images/06.staticbody_node.webp

Un simbolo di avviso apparirà accanto al CollisionShape3D perché non abbiamo ancora definito la sua forma. Cliccando sull'icona di avviso, apparirà un popup che ci fornirà più informazioni.

../../_images/07.collision_shape_warning.webp

Per creare una forma, seleziona il nodo CollisionShape3D, vai nell'Ispettore e clicca sul campo <vuoto> accanto alla proprietà Shape. Crea un nuovo BoxShape3D.

../../_images/08.create_box_shape3D.webp

La forma a riquadro (box) è perfetta per pavimenti piani e mura. Il suo spessore lo rende affidabile anche per bloccare oggetti in rapido movimento.

Un fildiferro del riquadro apparirà nella viewport con tre punti arancioni. È possibile cliccare e trascinare questi punti per modificare interattivamente l'estensioni della forma. È possibile anche impostare dimensioni precise attraverso l'ispettore. Clicca sul BoxShape3D per espandere la risorsa. Imposta il suo Size a 60 sull'asse X, 2 sull'asse Y e 60 sull'asse Z.

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

Le forme di collisione sono invisibili. Abbiamo bisogno di aggiungere un pavimento visivo che combaci con il collisore. Seleziona il nodo Ground e aggiungi un nodo MeshInstance3D come suo figlio.

../../_images/10.mesh_instance3d.webp

Nell'Ispettore, clicca sul campo accanto a Mesh e crea una risorsa BoxMesh per aggiungere un cubo visibile.

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

Ancora una volta, le dimensioni predefinite sono troppo piccole. Clicca sull'icona del cubo per espandere la risorsa e imposta Size a 60, 2 e 60.

../../_images/12.cube_resized.webp

Dovresti vedere un'ampia lastra grigia che copre la grigli, e gli assi blu e rossi nella viewport.

We're going to move the ground down so we can see the floor grid. To do this, the grid snapping feature can be used. Grid snapping can be activated 2 ways in the 3D editor. The first is by pressing the Use Snap button (or pressing the Y key). The second is by selecting a node, dragging a handle on the gizmo then holding Ctrl while still clicking to enable snapping as long as Ctrl is held.

../../_images/use_snap.webp

Start by setting snapping with your preferred method. Then move the Ground node using the Y-axis (the green arrow on the gizmo).

../../_images/move_gizmo_y_axis.webp

Nota

If you can't see the 3D object manipulator like on the image above, ensure the Select Mode is active in the toolbar above the view.

../../_images/14.select_mode_icon.webp

Move the ground down 1 meter, in order to have a visible editor grid. A label in the bottom-left corner of the viewport tells you how much you're translating the node.

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

Nota

Spostando il nodo Ground verso il basso, si spostano entrambi i suoi nodi figli con esso. Assicurati di spostare il nodo Ground, non il MeshInstance3D o il CollisionShape3D.

Infine, la proprietà transform.position.y di Ground dovrebbe essere -1

../../_images/ground_down1meter.webp

Per evitare di avere la nostra scena completamente grigia, aggiungiamo una luce direzionale. Seleziona il nodo Main e aggiungi un nodo figlio DirectionalLight3D.

../../_images/create_directional_light3d.webp

Abbiamo bisogno di muovere e ruotare il nodo DirectionalLight3D. Spostalo verso l'alto cliccando e trascinando la freccia verde del manipolatore e clicca e trascina l'arco rosso per ruotarlo attorno all'asse X, fino a illuminare il pavimento.

Nell'Ispettore, attiva Shadow -> Enabled cliccando sulla casella di spunta.

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

A questo punto, il tuo progetto dovrebbe assomigliare a questo.

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

Questo è il nostro punto di partenza. Nella prossima parte, lavoreremo sulla scena del giocatore e il movimento di base.