Stardust engine: generatore di particelle in Flash

Uno dei fenomeni più interessanti del mondo Flash è costituito dal numero di progetti disponibili liberamente. Alcuni di questi progetti sono diventati dei veri e propri capisaldi, basti pensare a Papervision3D e al successo che ha riscosso.

Recentemente stanno nascendo diversi progetti di "motori di particelle" (particle engine), che grazie anche alle performance garantite da Actionscript 3 e dal Flash Player 10, sono decisamente più realizzabili.

Un motore di particelle infatti è un sistema in grado di generare forme ed elementi partendo da uno o più emettitori, questi elementi possono poi interagire tra loro o con l'ambiente circostante simulando ad esempio vento, gravità e altri parametri.

L'uso più frequente delle particelle avviene probabilmente nel campo dell'editing video, After Effects ad esempio include un motore di rendering di particelle, ed esistono estensioni dedicate esclusivamente a questo compito; anche per questo i primi motori di particelle per Flash sono stati definiti una sorta di "punto di incontro" tra i due software di casa Adobe.

Sistemi di particelle

Un motore di particelle serve a gestire un "sistema di particelle", (particle system) che viene definito come:
«una tecnica usata nella computer grafica per simulare effetti che sarebbe complesso riprodurre con le tecniche di rendering tradizionale. [...] fuoco, esplosioni, fumo, acqua in movimento, foglie cadenti, nuvole, nebbia, neve, polvere, code di meteore, capelli, pellicce, erba o effetti visuali astratti come incantesimi e effetti di luce. Sebbene nella maggior parte dei casi i sistemi di particelle siano implementati in sistemi a tre dimensioni, vengono usati anche sistemi di particelle bidimensionali» (tradotto da Wikipedia).

Questi effetti solitamente sono creati sfruttando un vasto numero di elementi che hanno proprietà simili, ma non uguali. Per effetti come fuoco o fumo, può essere necessario istanziare molti oggetti e Actionscript 3 si presta molto meglio dei suoi predecessori a questo genere di creazioni grazie all'incremento di performance, in particolare nel player 10 (AS3 è supportato anche dal Flash Player 9).

Perchè usare un motore di particelle in Flash?

Uno degli ambiti più interessati a questi componenti quello dei giochi, tuttavia possiamo anche utilizzarli per arricchire un sito web o un semplice banner.

Un motore di particelle offre poi l'ovvio vantaggio di avere gli elementi già pronti all'uso: non sarà necessario creare da zero il proprio effetto ma sarà possibile usare un sistema già testato e versatile, risparmiando di conseguenza molto tempo e non ridisegnando tutto da zero.

Inoltre alcune librerie introducono effetti cinematici (gravità, vento, etc.) e gestiscono le collisioni tra gli oggetti. Possiamo quindi ottenere, in pochi passaggi, animazioni dal forte impatto che sarebbe molto impegnativo realizzare da zero.

Un motore di particelle in Flash: Stardust

In questo articolo proviamo Stardust (letteralmente polvere di stelle, nome decisamente appropriato!), realizzato in Actionscript 3 dal giovane Allen Chou (CJ Cat).

Il progetto è piuttosto giovane (la versione attuale è la 1.1, anche se è "l'erede" di Emitter, altro progetto dello stesso Chou, che era giunto alla versione 2.1) ma decisamente completo.

Non è l'unica libreria disponibile di questo genere, tuttavia offre un elenco ci feature decisamente interessante, è gratuita (si può fare una donazione all'autore), gli esempi sulla pagina Google Code del progetto

Vediamo allora come installare Stardust e come creare qualche piccolo esempio pratico.

Installare Stardust

Scarichiamo Stardust dal sito del progetto. L'ultima versione attualmente disponibile è la 1.1.132 Beta, per ogni package sono disponibili solitamente tre file: un RAR contenente gli esempi comprensivi di codice sorgente (Beta examples.rar), uno contenente l'engine con classi e documentazione (Beta.rar) e un SWC.

Nel file RAR dell'engine è disponibile anche un template per FlashDevelop, ottimo editor di cui abbiamo già parlato in passato.

Un'altra via per scaricare Stardust è connettersi al repository SVN del progetto, in questo modo avremo a disposizione sempre la versione più aggiornata, che tuttavia potrebbe risultare meno stabile rispetto a quelle disponibili nella sezione dei download, che sono invece le release ufficialmente stabili.

All'interno del file RAR che abbiamo scaricato, troviamo le cartelle:

• docs
• manual
• src

Nel nostro tutorial utilizzeremo FlashDevelop abbinato Flash CS4, senza tuttavia utilizzare i template di Stardust così da rendere i passaggi pratici più facili da seguire anche a chi volesse utilizzare il solo Flash.

Impostazione del progetto

Per semplicità utilizziamo una struttura molto semplice per il nostro progetto: creiamo una nuova cartella e al suo interno copiamo dal file RAR la cartella idv (che troviamo nella directory src). Inseriremo nella cartella del nostro progetto anche il nostro file FLA.

Aggiungiamo alla cartella del progetto la classe che useremo come "Document Class" e la chiamiamo Esempio_Stardust.as. Il codice all'inizio sarà il seguente:

Per verificare che le classi di Stardust vengano correttamente viste dal nostro file possiamo provare a importarne una, ad esempio così:

Se compilando il file non ci vengono segnalati errori, la struttura è corretta e possiamo iniziare a creare il nostro primo esperimento con Stardust, aspetto che affronteremo nella prossima parte.

Creare le particelle con Stardust

Nella prima parte dell'articolo abbiamo visto come impostare un progetto per utilizzare Stardust, ora è il momento di inserire le particelle nel nostro SWF!

Prima di iniziare la parte "pratica" è bene conoscere gli elementi che Stardust utilizza per generare le particelle; questi elementi sono in parte comuni per tutti i particle engine, tuttavia ogni motore può utilizzare sintassi e metodologie diverse, inoltre ovviamente ogni progetto ha delle caratteristiche esclusive e quindi non comuni a tutti i generatori di particelle. Da questo punto di vista Stardust è un progetto decisamente interessante poichè offre diverse classi, di seguito vediamo le principali e il loro scopo.

Elementi e classi principali di Stardust

Gli elementi principali di ogni sistema di particelle sono essenzialmente due: le particelle stesse (quindi il simbolo grafico che viene usato come fonte) e l'emettitore, ovvero l'elemento che si occupa di generare le varie particelle variandone eventualmente le proprietà.

Ogni particella ha un ciclo di vita, che inizia quando viene generata e si conclude quando viene eliminata. In questo intervallo la particella compie alcune azioni, le più comuni sono il movimento ed eventualmente la trasformazione (solitamente limitata alla dimensione, o in alcuni casi ad esempio al colore).

Per impostare queste operazioni Stardust utilizza diverse classi, ma gli elementi principali necessari per ogni proggetto sono tre:

Elemento	Descrizione
Clock	un oggetto che serve per impostare il numero di particelle da creare e la loro temporizzazione
Emitter	l'oggetto da cui verranno generate le particelle, quindi è importante disporlo nel punto in cui vogliamo far iniziare il nostro effetto
Renderer	è la classe che si occupa di costruire e mostrare le particelle

Ad ogni emitter vengono associati initializer e action che permettono di impostare il comportamento delle particelle, come vedremo a breve.

Questi tre elementi interagiscono tra loro in quanto l'emitter ricava le impostazioni dal clock per il numero di particelle da generare, quindi una volta impostate le azioni per le particelle l'emitter viene aggiunto al renderer che si occupa di mostrare a schermo l'animazione.

Il ciclo di azioni di Stardust

Come ogni motore di particelle, Stardust ha un comportamento ciclico, infatti la stessa serie di azioni viene eseguita più volte per una o più particelle. Il ciclo principale di Stardust è composto da 10 fasi, che vanno dalla creazione alla distruzione di una o più particelle; vediamo in breve le varie operazioni che vengono eseguite:

1. Caricamento impostazioni clock
2. Creazione emitter particle list
3. Inizializzazione
4. Rendering delle particelle Renderer Inizia a questo punto il ciclo di vita della particella
5. Pre-aggiornamento
6. Azione
7. Post-aggiornamento
8. Distruzione della particella
9. Rendering delle particelle distrutte
10. Conclusione del ciclo

Questi sono i passaggi che Stardust esegue ad ogni step dell'emitter, da ActionScript in realtà noi potremo impostare meno elementi, specialmente per le animazioni che non richiedono particolari interazioni: vediamo un esempio pratico!

Fiocchi di neve con Stardust

Stardust, a differenza di altri engine che offrono alcuni elementi e azioni già impostate, richiede sempre la creazione dell'elemento grafico che verrà poi replicato come particella. Perciò creiamo un nuovo MovieClip con la grafica della nostra particella (in questo caso un fiocco di neve). Ricordiamo inoltre che Stardust è realizzato in ActionScript 3, funziona quindi con i Flash Player 9 e 10 ed è possibile utilizzarlo sia con Flash CS3 che con Flash CS4.

Torniamo allora al documento creato nella prima parte dell'articolo, disegniamo l'elemento che vogliamo utilizzare come particella e convertiamolo in MovieClip: è obbligatorio spuntare l'opzione Export for Actionscript, ricordiamo il nome impostato come identificatore poichè lo andremo ad utilizzare nel codice.

Torniamo quindi alla Document Class Esempio_Stardust.as. Per prima cosa inseriamo i package da importare che verranno utilizzati nel nostro esempio; da notare che nell'utilizzo di classi e package personalizzati, come in questo caso, editor come FlashDevelop sono molto utili poichè durante la stesura del codice incorporano automaticamente le classi necessarie in base alle azioni che scriviamo, inoltre offrono il "code hinting" anche per le classi personalizzate; sotto questo aspetto Flash è invece più carente, queste due caratteristiche pare saranno implementate infatti solo in Flash CS5.

Per comodità ecco l'elenco delle classi da importare per questo esempio:

A questo punto passiamo alle azioni che dovranno generare le particelle. Portiamoci all'interno della funzione Esempio_Stardust creare un emitter clock

// creiamo l'emettitore, che creerà una particella alla volta
var emettitore:Emitter2D = new Emitter2D(new SteadyClock(1));

Il valore 1 SteadyClock ENTER_FRAME

Creato l'emettitore dobbiamo creare un DisplayObject Sprite

// creiamo il contenitore per le particelle e lo associamo ad un renderer
var sprite:Sprite = new Sprite();
addChild(sprite);
var renderer:DisplayObjectRenderer = new DisplayObjectRenderer(sprite);
renderer.addEmitter(emettitore);

A questo punto possiamo passare all'impostazione della particella Fiocco Fiocco

// impostiamo le proprietà della particella
var displayObjectClass:DisplayObjectClass = new DisplayObjectClass(Fiocco);
var position:Position = new Position(new Line(0, 0, 300, 0));
var velocity:Velocity = new Velocity(new SinglePoint(0, 5));
emettitore.addInitializer(displayObjectClass);
emettitore.addInitializer(position);
emettitore.addInitializer(velocity); 

Come possiamo notare, anche in questo passaggio è pressoché totale l'uso delle classi di Stardust. La classe DisplayObjectClass Fiocco 0,0 0,300 x=0 y=5

Queste tre proprietà vengono associate all'emettitore tramite il comando addInitializer

Le azioni

Una volta creata la nostra particella e impostate le sue proprietà, non ci resta che indicare l'azione da compiere: infatti le proprietà di posizione e velocità per ora sono solo associate al fiocco di neve, ma non eseguono alcuna azione.

Stardust mette a disposizione diverse azioni, nel nostro caso useremo l'azione Move che permette di spostare una particella. Il movimento come già accennato sarà basato sul vettore velocity impostato nel passaggio precedente, che comporta un movimento solo in verticale.

Proviamo ora ad associare all'evento EnterFrame

addEventListener(Event.ENTER_FRAME, emettitore.step);

Testando il filmato dovremmo vedre i nostri fiocchi di neve scendere dal cielo. Potrebbe sembrare conclusa qui, ma dobbiamo ancora impostare un'ultima cosa: al momento infatti le particelle continuano ad essere perennemente allocate, anche quando escono fuori dal campo visivo dello stage, per cui dopo un po' il filmato comincerà a risentirne dato che saranno gestiti e presenti in memoria anche dei fiocchi di neve non più visibili a schermo.

Per eliminare gli oggetti non necessari e preservare così memoria e processore, Stardust mette a disposizione la classe DeathZone

var deathZone:DeathZone = new DeathZone(new RectZone(0, 0, 300, 300), true);
emettitore.addAction(deathZone);

Nello specifico, la nostra DeathZone è rettangolare, inizia nel punto 0,0 300x300

Il secondo parametro (inverted true 300x300 false

Ora il nostro esempio è completo: i fiocchi di neve cadono correttamente e una volta usciti dalla zona in cui vogliamo siano visibili vengono eliminati, evitando così calcoli inutili al player.

Utilizzo di valori casuali

Nel nostro esempio i fiocchi di neve hanno una caduta verticale fissa (5) e nessun movimento orizzontale (0). Stardust mette a disposizione alcune classi per la generazione di valori casuali, ad esempio per le accelerazioni.

Proviamo anche questa feature aggiungendo un'accelerazione orizzontale casuale al nostro esempio: in questo modo i fiocchi non cadranno solo in verticale ma avranno un movimento più realistico. Il codice anche in questo caso è composto da poche righe poichè le operazioni sono gestite interamente da Stardust:

L'oggetto RandomDrift randomX -0.1 0.1 -0.1 0 0.1

Per molti elementi Stardust mette a disposizione sia la possibilità di generare valori fissi sia casuali, è consigliabile usare la documentazione