Share
Velkommen til denne introduksjonen til å jobbe på pikselnivå med ActionScript 3s BitmapData-objekt. Vi tar noen 2D-bilder, bryter dem inn i komponentpikslene, og monterer dem på nytt som 3D-bilder som vi kan flytte og rotere.
La oss se på det endelige resultatet vi vil jobbe for:
Like før du hopper inn, la oss ta et øyeblikk for å se på hvordan prøveprosjektet er lagt ut. Å åpne kilde zip for denne opplæringen du vil ha kilder for hvert betydelig trinn, kan du gå rett fram og lage en kopi av begynne mappe da dette vil fungere som utgangspunkt.
I denne mappen finner du to andre mapper; src og bin. De src mappen er hvor vi vil lagre all kode og FLA-filer og bin mappen er hvor Flash vil lagre SWF-filene. Inne i src mappe der er den Main.FLA og Main.AS dokument klasse.
Hvis du av en eller annen grunn finner en feil i koden din, har du et forsøk på å fikse det (alltid godt å lære av feil), men hvis du ikke kan bekymre deg! Du kan hoppe rett inn og bruke en av trinnmappene i kilde zip som er nærmest trinnet du var på.
Hvis du allerede har hatt en titt på Main.as fil vil du allerede legge merke til noen få referanser til Away3D, et 3D-rammeverk for Flash. Vi kommer til å trenge å laste ned dette og legge det til prosjektet vårt for å fortsette.
Du kan hente sin nyeste versjon fra Away3D-siden.
Når denne nedlastingen er fullført, åpner du zip-filen og inne i away3d_3_6_0 \ src mappe finner du tre mapper, away3d, nochump og wumedia. Kopier disse, som vist nedenfor til din src mappe.
Hvis du ikke allerede har åpnet Main.fla og Main.as. Ser i Flash-biblioteket, kan du se et bilde kalt 1.png og a Filmklipp med et forekomstnavn på img1, som vil fungere som en grunnbeholder for png.
Vi skal utføre en rask kompilering bare for å sikre at vi har lagt til Away3D riktig. Hvis alt går bra, bør vi se en tom Flash-film med en mørk grå bakgrunn og ingen feilmeldinger fra Flash.
Undersøker Main.as fil vi kan se noen variabler som brukes i Away3D, det er allerede en rekke opplæringsprogrammer på Away3D, men vi vil raskt samle på disse:
// grunnleggende Away3D egenskaper beskyttet var scene: Scene3D; beskyttet var kamera: TargetCamera3D; beskyttet var visning: View3D;
Accentsconagua
Scene3D er en plass vi kan bruke til å legge til 3D-objekter som kuber og sfærer.TargetCamera3D er en av de mange typer kameraer som er tilgjengelige i Away3D, det er det vi bruker til å se Scene3D.View3D er en utsiktsport, ofte beskrevet som "vinduet" der vi ser vår scene.Uten å gå inn i detaljer kan du også se en grunnleggende scene er oppsett klar for bruk med initAway3d () metode. Legg merke til at den legger til en ENTER_FRAME EventListener, dette forteller bare Away3D til render () (eller tegne) eventuelle objekter lagt til Scene3D hver ramme.
/ ** * Away3D grunnsceneoppsett * / privat funksjon initAway3d (): void scene = new Scene3D (); kamera = nytt TargetCamera3D (z: -200); view = new View3D (scene: scene, kamera: kamera); addChild (syn); addEventListener (Event.ENTER_FRAME, renderLoop); / ** * render loop * / privat funksjon renderLoop (event: Event): void view.render ();
Det er ganske mye det for introduksjonen til Main.as klasse, vi skal bygge alt annet mens vi går.
Vi kommer til å hoppe rett inn og introdusere disse to klassene, da vi skal jobbe med disse gjennom hele opplæringen. Hvis du er ny til bitmap og BitmapData du kan tenke på dem som malere lerret og en samling av maling daubs. De er helt forskjellige objekter, men begge er koblet sammen, BitmapData inneholder all pikselinformasjon eller penselstrøk og vil ikke være noe uten å bli malt på lerret eller i dette tilfellet, Bitmap!
La oss teste dette ved å legge til en forekomst av img1 MovieClip til scene og lage en kopi av det ved hjelp av Bitmap / BitmapData.
Endre Main.as til følgende:
/ ** * konstruktør * / offentlig funksjon Hoved () initAway3d (); drawExample (); / ** * et raskt eksempel på BitmapData og Bitmap-bruk * / privat funksjon drawExample (): void // lage en forekomst av img1-objektet på scenen for å kopiere var img: MovieClip = new img1 (); addChild (img); // opprett et BitmapData-objekt med følgende parametere: bredde, høyde, gjennomsiktig, farge var bmpData: BitmapData = ny BitmapData (img.width, img.height, true, 0x000000); // trekker en kopi av Img MovieClip inn i BitmapData bmpData.draw (img); // legger til en bitmap til scenen med BitmapData (kopi av img1) -informasjonen for å vise var bmp: Bitmap = ny Bitmap (bmpData); bmp.y = img.height; addChild (BMP);
Ser på drawExample () kode, de to første linjene legger ganske enkelt til img1 protestere mot scene, Dette er bildet vi vil lage av kopi av.
Etter det oppretter vi en BitmapData objekt med følgende parametere:
bredde, bredden til å lage BitmapData høyde, høyden til å gjøre BitmapData gjennomsiktig, hvorvidt BitmapData bør inneholde gjennomsiktige pikslerfarge, bakgrunnsfargenSom vi vet bredden og høyden fra img1 Vi har satt dem direkte, siden vi trenger transparens, setter vi den neste parameteren til sann og endelig angir vi 0x000000 eller svart som bakgrunnsfargen, da det blir gjennomsiktig til vi fyller det.
Fortsetter videre, nå har vi BitmapData objekt oppsett vi har flere alternativer tilgjengelig for oss, vi kan for eksempel gå gjennom pixel ved piksel og kopiere bildet (vi vil bruke noe som dette senere i opplæringen), eller vi kunne bruke tegne() metode.
De tegne() metoden tar a Filmklipp eller Sprite som en parameter og vil kopiere all pikselinformasjon fra objektet til BitmapData.
/ ** * et raskt eksempel på BitmapData og Bitmap-bruk * / privat funksjon drawExample (): void // lage en forekomst av img1-objektet på scenen for å kopiere var img: MovieClip = new img1 (); addChild (img); // opprett et BitmapData-objekt med følgende parametere: bredde, høyde, gjennomsiktig, farge var bmpData: BitmapData = ny BitmapData (img.width, img.height, true, 0x000000); // trekker en kopi av Img MovieClip inn i BitmapData bmpData.draw (img); // legger til en bitmap til scenen med BitmapData (kopi av img1) -informasjonen for å vise var bmp: Bitmap = ny Bitmap (bmpData); bmp.y = img.height; addChild (BMP);
Etter dette lager de neste linjene en bitmap objekt med BitmapData pikselinformasjon som en parameter, som deretter flyttes under originalen img MovieClip og lagt til scene.
/ ** * et raskt eksempel på BitmapData og Bitmap-bruk * / privat funksjon drawExample (): void // lage en forekomst av img1-objektet på scenen for å kopiere var img: MovieClip = new img1 (); addChild (img); // opprett et BitmapData-objekt med følgende parametere: bredde, høyde, gjennomsiktig, farge var bmpData: BitmapData = ny BitmapData (img.width, img.height, true, 0x000000); // trekker en kopi av Img MovieClip inn i BitmapData bmpData.draw (img); // legger til en bitmap til scenen med BitmapData (kopi av img1) -informasjonen for å vise var bmp: Bitmap = ny Bitmap (bmpData); bmp.y = img.height; addChild (BMP);
Det er ikke mye oppsett involvert i å sette opp bitmap aspekt det bare viser en BitmapData, all den magiske er med BitmapData. Nå skal vi få følgende når vi tester:
Nå har vi innhold inni BitmapData objekt ting begynner å bli interessant som vi kan begynne å manipulere bilder ved hjelp av getPixel32 () og setPixel32 ().
Starter med getPixel32 () endre drawExample () kode fra ovenfor til følgende:
/ ** * et raskt eksempel på BitmapData og Bitmap-bruk * / privat funksjon drawExample (): void // lage en forekomst av img1-objektet på scenen for å kopiere var img: MovieClip = new img1 (); addChild (img); // opprett et BitmapData-objekt med følgende parametere: bredde, høyde, gjennomsiktig, farge var bmpData: BitmapData = ny BitmapData (img.width, img.height, true, 0x000000); // trekker en kopi av Img MovieClip inn i BitmapData bmpData.draw (img); // legger til en bitmap til scenen med BitmapData (kopi av img1) -informasjonen for å vise var bmp: Bitmap = ny Bitmap (bmpData); bmp.y = img.height; addChild (BMP); // les pixelinformasjon fra BitmapData var pixelInformation: uint = bmpData.getPixel32 (5, 0); spor (pixelInformation, pixelInformation.toString (16));
Undersøk koden vi har opprettet en vanlig uint-variabel og tilordnet den til verdien av pikselet i bmpData 5 piksler horisontalt og 0 piksler vertikalt. Husk at verdiene begynner på 0 slik:
Å vite at vi valgte å få pikselinformasjonen til 5,0, ville det gjøre det svart piksel på toppraden og sikkert nok Flash-utganger: 4278190080 ff000000
Det ser kanskje ikke ut til å være riktig i begynnelsen, men setPixel32 leser alfaværdien til pikselet (hvor som setPixel leser bare fargen). Vi er vanligvis vant til å jobbe med hex-verdier for farger som FFFFFF eller 000000 så vi kan fortelle Flash til toString (16) for å få hex-verdien:
Nå vet vi hvordan du leser pikselinformasjon, tegner piksler til BitmapData er veldig lik, bare denne gangen bruker vi setPixel32 () å tegne piksler til BitmapData, og vi vil også kaste inn en til sløyfe for å tegne noen piksler.
Først må du endre koden til følgende:
/ ** * et raskt eksempel på BitmapData og Bitmap-bruk * / privat funksjon drawExample (): void // lage en forekomst av img1-objektet på scenen for å kopiere var img: MovieClip = new img1 (); addChild (img); // opprett et BitmapData-objekt med følgende parametere: bredde, høyde, gjennomsiktig, farge var bmpData: BitmapData = ny BitmapData (img.width, img.height, true, 0x000000); // trekker en kopi av Img MovieClip inn i BitmapData bmpData.draw (img); // legger til en bitmap til scenen med BitmapData (kopi av img1) -informasjonen for å vise var bmp: Bitmap = ny Bitmap (bmpData); bmp.y = img.height; addChild (BMP); // les pixelinformasjon fra BitmapData var pixelInformation: uint = bmpData.getPixel32 (5, 0); spor (pixelInformation, pixelInformation.toString (16)); // skriv bildeinformasjon til BitmapData var farge: uint = 0xffff0000; // ff0000 - full rød var-rad: uint = 0; var kolonne: uint = 0; for (rad; rad < bmpData.height; row++) bmpData.setPixel32(column, row, color); column++; if(column > bmpData.width) kolonne = 0;
Den nye koden starter med å lage en vanlig UINT variabel navngitt farge som vi lagrer 0xffff0000 som er: ff helt gjennomsiktig, ff fullstendig rød, 00 nei grønn, 00 nei blå.
Deretter er det to tellere laget for rader og kolonner (rader er en linje med horisontale piksler, kolonner er en linje med vertikale piksler). Disse tellene blir deretter lagt inn i en til sløyfe som øker raden og motverdien hver gang, så når den blandes med setPixel32 () Metode det vil tegne en diagonal linje:
I dette trinnet skal vi introdusere PixelObject3D.as klasse. For å spare litt tid ta en kopi av klassen fra Trinn 8 mappe i kilden zip og slipp den inn i din src mappe i tillegg til Main.fla og Main.as.
Når du har gjort dette, kan vi raskt se på det før vi begynner å legge til koden for å lage 3D-objekter fra piksler.
// egenskaper beskyttet var _bitmapData: BitmapData = null; offentlig var _scaleFactor: Nummer = 1; beskyttet var _bredde: tall = 0; beskyttet var _ høyde: tall = 0;
Vi har noen beskyttede variabler øverst i klassen, en for en BitmapData og tre tall for bredden, høyden og en skala av objektet.
/ ** * konstruktør * / offentlig funksjon PixelObject3D () / ** * begynner etableringsprosessen * / offentlig funksjon createFromMovieClip (mc: MovieClip): void
Etter dem er en tom klassekonstruktør og metoden vi skal jobbe med, createFromMovieClip (). Du vil legge merke til at denne metoden tar en parameter av Filmklipp type, slik som du allerede kan gjette vi sender det a Filmklipp og det vil gi oss tilbake en 3D-representasjon av den. Når det er ferdig er det!
Mens PixelObject3D.as klassen gjør egentlig ikke noe, men la oss legge til en forekomst av det til Main.as klassen slik at vi faktisk kan se endringene på skjermen når vi går.
Starter med å legge til en privat variabel:
// grunnleggende Away3D egenskaper beskyttet var scene: Scene3D; beskyttet var kamera: TargetCamera3D; beskyttet var visning: View3D; // Pixel3DObject beskyttet var po3d: PixelObject3D;
Etter det legger til konstruktøren et anrop til createPixelObect3D ().
/ ** * konstruktør * / offentlig funksjon Hoved () initAway3d (); drawExample (); createPixelObect3D ();
Til slutt legger du til følgende funksjon i Main.as fil. Dette vil skape en forekomst av PixelObject3D klasse, påkalle createFromMovieClip () metode og send den en ny Filmklipp, de img1 vi har brukt tidligere.
En siste linje å påpeke er at vi legger til PixelObject3D klassen som barn av scenen som det er et 3D-objekt, ikke det Scene.
/ ** * lager en PixelObject3D * / privat funksjon createPixelObect3D (): void po3d = new PixelObject3D (); po3d.createFromMovieClip (ny img1 ()); scene.addChild (po3d);
Å vite at vi er bestått Filmklipp Vi ønsker å gjenskape fra denne metoden, det første på vår agenda er å lage en kopi av det ved hjelp av BitmapData akkurat som vi gjorde før. Vi kan da bruke pikseldataene til å begynne å lage 3D-objekter.
Akkurat som før skal vi lage en BitmapData objekt og tegne mc MovieClip gjenstand:
/ ** * begynner etableringsprosessen * / offentlig funksjon createFromMovieClip (mc: MovieClip): void // lagre referanser og opprett bitmapdata _bitmapData = ny BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // sett bredde / høyde _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor);
Vi satte også _bredde og _høyde variabler i henhold til mc bredde og høyde og multiplisere dette ved hjelp av _skaleringsfaktor variabel, dette tillater oss å skala opp eller ned størrelsen på 3D-pikslene hvis vi ønsker det. Mer om dette senere.
Husk at BitmapData bare er pikselinformasjonen og uten å legge BitmapData til en Bitmap, kan vi ikke se den, men vi kan fortsatt lese og skrive til den. Dette er perfekt for oss da vi skal bruke dette trinnet for å begynne å løpe gjennom pikslene i BitmapData og skille mellom de røde, grønne, blå og alfaverdiene.
Endre din createFromMovieClip () metode for å matche dette:
/ ** * begynner etableringsprosessen * / offentlig funksjon createFromMovieClip (mc: MovieClip): void // lagre referanser og opprett bitmapdata _bitmapData = ny BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // sett bredde / høyde _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // pixelinformasjon var pixelValue: uint = 0; var rød: uint = 0; var grønn: uint = 0; var blå: uint = 0; var alfa: uint = 0; // loop gjennom hver piksel horisontalt for (var i: int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, 0); alpha = pixelValue >> 24 & 0xFF; rød = pixelValue >> 16 & 0xFF; grønn = pixelValue >> 8 & 0xFF; blå = pixelValue & 0xFF; spor ("alfa:" + alfa + "rødt:" + rødt + "grønt:" + grønt + "blå:" + blått); Her har vi satt opp noen variabler for fargen og alfaverdiene da startet en til loop basert på MC bredde.
Dette til loop setter pixelValue variabel til verdien av gjeldende piksel ved hjelp av getPixel32 () metode som vi brukte tidligere, men denne gangen vi har brukt 0 for den andre parameteren som er y, så vi skal bare behandle den første horisontale linjen piksler.
Etter dette er det noe ganske komplisert matte kjent som bitmaskering og skifting, for å spare litt tid du kan anta at hver av fargene er hentet fra pixelValue variabel og deretter utdata for oss å se å bruke spor (). Hvis du vil vite mer om bitwise operatører, litt skiftende og maskering, kan du finne et flott innlegg på Polygonal Labs nettsted.
Det du bør se er utgangen av en hel haug med 0 verdier, men vær oppmerksom på de to alfa: 255 linjer, disse er de to svarte pikslene øverst på hånden.
Phew det var ganske mye logikk i de siste skrittene! Nå har vi grunnleggende oppstart, kan vi begynne å bruke pikselopplysningene vi oppnådde tidligere, for å lage et 3D-mesterverk? nesten.
Hvis du har brukt Away3D eller Papervision 3D før du blir kjent med dette trinnet, skal vi begynne å lage 3D-kuber og bruke materialer til dem. For hver piksel som er alpha er 255 (ugjennomsiktig) tar vi farge og lager et materiale basert på fargen som gjelder for en 3D-kube, under er koden for å slå av dette:
/ ** * begynner etableringsprosessen * / offentlig funksjon createFromMovieClip (mc: MovieClip): void // lagre referanser og opprett bitmapdata _bitmapData = ny BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // sett bredde / høyde _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // pixelinformasjon var pixelValue: uint = 0; var rød: uint = 0; var grønn: uint = 0; var blå: uint = 0; var alfa: uint = 0; // loop gjennom hver piksel horisontalt for (var i: int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, 0); alpha = pixelValue >> 24 & 0xFF; rød = pixelValue >> 16 & 0xFF; grønn = pixelValue >> 8 & 0xFF; blå = pixelValue & 0xFF; // hvis piksel er ugjennomsiktig hvis (alpha == 255) // lage en vanlig hex farge streng ie FFFFFF eller 000000 var farge: String = rød.toString (16) + green.toString (16) + blue.toString ); hvis (farge == "000") farge = "000000"; spor ("#" + farge); // lage et materiale fra fargen og søke på en 3D-kube var materiale: Material = new ColorMaterial (farge); var kube: Cube = ny Cube (materiale: materiale, bredde: 2 * _scaleFactor, høyde: 2 * _scaleFactor, dybde: 2 * _scaleFactor); // plassere terningen fra a-verdi slik at registrering / transformasjonspunkt alltid er sentrum cube.x = 0 - (_width / 2) + cube.width * i; this.addChild (terning); I ovennevnte kode har vi brukt rød, grønn og blå variabler og opprettet en vanlig hex-farge, som du kan se utgang fra spor ().
Så heksen fargen farge variabel brukes til å lage en ColorMaterial med Away3D, som bare er et vanlig materiale basert på en farge som kan brukes til 3D-objekter.
Etter det oppretter vi en Cube objekt og spesifiser materiale å være materiale objekt vi opprettet linjen før den. Også verdt å merke seg her er vi har satt bredde, høyde og dybde (husk at vi jobber i tre dimensjoner nå!) til en verdi på to ganger verdien av _scaleValue variabel, dette gjør at vi kan gjøre kubene større eller mindre ved å endre _scaleValue.
Til slutt plasserer vi Cube til null minus halv bredden av mc multiplisert med til loops counter Jeg, Dette gjør registrering eller transformasjonspunkt for det ferdige 3D-objektet i midten. Det legges da til som barn, og når du tester vil du se to små, svarte 3D-modeller Cube objekter.
Nå er to 3D-kuber flotte og alt, men vi ønsker virkelig å få hele hånden til å formes i 3D-kuber. Vi bruker allerede en til sløyfe for å løpe gjennom alle pikslene i første rad, men hvordan får vi det til å løpe gjennom de gjenværende radene av piksler?
Du gjettet det, en annen til sløyfe!
/ ** * begynner etableringsprosessen * / offentlig funksjon createFromMovieClip (mc: MovieClip): void // lagre referanser og opprett bitmapdata _bitmapData = ny BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // sett bredde / høyde _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // pixelinformasjon var pixelValue: uint = 0; var rød: uint = 0; var grønn: uint = 0; var blå: uint = 0; var alfa: uint = 0; // loop gjennom hver rad piksler for (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; rød = pixelValue >> 16 & 0xFF; grønn = pixelValue >> 8 & 0xFF; blå = pixelValue & 0xFF; // hvis piksel er ugjennomsiktig hvis (alpha == 255) // lage en vanlig hex farge streng ie FFFFFF eller 000000 var farge: String = rød.toString (16) + green.toString (16) + blue.toString ); hvis (farge == "000") farge = "000000"; spor ("#" + farge); // lage et materiale fra fargen og søke på en 3D-kube var materiale: Material = new ColorMaterial (farge); var kube: Cube = ny Cube (materiale: materiale, bredde: 2 * _scaleFactor, høyde: 2 * _scaleFactor, dybde: 2 * _scaleFactor); // plassere terningen fra a-verdi slik at registrering / transformasjonspunkt alltid er sentrum cube.x = 0 - (_width / 2) + cube.width * i; cube.y = (_height / 2) + -cube.height * j; this.addChild (terning); Denne gangen har vi bare egentlig forandret tre ting, en ny til sløyfe som denne gangen har j for sin teller. De getPixel32 () har nå j variabel lagt til som y parameter og til slutt Cube er plassert vertikalt ved hjelp av j disk.
Dette ganske mye fullfører hovedlogikken, nå vil den løpe gjennom horisontalt, lese pikselverdiene, opprett a ColorMaterial og a Cube og plasser dem tilsvarende. Når den når slutten av den horisontale linjen, på grunn av den nye til loop det vil gå videre til neste piksel ned og loop gjennom horisontalt igjen til bildet er fullført. Ta en titt på deg selv ved å teste filmen:
Vi har nå alle disse 3D-objektene, men de ser veldig 2D, så vi skal legge til litt bevegelse og få hele objektet til å rotere.
For å gjøre dette må vi spore tilbake til Main.as fil og finn renderLoop () metode. Husk at Away3D må gjengi (eller male) 3D-bildet hver ramme, så vi kan legge til noen enkle rotasjoner til vår PixelObject3D å se hele barnet Cubes rotere:
/ ** * render loop * / privat funksjon renderLoop (event: Event): void pObject3D.rotationZ ++; view.render ();
Prøv å eksperimentere med rotationX, rotationY og rotationZ Husk bare å tilbakestille den tilbake til koden ovenfor før du fortsetter. Du kan også legge til i create3DObject () å bedre senter og justere Cubes til kameraet.
/ ** * lager en 3D pixel objekt fra en MovieClip * / offentlig funksjon create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (ny img1 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);
Nå er dette mer som det, vi kan endelig se 3D-pixelobjektet rotere. Vi kan begynne å tilpasse dette og legge til en eksplodert visning ved ganske enkelt å redigere z verdien av Cubes når vi lager dem.
Hopp tilbake til PixelObject3d.as klasse og finn linjene der vi posisjonerer Cube's x og y og legg til følgende:
// hvis piksel er ugjennomsiktig hvis (alpha == 255) // lage en vanlig hex farge streng ie FFFFFF eller 000000 var farge: String = rød.toString (16) + green.toString (16) + blue.toString ); hvis (farge == "000") farge = "000000"; spor ("#" + farge); // lage et materiale fra fargen og søke på en 3D-kube var materiale: Material = new ColorMaterial (farge); var kube: Cube = ny Cube (materiale: materiale, bredde: 2 * _scaleFactor, høyde: 2 * _scaleFactor, dybde: 2 * _scaleFactor); // plassere terningen fra a-verdi slik at registrering / transformasjonspunkt alltid er sentrum cube.x = 0 - (_width / 2) + cube.width * i; cube.y = (_height / 2) + -cube.height * j; cube.z = -25 + (Math.random () * 50); this.addChild (terning); Dette vil flytte hver Cube til en tilfeldig dybde fra -25 til positiv 25 og skape en fin eksplodert effekt:
Som PixelObject3D er litt liten på skjermen, vi skal justere skalaen litt. Vi kan gjøre dette raskt ved å justere _scaleValue variabel i PixelObject3D.as klasse og øke den til 1,5.
/ ** * lager et 3D-objekt fra en MovieClip * * @ author Anton Mills * / offentlig klasse PixelObject3D utvider ObjectContainer3D // egenskaper beskyttet var _bitmapData: BitmapData = null; offentlig var _scaleFactor: Number = 1.5; beskyttet var _bredde: tall = 0; beskyttet var _ høyde: tall = 0;
Bruker PixelObject3D klassen for å lage andre bilder er enkelt, bare importere bildet du vil behandle inn i Flash. Så konvertere den til en MovieClip som vanlig, denne gangen gi den en Klassenavn av img2 som dette:
Nå kan du endre Main.as å bruke den nye img2 objekt med en liten endring:
/ ** * lager en 3D pixel objekt fra en MovieClip * / offentlig funksjon create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (ny img2 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);
Du kan bruke så mange av disse som du vil, bare sørg for at du legger dem til Away3D-scenen, og du kan ha flere. I dette eksemplet har jeg fjernet z eiendom som vi brukte i trinn 16 for eksplosjonseffekten.
Main.as med en annen PixelObject3D la til:
/ ** * En opplæring rettet mot å introdusere ActionScript 3s BitmapData * og hvordan du bruker BitmapData-informasjonen til å lage en 3D * pikselform ved hjelp av Away3D. * * @author Anton Mills * / offentlig klasse Main utvider MovieClip // grunnleggende Away3D egenskaper beskyttet var scene: Scene3D; beskyttet var kamera: TargetCamera3D; beskyttet var visning: View3D; beskyttet var pObject3D: PixelObject3D; beskyttet var pObject3D2: PixelObject3D;
Deretter oppretter du en annen forekomst:
/ ** * lager en 3D pixel objekt fra en MovieClip * / offentlig funksjon create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (ny img2 ()); pObject3D.x = 40; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D); pObject3D2 = ny PixelObject3D (); pObject3D2.createFromMovieClip (ny img1 ()); pObject3D2.x = 115; pObject3D2.y = -55; pObject3D2.rotationX = -5; scene.addChild (pObject3D2);
Og til slutt roter den i Away3D render loop:
/ ** * render loop * / privat funksjon renderLoop (event: Event): void pObject3D.rotationY ++; pObject3D2.rotationY--; pObject3D2.rotationZ--; pObject3D2.rotationX ++; view.render ();
Alt som er igjen er for deg å teste din film og baske i vidunderligheten på 2D piksler forvandlet til 3D-objekter. Nå, hva kan du gjøre med BitmapData i ditt neste program eller spill?
Gjennom denne opplæringen har vi sett på en blanding av elementer, men vi har primært fokusert på BitmapData bruk som tegning movieclips i til BitmapData, ved hjelp av setPixel32 () å tegne individuelle piksler, vise BitmapData ved å bruke en bitmap og leser pikselverdier ved hjelp av getPixel32 ().
Vi har også dekket noen fargetematikk, få heksekarakterer og til og med individuelle alfa, røde, grønne og blå verdier ved hjelp av toString (16). Til slutt skrev vi en liten sløyfe for å lage 3D Cubes bruker pikselverdiene vi leser, phew!
Det er så mange muligheter når du jobber på pikselnivå, og med litt fantasi og eksperimentering kan du lage noen veldig kule applikasjoner og spill! Takk for din tid, jeg håper du likte denne opplæringen.
