Share
Benvenuti in questa introduzione a lavorare a livello di pixel con l'oggetto BitmapData di ActionScript 3. Prenderemo alcune immagini 2D, le spezzeremo nei loro pixel componenti, quindi li riassembleremo come immagini 3D che possiamo spostare e ruotare.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Prima di saltare, prendiamoci un momento per osservare come è strutturato il progetto di esempio. Aprendo il sorgente zip per questo tutorial avrai delle fonti per ogni passaggio significativo, puoi andare avanti e fare una copia del inizio cartella come questo servirà come il nostro punto di partenza.
All'interno di questa cartella troverai altre due cartelle; src e bidone. Il src la cartella è dove salveremo tutto il nostro codice e file FLA e il bidone la cartella è dove il Flash salverà i file SWF. Dentro il src cartella c'è il main.fla e il Main.AS classe del documento.
Se per qualsiasi motivo trovi un errore nel tuo codice, prova a risolverlo (sempre bene imparare dagli errori) ma se non puoi non preoccuparti! Puoi tornare indietro e utilizzare una delle cartelle dei passaggi nel file zip di origine più vicina al passaggio in cui ti trovavi.
Se hai già dato un'occhiata al Main.as file noterai già alcuni riferimenti a Away3D, un framework 3D per Flash. Avremo bisogno di scaricare questo e aggiungerlo al nostro progetto per continuare.
Puoi prendere la loro versione più recente dal sito Away3D.
Una volta completato il download, apri il file zip e all'interno di away3d_3_6_0 \ src cartella troverai tre cartelle, Away3D, nochump e wumedia. Copia questi, come mostrato di seguito al tuo src cartella.
Se non lo hai già fatto, apri main.fla e Main.as. Guardando nella Flash Library puoi vedere un'immagine chiamata 1.png e a Un filmato con un nome di istanza di img1, che servirà da contenitore base per il png.
Eseguiremo una compilazione rapida solo per assicurarci di aver aggiunto Away3D correttamente. Se tutto va bene dovremmo vedere un filmato Flash vuoto con uno sfondo grigio scuro e nessun messaggio di errore da Flash.
Esaminando il Main.as file possiamo vedere alcune variabili che sono usate in Away3D, c'è già una serie di tutorial su Away3D ma ci ricapitoleremo rapidamente su questi:
// base Away3D proprietà protetta scena var: Scene3D; telecamera var protetta: TargetCamera3D; vista var protetta: View3D;
Accentsconagua
Scene3D è uno spazio che possiamo usare per aggiungere oggetti 3D come cubi e sfere.TargetCamera3D è uno dei tanti tipi di fotocamere disponibili in Away3D, è quello che usiamo per guardare Scene3D.View3D è un viewport, spesso descritto come la "finestra" in cui vediamo la nostra scena.Senza entrare nello specifico è anche possibile vedere una scena di base è l'installazione pronta per l'uso con initAway3d () metodo. Si noti che aggiunge un ENTER_FRAME EventListener, questo semplicemente dice Away3D a render () (o disegna) qualsiasi oggetto aggiunto al Scene3D ogni frame.
/ ** * Impostazione di base della scena Away3D * / funzione privata initAway3d (): void scene = new Scene3D (); camera = new TargetCamera3D (z: -200); view = new View3D (scene: scene, camera: camera); addChild (vista); addEventListener (Event.ENTER_FRAME, renderLoop); / ** * il ciclo di rendering * / private function renderLoop (event: Event): void view.render ();
Questo è praticamente per l'introduzione al Main.as classe, costruiremo tutto il resto mentre andiamo.
Entreremo subito e presenteremo queste due classi, poiché lavoreremo con queste durante il tutorial. Se sei nuovo Bitmap e BitmapData puoi immaginarli come una tela da pittore e una collezione di colori da vernice. Sono oggetti completamente diversi ma sono entrambi collegati, BitmapData contiene tutte le informazioni sui pixel o tratti di pennello e non sarebbe nulla senza essere dipinto su una tela o, in questo caso, la Bitmap!
Proviamo questo aggiungendo un'istanza di img1 MovieClip al palcoscenico e facendone una copia usando Bitmap / BitmapData.
Modificare il Main.as al seguente:
/ ** * costruttore * / funzione pubblica Main () initAway3d (); drawExample (); / ** * un rapido esempio di BitmapData e uso di Bitmap * / private function drawExample (): void // crea un'istanza dell'oggetto img1 sullo stage per copiare var img: MovieClip = new img1 (); addChild (img); // crea un oggetto BitmapData con i seguenti parametri: width, height, transparent, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // disegna una copia di img MovieClip in BitmapData bmpData.draw (img); // aggiunge una bitmap allo stage con le informazioni BitmapData (copia di img1) per visualizzare var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (BMP);
Guardando il drawExample () codice, le prime due righe aggiungono semplicemente il img1 oggetto al palcoscenico, questa è l'immagine che faremo della copia di.
A seguito di ciò creiamo a BitmapData oggetto con i seguenti parametri:
larghezza, la larghezza per rendere il BitmapData altezza, l'altezza per rendere il BitmapData trasparente, se il BitmapData dovrebbe contenere pixel trasparenticolore, il colore di sfondoCome sappiamo la larghezza e l'altezza da img1 li abbiamo impostati direttamente, poiché avremo bisogno di trasparenza, impostiamo il parametro successivo su true e infine lo specifichiamo 0x000000 o nero come colore di sfondo come apparirà trasparente fino a quando non lo riempiamo.
Continuando, ora abbiamo il BitmapData configurazione degli oggetti abbiamo diverse opzioni a nostra disposizione, potremmo ad esempio eseguire il ciclo di pixel per pixel e copiare l'immagine (useremo qualcosa di simile più avanti nel tutorial), oppure potremmo usare il disegnare() metodo.
Il disegnare() il metodo richiede a Un filmato o folletto come parametro e copierà tutte le informazioni sui pixel dall'oggetto al BitmapData.
/ ** * un rapido esempio di BitmapData e uso di Bitmap * / private function drawExample (): void // crea un'istanza dell'oggetto img1 sullo stage per copiare var img: MovieClip = new img1 (); addChild (img); // crea un oggetto BitmapData con i seguenti parametri: width, height, transparent, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // disegna una copia di img MovieClip in BitmapData bmpData.draw (img); // aggiunge una bitmap allo stage con le informazioni BitmapData (copia di img1) per visualizzare var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (BMP);
Seguendo questo, le righe successive creeranno a Bitmap oggetto con il BitmapData informazioni sui pixel come parametro, che viene quindi spostato sotto l'originale img MovieClip e aggiunto al palcoscenico.
/ ** * un rapido esempio di BitmapData e uso di Bitmap * / private function drawExample (): void // crea un'istanza dell'oggetto img1 sullo stage per copiare var img: MovieClip = new img1 (); addChild (img); // crea un oggetto BitmapData con i seguenti parametri: width, height, transparent, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // disegna una copia di img MovieClip in BitmapData bmpData.draw (img); // aggiunge una bitmap allo stage con le informazioni BitmapData (copia di img1) per visualizzare var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (BMP);
Non c'è molta messa a punto nell'impostazione del Bitmap aspetto mostra semplicemente un BitmapData, tutta la magia è con il BitmapData. Ora durante i test dovremmo ottenere quanto segue:
Ora abbiamo contenuto all'interno del BitmapData le cose dell'oggetto cominciano ad essere interessanti, dal momento che possiamo iniziare a manipolare le immagini usando getPixel32 () e setPixel32 ().
Iniziare con getPixel32 () modificare il drawExample () codice dall'alto al seguente:
/ ** * un rapido esempio di BitmapData e uso di Bitmap * / private function drawExample (): void // crea un'istanza dell'oggetto img1 sullo stage per copiare var img: MovieClip = new img1 (); addChild (img); // crea un oggetto BitmapData con i seguenti parametri: width, height, transparent, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // disegna una copia di img MovieClip in BitmapData bmpData.draw (img); // aggiunge una bitmap allo stage con le informazioni BitmapData (copia di img1) per visualizzare var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (BMP); // legge le informazioni sui pixel da BitmapData var pixelInformation: uint = bmpData.getPixel32 (5, 0); trace (pixelInformation, pixelInformation.toString (16));
Esaminando il codice abbiamo creato una variabile uint regolare e assegnata al valore del pixel nel bmpData a 5 pixel in orizzontale e 0 pixel in verticale. Ricorda che i valori iniziano da 0 in questo modo:
Sapendo che abbiamo scelto di ottenere le informazioni sui pixel per 5,0, ciò renderebbe il pixel nero nella riga superiore e le uscite Flash abbastanza sicure: 4278190080 ff000000
All'inizio potrebbe non sembrare giusto, ma setPixel32 legge il valore alfa del pixel (dove come setPixel legge solo il colore). Generalmente siamo abituati a lavorare con valori esadecimali per colori come FFFFFF o 000000 quindi possiamo dire a Flash toString (16) per ottenere il valore esadecimale:
Ora sappiamo come leggere le informazioni sui pixel, disegnando i pixel sul BitmapData è molto simile, solo che questa volta usiamo setPixel32 () per disegnare pixel su BitmapData e anche a per loop per disegnare alcuni pixel.
Prima modifica il codice al seguente:
/ ** * un rapido esempio di BitmapData e uso di Bitmap * / private function drawExample (): void // crea un'istanza dell'oggetto img1 sullo stage per copiare var img: MovieClip = new img1 (); addChild (img); // crea un oggetto BitmapData con i seguenti parametri: width, height, transparent, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // disegna una copia di img MovieClip in BitmapData bmpData.draw (img); // aggiunge una bitmap allo stage con le informazioni BitmapData (copia di img1) per visualizzare var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (BMP); // legge le informazioni sui pixel da BitmapData var pixelInformation: uint = bmpData.getPixel32 (5, 0); trace (pixelInformation, pixelInformation.toString (16)); // scrive le informazioni sui pixel nel colore var BitmapData: uint = 0xffff0000; // ff0000 - full var var rosso: uint = 0; colonna var: uint = 0; per (riga; riga < bmpData.height; row++) bmpData.setPixel32(column, row, color); column++; if(column > bmpData.width) column = 0;
Il nuovo codice inizia creando un normale uint variabile chiamata colore che immagazziniamo 0xFFFF0000 che è: ff completamente trasparente, ff completamente rosso, 00 no verde, 00 no blu.
Poi ci sono due contatori creati per righe e colonne (le righe sono una linea di pixel orizzontali, le colonne sono una linea di pixel verticali). Questi contatori vengono quindi inseriti in a per loop che aumenta la riga e il valore del contatore ogni volta, quindi quando viene mescolato con setPixel32 () metodo traccerà una linea diagonale:
In questo passo introdurremo il PixelObject3D.as classe. Per risparmiare un po 'di tempo prendi una copia della classe dal Passaggio 8 cartella nel source zip e rilasciarlo al tuo src cartella oltre il main.fla e Main.as.
Dopo averlo fatto, diamo un'occhiata veloce prima di iniziare ad aggiungere il codice per creare oggetti 3D da pixel.
// proprietà protected var _bitmapData: BitmapData = null; public var _scaleFactor: Number = 1; protected var _width: Number = 0; protected var _height: Number = 0;
Abbiamo alcune variabili protette nella parte superiore della classe, una per a BitmapData e tre Numeri per la larghezza, l'altezza e una scala dell'oggetto.
/ ** * costruttore * / funzione pubblica PixelObject3D () / ** * inizia il processo di creazione * / funzione pubblica createFromMovieClip (mc: MovieClip): void
Seguirli è un costruttore di classi vuoto e il metodo con cui lavoreremo, createFromMovieClip (). Noterai che questo metodo accetta un parametro di Un filmato digita, così come puoi già indovinare lo passiamo a Un filmato e ci restituirà una rappresentazione 3D di esso. Quando è finito, questo è!
Mentre il PixelObject3D.as la classe in realtà non fa nulla ma aggiungiamo un'istanza di essa al Main.as classe in modo che possiamo vedere i cambiamenti sullo schermo mentre andiamo.
Iniziando con l'aggiunta di una variabile privata:
// base Away3D proprietà protetta scena var: Scene3D; telecamera var protetta: TargetCamera3D; vista var protetta: View3D; // il Pixel3bject3D protetto da Pixel3DObject;
Di seguito aggiungere al costruttore una chiamata a createPixelObect3D ().
/ ** * costruttore * / funzione pubblica Main () initAway3d (); drawExample (); createPixelObect3D ();
Infine aggiungi la seguente funzione al Main.as file. Questo creerà un'istanza di PixelObject3D classe, invoca il createFromMovieClip () metodo e passarlo un nuovo Un filmato, il img1 abbiamo usato in precedenza.
Un'ultima riga da sottolineare è che aggiungiamo il PixelObject3D classe come figlio della scena in quanto è un oggetto 3D, non il Palcoscenico.
/ ** * crea una funzione PixelObject3D * / private createPixelObect3D (): void po3d = new PixelObject3D (); po3d.createFromMovieClip (new img1 ()); scene.addChild (po3d);
Sapendo che siamo passati Un filmato vogliamo ricreare da questo metodo, la prima cosa nella nostra agenda è crearne una copia usando BitmapData esattamente come facevamo prima. Possiamo quindi utilizzare i dati dei pixel per iniziare a creare oggetti 3D.
Proprio come prima, creeremo un BitmapData oggetto e disegna il mc MovieClip oggetto:
/ ** * inizia il processo di creazione * / funzione pubblica createFromMovieClip (mc: MovieClip): void // archivia riferimenti e crea il bitmapdata _bitmapData = new BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // imposta larghezza / altezza _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor);
Abbiamo anche impostato il _larghezza e _altezza variabili secondo il mc larghezza e altezza e moltiplicare questo per il _fattore di scala variabile, questo ci permette di aumentare o diminuire le dimensioni dei pixel 3D se lo desideriamo. Maggiori informazioni su questo più tardi.
Ricorda che i BitmapData sono solo le informazioni sui pixel e senza aggiungere BitmapData a una Bitmap non saremo in grado di vederli, ma possiamo ancora leggere e scrivere su di esso. Questo è perfetto per noi poiché utilizzeremo questo passaggio per iniziare a scorrere i pixel di BitmapData e separare i valori rosso, verde, blu e alfa.
Modifica il tuo createFromMovieClip () metodo per abbinare questo:
/ ** * inizia il processo di creazione * / funzione pubblica createFromMovieClip (mc: MovieClip): void // archivia riferimenti e crea il bitmapdata _bitmapData = new BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // imposta larghezza / altezza _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // informazioni pixel var pixelValue: uint = 0; var red: uint = 0; var green: uint = 0; var blue: uint = 0; var alpha: uint = 0; // esegue il ciclo di ciascun pixel orizzontalmente per (var i: int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, 0); alpha = pixelValue >> 24 e 0xFF; rosso = pixelValue >> 16 & 0xFF; green = pixelValue >> 8 & 0xFF; blu = pixelValore e 0xFF; traccia ("alpha:" + alpha + "red:" + red + "green:" + green + "blue:" + blue); Qui abbiamo impostato alcune variabili per i valori di colore e alfa, quindi abbiamo iniziato a per loop basato sul mc di larghezza.
Questo per loop imposta il pixelValue variabile al valore del pixel corrente usando il getPixel32 () metodo che abbiamo utilizzato in precedenza, ma questa volta abbiamo usato la nota 0 per il secondo parametro che è y, quindi elaboreremo solo la prima linea orizzontale di pixel.
Di seguito c'è una matematica piuttosto complessa nota come masking e shifting, per risparmiare un po 'di tempo è possibile assumere che ognuno dei colori sia estratto dal pixelValue variabile e quindi output per noi per vedere usando traccia(). Se vuoi saperne di più sugli operatori bit a bit, lo spostamento dei bit e il mascheramento, puoi trovare un ottimo post sul sito Web di Polygonal Labs.
Quello che dovresti vedere è l'output di un intero gruppo di 0 valori ma prestare attenzione ai due alpha: 255 linee, questi sono i due pixel neri nella parte superiore della mano.
Phew c'era molta logica negli ultimi passaggi! Ora che abbiamo le basi funzionanti, iniziamo ad usare le informazioni sui pixel che abbiamo ottenuto in precedenza per creare un capolavoro 3D? quasi.
Se hai utilizzato Away3D o Papervision 3D prima di conoscere questo passaggio, inizieremo a creare cubi 3D e ad applicare materiali. Per ogni pixel che è alpha è 255 (opaco), prendiamo il suo colore e creiamo un materiale basato sul colore da applicare a un cubo 3D, sotto c'è il codice per eliminarlo:
/ ** * inizia il processo di creazione * / funzione pubblica createFromMovieClip (mc: MovieClip): void // archivia riferimenti e crea il bitmapdata _bitmapData = new BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // imposta larghezza / altezza _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // informazioni pixel var pixelValue: uint = 0; var red: uint = 0; var green: uint = 0; var blue: uint = 0; var alpha: uint = 0; // esegue il ciclo di ciascun pixel orizzontalmente per (var i: int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, 0); alpha = pixelValue >> 24 e 0xFF; rosso = pixelValue >> 16 & 0xFF; green = pixelValue >> 8 & 0xFF; blu = pixelValore e 0xFF; // se pixel è opaco se (alpha == 255) // crea una stringa di colore esadecimale regolare cioè FFFFFF o 000000 var color: String = red.toString (16) + green.toString (16) + blue.toString (16 ); if (color == "000") color = "000000"; traccia ("#" + colore); // crea un materiale dal colore e applica a un cubo 3D materiale var: Materiale = nuovo ColorMaterial (colore); var cube: Cube = new Cube (materiale: materiale, larghezza: 2 * _scaleFactor, altezza: 2 * _scaleFactor, profondità: 2 * _scaleFactor); // posiziona il cubo da un valore - in modo che il punto di registrazione / trasformazione sia sempre center cube.x = 0 - (_width / 2) + cube.width * i; this.addChild (cubo); Nel codice sopra abbiamo usato il rosso, verde e blu variabili e creato un normale colore esadecimale, che puoi vedere in output dal traccia().
Quindi il colore esadecimale colore la variabile è usata per creare a ColorMaterial con Away3D, che è solo un normale materiale basato su un colore che può essere applicato agli oggetti 3D.
A seguito di ciò creiamo a Cubo oggetto e specificare il Materiale essere il Materiale oggetto abbiamo creato la linea prima di esso. Vale anche la pena notare che abbiamo impostato il larghezza, altezza e profondità (ricorda che ora stiamo lavorando in tre dimensioni!) a un valore doppio rispetto al valore di _scaleValue variabile, questo ci permette di rendere i cubi più grandi o più piccoli cambiando _scaleValue.
Infine posizioniamo il Cubo a zero meno metà della larghezza del mc moltiplicato per il per contatore dei loop io, questo rende la registrazione o il punto di trasformazione dell'oggetto 3D finito al centro. Viene poi aggiunto come un bambino e quando esegui il test vedrai due piccoli 3D neri Cubo oggetti.
Ora due cubi 3D sono fantastici e tutti, ma vogliamo davvero ottenere l'intera forma della mano nei cubi 3D. Stiamo già utilizzando un per loop per scorrere tutti i pixel nella prima riga, ma come fare a farlo scorrere tra le righe di pixel rimanenti?
Hai indovinato, un altro per ciclo continuo!
/ ** * inizia il processo di creazione * / funzione pubblica createFromMovieClip (mc: MovieClip): void // archivia riferimenti e crea il bitmapdata _bitmapData = new BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // imposta larghezza / altezza _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // informazioni pixel var pixelValue: uint = 0; var red: uint = 0; var green: uint = 0; var blue: uint = 0; var alpha: uint = 0; // esegue il ciclo di ciascuna riga di pixel per (var j: int = 0; j < mc.height; j++) // loop through each pixel horizontally for (var i:int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, j); alpha = pixelValue >> 24 e 0xFF; rosso = pixelValue >> 16 & 0xFF; green = pixelValue >> 8 & 0xFF; blu = pixelValore e 0xFF; // se pixel è opaco se (alpha == 255) // crea una stringa di colore esadecimale regolare cioè FFFFFF o 000000 var color: String = red.toString (16) + green.toString (16) + blue.toString (16 ); if (color == "000") color = "000000"; traccia ("#" + colore); // crea un materiale dal colore e applica a un cubo 3D materiale var: Materiale = nuovo ColorMaterial (colore); var cube: Cube = new Cube (materiale: materiale, larghezza: 2 * _scaleFactor, altezza: 2 * _scaleFactor, profondità: 2 * _scaleFactor); // posiziona il cubo da un valore - in modo che il punto di registrazione / trasformazione sia sempre center cube.x = 0 - (_width / 2) + cube.width * i; cube.y = (_height / 2) + -cube.height * j; this.addChild (cubo); Questa volta abbiamo solo cambiato davvero tre cose, una nuova per loop che questa volta ha j per il suo contatore. Il getPixel32 () ora ha il j variabile aggiunta come y parametro e infine il Cubo è posizionato verticalmente usando il j contatore.
Questo praticamente completa la logica principale, ora passerà in loop orizzontalmente, leggerà i valori dei pixel, creerà a ColorMaterial e a Cubo e posizionarli di conseguenza. Una volta raggiunta la fine della linea orizzontale, a causa del nuovo per loop passerà al pixel successivo e passerà di nuovo in orizzontale finché l'immagine non sarà completa. Dai un'occhiata a te testando il film:
Ora abbiamo tutti questi oggetti 3D ma sembrano molto 2D, quindi aggiungeremo un po 'di movimento e otterremo l'intero oggetto che ruota.
Per fare questo dovremo tornare indietro al Main.as file e individuare il renderLoop () metodo. Ricorda Away3D avrà bisogno di render (o dipingere) l'immagine 3D ogni fotogramma, quindi possiamo aggiungere alcune semplici rotazioni al nostro PixelObject3D per vedere tutto il bambino Cubi ruotare:
/ ** * il ciclo di rendering * / private function renderLoop (event: Event): void pObject3D.rotationZ ++; view.render ();
Sentiti libero di sperimentare rotationX, rotationY e rotationZ qui ricordati di resettarlo nuovamente al codice sopra prima di continuare. Puoi anche aggiungere al create3DObject () per meglio centrare e allineare il Cubi alla fotocamera.
/ ** * crea un oggetto 3D pixel da una MovieClip * / funzione pubblica create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (new img1 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);
Ora questo è più simile, possiamo finalmente vedere l'oggetto dei pixel 3D rotante. Possiamo iniziare a modificare questo e aggiungere una vista esplosa semplicemente modificando il z valore del Cubi quando li creiamo.
Torna indietro al PixelObject3d.as classe e trova le linee dove posizioniamo il Cubo'S X e y e aggiungi il seguente:
// se pixel è opaco se (alpha == 255) // crea una stringa di colore esadecimale regolare cioè FFFFFF o 000000 var color: String = red.toString (16) + green.toString (16) + blue.toString (16 ); if (color == "000") color = "000000"; traccia ("#" + colore); // crea un materiale dal colore e applica a un cubo 3D materiale var: Materiale = nuovo ColorMaterial (colore); var cube: Cube = new Cube (materiale: materiale, larghezza: 2 * _scaleFactor, altezza: 2 * _scaleFactor, profondità: 2 * _scaleFactor); // posiziona il cubo da un valore - in modo che il punto di registrazione / trasformazione sia sempre center cube.x = 0 - (_width / 2) + cube.width * i; cube.y = (_height / 2) + -cube.height * j; cube.z = -25 + (Math.random () * 50); this.addChild (cubo); Questo si sposterà ciascuno Cubo ad una profondità casuale da -25 a 25 positiva e creare un buon effetto esploso:
Come il PixelObject3D è un po 'piccolo sullo schermo, stiamo andando ad aggiustare leggermente la scala. Possiamo farlo rapidamente regolando il _scaleValue variabile nel PixelObject3D.as classe e aumentandolo a 1,5.
/ ** * crea un oggetto 3D da un MovieClip * * @author Anton Mills * / public class PixelObject3D estende ObjectContainer3D // proprietà protected var _bitmapData: BitmapData = null; public var _scaleFactor: Number = 1.5; protected var _width: Number = 0; protected var _height: Number = 0;
Usando il PixelObject3D la classe per creare altre immagini è facile, basta importare l'immagine che si desidera elaborare in Flash. Quindi convertilo in MovieClip come al solito, questa volta dargli un Nome della classe di img2 come questo:
Ora puoi cambiare Main.as usare il nuovo img2 oggetto con una piccola alterazione:
/ ** * crea un oggetto 3D pixel da una MovieClip * / funzione pubblica create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (new img2 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);
Puoi utilizzarne quanti ne vuoi, assicurati di aggiungerli alla scena Away3D e potresti averne diversi. In questo esempio ho rimosso il z proprietà che abbiamo usato nel passaggio 16 per l'effetto esplosione.
Main.as con un altro PixelObject3D ha aggiunto:
/ ** * Un tutorial che mira a introdurre BitmapData * di ActionScript 3 e come utilizzare le informazioni BitmapData per creare una forma pixel 3D * utilizzando Away3D. * * @author Anton Mills * / public class Main estende MovieClip // Proprietà di base di Away3D protetta da var scene: Scene3D; telecamera var protetta: TargetCamera3D; vista var protetta: View3D; protected var pObject3D: PixelObject3D; protected var pObject3D2: PixelObject3D;
Quindi crea un'altra istanza:
/ ** * crea un oggetto 3D pixel da una MovieClip * / funzione pubblica create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (new img2 ()); pObject3D.x = 40; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D); pObject3D2 = new PixelObject3D (); pObject3D2.createFromMovieClip (new img1 ()); pObject3D2.x = 115; pObject3D2.y = -55; pObject3D2.rotationX = -5; scene.addChild (pObject3D2);
Infine, ruotalo nel ciclo di rendering Away3D:
/ ** * il ciclo di rendering * / private function renderLoop (event: Event): void pObject3D.rotationY ++; pObject3D2.rotationY--; pObject3D2.rotationZ--; pObject3D2.rotationX ++; view.render ();
Tutto ciò che rimane è per te per testare il tuo film e crogiolarsi nella meraviglia dei pixel 2D trasformati in oggetti 3D. Ora, cosa puoi fare con BitmapData nella tua prossima applicazione o gioco?
Attraverso questo tutorial abbiamo esaminato una serie di elementi, ma ci siamo concentrati principalmente su BitmapData utilizzo come il disegno MovieClip in a BitmapData, utilizzando setPixel32 () disegnare i singoli pixel, visualizzando il BitmapData usando a Bitmap e leggendo i valori dei pixel usando getPixel32 ().
Abbiamo anche utilizzato alcuni metodi matematici a colori, ottenendo colori esadecimali e persino valori individuali di alpha, rosso, verde e blu toString (16). Infine abbiamo scritto un piccolo loop per creare 3D Cubi usando i valori dei pixel che leggiamo, phew!
Ci sono così tante possibilità quando lavori a livello di pixel e con un po 'di imma
