Share
Välkommen till denna introduktion för att arbeta på pixelnivå med ActionScript 3 BitmapData-objekt. Vi tar några 2D-bilder, bryter dem in i sina pixelpunkter och monterar dem sedan som 3D-bilder som vi kan flytta och rotera.
Låt oss ta en titt på det slutliga resultatet vi ska arbeta för:
Strax innan vi hoppar in, låt oss ta en stund att titta på hur provprojektet läggs ut. När du öppnar källlåset för den här handledningen kommer du att få källor till varje viktigt steg, du kan gå direkt och göra en kopia av Börja mapp eftersom detta kommer att fungera som vår utgångspunkt.
Inne i den här mappen hittar du två andra mappar; src och bin. De src mappen är där vi sparar alla våra kod och FLA-filer och bin mappen är där Flash kommer att spara SWF-filerna. Inuti src mapp där finns Main.FLA och den Main.AS dokument klass.
Om du av någon anledning hittar ett fel i din kod, försök att åtgärda det (alltid bra att lära dig av misstag) men om du inte kan oroa dig inte! Du kan hoppa direkt in och använda en av stegmapparna i källlås som ligger närmast det steg du var på.
Om du redan har tittat på Main.as filen kommer du redan märka några referenser till Away3D, en 3D-ram för Flash. Vi måste ladda ner det här och lägga till det i vårt projekt för att fortsätta.
Du kan fånga sin senaste version från Away3D-webbplatsen.
När denna nedladdning har slutförts, öppna zip-filen och inuti away3d_3_6_0 \ src mapp hittar du tre mappar, Away3D, nochump och wumedia. Kopiera dessa, som visas nedan till din src mapp.
Om du inte redan har öppnat Main.fla och Main.as. Om du tittar i Flash-biblioteket kan du se en bild som heter 1.png och a Filmklipp med ett förekomstnamn på img1, som kommer att fungera som en grundläggande behållare för png.
Vi ska utföra en snabb sammanställning bara för att se till att vi har lagt till Away3D korrekt. Om allt går bra borde vi se en tom Flash-film med en mörkgrå bakgrund och inga felmeddelanden från Flash.
Granskar Main.as fil vi kan se några variabler som används i Away3D, det finns redan en mängd tutorials på Away3D men vi kommer snabbt att läsa om dessa:
// grundläggande Away3D egenskaper skyddade var scen: Scene3D; skyddad var kamera: TargetCamera3D; skyddad varvy: View3D;
Accentsconagua
Scene3D är ett utrymme vi kan använda för att lägga till 3D-objekt som kuber och sfärer.TargetCamera3D är en av de många typerna av kameror som finns i Away3D, det är det vi använder för att titta på Scene3D.View3D är en utsiktsport, ofta beskrivet som "fönstret" där vi ser vår scen.Utan att gå in på specifika kan du också se en grundläggande scen är inställd redo för användning med initAway3d () metod. Observera att den lägger till en ENTER_FRAME EventListener, detta berättar bara Away3D till göra() (eller teckna) några objekt som läggs till i Scene3D varje ram.
/ ** * Away3D grundscen setup * / privat funktion initAway3d (): void scene = new Scene3D (); kamera = ny TargetCamera3D (z: -200); view = new View3D (scen: scen, kamera: kamera); addChild (vy); addEventListener (Event.ENTER_FRAME, renderLoop); / ** * render loop * / privat funktion renderLoop (händelse: Event): void view.render ();
Det är ganska mycket det för introduktionen till Main.as klass, vi kommer att bygga allt annat när vi går.
Vi ska hoppa rakt in och introducera dessa två klasser, eftersom vi kommer att arbeta med dessa under hela handledningen. Om du är ny till Bitmap och BitmapData du kan tänka på dem som målare och en samling färgmålningar. De är helt olika objekt, men båda är anslutna, BitmapData innehåller all pixelinformation eller penselsträngar och skulle inte vara något utan att målas på en duk eller i det här fallet Bitmap!
Låt oss testa detta genom att lägga till en instans av img1 MovieClip till skede och göra en kopia av det med Bitmapp / BitmapData.
Ändra Main.as till följande:
/ ** * konstruktör * / allmän funktion Main () initAway3d (); drawExample (); / ** * ett snabbt exempel på BitmapData och Bitmap-användning * / privat funktion drawExample (): void // skapa en instans av img1-objektet på scenen för att kopiera var img: MovieClip = new img1 (); addChild (img); // skapa ett BitmapData-objekt med följande parametrar: bredd, höjd, transparent, färg var bmpData: BitmapData = ny BitmapData (img.width, img.height, true, 0x000000); // ritar en kopia av img MovieClip till BitmapData bmpData.draw (img); // lägger till en bitmapp till scenen med BitmapData (kopia av img1) informationen för att visa var bmp: Bitmap = ny Bitmap (bmpData); bmp.y = img.height; addChild (BMP);
Titta på drawExample () kod, de första två raderna lägger helt enkelt till img1 protestera mot skede, det här är bilden vi ska göra av kopia av.
Därefter skapar vi en BitmapData objekt med följande parametrar:
bredd, bredden för att göra BitmapData höjd, höjden för att göra BitmapData transparent, huruvida BitmapData bör innehålla transparenta pixlarFärg, bakgrundsfärgenSom vi vet bredden och höjden från img1 Vi har satt dem direkt, eftersom vi behöver transparens ställer vi nästa parameter till sant och slutligen anger vi 0x000000 eller svart som bakgrundsfärg eftersom det blir öppet tills vi fyller det.
Fortsätt på, nu har vi BitmapData objektuppsättning vi har flera alternativ tillgängliga för oss, vi kan till exempel slinga genom pixel efter pixel och kopiera bilden (vi använder något så här senare i handledningen), eller vi kan använda dra() metod.
De dra() metoden tar a Filmklipp eller Sprite som en parameter och kommer att kopiera all pixelinformation från objektet till BitmapData.
/ ** * ett snabbt exempel på BitmapData och Bitmap-användning * / privat funktion drawExample (): void // skapa en förekomst av img1-objektet på scenen för att kopiera var img: MovieClip = new img1 (); addChild (img); // skapa ett BitmapData-objekt med följande parametrar: bredd, höjd, transparent, färg var bmpData: BitmapData = ny BitmapData (img.width, img.height, true, 0x000000); // ritar en kopia av img MovieClip till BitmapData bmpData.draw (img); // lägger till en bitmapp till scenen med BitmapData (kopia av img1) informationen för att visa var bmp: Bitmap = ny Bitmap (bmpData); bmp.y = img.height; addChild (BMP);
Efter detta skapar de följande linjerna en Bitmap objekt med BitmapData pixelinformation som en parameter, som sedan flyttas under originalet img MovieClip och läggs till skede.
/ ** * ett snabbt exempel på BitmapData och Bitmap-användning * / privat funktion drawExample (): void // skapa en förekomst av img1-objektet på scenen för att kopiera var img: MovieClip = new img1 (); addChild (img); // skapa ett BitmapData-objekt med följande parametrar: bredd, höjd, transparent, färg var bmpData: BitmapData = ny BitmapData (img.width, img.height, true, 0x000000); // ritar en kopia av img MovieClip till BitmapData bmpData.draw (img); // lägger till en bitmapp till scenen med BitmapData (kopia av img1) informationen för att visa var bmp: Bitmap = ny Bitmap (bmpData); bmp.y = img.height; addChild (BMP);
Det finns inte mycket setup som är inblandad i att konfigurera Bitmap aspekt som det bara visar en BitmapData, all den magiska är med BitmapData. Nu när vi testar borde vi få följande:
Nu har vi innehåll inne i BitmapData objekt saker börjar bli intressant eftersom vi kan börja manipulera bilder med getPixel32 () och setPixel32 ().
Börjar med getPixel32 () ändra drawExample () kod från ovan till följande:
/ ** * ett snabbt exempel på BitmapData och Bitmap-användning * / privat funktion drawExample (): void // skapa en förekomst av img1-objektet på scenen för att kopiera var img: MovieClip = new img1 (); addChild (img); // skapa ett BitmapData-objekt med följande parametrar: bredd, höjd, transparent, färg var bmpData: BitmapData = ny BitmapData (img.width, img.height, true, 0x000000); // ritar en kopia av img MovieClip till BitmapData bmpData.draw (img); // lägger till en bitmapp till scenen med BitmapData (kopia av img1) informationen för att visa var bmp: Bitmap = ny Bitmap (bmpData); bmp.y = img.height; addChild (BMP); // läs pixelinformation från BitmapData var pixelInformation: uint = bmpData.getPixel32 (5, 0); spår (pixelInformation, pixelInformation.toString (16));
Granskar koden vi har skapat en vanlig uint-variabel och tilldelade den till värdet på pixeln i bmpData vid 5 pixlar horisontellt och 0 pixlar vertikalt. Kom ihåg att värdena börjar vid 0 som så:
Att veta att vi valde att få pixelinformationen för 5,0, det skulle göra det svart pixel på översta raden och säkert nog Flash-utdata: 4278190080 ff000000
Det kanske inte verkar rätt först, men setPixel32 läser pixelns alfavärde (var som setPixel läser bara färgen). Vi brukar vanligtvis arbeta med hex-värden för färger som FFFFFF eller 000 tusen så vi kan berätta för Flash toString (16) för att få hex-värdet:
Nu vet vi hur man läser pixelinformation, ritning pixlar till BitmapData är mycket lika, bara den här gången använder vi setPixel32 () att rita pixlar till BitmapData, och vi slänger också in en för slinga för att rita några pixlar.
Först ändra koden till följande:
/ ** * ett snabbt exempel på BitmapData och Bitmap-användning * / privat funktion drawExample (): void // skapa en förekomst av img1-objektet på scenen för att kopiera var img: MovieClip = new img1 (); addChild (img); // skapa ett BitmapData-objekt med följande parametrar: bredd, höjd, transparent, färg var bmpData: BitmapData = ny BitmapData (img.width, img.height, true, 0x000000); // ritar en kopia av img MovieClip till BitmapData bmpData.draw (img); // lägger till en bitmapp till scenen med BitmapData (kopia av img1) informationen för att visa var bmp: Bitmap = ny Bitmap (bmpData); bmp.y = img.height; addChild (BMP); // läs pixelinformation från BitmapData var pixelInformation: uint = bmpData.getPixel32 (5, 0); spår (pixelInformation, pixelInformation.toString (16)); // skriv pixelinformation till BitmapData var färg: uint = 0xffff0000; // ff0000 - full röd varrad: uint = 0; var-kolumn: uint = 0; för (rad; rad < bmpData.height; row++) bmpData.setPixel32(column, row, color); column++; if(column > bmpData.width) kolumn = 0;
Den nya koden börjar skapa en vanlig uint variabel heter Färg som vi lagrar 0xffff0000 som är: ff helt transparent, ff helt röd, 00 nej grön, 00 nej blå.
Sedan är det två räknare gjorda för rader och kolumner (rader är en linje med horisontella pixlar, kolumner är en linje med vertikala pixlar). Dessa räknare läggs sedan in på en för slinga som ökar raden och motvärdet varje gång, så när den blandas med setPixel32 () metod det kommer att dra en diagonal linje:
I det här steget ska vi presentera PixelObject3D.as klass. För att spara lite tid ta en kopia av klassen från Steg 8 mappen i källkoden och släpp den till din src mappen förutom Main.fla och Main.as.
När du har gjort det här kan vi snabbt titta på det innan vi börjar lägga till koden för att skapa 3D-objekt från pixlar.
// egenskaper skyddade var _bitmapData: BitmapData = null; allmän var _scaleFactor: Number = 1; skyddad var _width: Number = 0; skyddad var _höjd: Nummer = 0;
Vi har några skyddade variabler högst upp i klassen, en för en BitmapData och tre Tal för bredden, höjden och en skala av objektet.
/ ** * konstruktör * / allmän funktion PixelObject3D () / ** * börjar skapandet * / public function createFromMovieClip (mc: MovieClip): void
Följande är en tom klasskonstruktör och den metod vi ska arbeta med, createFromMovieClip (). Du kommer märka att den här metoden tar en parameter av Filmklipp typ, så som du redan kan gissa vi överför det a Filmklipp och det kommer att ge oss tillbaka en 3D-representation av den. När det är klart är det!
Medan PixelObject3D.as klassen gör inte någonting än, men vi lägger till en förekomst av det till Main.as klass så vi kan faktiskt se ändringarna på skärmen när vi går.
Börjar med att lägga till en privat variabel:
// grundläggande Away3D egenskaper skyddade var scen: Scene3D; skyddad var kamera: TargetCamera3D; skyddad varvy: View3D; // Pixel3DObject protected var po3d: PixelObject3D;
Efter det lägger konstruktören ett samtal till createPixelObect3D ().
/ ** * konstruktör * / allmän funktion Main () initAway3d (); drawExample (); createPixelObect3D ();
Slutligen lägg till följande funktion i Main.as fil. Detta kommer att skapa en instans av PixelObject3D klass, åberopa createFromMovieClip () metod och ge det en ny Filmklipp, de img1 vi har använt tidigare.
En sista rad att påpeka är att vi lägger till PixelObject3D klass som barn på scenen eftersom det är ett 3D-objekt, inte det Skede.
/ ** * skapar en PixelObject3D * / privat funktion createPixelObect3D (): void po3d = new PixelObject3D (); po3d.createFromMovieClip (ny img1 ()); scene.addChild (po3d);
Att veta att vi har passerat Filmklipp Vi vill återskapa från den här metoden. Det första på vår agenda är att göra en kopia av det med BitmapData exakt som vi gjorde tidigare. Vi kan sedan använda pixeldata för att börja skapa 3D-objekt.
Precis som tidigare ska vi skapa en BitmapData objekt och dra mc MovieClip objekt:
/ ** * börjar skapa processen * / public function createFromMovieClip (mc: MovieClip): void // butikshänvisningar och skapa bitmapdata _bitmapData = ny BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // Ange bredd / höjd _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor);
Vi ställer också in _bredd och _höjd variabler enligt mc bredd och höjd och multiplicera detta med _skalfaktor variabel, så kan vi skala upp eller ner storleken på 3D-pixlarna om vi vill. Mer om detta senare.
Kom ihåg att BitmapData bara är pixelinformationen och utan att lägga till BitmapData i en bitmapp kan vi inte se den, men vi kan fortfarande läsa och skriva till den. Det här är perfekt för oss, eftersom vi ska använda detta steg för att börja loopa genom pixlarna i BitmapData och skilja de röda, gröna, blåa och alfa-värdena.
Ändra din createFromMovieClip () metod för att matcha detta:
/ ** * börjar skapa processen * / public function createFromMovieClip (mc: MovieClip): void // butikshänvisningar och skapa bitmapdata _bitmapData = ny BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // Ange bredd / höjd _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // pixelinformation var pixelValue: uint = 0; var röd: uint = 0; var grön: uint = 0; var blå: uint = 0; var alfa: uint = 0; // loop genom varje pixel horisontellt för (var i: int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, 0); alpha = pixelValue >> 24 & 0xFF; röd = pixelValue >> 16 & 0xFF; grön = pixelValue >> 8 & 0xFF; blå = pixelValue & 0xFF; spår ("alfa:" + alfa + "rött:" + rött + "grönt:" + grönt + "blått:" + blått); Här har vi satt upp några variabler för färg- och alfa-värdena och startade sedan en för loop baserat på MC bredd.
Detta för slingan ställer in pixelValue variabel till värdet av den aktuella pixeln med hjälp av getPixel32 () metod som vi använde tidigare, men den här tidpunkten vi har använt 0 för den andra parametern som är y, så vi ska bara bearbeta den första horisontella pixellinjen.
Efter detta finns det några ganska komplexa matte som kallas bitmaskering och skiftning, för att spara lite tid du kan anta var och en av färgerna extraheras från pixelValue variabel och sedan utdata för oss att se använda spår(). Om du vill veta mer om bitvisa operatörer, bitskiftning och maskering kan du hitta ett bra inlägg på Polygonal Labs webbplats.
Det du bör se är resultatet av en hel massa 0 värden men uppmärksamma de två alfa: 255 linjer, dessa är de två svarta pixlarna på toppen av handen.
Phew det var ganska mycket logik i de sista stegen! Nu har vi grunderna igång, kan vi börja använda pixelinformationen som vi erhållit tidigare för att skapa ett 3D-mästerverk? nästan.
Om du har använt Away3D eller Papervision 3D innan du är bekant med det här steget, kommer vi att börja skapa 3D-kuber och tillämpa material på dem. För varje pixel som är alpha är 255 (ogenomskinlig) vi tar tag i sin färg och skapar ett material baserat på färgen som gäller för en 3D-kub, nedanför är koden för att sparka av det här:
/ ** * börjar skapa processen * / public function createFromMovieClip (mc: MovieClip): void // butikshänvisningar och skapa bitmapdata _bitmapData = ny BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // Ange bredd / höjd _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // pixelinformation var pixelValue: uint = 0; var röd: uint = 0; var grön: uint = 0; var blå: uint = 0; var alfa: uint = 0; // loop genom varje pixel horisontellt för (var i: int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, 0); alpha = pixelValue >> 24 & 0xFF; röd = pixelValue >> 16 & 0xFF; grön = pixelValue >> 8 & 0xFF; blå = pixelValue & 0xFF; // om pixel är ogenomskinlig om (alpha == 255) // skapa en vanlig hex färgsträng, dvs FFFFFF eller 000000 var färg: String = red.toString (16) + green.toString (16) + blue.toString ); om (färg == "000") färg = "000000"; spår ("#" + färg); // skapa ett material från färgen och tillämpa på en 3D-kube var material: Material = nytt ColorMaterial (färg); var kub: Kub = ny kub (material: material, bredd: 2 * _scaleFactor, höjd: 2 * _scaleFactor, djup: 2 * _scaleFactor); // placera kuben från a-värde så att registrering / transformationspunkt alltid är centrerad cube.x = 0 - (_width / 2) + cube.width * i; this.addChild (kub); I ovanstående kod har vi använt röd, grön och blå variabler och skapade en vanlig hex färg, som du kan se produktionen från spår().
Sedan hex-färgen Färg variabel används för att skapa en ColorMaterial med Away3D, som bara är ett vanligt material baserat på en färg som kan appliceras på 3D-objekt.
Därefter skapar vi en Kub objekt och ange material att vara material objekt vi skapade linjen före den. Också värt att notera här är vi har satt bredd, höjd och djup (kom ihåg att vi arbetar i tre dimensioner nu!) till ett värde av två gånger värdet av _scaleValue variabel, så kan vi göra kuberna större eller mindre genom att ändra _scaleValue.
Slutligen positionerar vi Kub till noll minus hälften av bredden på mc multiplicerat med för loopbandräknare jag, Detta gör registreringen eller omvandlingspunkten för det färdiga 3D-objektet i mitten. Det läggs sedan till som ett barn och när du testar ser du två små svarta 3D-bilder Kub objekt.
Nu är två 3D-kuber bra och alla men vi vill verkligen få hela handen att formas till 3D-kuber. Vi använder redan en för slinga till slingan genom alla pixlarna i den första raden, men hur får vi det att slingra igenom de återstående raderna av pixlar?
Du gissade det, en annan för slinga!
/ ** * börjar skapa processen * / public function createFromMovieClip (mc: MovieClip): void // butikshänvisningar och skapa bitmapdata _bitmapData = ny BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // Ange bredd / höjd _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // pixelinformation var pixelValue: uint = 0; var röd: uint = 0; var grön: uint = 0; var blå: uint = 0; var alfa: uint = 0; // loop genom varje rad av pixlar för (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ön = pixelValue >> 8 & 0xFF; blå = pixelValue & 0xFF; // om pixel är ogenomskinlig om (alpha == 255) // skapa en vanlig hex färgsträng, dvs FFFFFF eller 000000 var färg: String = red.toString (16) + green.toString (16) + blue.toString ); om (färg == "000") färg = "000000"; spår ("#" + färg); // skapa ett material från färgen och tillämpa på en 3D-kube var material: Material = nytt ColorMaterial (färg); var kub: Kub = ny kub (material: material, bredd: 2 * _scaleFactor, höjd: 2 * _scaleFactor, djup: 2 * _scaleFactor); // placera kuben från a-värde så att registrering / transformationspunkt alltid är centrerad cube.x = 0 - (_width / 2) + cube.width * i; cube.y = (_height / 2) + -cube.height * j; this.addChild (kub); Den här gången har vi bara riktigt ändrat tre saker, en ny för loop som den här gången har j för sin räknare. De getPixel32 () har nu j variabel läggas till som y parameter och slutligen Kub placeras vertikalt med hjälp av j disken.
Detta fyller i stort sett huvudlogiken, nu går det igenom horisontellt, läser pixelvärdena, skapar a ColorMaterial och a Kub och placera dem i enlighet därmed. När den når slutet av den horisontella linjen, på grund av det nya för slinga kommer det att gå vidare till nästa pixel ner och slinga igenom horisontellt igen tills bilden är klar. Titta på dig själv genom att testa filmen:
Vi har nu alla dessa 3D-objekt men de ser väldigt 2D, så vi ska lägga till lite rörelse och få hela objektet att rotera.
För att göra detta måste vi spåra tillbaka till Main.as fil och lokalisera renderLoop () metod. Kom ihåg att Away3D måste göra (eller måla) 3D-bilden i varje ram, så vi kan lägga till några enkla rotationer till vår PixelObject3D att se allt barnet kuber rotera:
/ ** * render loop * / privat funktion renderLoop (händelse: Event): void pObject3D.rotationZ ++; view.render ();
Gärna experimentera med rotationX, rotationY och rotationZ här kom bara ihåg att återställa den till koden ovan innan du fortsätter. Du kan också lägga till i create3DObject () att bättre centrera och anpassa kuber till kameran.
/ ** * skapar ett 3D-pixelobjekt från en MovieClip * / allmän funktion create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (ny img1 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);
Nu är det mer som det, vi kan äntligen se 3D-pixelobjektet rotera. Vi kan börja tweak detta och lägga till en exploderad vy genom att helt enkelt redigera z värdet av kuber när vi skapar dem.
Hoppa tillbaka in i PixelObject3d.as klass och hitta linjerna där vi placerar Kub's x och y och lägg till följande:
// om pixel är ogenomskinlig om (alpha == 255) // skapa en vanlig hex färgsträng, dvs FFFFFF eller 000000 var färg: String = red.toString (16) + green.toString (16) + blue.toString ); om (färg == "000") färg = "000000"; spår ("#" + färg); // skapa ett material från färgen och tillämpa på en 3D-kube var material: Material = nytt ColorMaterial (färg); var kub: Kub = ny kub (material: material, bredd: 2 * _scaleFactor, höjd: 2 * _scaleFactor, djup: 2 * _scaleFactor); // placera kuben från a-värde så att registrering / transformationspunkt alltid är centrerad cube.x = 0 - (_width / 2) + cube.width * i; cube.y = (_height / 2) + -cube.height * j; cube.z = -25 + (Math.random () * 50); this.addChild (kub); Detta kommer att flytta varje Kub till ett slumpmässigt djup från -25 till positivt 25 och skapa en bra exploderad effekt:
Som den PixelObject3D är lite liten på skärmen, vi ska justera skalan något. Vi kan göra det snabbt genom att justera _scaleValue variabel i PixelObject3D.as klass och öka den till 1,5.
/ ** * skapar ett 3D-objekt från en MovieClip * * @ author Anton Mills * / allmän klass PixelObject3D utökar ObjectContainer3D // properties protected var _bitmapData: BitmapData = null; offentlig var _scaleFactor: Number = 1.5; skyddad var _width: Number = 0; skyddad var _höjd: Nummer = 0;
Använda PixelObject3D klass för att skapa andra bilder är enkelt, enkelt importera bilden du vill bearbeta till Flash. Sedan konvertera den till en MovieClip som vanligt, ge den här gången en Klassnamn av img2 så här:
Nu kan du ändra Main.as att använda den nya img2 objekt med en liten ändring:
/ ** * skapar ett 3D-pixelobjekt från en MovieClip * / allmän funktion create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (ny img2 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);
Du kan använda så många av dem som du vill, bara se till att du lägger till dem på Away3D-scenen och du kan ha flera. I det här exemplet har jag tagit bort z egendom som vi använde i steg 16 för explosionseffekten.
Main.as med en annan PixelObject3D Lagt till:
/ ** * En handledning som syftar till att införa ActionScript 3 BitmapData * och hur man använder BitmapData-informationen för att skapa en 3D * pixelform med Away3D. * * @author Anton Mills * / public class Main utökar MovieClip // grundläggande Away3D egenskaper skyddade var scen: Scene3D; skyddad var kamera: TargetCamera3D; skyddad varvy: View3D; skyddad var pObject3D: PixelObject3D; skyddad var pObject3D2: PixelObject3D;
Skapa sedan en annan instans:
/ ** * skapar ett 3D-pixelobjekt från en MovieClip * / allmän funktion 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);
Och slutligen rotera det i Away3D render loop:
/ ** * render loop * / privat funktion renderLoop (händelse: Event): void pObject3D.rotationY ++; pObject3D2.rotationY--; pObject3D2.rotationZ--; pObject3D2.rotationX ++; view.render ();
Allt som är kvar är att du ska testa din film och baska i underbarheten av 2D-pixlar förvandlade till 3D-objekt. Nu, vad kan du göra med BitmapData i din nästa applikation eller spel?
Genom denna handledning har vi tittat på en blandning av föremål men vi har främst fokuserat på BitmapData användning som teckning filmklipp in i BitmapData, använder sig av setPixel32 () att rita enskilda pixlar, visa BitmapData genom att använda en Bitmap och läser pixelvärden med getPixel32 ().
Vi har också täckt lite färgmatematik, få hex-färger och till och med individuella alfa, röda, gröna och blåa värden med toString (16). Slutligen skrev vi en liten slinga för att skapa 3D kuber med hjälp av pixelvärdena vi läser, phew!
Det finns så många möjligheter när du arbetar på pixelnivå och med lite fantasi och experiment kan du skapa några riktigt coola applikationer och spel! Tack för din tid, jag hoppas att du haft denna handledning.
