Sprite

Un componente sprite è una semplice immagine o un’animazione a fotogrammi (flipbook) visualizzata sullo schermo.

Il componente sprite può usare un atlas o una sorgente di tile (Tile Source) per la propria grafica.

Proprietà dello sprite

Oltre alle proprietà Id, Position e Rotation, sono disponibili le seguenti proprietà specifiche del componente:

Image

Se lo shader ha un solo campionatore, questo campo si chiama Image. Altrimenti, ogni slot prende il nome del campionatore di texture nel materiale. Ogni slot specifica la risorsa atlas o sorgente di tile da usare per lo sprite con quel campionatore di texture.

Default Animation

L’animazione da usare per lo sprite. Le informazioni sull’animazione vengono ricavate dal primo atlas o dalla prima sorgente di tile.

Material

Il materiale da usare per il rendering dello sprite.

Blend Mode

La modalità di fusione da usare per il rendering dello sprite.

Size Mode

Se impostata su Automatic, l’editor determina le dimensioni dello sprite. Se impostata su Manual, puoi impostarle tu.

Slice 9

Imposta questa proprietà per preservare le dimensioni in pixel della texture dello sprite lungo i bordi quando lo sprite viene ridimensionato.

Applicazione di texture con slice-9

I nodi GUI di tipo box e i componenti sprite a volte includono elementi le cui dimensioni dipendono dal contesto: pannelli e finestre di dialogo da ridimensionare per adattarli al contenuto, oppure una barra della salute da ridimensionare per mostrare la salute rimanente di un nemico. L’applicazione di texture al nodo o allo sprite ridimensionato può causare problemi visivi.

Normalmente, il motore ridimensiona la texture per adattarla ai limiti rettangolari, ma definendo le aree dei bordi con slice-9 è possibile limitare le parti della texture da ridimensionare:

La proprietà Slice9 del nodo box è composta da 4 numeri che specificano il numero di pixel dei margini sinistro, superiore, destro e inferiore da escludere dal normale ridimensionamento:

I margini vengono impostati in senso orario, a partire dal bordo sinistro:

• I segmenti agli angoli non vengono mai ridimensionati.
• I segmenti dei bordi vengono ridimensionati lungo un solo asse. I segmenti dei bordi sinistro e destro vengono ridimensionati verticalmente. I segmenti dei bordi superiore e inferiore vengono ridimensionati orizzontalmente.
• L’area centrale della texture viene ridimensionata orizzontalmente e verticalmente secondo necessità.

Il ridimensionamento della texture con Slice9 descritto sopra viene applicato solo quando modifichi le dimensioni del nodo box o dello sprite:

Mipmap e slice-9

Per il modo in cui il mipmapping funziona nel renderer, il ridimensionamento dei segmenti della texture può talvolta produrre artefatti. Questo accade quando riduci i segmenti al di sotto delle dimensioni originali della texture. Il renderer seleziona quindi una mipmap a risoluzione inferiore per il segmento, causando artefatti visivi.

Per evitare questo problema, assicurati che i segmenti della texture da ridimensionare siano abbastanza piccoli da dover essere soltanto ingranditi, mai ridotti.

Modalità di fusione

La proprietà Blend Mode definisce come la grafica del componente viene fusa con la grafica sottostante. Queste sono le modalità di fusione disponibili e il modo in cui vengono calcolate:

Alpha

Fusione normale: src.a * src.rgb + (1 - src.a) * dst.rgb

Add

Schiarisce lo sfondo con i valori di colore dei pixel corrispondenti del componente: src.rgb + dst.rgb

Multiply

Scurisce lo sfondo con i valori dei pixel corrispondenti del componente: src.rgb * dst.rgb

Screen

Opposto di Multiply. Schiarisce lo sfondo e i valori dei pixel corrispondenti del componente: src.rgb - dst.rgb * dst.rgb

Modifiche a runtime

Puoi modificare gli sprite durante l’esecuzione tramite varie funzioni e proprietà (consulta la documentazione API per l’utilizzo). Funzioni:

• sprite.play_flipbook() - Riproduce un’animazione su un componente sprite.
• sprite.set_hflip() e sprite.set_vflip() - Impostano il ribaltamento orizzontale e verticale dell’animazione di uno sprite.

Uno sprite ha anche diverse proprietà che puoi modificare con go.get() e go.set():

cursor

Il cursore normalizzato dell’animazione (number).

image

L’immagine dello sprite (hash). Puoi cambiarla usando una proprietà di risorsa di tipo atlas o sorgente di tile e go.set(). Consulta il riferimento API per un esempio.

material

Il materiale dello sprite (hash). Puoi cambiarlo usando una proprietà di risorsa di tipo materiale e go.set(). Consulta il riferimento API per un esempio.

playback_rate

La velocità di riproduzione dell’animazione (number).

scale

La scala non uniforme dello sprite (vector3).

size

Le dimensioni dello sprite (vector3). Puoi modificarle solo se la proprietà Size Mode dello sprite è impostata su Manual.

Costanti del materiale

Il materiale predefinito del componente sprite ha le seguenti costanti, che puoi modificare con go.set() o go.animate() (consulta il manuale sui materiali per maggiori dettagli). Esempi:

go.set("#sprite", "tint", vmath.vector4(1,0,0,1))
go.animate("#sprite", "tint", go.PLAYBACK_LOOP_PINGPONG, vmath.vector4(1,0,0,1), go.EASING_LINEAR, 2)

tint

La tinta dello sprite (vector4). Il vector4 rappresenta la tinta: x, y, z e w corrispondono rispettivamente ai componenti rosso, verde, blu e alfa.

Attributi del materiale

Uno sprite può sovrascrivere gli attributi dei vertici del materiale attualmente assegnato, che il componente passa al vertex shader (consulta il manuale sui materiali per maggiori dettagli).

Gli attributi specificati nel materiale vengono visualizzati come normali proprietà nell’ispettore e possono essere impostati sui singoli componenti sprite. Se un attributo viene sovrascritto, viene visualizzato come una proprietà sovrascritta e salvato nel file dello sprite su disco:

Configurazione del progetto

Il file game.project contiene alcune impostazioni del progetto relative agli sprite.

Sprite con più texture

Quando uno sprite usa più texture, ci sono alcuni aspetti da considerare.

Animazioni

I dati dell’animazione (fps, nomi dei fotogrammi) vengono attualmente ricavati dalla prima texture. La chiameremo “animazione guida”.

Gli ID delle immagini dell’animazione guida vengono usati per cercare le immagini in un’altra texture. È quindi importante assicurarsi che gli ID dei fotogrammi corrispondano tra le texture.

Per esempio, se diffuse.atlas contiene un’animazione run come questa:

run:
    /main/images/hero_run_color_1.png
    /main/images/hero_run_color_2.png
    ...

Gli ID dei fotogrammi sarebbero quindi del tipo run/hero_run_color_1, che difficilmente si troverebbe, per esempio, in un normal.atlas:

run:
    /main/images/hero_run_normal_1.png
    /main/images/hero_run_normal_2.png
    ...

Per rinominarli usiamo quindi Rename patterns nell’atlas. Imposta _color= e _normal= nei rispettivi atlas e otterrai nomi dei fotogrammi come questi in entrambi gli atlas:

run/hero_run_1
run/hero_run_2
...

Coordinate UV

Le coordinate UV vengono ricavate dalla prima texture. Poiché esiste un solo insieme di vertici, non possiamo garantire una buona corrispondenza se le texture secondarie hanno più coordinate UV o una forma diversa.

È importante tenerne conto: assicurati che le immagini abbiano forme sufficientemente simili, altrimenti potresti riscontrare artefatti di contaminazione dei bordi delle texture.

Le dimensioni delle immagini in ciascuna texture possono essere diverse.