Finora abbiamo applicato ai nostri oggetti delle semplici skin basate su colori, che per quanto possano abbellire le forme geometriche non hanno certo un impatto visivo paragonabile a quello ottenibile con delle immagini.
In questa parte della guida tratteremo proprio l'applicazione di immagini (e video) alle facce degli oggetti, così da renderli graficamente più accattivanti.
Prima di iniziare è possibile scaricare i file AS di esempio per questa parte.
Facce
Prima di avventurarci nell'applicazione delle skin, vediamo di comprendere meglio cosa siano e come si comportino le facce di un oggetto; poichè le skin verranno poi applicate a queste facce è importante avere ben chiare le basi.
Un oggetto tridimensionale è formato da facce, dove i lati di queste facce sono costituiti da linee disegnate tra punti (o vertici) nello spazio; quando creiamo un oggetto tutti i vertici, lati e facce vengono impostati e poi disegnati sullo schermo.
Per esempio quando disegnamo un cubo, tutti i punti vengono calcolati partendo da altezza, larghezza e lunghezza (che impostiamo nella funzione); ovviamente l'ordine di tali punti è importante per il motore grafico per stabilire la disposizione delle facce dell'oggetto.
Prendiamo in considerazione il comando per la costruzione di un cubo:
public function Box ( rad: Number, h:Number, lg:Number, mode:String , quality:Number)
I primi tre parametri sono le dimensioni del cubo. Il parametro "mode" può essere impostato su "quad" (ogni faccia viene divisa in parti quadrate) oppure "tri" (ogni faccia è divisa in triangoli). La qualità stabilisce il numero di parti in cui viene divisa ogni faccia.
Questi valori sono più importanti per gli oggetti con facce curve che per gli oggetti come il cubo, per esempio, abbiamo visto, nella parte relativa alle primitive, come questo parametro vada ad agire su una sfera.
Ci sono altre due cose molto importanti da considerare quando si va ad applicare una skin a un oggetto. La prima è che ogni faccia ha due superfici, fronte e retro. Il lato frontale è quello che di default sta "all'esterno" dell'oggetto, mentre il retro è quello posto verso l'interno dell'oggetto. Quando applichiamo una skin, questa viene applicata di default a entrambe le facce, ma possiamo cambiare questo comportamento impostando una skin diversa per ognuna delle due facce.
Il secondo aspetto da considerare è comunemente chiamato backface culling, consiste nel "non disegnare" il lato nascosto di una faccia, in modo da risparmiare memoria non eseguendo un'operazione che comunque non si tradurrebbe in risultati visibili per l'utente. Praticamente ciò che è nascosto agli occhi dell'utente non viene disegnato. In alcuni casi però potremmo voler mostrare sia la superficie frontale che quella sul retro; in questo caso basta disabilitare il back culling.
Pensiamo al cubo e supponiamo di avere sulle sue facce delle immagini da mostrare agli utenti. Normalmente queste immagini sono poste sulle facce esterne del cubo e l'utente può vedere le immagini; qualora però l'utente va a vedere l'interno del cubo, questo è "vuoto"; disabilitando il backface culling invece andiamo a disegnare su entrambi i lati... però questa operazione richiede maggiore memoria! La soluzione migliore quindi è uno "scambio" delle superfici, così da richiedere una minor potenza di calcolo pur ottenendo l'effetto desiderato.
Skin
Iniziamo con un semplice Plane3D (l'abbiamo già vista quando abbiamo creato i piani delle coordinate) che renderemo ruotabile, così da poterne vedere entrambi i lati.
Controlli
Come detto rendiamo ruotabile il piano in modo da poter vedere tutte le parti. Aggiungiamo quindi due slide sullo stage e le chiamiamo xSlide e ySlide. Inseriamo anche un pulsante (di nome cullingButton) che useremo per abilitare e disabilitare il backface culling.
Listato 28. aggiunge due slide sullo stage e un pulsante per il backface culling
function start (Void):Void{
var w:World3D = World3D.getInstance ();
w.setRootGroup( createScene() );
var mc:MovieClip = _root.createEmptyMovieClip('screen',1);
var screen:ClipScreen = new ClipScreen(mc,200,200);
var cam:Camera3D = new Camera3D(500,screen);
cam.setPosition(0,0,-350);
w.addCamera (cam);
setUpControls()
w.render();
}
function setUpControls(){
var xCh:Object = new Object();
xCh.onChange = function(evt:Object){
x = evt.value;
rotation.rot( x, y, 0);
}
xSlider.addListener(xCh);
var yCh:Object = new Object();
yCh.onChange = function(evt:Object){
y = evt.value;
rotation.rot( x, y, 0);
}
ySlider.addListener(yCh);
cullingButton.onRelease = switchBackCulling;
}
function switchBackCulling(){
backCulling = plane.enableBackFaceCulling = !backCulling;
cullingButton.setLabel ( backCulling ? "Off" : "On" );
}
"© Petit Publications 2006" - diritti riservati
