Il componente Sprite Sheet

Questo componente non è supportato per gli annunci HTML AMP, gli annunci video o gli annunci illustrati.

Puoi usare il componente Sprite Sheet per creare animazioni sprite o per mostrare singoli sprite di immagini separati usando un solo file di origine con immagini.

  

Uno sprite sheet con 8 sprite usati per creare un'animazione. Ogni sprite può anche essere visualizzato da solo e non all'interno di un'animazione.

Per aggiungere il componente Sprite Sheet al tuo progetto:

1. Apri il riquadro Componenti, quindi la cartella Elementi grafici ed effetti.
2. Trascina il componente Sprite Sheet sullo stage.
3. Nella sezione di proprietà Sprite Sheet del riquadro Proprietà, inserisci nel campo Origine l'URL del file di immagini dello sprite sheet. Se il file di origine è memorizzato in locale, fai clic sul pulsante Sfoglia nel campo per selezionare il file dal file system del computer.
4. Inserisci i valori X Offset, Y Offset, Larghezza frame e Altezza frame dello sprite specifico che vuoi visualizzare. Se devi creare un'animazione, questo sprite verrà mostrato nel primo frame dell'animazione.
5. A seconda dell'utilizzo dello sprite sheet, segui i passaggi per visualizzare altri sprite o creare un'animazione sprite.

   Per visualizzare altri sprite:

   1. Aggiungi un altro componente Sprite Sheet.
   2. Configura il nuovo componente usando la stessa origine, ma con gli offset e le dimensioni del frame dello sprite che vuoi visualizzare in questo componente.

   Per creare un'animazione sprite:

   1. Espandi la sezione Proprietà avanzate del riquadro Proprietà del componente Sprite Sheet.
   2. Inserisci il valore Number of frames (Numero di frame) da usare per l'animazione. Il componente visualizza uno sprite per frame e presuppone che tutti gli sprite siano delle stesse dimensioni.
   3. Seleziona la casella Riproduzione automatica se vuoi che la riproduzione dell'animazione inizi automaticamente. Puoi anche attivare l'animazione configurando un evento con le azioni Riproduci o Attivazione/disattivazione animazione del componente Sprite Sheet (descritte di seguito).

Proprietà

Proprietà	Descrizione
Nome	Il nome del componente.
Origine	L'URL dell'immagine usata come sprite sheet. Associabile a dati dinamici.
X Offset	L'offset, in pixel, dal bordo sinistro dello sprite sheet allo sprite.
Y Offset	L'offset, in pixel, dal bordo superiore dello sprite sheet allo sprite.
Larghezza frame	La larghezza, in pixel, dello sprite.
Altezza frame	L'altezza, in pixel, dello sprite.
Allineamento	La posizione dello sprite all'interno del componente: center (al centro) bottom (in basso) bottom left (in basso a sinistra) bottom right (in basso a destra) left (a sinistra) right (a destra) top (in alto) top left (in alto a sinistra) top right (in alto a destra)
Ridimensiona	Come visualizzare gli sprite di dimensioni diverse rispetto al componente: Ridimensiona immagine per adattarla Ritaglia immagine per riempire lo spazio Nessuno Estendi immagine per riempire lo spazio

Proprietà avanzate

Usa le proprietà avanzate per configurare un'animazione sprite. Fai clic sull'icona Espandi accanto a Proprietà avanzate nel riquadro delle proprietà del componente per modificare le seguenti proprietà:

Proprietà	Descrizione
Number of Frames	Il numero di frame che compongono l'animazione. Se inserisci un numero superiore al numero di sprite presenti nello sprite sheet, verranno inseriti frame vuoti alla fine dell'animazione.
Duration	La durata, in millisecondi, di ogni frame.
Number of Loops	Il numero di ripetizioni dell'animazione. Imposta il valore 0 se vuoi ripetere continuamente l'animazione.
Riproduzione automatica	Se selezioni questa proprietà, l'animazione viene riprodotta automaticamente.
End on frame one	Se selezioni questa proprietà, l'animazione termina una volta raggiunto il primo frame dopo l'ultimo loop.
Reverse (Inverti)	Se selezioni questa proprietà, l'animazione viene riprodotta in senso inverso.

Eventi e azioni

Eventi inviati dal componente Sprite Sheet

Puoi attivare altre azioni basate sui seguenti eventi del componente Sprite Sheet:

Evento	Descrizione
In pausa	Inviato quando l'animazione è in pausa.
Terminato	Inviato al termine dell'animazione.
Riproduzione avviata	Inviato all'avvio della riproduzione dell'animazione.
Riproduzione ripetuta	Inviato quando l'animazione viene riavviata.

Per selezionare uno di questi eventi nella finestra di dialogo Evento, imposta il componente Sprite Sheet come target.

Azioni eseguite dal componente Sprite Sheet

Le seguenti azioni del componente Sprite Sheet possono essere attivate in risposta ad altri eventi:

Azione	Opzioni di configurazione
Crea nuova animazione	X Offset: l'offset, in pixel, dal lato sinistro dello sprite sheet allo sprite. Y Offset: l'offset, in pixel, dalla parte superiore dello sprite sheet allo sprite. Larghezza frame: la larghezza, in pixel, dello sprite. Altezza frame: l'altezza, in pixel, dello sprite. Frames: il numero di frame che compongono l'animazione. Duration: la durata, in millisecondi, di ogni frame. Loops: il numero di ripetizioni dell'animazione. Imposta 0 per ripetere continuamente l'animazione. Riproduzione automatica: se selezioni questa opzione, l'animazione viene riprodotta automaticamente. Reverse (Inverti): se selezioni questa opzione, l'animazione viene riprodotta in senso inverso.
Riproduci	Avvia l'animazione dal punto corrente in cui è stata interrotta o messa in pausa.
Pausa	Mette in pausa l'animazione corrente.
Attivazione/disattivazione animazione	Mette in pausa o riprende l'animazione.
Ripeti	Avvia l'animazione dal primo frame.
Indietro	Mostra il frame precedente nella serie.
Avanti	Mostra il frame successivo nella serie.
Vai a frame	Mostra il frame specificato.

Se selezioni una di queste azioni nella finestra di dialogo Evento, imposta il componente Sprite Sheet come destinatario.

Scopri come configurare gli eventi.

Anteprima

Dopo aver specificato origine, offset e dimensioni dei frame, in Google Web Designer viene mostrata un'anteprima statica del componente Sprite Sheet sullo stage in modo che tu possa verificare di aver specificato correttamente lo sprite.

Non è possibile visualizzare l'anteprima delle animazioni sprite nell'interfaccia di Web Designer. Per controllare la riproduzione di un'animazione sprite, visualizza l'anteprima del documento nel tuo browser preferito facendo clic sul pulsante Anteprima nell'angolo in alto a destra.