Share
Bine ați venit la această introducere pentru a lucra la nivel de pixel cu obiectul BitmapData al ActionScript 3. Vom face câteva imagini 2D, le vom rupe în pixelii lor componenți, apoi le vom reasambla ca imagini 3D pe care le putem mișca și roti.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Chiar înainte de a sări, hai să aruncăm o clipă pentru a examina modul în care este prezentat proiectul eșantionului. Deschiderea zipului sursă pentru acest tutorial va conține surse pentru fiecare pas semnificativ, puteți merge chiar înainte și puteți face o copie a începe deoarece acesta va servi ca punct de plecare.
În acest dosar veți găsi două alte dosare; src și cos. src dosarul este locul în care vom salva toate codurile noastre și fișierele FLA și cos este locul în care Flash va salva fișierele SWF. În interiorul src dosarul este Main.FLA si Main.AS clasa de documente.
Dacă, din orice motiv, găsiți o eroare în codul dvs., încercați să remediați acest lucru (întotdeauna bine să învățați din greșeli), dar dacă nu vă puteți îngrijora atunci! Puteți să sarăți înapoi și să utilizați unul dintre pașii de pași din zipul sursă cel mai apropiat de pasul pe care vă aflați.
Dacă ați mai văzut deja o privire Main.as fișier veți observa deja câteva referințe la Away3D, un cadru 3D pentru Flash. Va trebui să descărcați acest lucru și să îl adăugați la proiectul nostru pentru a continua.
Puteți lua ultima lor versiune de pe site-ul Away3D.
Odată ce această descărcare sa terminat, deschideți fișierul zip și în interiorul lui away3d_3_6_0 \ src veți găsi trei dosare, away3d, nochump și wumedia. Copiați-le, după cum se arată mai jos, la dvs. src pliant.
Dacă nu ați făcut-o deja, deschideți-l Main.fla și Main.as. Privind în Biblioteca Flash puteți vedea o imagine numită 1.png și a MovieClip cu un nume de instanță img1, care va servi drept container de bază pentru png.
Vom face o compilare rapidă pentru a ne asigura că am adăugat corect Away3D. Dacă totul merge bine, ar trebui să vedem un film Flash gol, cu fundal gri închis și fără mesaje de eroare de la Flash.
Examinarea Main.as fișier putem vedea câteva variabile care sunt utilizate în Away3D, există deja o serie de tutoriale pe Away3D, dar vom recapitula rapid pe acestea:
// proprietăți de bază Away3D protejate var scena: Scene3D; camera protejată var: TargetCamera3D; protejat var vizual: View3D;
Accentsconagua
Scene3D este un spațiu pe care îl putem folosi pentru a adăuga obiecte 3D precum cuburile și sferele.TargetCamera3D este unul dintre numeroasele tipuri de camere disponibile în Away3D, este ceea ce folosim pentru a vă uita la Scene3D.View3D este un port de vizualizare, deseori descris ca "fereastra" în care vedem scena noastră.Fără a intra în specificul puteți vedea, de asemenea, o scenă de bază este setare gata de utilizare cu initAway3d () metodă. Observați că adaugă o ENTER_FRAME EventListener, acest lucru spune pur și simplu lui Away3D face() (sau desenează) orice obiecte adăugate la Scene3D fiecare cadru.
/ ** * Away3D setarea scenei de bază * / funcția privată initAway3d (): void scene = new Scene3D (); camera = noul TargetCamera3D (z: -200); view = new View3D (scena: scena, camera: camera); addChild (vizualizare); addEventListener (Event.ENTER_FRAME, renderLoop); / ** * buclă de randare * / privată renderLoop (eveniment: Eveniment): void view.render ();
Asta este destul de mult pentru introducerea în Main.as clasa, vom construi totul în timp ce mergem.
Vom merge direct și vom prezenta aceste două clase, deoarece vom lucra cu acestea în tot tutorialul. Dacă nu sunteți nou Bitmap și BitmapData vă puteți gândi la ele ca la panza pictorilor și la o colecție de vopsele de vopsea. Sunt obiecte complet diferite, dar ambele sunt conectate, BitmapData conține toate informațiile despre pixeli sau loviturile periilor și nu ar fi nimic fără a fi pictat pe o pânză sau în acest caz Bitmap!
Să încercăm acest lucru adăugând o instanță a img1 MovieClip la etapă și făcând o copie a acestuia folosind Bitmap / BitmapData.
Modificați Main.as la următoarele:
/ ** * constructor * / funcție publică Main () initAway3d (); drawExample (); / ** * un exemplu rapid de utilizare a BitmapData și Bitmap * / privat drawExample (): void // crea o instanță a obiectului img1 pe scenă pentru a copia var img: MovieClip = new img1 (); addChild (img); // crea un obiect BitmapData cu următorii parametri: lățime, înălțime, transparentă, culoare var bmpData: BitmapData = nouă BitmapData (img.width, img.height, true, 0x000000); // desenează o copie a img MovieClip în BitmapData bmpData.draw (img); // adaugă un Bitmap pe scenă cu informațiile BitmapData (copie a img1) pentru a afișa var bmp: Bitmap = Bitmap nou (bmpData); bmp.y = img.height; addChild (bmp);
Privind la drawExample () cod, primele două linii pur și simplu adăugați img1 obiecte față de etapă, aceasta este imaginea pe care o vom face copia.
După aceea, creăm un BitmapData obiect cu următorii parametri:
lăţime, lățimea de a face BitmapData înălţime, înălțimea de a face BitmapData transparent, dacă BitmapData ar trebui să conțină pixeli transparențiculoare, culoarea de fundalDupă cum știm latime și înălțime de la img1 le-am stabilit direct, pentru că vom avea nevoie de transparență, stabilim parametrul următor la adevărat și în cele din urmă specificăm 0x000000 sau negru ca culoarea de fundal, deoarece va apărea transparent până când o vom umple.
Continuând, acum avem BitmapData obiectul setat avem mai multe opțiuni disponibile pentru noi, am putea, de exemplu, o buclă prin pixel cu pixel și să copiem imaginea (vom folosi ceva de genul asta mai târziu în tutorial), sau am putea folosi a desena() metodă.
a desena() metoda ia o MovieClip sau spiriduș ca parametru și va copia toate informațiile pixel de la obiect la BitmapData.
/ ** * un exemplu rapid de utilizare BitmapData și Bitmap * / funcția privată drawExample (): void // crea o instanță a obiectului img1 pe scenă pentru a copia var img: MovieClip = new img1 (); addChild (img); // crea un obiect BitmapData cu următorii parametri: lățime, înălțime, transparentă, culoare var bmpData: BitmapData = nouă BitmapData (img.width, img.height, true, 0x000000); // desenează o copie a img MovieClip în BitmapData bmpData.draw (img); // adaugă un Bitmap pe scenă cu informațiile BitmapData (copie a img1) pentru a afișa var bmp: Bitmap = Bitmap nou (bmpData); bmp.y = img.height; addChild (bmp);
În continuare, următoarele câteva linii creează o Bitmap obiect cu BitmapData pixel ca parametru, care este apoi mutat sub original img MovieClip și a adăugat la etapă.
/ ** * un exemplu rapid de utilizare BitmapData și Bitmap * / funcția privată drawExample (): void // crea o instanță a obiectului img1 pe scenă pentru a copia var img: MovieClip = new img1 (); addChild (img); // crea un obiect BitmapData cu următorii parametri: lățime, înălțime, transparentă, culoare var bmpData: BitmapData = nouă BitmapData (img.width, img.height, true, 0x000000); // desenează o copie a img MovieClip în BitmapData bmpData.draw (img); // adaugă un Bitmap pe scenă cu informațiile BitmapData (copie a img1) pentru a afișa var bmp: Bitmap = Bitmap nou (bmpData); bmp.y = img.height; addChild (bmp);
Nu există o mulțime de configurare implicată în configurarea Bitmap aspectul afișează pur și simplu o BitmapData, toată magia este cu BitmapData. Acum, la testare, trebuie să obținem următoarele:
Acum avem conținut în interiorul BitmapData obiectele obiect încep să devină interesante, deoarece putem începe să manipulăm imaginile folosind getPixel32 () și setPixel32 ().
Incepand cu getPixel32 () modificați drawExample () cod de mai sus la următoarele:
/ ** * un exemplu rapid de utilizare BitmapData și Bitmap * / funcția privată drawExample (): void // crea o instanță a obiectului img1 pe scenă pentru a copia var img: MovieClip = new img1 (); addChild (img); // crea un obiect BitmapData cu următorii parametri: lățime, înălțime, transparentă, culoare var bmpData: BitmapData = nouă BitmapData (img.width, img.height, true, 0x000000); // desenează o copie a img MovieClip în BitmapData bmpData.draw (img); // adaugă un Bitmap pe scenă cu informațiile BitmapData (copie a img1) pentru a afișa var bmp: Bitmap = Bitmap nou (bmpData); bmp.y = img.height; addChild (bmp); // citiți informațiile pixelilor din BitmapData var pixelInformation: uint = bmpData.getPixel32 (5, 0); urmări (pixelInformation, pixelInformation.toString (16));
Examinând codul am creat o variabilă obișnuită uint și l-am atribuit la valoarea pixelului în bmpData la 5 pixeli orizontal și 0 pixeli pe verticală. Amintiți-vă valorile încep de la 0 astfel:
Știind că am ales să obținem informațiile pixelilor pentru 5,0, asta ar face-o pixel negru pe rândul de sus și ieșiri destul de sigure Flash: 4278190080 ff000000
Ar putea să nu pară la început, dar setPixel32 citește valoarea alfa a pixelului (unde setPixel doar citește culoarea). Suntem obișnuiți să lucrăm cu valori hex pentru culori cum ar fi FFFFFF sau 000000 astfel încât să putem spune Flash pentru a toString (16) pentru a obține valoarea hex:
Acum știm cum să citim informațiile pixelilor, desenând pixeli către BitmapData este foarte asemănătoare, doar de data aceasta vom folosi setPixel32 () pentru a atrage pixeli pe BitmapData, și vom arunca și a pentru pentru a desena cateva pixeli.
Mai întâi modificați codul la următoarele:
/ ** * un exemplu rapid de utilizare BitmapData și Bitmap * / funcția privată drawExample (): void // crea o instanță a obiectului img1 pe scenă pentru a copia var img: MovieClip = new img1 (); addChild (img); // crea un obiect BitmapData cu următorii parametri: lățime, înălțime, transparentă, culoare var bmpData: BitmapData = nouă BitmapData (img.width, img.height, true, 0x000000); // desenează o copie a img MovieClip în BitmapData bmpData.draw (img); // adaugă un Bitmap pe scenă cu informațiile BitmapData (copie a img1) pentru a afișa var bmp: Bitmap = Bitmap nou (bmpData); bmp.y = img.height; addChild (bmp); // citiți informațiile pixelilor din BitmapData var pixelInformation: uint = bmpData.getPixel32 (5, 0); urmări (pixelInformation, pixelInformation.toString (16)); // scrie informații despre pixeli la culoarea BitmapData var: uint = 0xffff0000; // ff0000 - rândul roșu complet var: uint = 0; var coloana: uint = 0; pentru (rând; rând; < bmpData.height; row++) bmpData.setPixel32(column, row, color); column++; if(column > bmpData.width) coloană = 0;
Noul cod începe să creeze un mod normal uint variabilă numită culoare pe care le stocăm 0xffff0000 care este: ff complet transparent, ff complet roșu, 00 nu verde, 00 nu albastru.
Apoi, există două contoare realizate pentru rânduri și coloane (rândurile sunt o linie de pixeli orizontali, coloanele fiind o linie de pixeli verticali). Aceste contoare sunt apoi introduse în a pentru buclă care crește de fiecare dată rândul și valoarea contorului, deci când este amestecat cu setPixel32 () metoda va desena o linie diagonala:
În acest pas vom introduce PixelObject3D.as clasă. Pentru a salva un pic de timp apuca o copie a clasei de la Pasul 8 folderul din zipul sursă și plasați-l la dvs. src dosar în afară de Main.fla și Main.as.
Odată ce ați făcut acest lucru, permiteți o examinare rapidă înainte de a începe să adăugăm codul pentru a crea obiecte 3D de la pixeli.
// proprietăți protejate var _bitmapData: BitmapData = null; public var _scaleFactor: Număr = 1; protejat var _width: Number = 0; protejat var _height: Number = 0;
Avem câteva variabile protejate în partea de sus a clasei, una pentru o BitmapData și trei numere pentru lățimea, înălțimea și o scală a obiectului.
/ ** * constructor * / funcția publică PixelObject3D () / ** * începe procesul de creare * / funcția publică createFromMovieClip (mc: MovieClip): void
În urma lor este un constructor de clase goale și metoda cu care vom lucra, createFromMovieClip (). Veți observa că această metodă are un parametru de MovieClip tip, astfel încât să puteți ghici deja că o vom trece a MovieClip și ne va da o reprezentare 3D a acesteia. Când a terminat asta!
In timp ce PixelObject3D.as clasa nu face nimic de fapt, să adăugăm o instanță a acesteia la Main.as astfel încât să vedem efectiv modificările pe ecran în timp ce mergem.
Începând cu adăugarea unei variabile private:
// proprietăți de bază Away3D protejate var scena: Scene3D; camera protejată var: TargetCamera3D; protejat var vizual: View3D; // protecția Pixel3DObject var po3d: PixelObject3D;
În continuare, adăugați la constructor un apel către createPixelObect3D ().
/ ** * constructor * / funcție publică Main () initAway3d (); drawExample (); createPixelObect3D ();
În cele din urmă, adăugați următoarea funcție la Main.as fişier. Aceasta va crea o instanță a PixelObject3D clasa, invoca createFromMovieClip () metodă și să o transmiți nouă MovieClip, img1 am folosit anterior.
O ultimă linie care trebuie subliniată este aceea pe care o adăugăm PixelObject3D clasa ca copil al scenei, deoarece este un obiect 3D, nu Etapă.
/ ** * creează o funcție privată PixelObject3D * / createPixelObect3D (): void po3d = new PixelObject3D (); po3d.createFromMovieClip (nou img1 ()); scene.addChild (po3d);
Știind că am trecut MovieClip dorim să recreăm din această metodă, primul lucru pe agenda noastră este să facem o copie a acestuia utilizând BitmapData exact așa cum am făcut înainte. Apoi putem folosi datele pixelului pentru a incepe crearea obiectelor 3D.
La fel ca înainte, vom crea o BitmapData obiect și trageți mc MovieClip obiect:
/ ** * începe procesul de creare * / funcția publică createFromMovieClip (mc: MovieClip): void // trimite referințe și a crea bitmapdata _bitmapData = noi BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // set lățime / înălțime _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor);
Am setat și _lăţime și _înălţime variabile în funcție de mc lățime și înălțime și să înmulțească acest lucru cu _scaleFactor variabilă, acest lucru ne permite să scară în sus sau în jos dimensiunea pixelilor 3D, dacă dorim. Mai multe despre asta mai târziu.
Amintiți-vă că BitmapData este doar informația pixelilor și fără a adăuga BitmapData la un Bitmap, nu vom putea să-l vedem, dar putem citi și scrie în continuare. Acest lucru este perfect pentru noi, pe măsură ce vom folosi acest pas pentru a începe să bucle prin pixelii BitmapData și să separăm valorile roșu, verde, albastru și alfa.
Modificați-vă createFromMovieClip () pentru a se potrivi cu aceasta:
/ ** * începe procesul de creare * / funcția publică createFromMovieClip (mc: MovieClip): void // trimite referințe și a crea bitmapdata _bitmapData = noi BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // set lățime / înălțime _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // informație pixel var pixelValue: uint = 0; var roșu: uint = 0; var verde: uint = 0; var albastru: uint = 0; var alfa: uint = 0; / / buclă prin fiecare pixel orizontal pentru (var i: int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, 0); alpha = pixelValue >> 24 & 0xFF; roșu = pixelValue >> 16 & 0xFF; verde = pixelValue >> 8 & 0xFF; albastru = pixelValue & 0xFF; urmări ("alpha:" + alfa + "roșu:" + roșu + "verde:" + verde + "albastru:" + albastru); Aici am creat câteva variabile pentru valorile culorilor și alfa apoi a început a pentru buclă bazată pe MC lăţime.
Acest pentru buclă stabilește pixelValue variabilă la valoarea pixelului curent folosind getPixel32 () metoda pe care am folosit-o mai devreme, dar această notă de timp am folosit 0 pentru al doilea parametru care este y, așa că vom procesa numai prima linie orizontală de pixeli.
După aceasta există câteva matematice destul de complexe, cunoscute sub denumirea de mascare și deplasare a biților, pentru a economisi puțin timp pentru a vă putea presupune că fiecare dintre culori este extrasă din pixelValue variabilă și apoi ieșire pentru noi pentru a vedea utilizarea urmă(). Dacă doriți să aflați mai multe despre operatorii bitumului, deplasarea bitului și mascarea, atunci puteți găsi un post minunat pe site-ul Polygonal Labs.
Ceea ce ar trebui să vedeți este rezultatul unei mulțimi întregi 0 valori, dar să acorde atenție celor două alfa: 255 liniile, aceștia sunt cei doi pixeli negri din partea de sus a mâinii.
Phew a fost destul de multă logică în ultimii câțiva pași! Acum, avem noțiunile de bază și începem să folosim informațiile despre pixeli pe care le-am obținut mai devreme pentru a crea o capodoperă 3D? aproape.
Dacă ați folosit Away3D sau Papervision 3D înainte de a vă familiariza cu acest pas, vom începe să creăm cuburi 3D și să le aplicăm materiale. Pentru fiecare pixel care este alfa este 255 (opac), luăm culoarea și creăm un material bazat pe culoarea care se aplică unui cub 3D, mai jos este codul pentru a lovi acest lucru:
/ ** * începe procesul de creare * / funcția publică createFromMovieClip (mc: MovieClip): void // trimite referințe și a crea bitmapdata _bitmapData = noi BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // set lățime / înălțime _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // informație pixel var pixelValue: uint = 0; var roșu: uint = 0; var verde: uint = 0; var albastru: uint = 0; var alfa: uint = 0; / / buclă prin fiecare pixel orizontal pentru (var i: int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, 0); alpha = pixelValue >> 24 & 0xFF; roșu = pixelValue >> 16 & 0xFF; verde = pixelValue >> 8 & 0xFF; albastru = pixelValue & 0xFF; // dacă pixelul este opac în cazul în care (alfa == 255) // a crea un șir de culoare hexagonală regulat, adică FFFFFF sau 000000 var color: String = red.toString (16) + verde.toString (16) + blue.toString ); dacă (culoare == "000") color = "000000"; urmări ("#" + culoare); // creați un material de culoare și aplicați unui material 3D de cub var: Material = nou ColorMaterial (culoare); var cub: Cube = nou Cub (material: material, lățime: 2 * _scaleFactor, înălțime: 2 * _scaleFactor, adâncime: 2 * _scaleFactor); // poziționați cubul dintr-o valoare - astfel încât punctul de înregistrare / transformare este întotdeauna centrul cube.x = 0 - (_width / 2) + cube.width * i; this.addChild (cub); În codul de mai sus am folosit roșu, verde și albastru variabile și a creat o culoare hexagonală regulată, pe care o puteți vedea din urmă().
Apoi culoarea hexagonală culoare variabila este folosită pentru a crea o ColorMaterial cu Away3D, care este doar un material obișnuit bazat pe o culoare care poate fi aplicată obiectelor 3D.
După aceea, creăm un cub obiect și specificați material să fie material obiect am creat linia în fața lui. De remarcat, de asemenea, aici este setarea lăţime, înălţime și adâncime (rețineți că lucrăm acum în trei dimensiuni!), până la o valoare de două ori mai mare decât valoarea _scaleValue variabilă, acest lucru ne permite să facem cuburile mai mari sau mai mici prin schimbare _scaleValue.
În cele din urmă, poziționăm cub la zero minus jumătate din lățimea lui mc înmulțită cu pentru buclele contra eu, aceasta face ca înregistrarea sau transformarea punctului obiect 3D finalizat în centru. Apoi este adăugat ca un copil și atunci când testați veți vedea două mici 3D negre cub obiecte.
Acum, două cuburi 3D sunt minunate și totuși, cu adevărat, dorim să obținem întreaga formă de mână în cuburi 3D. Noi deja folosim a pentru buclă pentru a buclei prin toți pixelii din primul rând, dar cum putem ajunge la rândul prin rândurile rămase de pixeli?
Ai ghicit, altul pentru buclă!
/ ** * începe procesul de creare * / funcția publică createFromMovieClip (mc: MovieClip): void // trimite referințe și a crea bitmapdata _bitmapData = noi BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // set lățime / înălțime _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // informație pixel var pixelValue: uint = 0; var roșu: uint = 0; var verde: uint = 0; var albastru: uint = 0; var alfa: uint = 0; / / pentru fiecare rând de pixeli pentru (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 & 0xFF; roșu = pixelValue >> 16 & 0xFF; verde = pixelValue >> 8 & 0xFF; albastru = pixelValue & 0xFF; // dacă pixelul este opac în cazul în care (alfa == 255) // a crea un șir de culoare hexagonală regulat, adică FFFFFF sau 000000 var color: String = red.toString (16) + verde.toString (16) + blue.toString ); dacă (culoare == "000") color = "000000"; urmări ("#" + culoare); // creați un material de culoare și aplicați unui material 3D de cub var: Material = nou ColorMaterial (culoare); var cub: Cube = nou Cub (material: material, lățime: 2 * _scaleFactor, înălțime: 2 * _scaleFactor, adâncime: 2 * _scaleFactor); // poziționați cubul dintr-o valoare - astfel încât punctul de înregistrare / transformare este întotdeauna centrul cube.x = 0 - (_width / 2) + cube.width * i; cube.y = (_height / 2) + -cube.height * j; this.addChild (cub); De data aceasta am schimbat cu adevărat trei lucruri, unul nou pentru bucla pe care o are de data asta j pentru contra. getPixel32 () acum are j variabilă adăugată ca y parametru și în cele din urmă cub este poziționat vertical folosind j tejghea.
Acest lucru completează destul de mult logica principală, acum va trece prin orizontală, va citi valorile pixelilor, va crea a ColorMaterial și a cub și poziționează-le în consecință. Odată ce ajunge la capătul liniei orizontale, din cauza noului pentru buclă se va trece la următorul pixel în jos și va trece prin orizontală din nou până când imaginea este completă. Aruncați o privire prin testarea filmului:
Acum avem toate aceste obiecte 3D, dar ele arata foarte bine 2D, asa ca vom adauga un pic de miscare si vom obtine tot obiectul rotindu-se.
Pentru a face acest lucru va trebui să ne întoarcem urmărirea la Main.as fișier și localizați renderLoop () metodă. Amintiți-vă Away3D va trebui să render (sau picta) imaginea 3D în fiecare cadru, astfel încât să putem adăuga unele rotații simple la PixelObject3D pentru a vedea tot copilul cuburi roti:
/ ** * bucla de randare * / funcția privată renderLoop (eveniment: Eveniment): void pObject3D.rotationZ ++; view.render ();
Simțiți-vă liber să experimentați rotationX, rotationY și rotationZ nu uitați să resetați codul de mai sus înainte de a continua. De asemenea, puteți adăuga la create3DObject () pentru a centra mai bine și a alinia cuburi la camera foto.
/ ** * creează un obiect pixel 3D de la un MovieClip * / funcția publică create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (nou img1 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);
Acum, acest lucru este mai mult ca acesta, putem vedea în cele din urmă obiect pixel 3D în rotație. Putem începe să tweak acest lucru și să adăugați o vedere explodat prin simpla editare a z valoarea cuburi când le creăm.
Salt înapoi la PixelObject3d.as clasa și găsiți liniile în care poziționăm cub„s X și y și adăugați următoarele:
// dacă pixelul este opac în cazul în care (alfa == 255) // a crea un șir de culoare hexagonală regulat, adică FFFFFF sau 000000 var color: String = red.toString (16) + verde.toString (16) + blue.toString ); dacă (culoare == "000") color = "000000"; urmări ("#" + culoare); // creați un material de culoare și aplicați unui material 3D de cub var: Material = nou ColorMaterial (culoare); var cub: Cube = nou Cub (material: material, lățime: 2 * _scaleFactor, înălțime: 2 * _scaleFactor, adâncime: 2 * _scaleFactor); // poziționați cubul dintr-o valoare - astfel încât punctul de înregistrare / transformare este întotdeauna centrul cube.x = 0 - (_width / 2) + cube.width * i; cube.y = (_height / 2) + -cube.height * j; cube.z = -25 + (Math.random () * 50); this.addChild (cub); Aceasta se va mișca fiecare cub la o adâncime aleatorie de la -25 la pozitiv 25 și de a crea un efect frumos explodat:
Dupa cum PixelObject3D este puțin mic pe ecran, vom ajusta ușor scara. Putem face acest lucru rapid prin ajustarea _scaleValue variabilă în PixelObject3D.as clasa și creșterea acesteia la 1,5.
/ ** * creează un obiect 3D de la un filmClip * * @ autor Anton Mills * / clasa publică PixelObject3D extinde ObjectContainer3D // proprietăți protejate var _bitmapData: BitmapData = null; public var _scaleFactor: Număr = 1,5; protejat var _width: Number = 0; protejat var _height: Number = 0;
Utilizarea PixelObject3D clasa pentru a crea alte imagini este ușor, importați pur și simplu imaginea pe care doriți să o procesați în Flash. Apoi, convertiți-l într-un filmClip ca de obicei, de data aceasta dați-i a Numele clasei de img2 asa:
Acum puteți schimba Main.as pentru a utiliza noul img2 obiect cu o mică modificare:
/ ** * creează un obiect pixel 3D de la un MovieClip * / funcția publică create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (noul img2 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);
Puteți folosi cât mai multe dintre acestea, așa că trebuie să le adăugați la scena Away3D și puteți avea mai multe. În acest exemplu am eliminat z proprietate pe care am folosit-o la pasul 16 pentru efectul de explozie.
Main.as cu altul PixelObject3D adăugat:
/ ** * Un tutorial care are ca scop introducerea BitmapData ActionScript 3 și modul de utilizare a informațiilor BitmapData pentru a crea o 3D * pixelă folosind Away3D. * * @Author Anton Mills * / clasa publică principală extinde MovieClip // proprietățile de bază Away3D protejate var scena: Scene3D; camera protejată var: TargetCamera3D; protejat var vizual: View3D; protejat var pObject3D: PixelObject3D; protejat var pObject3D2: PixelObject3D;
Apoi creați o altă instanță:
/ ** * creează un obiect pixel 3D de la un MovieClip * / funcția publică create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (noul img2 ()); pObject3D.x = 40; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D); pObject3D2 = noul PixelObject3D (); pObject3D2.createFromMovieClip (nou img1 ()); pObject3D2.x = 115; pObject3D2.y = -55; pObject3D2.rotationX = -5; scene.addChild (pObject3D2);
În cele din urmă, rotiți-o în buclă de redare Away3D:
/ ** * bucla de randare * / funcția privată renderLoop (eveniment: Eveniment): void pObject3D.rotationY ++; pObject3D2.rotationY--; pObject3D2.rotationZ--; pObject3D2.rotationX ++; view.render ();
Tot ce rămâne este să vă testați filmul și să vă bucurați de minunatul pixeli 2D transformați în obiecte 3D. Cu ce poți să faci BitmapData în următoarea aplicație sau joc?
Prin acest tutorial ne-am uitat la un amestec de elemente, dar ne-am concentrat în primul rând asupra BitmapData cum ar fi desenul MovieClips in la BitmapData, utilizând setPixel32 () pentru a desena pixeli individuali, afișând BitmapData prin utilizarea unui a Bitmap și valorile de citire a pixelilor utilizând getPixel32 ().
De asemenea, am acoperit câteva matematici de culoare, obținând culori hexagonale și chiar valori individuale alfa, roșu, verde și albastru toString (16). În sfârșit, am scris o buclă mică pentru a crea 3D cuburi folosind valorile pixelilor pe care le citim, phew!
Există atât de multe posibilități atunci când lucrați la nivel de pixeli și cu puțină imaginație și experimentare puteți crea câteva aplicații și jocuri foarte cool! Vă mulțumim pentru timpul acordat, sper că vă place acest tutorial.
