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.

Introduzione al 2D

Gli strumenti di sviluppo di giochi 2D di Godot includono un motore di rendering 2D dedicato, un sistema di fisica e funzionalità specificamente progettate per la creazione di esperienze 2D. È possibile progettare livelli efficientemente con il sistema TileMap, animare i personaggi con sprite 2D o animazioni Cutout e sfruttare l'illuminazione 2D per illuminare dinamicamente le scene. Il sistema di particelle 2D integrato consente di creare effetti visivi complessi e Godot supporta anche shader personalizzati per migliorare la grafica. Queste funzionalità, insieme all'accessibilità e alla flessibilità di Godot, forniscono una solida base per creare giochi 2D coinvolgenti.

../../_images/2d_platformer_demo.webp

Demo del gioco piattaforme 2D disponibile nella libreria dei contenuti.

This page will show you the 2D workspace and how you can get to know it.

Suggerimento

Se desideri un'introduzione al 3D, consulta Introduzione al 3D.

Spazio di lavoro 2D

Utilizzerai lo spazio di lavoro 2D per lavorare con scene 2D, progettare livelli o creare interfacce utente. Per passare allo spazio di lavoro 2D, puoi selezionare un nodo 2D dall'albero di scene o utilizzare il selettore dell'area di lavoro situato sul bordo superiore dell'editor:

../../_images/2d_editor_viewport.webp

Similmente al 3D, puoi usare le schede sotto il selettore dell'area di lavoro per passare da una scena all'altra o crearne una nuova tramite il pulsante più (+). I pannelli sinistri e destri dovrebbero esserti familiari da introduzione all'editor.

Sotto il selettore di scene si trova la barra degli strumenti principale, e sotto di essa si trova la viewport 2D.

È possibile trascinare e rilasciare nodi compatibili dal pannello FileSystem per aggiungerli alla viewport come nodi. Ciò aggiunge il nodo trascinato come fratello del nodo selezionato (se il nodo radice è selezionato, lo aggiunge come figlio). Tenendo premuto Maiusc durante il rilascio, il nodo viene aggiunto come figlio del nodo selezionato. Tenendo premuto Alt durante il rilascio, il nodo viene aggiunto come figlio del nodo radice. Se si tiene premuto Alt + Maiusc durante il rilascio, è possibile selezionare il tipo di nodo, se applicabile.

Barra degli strumenti principale

Alcuni pulsanti nella barra degli strumenti principale sono gli stessi dello spazio di lavoro 3D. Una breve spiegazione viene fornita insieme alla scorciatoia da tastiera se il cursore del mouse si trova su un pulsante per un secondo. Alcuni pulsanti possono avere funzionalità aggiuntive se si preme un altro tasto. Di seguito è riportato un riepilogo delle funzionalità principali di ciascun pulsante con la relativa scorciatoia predefinita, da sinistra a destra:

../../_images/2d_toolbar.webp
  • Select Mode (Q): Allows selection of nodes in the viewport. Left clicking on a node in the viewport selects it. Left clicking and dragging a rectangle selects all nodes within the rectangle's boundaries, once released. Holding Shift while selecting adds more nodes to the selection. Clicking on a selected node while holding Shift deselects the node. In this mode, you can drag the selected node(s) to move, press Ctrl to switch to the rotation mode temporarily, or use the red circles to scale it. If multiple nodes are selected, only movement and rotation are possible. In this mode, rotation and scaling will not use the snapping options if snapping is enabled.

  • Modalità Spostamento (W): abilita la modalità spostamento (o traslazione) per i nodi selezionati. Consulta Viewport 2D per più dettagli.

  • Modalità Rotazione (E): abilita la modalità rotazione per i nodi selezionati. Consulta Viewport 2D per più dettagli.

  • Modalità Scala (S): abilita la modalità scala per i nodi selezionati. Consulta Viewport 2D per più dettagli.

  • Mostra una lista di nodi selezionabili nella posizione cliccata: come suggerisce la descrizione, questa opzione fornisce una lista di nodi selezionabili nella posizione cliccata, all'interno di un menu contestuale, se nell'area cliccata è presente più di un nodo.

  • Rotation pivot: Sets the rotation pivot to rotate node(s) around. An added node has its rotation pivot at x: 0, y: 0, by default, with exceptions. For example, the default pivot for a Sprite2D is its center if the centered property is set to true. If you would like to change the rotation pivot of a node, click this button and choose a new location by left clicking. The node rotates considering this point. If you have multiple nodes selected, this icon will add a temporary pivot to be used commonly by all selected nodes. Pressing Shift and clicking this button will create the pivot at the center of selected nodes. If any of the snap options are enabled, the pivot will also snap to them when dragged.

  • Modalità Navigazione (G): consente di navigare nella viewport senza selezionare accidentalmente alcun nodo. In altre modalità, è anche possibile tenere premuto Spazio e trascinare con il pulsante sinistro del mouse per fare la stessa cosa.

  • Modalità Righello: Dopo averla abilitata, clicca sulla viewport per visualizzare le attuali coordinate globali x e y. Trascinando da una posizione all'altra, la distanza viene misurata in pixel. Trascinando in diagonale, verrà disegnato un triangolo che mostra le distanze separate in termini di x, y e la distanza totale dall'obiettivo, inclusi gli angoli rispetto agli assi in gradi. Il tasto R attiva il righello. Se lo scatto è abilitato, vengono visualizzate anche le misurazioni in termini di conteggio per la griglia:

../../_images/2d_ruler_with_snap.webp

Utilizzo del righello con lo scatto abilitato.

  • Usa lo scatto intelligente: Attiva/disattiva lo scatto intelligente per le modalità spostamento, rotazione e scala; e il perno di rotazione. Personalizzalo tramite il menu a tre punti accanto agli strumenti di scatto.

  • Usa lo scatto intelligente: Attiva/disattiva lo scatto intelligente per le modalità Spostamento, Rotazione e Scala, il perno di rotazione e il righello. Personalizzalo attraverso il menu a tre punti accanto agli strumenti di scatto.

È possibile personalizzare le impostazioni della griglia in modo che le modalità Spostamento, Rotazione, Scala, il righello e il perno di rotazione utilizzino lo scatto. Utilizza il menu a tre punti per questo:

../../_images/2d_snapping_options_menu.webp
  • Scatta la rotazione: attiva/disattiva lo scatto, utilizzando l'impostazione di rotazione configurata.

  • Scatta la scala: attiva/disattiva lo scatto, utilizzando l'impostazione di scala configurata.

  • Scatto relativo: attiva/disattiva l'utilizzo dello scatto in base ai valori di trasformazione attuali del nodo selezionato. Ad esempio, se le griglie sono impostate su 32x32 pixel e il nodo selezionato si trova in x: 1, y: 1, attivando questa opzione saranno temporaneamente spostate le griglie di x: 1, y: 1.

  • Scatto sui pixel: Attiva/disattiva l'utilizzo dei subpixel per lo scatto. Se abilitato, i valori di posizione saranno interi; disabilitandolo, il movimento dei subpixel sarà in valori decimali. Per la proprietà in fase di esecuzione, si consiglia di abilitare la proprietà Impostazioni del progetto > Rendering > 2D > Scatto per i nodi Node2D e Impostazioni Progetto > GUI > Generale > Scatta i nodi Control ai pixel per i nodi Control.

  • Scatto intelligente: fornisce una serie di opzioni per allinearsi a posizioni specifiche, se abilitate:

    • Snap to Parent: Snaps to parent's edges. For example, scaling a child control node while this is enabled will snap to the boundaries of the parent.

    • Snap to Node Anchor: Snaps to the node's anchor. For example, if anchors of a control node is positioned at different positions, enabling this will snap to the sides and corners of the anchor.

    • Snap to Node Sides: Snaps to the node's sides, such as for the rotation pivot or anchor positioning.

    • Snap to Node Center: Snaps to the node's center, such as for the rotation pivot or anchor positioning.

    • Snap to Other Nodes: Snaps to other nodes while moving or scaling. Useful to align nodes in the editor.

    • Snap to Guides: Snaps to custom guides drawn using the horizontal or vertical ruler. More on the ruler and guides below.

../../_images/2d_snapping_options.webp
  • Configura scatto: apre la finestra mostrata sopra, offrendo una serie di parametri di scatto.

    • Scostamento della griglia: consente di spostare le griglie rispetto all'origine. x e y si possono regolare separatamente.

    • Passo della griglia: la distanza tra ciascuna griglia in pixel. x e y si possono regolare separatamente.

    • Linea primaria ogni: il numero di griglie intermedie per disegnare linee infinite come indicazione delle linee primarie.

    • Offset della rotazione: imposta l'offset per spostare lo scatto rotazionale.

    • Passo della rotazione: definisce i gradi di scatto. Ad esempio, 15 significa che il nodo ruoterà e scatterà a multipli di 15 gradi se lo scatto della rotazione è abilitato e la modalità Rotazione viene utilizzata.

    • Passo della scala: determina il fattore di incremento della scala. Ad esempio, se è 0,1, la scala verrà modificata con incrementi di 0,1 se lo scatto della scala è abilitato e la modalità Scala viene utilizzata.

  • Blocca nodo(i) selezionato(i) (Ctrl + L). Blocca i nodi selezionati, impedendone la selezione e lo spostamento nella vliewport. Cliccando nuovamente sul pulsante (o premendo Ctrl + Maiusc + L) si sbloccano i nodi selezionati. I nodi bloccati si possono selezionare solo nell'albero di scene. Sono facilmente identificabili da un lucchetto accanto al nome del nodo nell'albero di scene. Anche cliccando su questo lucchetto si sbloccano i nodi.

  • Raggruppa nodo(i) selezionato(i) (Ctrl + G). Questo permette di selezionare il nodo radice se è selezionato uno qualsiasi dei nodi figlio. Premendo Ctrl + G i nodi vengono separati. Inoltre, cliccando sul pulsante di separazione nell'albero di scene si effettua la stessa azione.

  • Opzioni di scheletro: fornisce opzioni per lavorare con Skeleton2D e Bone2D.

    • Mostra ossa: alterna la visibilità delle ossa per il nodo selezionato.

    • Crea nodi Bone2D a partire da uno o più nodi: converte i nodi selezionati in Bone2D.

Vedi anche

Per saperne di più sugli scheletri, consulta Cutout animation.

  • Menu Vista: Fornisce opzioni per controllare la vista della viewport. Poiché le sue opzioni dipendono fortemente dalla viewport, è trattato nella sezione Viewport 2D.

Accanto al menu Vista, potrebbero essere visibili ulteriori pulsanti. Nell'immagine della barra degli strumenti all'inizio di questo capitolo, appare un ulteriore pulsante Sprite2D perché è selezionato uno Sprite2D. Questo menu fornisce alcune azioni rapide e strumenti per lavorare su un nodo o una selezione specifici. Ad esempio, mentre si disegna un poligono, fornisce pulsanti per aggiungere, modificare o rimuovere punti.

Sistema di coordinate

Nell'editor 2D, a differenza del 3D, ci sono solo due assi: x e y. Inoltre, l'angolo di visione è fisso.

Nella viewport, vedrai due linee di colori diversi che attraversano lo schermo all'infinito: rosso per l'asse x e verde per l'asse y. In Godot, verso destra e verso il basso sono direzioni positive. Il punto di intersezione di queste due linee è l'origine: x: 0, y: 0.

Una volta aggiunto, un nodo radice avrà la sua origine in questa posizione. Passando alle modalità Spostamento o Scala dopo aver selezionato un nodo, i gizmo saranno visualizzati nella posizione scostata del nodo. I gizmo punteranno alle direzioni positive degli assi x e y. In modalità Spostamento, è possibile trascinare la linea verde per spostare solo lungo l'asse y. Similmente, è possibile tenere premuta la linea rossa per spostare solo lungo l'asse x.

In modalità Scala, i gizmo avranno una forma quadrata. È possibile tenere premuti e trascinare i quadrati verdi e rossi per ridimensionare i nodi lungo gli assi y o x. Trascinando in una direzione negativa, il nodo viene invertito orizzontalmente o verticalmente.

Viewport 2D

La viewport sarà l'area su cui trascorrerai la maggior parte del tempo se intendi progettare livelli o interfacce utente visivamente:

../../_images/2d_editor_viewport_with_viewmenu.webp

Cliccando con il pulsante centrale del mouse e trascinando, è possibile spostare la vista. Anche le barre di scorrimento a destra o in basso nella viewport consentono di spostare la vista. In alternativa, è possibile premere i tasti G o Spazio. Abilitando Impostazioni editor > Editor > Panoramica > Panoramica semplice, è possibile attivare la panoramica direttamente con Spazio, senza dover trascinare.

La viewport ha dei pulsanti in alto a sinistra. Centra vista centra i nodi selezionati sullo schermo. Utile se si ha una grande scena con molti nodi e si desidera visualizzare il nodo selezionato nell'albero di scene. Accanto si trovano i controlli dello zoom. - rimpicciolisce, + ingrandisce e cliccando sul numero con la percentuale si ritorna a 100%. In alternativa, è possibile scorrere con la rotellina del mouse per ingrandire (scorrere verso l'alto) e ridurre (scorrere verso il basso).

Le barre nere sui bordi sinistro e superiore della viewport sono i righelli. Si possono usare per orientarsi nella viewport. Normalmente, i righelli mostrano le coordinate in pixel della viewport, numerate con incrementi di 100 pixel. Modificando il fattore di zoom, i valori visualizzati cambieranno. Abilitando Scatto sulla griglia o modificando le opzioni di scatto, la scala del righello e i valori visualizzati verranno aggiornati.

È possibile anche creare varie linee guida personalizzate per aiutare a misurare o ad allineare i nodi con esse:

../../_images/2d_editor_guidelines.webp

Se nella scena c'è almeno un nodo, è possibile creare varie guide trascinando dal righello orizzontale o verticale verso la viewport. Apparirà una guida viola che ne indicherà la posizione e rimarrà lì al rilascio del mouse. È possibile creare contemporaneamente guide orizzontali e verticali trascinando partendo dal quadrato grigio nell'intersezione tra i righelli. Le guide si possono riposizionare trascinandole nuovamente sui rispettivi righelli e si possono rimuovere trascinandole completamente indietro fino al righello.

È anche possibile abilitare lo scatto alle guide create tramite il menu Scatto intelligente.

Nota

Se non si riesce a creare una linea o non si vedono le guide create in precedenza, assicurarsi che siano visibili selezionando il menu Vista della viewport. Y ne alterna la visibilità, come predefinito. Assicurarsi inoltre di avere almeno un nodo nella scena.

A seconda dello strumento scelto nella barra degli strumenti, il clic sinistro avrà un'azione primaria nella viewport. Ad esempio, la Modalità Selezione selezionerà il nodo cliccato con il pulsante sinistro nella viewport. A volte, il clic sinistro può essere combinato con un modificatore (ad esempio, Ctrl o Maiusc) per effettuare azioni secondarie. Ad esempio, tenendo premuto Maiusc durante il trascinamento di un nodo in modalità Selezione o Spostamento, il nodo cercherà di allinearsi a un singolo asse durante lo spostamento.

Facendo clic destro nella viewport sono disponibili due opzioni per creare un nodo o istanziare una scena nella posizione scelta. Se è selezionato almeno un nodo, facendo clic destro fornisce anche l'opzione di spostare i nodi selezionati in questa posizione.

La viewport ha un menu Vista che fornisce numerose opzioni per cambiare l'aspetto della viewport:

  • Griglia: consente di mostrare le griglie sempre, solo quando si utilizza lo scatto o di non mostrarle affatto. È anche possibile attivarle o disattivarle con l'opzione fornita.

  • Mostra aiuti: alterna la visualizzazione temporanea di un contorno del nodo, con le proprietà di trasformazione precedenti (posizione, scala o rotazione) se è stata avviata un'operazione di trasformazione. Per i nodi di tipo Control, mostra anche i parametri di dimensionamento. Utile per visualizzare i delta.

  • Mostra righelli: alterna la visibilità dei righelli orizzontali e verticali. Consultare Viewport 2D per ulteriori informazioni sui righelli.

  • Mostra guide: alterna la visibilità delle guide create. Consultare Viewport 2D per informazioni su come crearle.

  • Mostra origine: alterna la visualizzazione delle linee di origine verde e rossa disegnate in x: 0, y: 0.

  • Mostra viewport: alterna la visibilità della viewport predefinita del gioco, indicata da un rettangolo color indaco. È anche la dimensione predefinita della finestra sulle piattaforme desktop, che può essere modificata andando in Impostazioni del progetto > Schermo > Finestra > Dimensioni e impostando Larghezza della viewport e Altezza della viewport.

  • Gizmo: alterna la visibilità degli indicatori di Posizione (mostrato con l'icona a forma di croce), Blocco (mostrato con un lucchetto), Gruppi (mostrato con due quadrati) e Trasformazione (mostrato con linee verdi e rosse).

  • Centra sulla selezione: uguale al pulsante Centra vista all'interno della viewport. Centra i nodi selezionati nella vista. F è la scorciatoia predefinita.

  • Inquadra sulla selezione: simile a Centra sulla selezione, ma modifica anche il fattore di zoom per adattare il contenuto allo schermo. Maiusc + F è la scorciatoia predefinita.

  • Cancella guide: elimina tutte le guide dallo schermo. Sarà necessario ricrearle se si pensa averne bisogno in seguito.

  • Anteprima dimensioni di canvas: alterna l'anteprima del ridimensionamento di canvas nell'editor quando cambia il fattore di zoom o la vista della viewport. Utile per vedere come appariranno i controlli dopo il ridimensionamento e lo spostamento, senza dover avviare il gioco.

  • Anteprima di tema: consente di scegliere tra i temi disponibili per modificare l'aspetto degli elementi di controllo nell'editor, senza dover eseguire il gioco.

Nodo Node2D e Control

CanvasItem è il nodo base per il 2D. Node2D è il nodo base per gli oggetti di gioco 2D e Control è il nodo base per tutto quel che riguarda l'interfaccia utente grafica. Per il 3D, Godot utilizza il nodo Node3D.

Displaying 3D nodes in 2D

It is possible to display 3D nodes in a 2D scene by using a SubViewport. You can see this in the demo 3D in 2D Viewport.

../../_images/3d_in_2d_demo_editor.webp