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.
Checking the stable version of the documentation...
Animazione di sprite 2D
Introduzione
In questo tutorial imparerai come creare personaggi animati 2D con la classe AnimatedSprite2D e AnimationPlayer. In genere, quando crei o scarichi un personaggio animato, questo è fornito in uno di due modi: come immagini individuali o come un singolo spritesheet contenente tutti i fotogrammi dell'animazione. È possibile animare entrambi in Godot con la classe AnimatedSprite2D.
Innanzitutto, useremo AnimatedSprite2D per animare una raccolta di immagini individuali. Poi animeremo uno spritesheet utilizzando questa classe. Infine, impareremo un altro modo per animare uno spritesheet con AnimationPlayer e la proprietà Animation di Sprite2D.
Nota
Arte per gli esempi seguenti da https://opengameart.org/users/ansimuz e tgfcoder.
Immagini individuali con AnimatedSprite2D
In questo scenario, hai una raccolta di immagini, ognuna contenente un fotogramma dell'animazione del tuo personaggio. Per questo esempio, useremo la seguente animazione:
È possibile scaricare le immagini qui: 2d_sprite_animation_assets.zip
Decomprimi le immagini e posizionale nella cartella del tuo progetto. Configura l'albero di scene con i seguenti nodi:
Nota
Il nodo radice potrebbe anche essere Area2D o RigidBody2D. L'animazione sarà comunque creata allo stesso modo. Una volta completata l'animazione, è possibile assegnare una forma al CollisionShape2D. Consulta Introduzione alla fisica per ulteriori informazioni.
Ora seleziona l'AnimatedSprite2D e nella sua proprietà SpriteFrames, seleziona "Nuovo SpriteFrames".
Clicca sulla nuova risorsa SpriteFrames e vedrai apparire un nuovo pannello in basso la finestra dell'editor:
Dal pannello FileSystem a sinistra, trascina le 8 immagini individuali nella parte centrale del pannello SpriteFrames. Nel lato sinistro, cambia il nome dell'animazione da "default" a "run".
Utilizza i pulsanti "Play" in alto a destra del campo Filtra animazioni per visualizzare un'anteprima dell'animazione. Ora dovresti vedere l'animazione in riproduzione nella viewport. Tuttavia, è un po' lenta. Per risolvere, modifica l'impostazione Velocità (FPS) nel pannello SpriteFrames impostandola su 10.
Puoi aggiungere più animazioni cliccando sul pulsante "Aggiungi animazione" e inserendo altre immagini.
Controllare l'animazione
Una volta completata l'animazione, è possibile controllarla tramite codice tramite i metodi play() e stop(). Ecco un breve esempio per riprodurre l'animazione mentre si tiene premuto il tasto freccia destra, e interromperla quando il tasto viene rilasciato.
extends CharacterBody2D
@onready var _animated_sprite = $AnimatedSprite2D
func _process(_delta):
if Input.is_action_pressed("ui_right"):
_animated_sprite.play("run")
else:
_animated_sprite.stop()
using Godot;
public partial class Character : CharacterBody2D
{
private AnimatedSprite2D _animatedSprite;
public override void _Ready()
{
_animatedSprite = GetNode<AnimatedSprite2D>("AnimatedSprite2D");
}
public override void _Process(double delta)
{
if (Input.IsActionPressed("ui_right"))
{
_animatedSprite.Play("run");
}
else
{
_animatedSprite.Stop();
}
}
}
Sprite sheet with AnimatedSprite2D
You can also easily animate from a sprite sheet with the class AnimatedSprite2D.
We will use this public domain sprite sheet:
Fai clic destro sull'immagine e scegli "Salva immagine con nome" per scaricarla, quindi copia l'immagine nella cartella del tuo progetto.
Configura l'albero di scene nello stesso modo in cui hai fatto prima quando utilizzavi immagini individuali. Seleziona l'AnimatedSprite2D e nella sua proprietà SpriteFrames, seleziona "Nuovo SpriteFrames".
Clicca sulla nuova risorsa SpriteFrames. Questa volta, quando appare il pannello inferiore, seleziona "Aggiungi fotogrammi da uno spritesheet".
Ti verrà chiesto di aprire un file. Seleziona il tuo spritesheet.
Si aprirà una nuova finestra che mostrerà il tuo spritesheet. La prima cosa da fare è modificare il numero di immagini verticali e orizzontali nello spritesheet. In questo spritesheet, abbiamo quattro immagini in orizzontale e due in verticale.
Successivamente, seleziona i fotogrammi dallo spritesheet che desideri includere nella tua animazione. Selezioneremo i primi quattro, quindi clicca su "Aggiungi 4 fotogrammi" per creare l'animazione.
Ora vedrai la tua animazione nell'elenco delle animazioni nel pannello inferiore. Fai doppio clic su "default" per cambiare il nome dell'animazione in "jump".
Infine, clicca sul pulsante "play" nell'editor di SpriteFrames per vedere la tua rana saltare!
Sprite sheet with AnimationPlayer
Un altro modo per animare quando si utilizza uno spritesheet è quello di usare un nodo Sprite2D regolare per visualizzare la texture, e poi animare il passaggio da una texture all'altra con AnimationPlayer.
Considera questo spritesheet, che contiene 6 fotogrammi di animazione:
Fai clic destro sull'immagine e scegli "Salva immagine con nome" per scaricarla, quindi copia l'immagine nella cartella del tuo progetto.
Il nostro obiettivo è mostrare queste immagini una dopo l'altra in un ciclo continuo. Comincia configurando l'albero di scene:
Nota
Il nodo radice potrebbe anche essere Area2D o RigidBody2D. L'animazione sarà comunque creata allo stesso modo. Una volta completata l'animazione, è possibile assegnare una forma al CollisionShape2D. Consulta Introduzione alla fisica per ulteriori informazioni.
Trascina lo spritesheet nella proprietà Texture dello Sprite e vedrai l'intero spritesheet visualizzato sullo schermo. Per dividerlo in singoli fotogrammi, espandi la sezione Animation nell'Ispettore e imposta Hframes su 6. Hframes e Vframes rappresentano il numero di fotogrammi orizzontali e verticali dello spritesheet.
Ora prova a cambiare il valore della proprietà Frame. Vedrai che varia da 0 a 5 e l'immagine visualizzata da Sprite2D cambia di conseguenza. Questa è la proprietà che animeremo.
Seleziona l'AnimationPlayer e clicca sul pulsante "Animation" seguito da "Nuova". Dai alla nuova animazione il nome "walk". Imposta la durata dell'animazione su 0.6 e clicca sul pulsante "Loop" cosiché l'animazione si ripeta.
Ora seleziona il nodo Sprite2D e clicca sull'icona della chiave per aggiungere una nuova traccia.
Continua ad aggiungere fotogrammi in ogni punto della timeline (0.1 secondi come predefinito), finché non avrai tutti i fotogrammi da 0 a 5. Vedrai i fotogrammi apparire nella traccia di animazione:
Premi "Play" sull'animazione per vedere com'è.
Controllare un'animazione dell'AnimationPlayer
Come con AnimatedSprite2D, è possibile controllare l'animazione tramite codice attraverso i metodi play() e stop(). Di nuovo, ecco un esempio per riprodurre l'animazione mentre si tiene premuto il tasto freccia destra, e interromperla quando il tasto viene rilasciato.
extends CharacterBody2D
@onready var _animation_player = $AnimationPlayer
func _process(_delta):
if Input.is_action_pressed("ui_right"):
_animation_player.play("walk")
else:
_animation_player.stop()
using Godot;
public partial class Character : CharacterBody2D
{
private AnimationPlayer _animationPlayer;
public override void _Ready()
{
_animationPlayer = GetNode<AnimationPlayer>("AnimationPlayer");
}
public override void _Process(double delta)
{
if (Input.IsActionPressed("ui_right"))
{
_animationPlayer.Play("walk");
}
else
{
_animationPlayer.Stop();
}
}
}
Nota
Se si aggiornano un'animazione e una proprietà separata allo stesso tempo (ad esempio, un gioco piattaforme potrebbe aggiornare le proprietà h_flip/v_flip dello sprite quando un personaggio si gira mentre comincia un'animazione di "rotazione"), è importante tenere presente che play() non è applicato istantaneamente. È invece applicato la prossima volta che l'AnimationPlayer è elaborato. Questo potrebbe accadere nel frame successivo, causando un fotogramma "errato", in cui la modifica alla proprietà è stata applicata, ma l'animazione no. Se questo si rivela un problema, dopo aver chiamato play(), è possibile chiamare advance(0) per aggiornare immediatamente l'animazione.
Riepilogo
Questi esempi illustrano le due classi che puoi utilizzare in Godot per l'animazione 2D. AnimationPlayer è un po' più complesso di AnimatedSprite2D, ma offre funzionalità aggiuntive, poiché permette di animare anche altre proprietà come la posizione o la scala. La classe AnimationPlayer si può utilizzare anche con un AnimatedSprite2D. Sperimenta per vedere quale soluzione funziona meglio per le tue esigenze.