Nel precedente post avevamo iniziato un tutorial con FLINT, vediamo di analizzare dettagliatamente il codice per poterci impadronire della tecnica.

Innanzitutto importiamo queste determinati classi.

import org.flintparticles.common.counters.*;
import org.flintparticles.common.displayObjects.RadialDot;
import org.flintparticles.common.initializers.*;
import org.flintparticles.twoD.actions.*;
import org.flintparticles.twoD.emitters.Emitter2D;
import org.flintparticles.twoD.initializers.*;
import org.flintparticles.twoD.renderers.*;
import org.flintparticles.twoD.zones.*;

Iniziamo ad impostare il nostro “emitter”, l’emitter si può considerare il fulcro di tutta la libreria di Flint poichè è l’oggetto che crea le particelle per i nostri effetti grafici. Esistono 2 versioni di Emitter: quella 2D e quella 3D, noi ci concentreremo ora su quella 2D che fornisce ad ogni modo risultati strabilianti.

var emitter:Emitter2D = new Emitter2D();

L’emitter sforna le particelle, ma è necessario indicare il numero di particelle da sfornare ogni secondo, in questo caso si usa la funzione “counter” e “steady” e si creano 150 particelle al secondo.

emitter.counter = new Steady( 150 );

In effetti avendo impostato l’emitter ancora non ricaviamo risultati visivi, poichè mancano altri oggetti da impostare collagandoli all’emittente (l’immagine della particella, la sua velocità, il colore, la posizione iniziale e finale, ecc.).

Forma o Immagine della Particella.

Innanzitutto dobbiamo indicare che tipo di forma o immagine deve assumere la particella. In effetti la particella può corrispondere ad una immagine che abbiamo in libreria e che abbiamo esportato con un preciso nome di classe, esempio “var imgClass:ImageClass = new ImageClass( MyImageClass );“.

in questo caso però ci serve di creare semplicemente un cerchio bianco con bordo a sfumare trasparente, questa è sicuramente una figura grafica che possiamo costruire tramite una precisa classe inclusa nella libreria Flint: RadialDot, l’unica altra informazione che deve essere inserita è la lunghezza del raggio de cerchio con sfumatura trasparente (in questo caso 2) quindi verrebbe: “var imgClass:ImageClass = new ImageClass( RadialDot, 2 );“.

Il tutto poi deve essere unito con l’emitter attraverso questo codice: “emitter.addInitializer( imgClass );“, oppure unendo i 2 punti in unica riga:

emitter.addInitializer( new ImageClass( RadialDot, 2 ) );

Posizione della Particella

Ora dobbiamo decidere le coordinate iniziali delle Particelle sul nostro Stage, essendo una simulazione di nevicata, le particelle devono scendere dall’alto, quindi le Y devono essere negative. Ricordiamoci però che tali particelle vengono ricreate in maniera dinamica e con una certa causalità nel tempo (noi possiamo solo definire il numero di particelle al secondo) e soprattutto devono essere ricreate all’interno di un’area predefita, in questo caso ci viene d’aiuto il comando “ZONE” che rappresenta proprio un rettangolo-area attiva per la creazione-gestione delle particelle.

In questo specifico caso i fiocchi di neve devono essere posizionati su una linea appena sopra lo stage (quindi Y = -5) dal punto “x = 0″ a quello “x = stage.stageWidth”, il codice potrebbe essere questo:

“ var zone:LineZone = new LineZone( new Point( -5, -5 ), new Point( 505, -5 ) );
var position:Position = new Position( zone );

emitter.addInitializer( position ); “, che tutto unito diventa:

emitter.addInitializer( new Position( new LineZone( new Point( -5, -5 ), new Point( 605, -5 ) ) ) );

Velocità della Particella

Un’altra caratteristica da definire è il movimento da fornire alla particella, in questo caso un movimento semplicemente verticale. Per definire la velocità e la direzione si usa definire una linea (una specie di freccia) che possiede una punto iniziale (in questo caso è definito di default come x = 0, y = 0 ) e uno finale (il punto che adremo a definire noi). Diciamo che la velocità è rappresentata dalla lunghezza della freccia, quindi più lontano si trova il secondo punto della freccia maggiore è la velocità, inoltre la direzione del movimento segue la direzione della freccia.

Il codice da utilizzare è il seguente, dove vengono definite le coordinate di un nuovo punto X e Y:

emitter.addInitializer( new Velocity( new PointZone( new Point( 0, 65 ) ) ) );

Modifiche più realistiche alla Particella

Se dovessimo avviare il filmato in questo momento noteremo un movimento poco realistico dei fiocchi di neve. Cominciamo quindi ad effettuare ulteriori modifiche.

Scaliamo le varie particelle all’interno di un intervallo di valori da 0.75 a 2 di dimensione della scala, tutto in maniera casuale, con questo codice:

emitter.addInitializer( new ScaleImageInit( 0.75, 2 ) );

Avviamo ora l’azione di movimento. Gli “action” sono molto importanti nella libreria Flint. Mentre gli “Initializer” modificano le proprietà di una particella una volta che vengono creati, gli “Action” modificano le proprietà delle particelle continuamente dopo che sono stati creati. Ecco il codice per avviare il movimento, le cui caratteristiche abbiamo prima definito:

emitter.addAction( new Move() );

In effetti però le particelle scendono sullo stage, ma superata la zona visibile continuano a scendere, senza sparire, questo comporta un appesantimento del filmato. E’ necessario quindi imporre tramite AS3 che superata una certa area rettangolare le particelle devono rimuoversi. Questa area la possiamo denominare “DeathZone”, l’oggetto in questione richiede la definizione di una zona rettangolare (con coordinata X e Y del punto in alto a sinistra e poi con lunghezza e altezza) e l’indicazione di un valore booleano (in caso di TRUE tutte le particelle esterne all’area vengono rimosse, in caso di FALSE vengono tolte quelle interne all’area). Questo è il codice completo:

emitter.addAction( new DeathZone( new RectangleZone( -10, -10, 620, 420 ), true ) );

Per completare l’effetto realistico del movimento è possibile aggiungere un movimento verticale e orizzontale che rappresenta lo svolazzamento del fiocco di neve. Questo effetto è realizzabile grazie al comando “RandomDrift”, nel quale deve essere indicato l’intervallo di lunghezza e altezza lungo gli assi X e Y del movimento, che comunque rimane casuale.

emitter.addAction( new RandomDrift( 20, 20 ) );

Avviare le Particelle

Finora tutto ciò che abbiamo scritto attraverso AS3 non sarebbe visualizzabile nello stage, questo perchè non abbiamo ancora impostato i comandi di avvio dell’effetto grafico.

Innanzitutto dobbiamo definire un oggetto “renderer” che renderizza e visualizzi quindi il tutto nel Flash ( in questo caso stiamo utilizzando un “DisplayObjectRenderer” che possiede anche le proprietà di un semplice DisplayObjec e quindi può essere tranquillamente aggiunto allo stage per funzionare e può contenere l’emitter), a questo renderer bisogna poi aggiungere l’emitter, infine il renderer deve essere aggiung allo stage, solo in questo modo si posso vedere i risultati.

var renderer:DisplayObjectRenderer = new DisplayObjectRenderer();
renderer.addEmitter( emitter );
addChild( renderer );

L’ultima cosa da scrivere è il lancio dell’effetto grafico:

emitter.start();

e per dare ancora più un effetto realistico all’inizio del filmato possiamo programmare l’implementazione dell’effetto grafico a 10 secondi dall’avvio dell’emitter. In altre parole stiamo dicendo al Flash di simulare sin dall’inizio che sono già passati 10 secondi dall’inizio delle nevicata, in questo modo ci troveremo già lo stage pieno di fiocchi di neve.

emitter.runAhead( 10 );