Share
Willkommen bei dieser Einführung zum Arbeiten auf Pixelebene mit dem BitmapData-Objekt von ActionScript 3. Wir nehmen einige 2D-Bilder auf, zerlegen sie in ihre Komponentenpixel und bauen sie dann zu 3D-Bildern zusammen, die wir verschieben und drehen können.
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:
Bevor wir einsteigen, nehmen wir uns einen Moment Zeit, um zu sehen, wie das Beispielprojekt aufgebaut ist. Wenn Sie den Quellcode für dieses Lernprogramm öffnen, haben Sie Quellen für jeden wichtigen Schritt. Sie können gleich loslegen und eine Kopie davon erstellen Start Ordner, da dies als Ausgangspunkt dient.
In diesem Ordner finden Sie zwei weitere Ordner. src und Behälter. Das src In diesem Ordner speichern wir alle unsere Code- und FLA-Dateien und die Behälter In diesem Ordner speichert Flash die SWF-Dateien. In der src Ordner gibt es den Main.FLA und das Main.AS Dokumentenklasse.
Wenn Sie aus irgendeinem Grund einen Fehler in Ihrem Code finden, versuchen Sie, den Fehler zu beheben (es ist immer gut, aus Fehlern zu lernen), aber wenn Sie es nicht können, machen Sie sich keine Sorgen! Sie können gleich wieder zurückspringen und einen der Ordner mit den Schritten in der Quell-ZIP-Datei verwenden, der dem Schritt am nächsten liegt.
Wenn Sie schon einen Blick auf die Main.as In dieser Datei werden Sie bereits einige Hinweise auf Away3D, ein 3D-Framework für Flash, feststellen. Wir müssen dieses herunterladen und zu unserem Projekt hinzufügen, um fortzufahren.
Sie können die neueste Version von der Away3D-Website herunterladen.
Wenn dieser Download abgeschlossen ist, öffnen Sie die ZIP-Datei und in der away3d_3_6_0 \ src Ordner finden Sie drei Ordner, away3d, nochump und Wumedia. Kopieren Sie diese wie unten gezeigt in Ihre src Mappe.
Wenn Sie noch nicht geöffnet haben, öffnen Sie Main.fla und Main.as. Wenn Sie in die Flash-Bibliothek schauen, können Sie ein Bild mit dem Namen 1.png und a sehen Filmausschnitt mit einem Instanznamen von img1, die als Grundbehälter für die PNG dienen.
Wir werden eine schnelle Kompilierung durchführen, um sicherzustellen, dass Away3D korrekt hinzugefügt wurde. Wenn alles gut geht, sollten wir einen leeren Flash-Film mit dunkelgrauem Hintergrund und keine Fehlermeldungen von Flash sehen.
Untersuchen der Main.as In der Datei sehen wir einige Variablen, die in Away3D verwendet werden. Es gibt bereits eine Reihe von Tutorials zu Away3D, aber wir werden kurz darauf rekapitulieren:
// grundlegende Away3D-Eigenschaften protected var scene: Scene3D; geschützte Var-Kamera: TargetCamera3D; geschützte Var-Ansicht: View3D;
Accentsconagua
Scene3D ist ein Raum, in dem wir 3D-Objekte wie Würfel und Kugeln hinzufügen können.TargetCamera3D ist eine der vielen Kameratypen, die in Away3D verfügbar sind. Wir verwenden sie, um die Scene3D zu betrachten.View3D ist ein Ansichtsfenster, oft als "Fenster" bezeichnet, in dem wir unsere Szene sehen.Ohne auf Details einzugehen, können Sie auch sehen, dass eine grundlegende Szene für die Verwendung mit der Kamera eingerichtet ist initAway3d () Methode. Beachten Sie, dass ein hinzugefügt wird ENTER_FRAME EventListener, Dies sagt Away3D einfach dazu machen() (oder zeichnen) alle Objekte, die dem hinzugefügt wurden Scene3D jeder Frame.
/ ** * Away3D grundlegende Szeneneinrichtung * / private Funktion initAway3d (): void scene = new Scene3D (); camera = new TargetCamera3D (z: -200); view = new View3D (Szene: Szene, Kamera: Kamera); addChild (view); addEventListener (Event.ENTER_FRAME, renderLoop); / ** * die Render-Schleife * / private Funktion renderLoop (event: Event): void view.render ();
Das ist so ziemlich alles für die Einführung in die Main.as Klasse, wir werden alles andere bauen, während wir gehen.
Wir werden gleich in diese beiden Klassen einsteigen, da wir während des Tutorials mit diesen arbeiten werden. Wenn Sie neu sind Bitmap und BitmapData Man kann sie sich als Malerleinwand und als Farbpalette vorstellen. Sie sind völlig verschiedene Objekte, aber beide sind miteinander verbunden. BitmapData enthält alle Pixelinformationen oder Pinselstriche und wäre nichts, ohne auf eine Leinwand oder in diesem Fall auf die Bitmap gemalt zu werden!
Lassen Sie uns dies testen, indem Sie eine Instanz von hinzufügen img1 MovieClip zum Bühne und machen eine Kopie davon mit Bitmap / BitmapData.
Ändern Sie den Main wie folgt:
/ ** * Konstruktor * / public function Main () initAway3d (); drawExample (); / ** * ein schnelles Beispiel für die Verwendung von BitmapData und Bitmap * / private Funktion drawExample (): void // Erzeuge eine Instanz des img1-Objekts auf der Bühne, um es zu kopieren. var img: MovieClip = new img1 (); addChild (img); // Ein BitmapData-Objekt mit den folgenden Parametern erstellen: width, height, transparent, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // zeichnet eine Kopie des img MovieClip in die BitmapData bmpData.draw (img); // fügt der Bühne eine Bitmap mit den Informationen zu BitmapData (Kopie der img1) hinzu, um var anzuzeigen bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.höhe; addChild (bmp);
Mit Blick auf die drawExample () Code, fügen die ersten beiden Zeilen einfach die img1 Einwände gegen die Bühne, Dies ist das Bild, von dem wir eine Kopie machen werden.
Anschließend erstellen wir eine BitmapData Objekt mit folgenden Parametern:
Breite, die Breite zum machen BitmapData Höhe, die Höhe zum machen BitmapData transparent, ob die BitmapData sollte transparente Pixel enthaltenFarbe, die HintergrundfarbeDa wissen wir die Breite und Höhe aus img1 Wir haben sie direkt festgelegt, da wir Transparenz brauchen werden, setzen wir den nächsten Parameter auf "true", und als letztes legen wir fest 0x000000 oder schwarz als Hintergrundfarbe, da sie transparent erscheint, bis wir sie füllen.
Weiter geht es, jetzt haben wir die BitmapData Wir haben mehrere Optionen für das Einrichten von Objekten. Wir könnten zum Beispiel Pixel für Pixel durchlaufen und das Bild kopieren (wir werden etwas später im Tutorial verwenden) oder das zeichnen() Methode.
Das zeichnen() Methode dauert a Filmausschnitt oder Sprite als Parameter und kopiert alle Pixelinformationen vom Objekt in das BitmapData.
/ ** * Ein schnelles Beispiel für die Verwendung von BitmapData und Bitmap. * / private Funktion drawExample (): void // Erzeuge eine Instanz des img1-Objekts auf der Bühne, um es zu kopieren. var img: MovieClip = new img1 (); addChild (img); // Ein BitmapData-Objekt mit den folgenden Parametern erstellen: width, height, transparent, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // zeichnet eine Kopie des img MovieClip in die BitmapData bmpData.draw (img); // fügt der Bühne eine Bitmap mit den Informationen zu BitmapData (Kopie der img1) hinzu, um var anzuzeigen bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.höhe; addChild (bmp);
Anschließend erstellen die nächsten Zeilen eine Bitmap Objekt mit der BitmapData Pixelinformationen als Parameter, der dann unter das Original verschoben wird img MovieClip und dem hinzugefügt Bühne.
/ ** * Ein schnelles Beispiel für die Verwendung von BitmapData und Bitmap. * / private Funktion drawExample (): void // Erzeuge eine Instanz des img1-Objekts auf der Bühne, um es zu kopieren. var img: MovieClip = new img1 (); addChild (img); // Ein BitmapData-Objekt mit den folgenden Parametern erstellen: width, height, transparent, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // zeichnet eine Kopie des img MovieClip in die BitmapData bmpData.draw (img); // fügt der Bühne eine Bitmap mit den Informationen zu BitmapData (Kopie der img1) hinzu, um var anzuzeigen bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.höhe; addChild (bmp);
Es sind nicht viele Einstellungen beim Einrichten der Bitmap Aspekt zeigt einfach ein BitmapData an, die ganze Magie ist mit BitmapData. Beim Testen sollten wir nun folgendes erhalten:
Jetzt haben wir Inhalt im BitmapData Objekt Dinge werden interessant, da wir anfangen können, Bilder mit zu manipulieren getPixel32 () und setPixel32 ().
Beginnen mit getPixel32 () ändern Sie die drawExample () Code von oben zu Folgendem:
/ ** * Ein schnelles Beispiel für die Verwendung von BitmapData und Bitmap. * / private Funktion drawExample (): void // Erzeuge eine Instanz des img1-Objekts auf der Bühne, um es zu kopieren. var img: MovieClip = new img1 (); addChild (img); // Ein BitmapData-Objekt mit den folgenden Parametern erstellen: width, height, transparent, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // zeichnet eine Kopie des img MovieClip in die BitmapData bmpData.draw (img); // fügt der Bühne eine Bitmap mit den Informationen zu BitmapData (Kopie der img1) hinzu, um var anzuzeigen bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.höhe; addChild (bmp); // Pixelinformationen aus der BitmapData lesen var pixelInformation: uint = bmpData.getPixel32 (5, 0); trace (pixelInformation, pixelInformation.toString (16));
Beim Untersuchen des Codes haben wir eine reguläre Uint-Variable erstellt und sie dem Wert des Pixels in zugewiesen bmpData bei 5 Pixeln horizontal und 0 Pixeln vertikal. Denken Sie daran, dass die Werte bei 0 beginnen:
Wenn wir wissen, dass wir uns entschieden haben, die Pixelinformationen für 5,0 zu erhalten, würde dies zu schwarzen Pixeln in der obersten Zeile und zu ausreichend Flash-Ausgaben führen: 4278190080 ff000000
Das mag auf den ersten Blick nicht richtig erscheinen, aber setPixel32 Liest den Alpha-Wert des Pixels (wo als setPixel liest gerade die Farbe). Normalerweise arbeiten wir mit Hex-Werten für Farben wie FFFFFF oder 000000 so können wir Flash anweisen toString (16) um den Hex-Wert zu erhalten:
Jetzt wissen wir, wie man Pixelinformationen liest und Pixel in die BitmapData ist sehr ähnlich, nur diesmal verwenden wir setPixel32 () um Pixel in die BitmapData zu zeichnen, und wir werden auch ein zum Schleife, um einige Pixel zu zeichnen.
Ändern Sie zunächst den Code wie folgt:
/ ** * Ein schnelles Beispiel für die Verwendung von BitmapData und Bitmap. * / private Funktion drawExample (): void // Erzeuge eine Instanz des img1-Objekts auf der Bühne, um es zu kopieren. var img: MovieClip = new img1 (); addChild (img); // Ein BitmapData-Objekt mit den folgenden Parametern erstellen: width, height, transparent, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // zeichnet eine Kopie des img MovieClip in die BitmapData bmpData.draw (img); // fügt der Bühne eine Bitmap mit den Informationen zu BitmapData (Kopie der img1) hinzu, um var anzuzeigen bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.höhe; addChild (bmp); // Pixelinformationen aus der BitmapData lesen var pixelInformation: uint = bmpData.getPixel32 (5, 0); trace (pixelInformation, pixelInformation.toString (16)); // schreibe Pixelinformationen in die Farbe von BitmapData var: uint = 0xffff0000; // ff0000 - volle rote var-Zeile: uint = 0; var-Spalte: uint = 0; für (Zeile; Zeile < bmpData.height; row++) bmpData.setPixel32(column, row, color); column++; if(column > bmpData.width) Spalte = 0;
Mit dem neuen Code wird ein regulärer Code erstellt uint Variable benannt Farbe die wir lagern 0xffff0000 das ist: ff vollständig transparent, ff vollständig rot, 00 kein grün, 00 kein blau.
Dann gibt es zwei Zähler für Zeilen und Spalten (Zeilen sind eine Zeile aus horizontalen Pixeln, Spalten sind eine Zeile aus vertikalen Pixeln). Diese Zähler werden dann in eine eingegeben zum Schleife, die den Zeilen- und Zählerwert jedes Mal erhöht, also beim Mischen mit dem setPixel32 () Methode wird eine Diagonale gezeichnet:
In diesem Schritt stellen wir das vor PixelObject3D.as Klasse. Um Zeit zu sparen, besorgen Sie sich eine Kopie der Klasse aus der Schritt 8 Ordner in der Quell-Zip und legen Sie es in Ihrem src Ordner neben dem Main.fla und Main.as.
Wenn Sie dies getan haben, können Sie einen kurzen Blick darauf werfen, bevor Sie den Code hinzufügen, um 3D-Objekte aus Pixeln zu erstellen.
// Eigenschaften protected var _bitmapData: BitmapData = null; public var _scaleFactor: Number = 1; protected var _width: Number = 0; protected var _height: Anzahl = 0;
Wir haben ein paar geschützte Variablen an der Spitze der Klasse, eine für eine BitmapData und drei Zahlen für die Breite, Höhe und eine Skala des Objekts.
/ ** * Konstruktor * / public-Funktion PixelObject3D () / ** * beginnt mit dem Erstellungsprozess * / public-Funktion createFromMovieClip (mc: MovieClip): void
Ihnen folgt ein leerer Klassenkonstruktor und die Methode, mit der wir arbeiten werden, createFromMovieClip (). Sie werden feststellen, dass diese Methode einen Parameter von benötigt Filmausschnitt tippen, so wie man schon ahnen kann, übergeben wir es a Filmausschnitt und es gibt uns eine 3D-Darstellung davon. Wenn es fertig ist, ist es das!
Während PixelObject3D.as Klasse macht noch nichts, lassen Sie uns eine Instanz davon hinzufügen Main.as Klasse, so können wir die Änderungen tatsächlich auf dem Bildschirm sehen, während wir gehen.
Beginnen Sie mit dem Hinzufügen einer privaten Variablen:
// grundlegende Away3D-Eigenschaften protected var scene: Scene3D; geschützte Var-Kamera: TargetCamera3D; geschützte Var-Ansicht: View3D; // das geschützte Pixel3DObject var po3d: PixelObject3D;
Anschließend dem Konstruktor einen Aufruf an hinzufügen createPixelObect3D ().
/ ** * Konstruktor * / public function Main () initAway3d (); drawExample (); createPixelObect3D ();
Fügen Sie zum Schluss die folgende Funktion hinzu Main.as Datei. Dadurch wird eine Instanz von erstellt PixelObject3D Klasse, rufen Sie die createFromMovieClip () Methode und geben Sie eine neue Filmausschnitt, das img1 wir haben vorher benutzt.
Eine letzte Zeile, die darauf hinweist, ist, dass wir die PixelObject3D Klasse als Kind der Szene, da es ein 3D-Objekt ist, nicht das Bühne.
/ ** * Erstellt eine PixelObject3D * / private Funktion createPixelObect3D (): void po3d = new PixelObject3D (); po3d.createFromMovieClip (new img1 ()); scene.addChild (po3d);
Zu wissen, dass wir die bestanden haben Filmausschnitt Wir wollen mit dieser Methode neu erstellen. Als erstes auf unserer Agenda ist es, eine Kopie davon mit BitmapData genau so zu erstellen, wie wir es zuvor getan haben. Wir können dann die Pixeldaten verwenden, um mit der Erstellung von 3D-Objekten zu beginnen.
Wie zuvor werden wir eine erstellen BitmapData Objekt und zeichnen die mc MovieClip Objekt:
/ ** * beginnt mit dem Erstellungsprozess * / public-Funktion createFromMovieClip (mc: MovieClip): void // speichert Referenzen und erstellt die Bitmapdaten _bitmapData = neue BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // set width / height _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor);
Wir setzen auch die _Breite und _Höhe Variablen entsprechend der mc Breite und Höhe und multiplizieren Sie dies mit der _Skalierungsfaktor Dies ermöglicht uns, die Größe der 3D-Pixel zu vergrößern oder zu verkleinern, wenn wir dies wünschen. Mehr dazu später.
Denken Sie daran, dass BitmapData nur die Pixelinformation ist. Ohne die BitmapData zu einer Bitmap hinzuzufügen, können wir sie nicht sehen. Sie können sie jedoch immer noch lesen und schreiben. Dies ist perfekt für uns, da wir mit diesem Schritt die Pixel der BitmapData durchlaufen und die Werte für Rot, Grün, Blau und Alpha voneinander trennen.
Korrigieren Sie Ihre createFromMovieClip () Methode, um dies zu erreichen:
/ ** * beginnt mit dem Erstellungsprozess * / public-Funktion createFromMovieClip (mc: MovieClip): void // speichert Referenzen und erstellt die Bitmapdaten _bitmapData = neue BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // set width / height _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // Pixelinformationen var pixelValue: uint = 0; var red: uint = 0; var green: uint = 0; var blue: uint = 0; var alpha: uint = 0; // jedes Pixel horizontal durchlaufen für (var i: int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, 0); alpha = pixelValue >> 24 & 0xFF; Rot = Pixelwert >> 16 & 0xFF; grün = Pixelwert >> 8 & 0xFF; blau = Pixelwert & 0xFF; trace ("alpha:" + alpha + "red:" + red + "green:" + green + "blue:" + blue); Hier haben wir einige Variablen für die Farb- und Alpha-Werte eingerichtet und dann eine gestartet zum Schleife basierend auf der Mc's Breite.
Diese zum Schleife legt die pixelValue Variable mit dem Wert des aktuellen Pixels getPixel32 () Methode, die wir früher verwendet haben, aber diesmal Hinweis haben wir verwendet 0 für den zweiten Parameter, der ist y, Wir werden also nur die erste horizontale Pixelzeile verarbeiten.
Im Anschluss daran gibt es eine ziemlich komplexe Mathematik, die als Bitmaskierung und -verschiebung bekannt ist. Um etwas Zeit zu sparen, können Sie davon ausgehen, dass jede der Farben aus der pixelValue Variable und dann ausgegeben für uns zu sehen mit Spur(). Wenn Sie mehr über bitweise Operatoren, Bit-Shifting und Masking erfahren möchten, finden Sie auf der Polygonal Labs-Website einen guten Beitrag.
Was Sie sehen sollten, ist die Ausgabe einer ganzen Reihe von 0 Werte, aber achten Sie auf die beiden alpha: 255 Linien, dies sind die zwei schwarzen Pixel am oberen Rand der Hand.
Puh, in diesen letzten Schritten gab es ziemlich viel Logik! Jetzt haben wir die Grundlagen eingerichtet und können nun die zuvor erhaltenen Pixelinformationen verwenden, um ein 3D-Meisterwerk zu erstellen. fast.
Wenn Sie Away3D oder Papervision 3D verwendet haben, bevor Sie mit diesem Schritt vertraut sind, beginnen wir mit dem Erstellen von 3D-Würfeln und dem Anwenden von Materialien. Für jedes Pixel, das Alpha ist, ist 255 (undurchsichtig), greifen wir seine Farbe auf und erstellen ein Material basierend auf der Farbe, die auf einen 3D-Würfel angewendet werden soll. Unten ist der Code, mit dem dies gestartet wird:
/ ** * beginnt mit dem Erstellungsprozess * / public-Funktion createFromMovieClip (mc: MovieClip): void // speichert Referenzen und erstellt die Bitmapdaten _bitmapData = neue BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // set width / height _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // Pixelinformationen var pixelValue: uint = 0; var red: uint = 0; var green: uint = 0; var blue: uint = 0; var alpha: uint = 0; // jedes Pixel horizontal durchlaufen für (var i: int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, 0); alpha = pixelValue >> 24 & 0xFF; Rot = Pixelwert >> 16 & 0xFF; grün = Pixelwert >> 8 & 0xFF; blau = Pixelwert & 0xFF; // wenn das Pixel undurchsichtig ist, wenn (alpha == 255) // eine reguläre hexadezimale Farbzeichenfolge erstellt wird, z. B. FFFFFF oder 000000 var. Farbe: ); if (color == "000") color = "000000"; Spur ("#" + Farbe); // ein Material aus der Farbe erstellen und auf einen 3D-Würfel anwenden var Material: Material = new ColorMaterial (color); var cube: Cube = neuer Cube (Material: Material, Breite: 2 * _scaleFactor, Höhe: 2 * _scaleFactor, Tiefe: 2 * _scaleFactor); // Positioniere den Würfel aus einem - Wert, so dass der Registrierungs- / Transformationspunkt immer in der Mitte des Würfels liegt.x = 0 - (_width / 2) + Würfel.breite * i; this.addChild (Cube); Im obigen Code haben wir die verwendet rot, Grün und Blau Variablen erstellt und eine reguläre Hex-Farbe erstellt, die Sie in der Ausgabe sehen können Spur().
Dann die Hex Farbe Farbe Variable wird verwendet, um eine Farbmaterial mit Away3D, einem normalen Material, das auf einer Farbe basiert, die auf 3D-Objekte angewendet werden kann.
Anschließend erstellen wir eine Würfel Objekt und spezifizieren Sie das Material zu sein Material Objekt haben wir die Linie davor erstellt. Erwähnenswert ist hier auch das Breite, Höhe und Tiefe (Denken Sie daran, dass wir jetzt in drei Dimensionen arbeiten!) auf den doppelten Wert von _scaleValue Dies ermöglicht uns, die Würfel durch Ändern größer oder kleiner zu machen _scaleValue.
Zum Schluss positionieren wir die Würfel minus die halbe Breite der mc multipliziert mit dem zum Schleifenzähler ich, Dadurch wird der Registrierungs- oder Transformationspunkt des fertigen 3D-Objekts in der Mitte festgelegt. Es wird dann als Kind hinzugefügt und beim Testen werden zwei kleine schwarze 3D-Objekte angezeigt Würfel Objekte.
Jetzt sind zwei 3D-Würfel großartig und alle wollen wir wirklich die ganze Hand in 3D-Würfel bringen. Wir verwenden bereits eine zum Schleife, um alle Pixel in der ersten Zeile zu durchlaufen, aber wie können wir die verbleibenden Pixelzeilen durchlaufen?
Du hast es erraten, ein anderer zum Schleife!
/ ** * beginnt mit dem Erstellungsprozess * / public-Funktion createFromMovieClip (mc: MovieClip): void // speichert Referenzen und erstellt die Bitmapdaten _bitmapData = neue BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // set width / height _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // Pixelinformationen var pixelValue: uint = 0; var red: uint = 0; var green: uint = 0; var blue: uint = 0; var alpha: uint = 0; // Schleife durch jede Pixelzeile 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; Rot = Pixelwert >> 16 & 0xFF; grün = Pixelwert >> 8 & 0xFF; blau = Pixelwert & 0xFF; // wenn das Pixel undurchsichtig ist, wenn (alpha == 255) // eine reguläre hexadezimale Farbzeichenfolge erstellt wird, z. B. FFFFFF oder 000000 var: String = red.toString (16) + green.toString (16) + blue.toString (16 ); if (color == "000") color = "000000"; Spur ("#" + Farbe); // ein Material aus der Farbe erstellen und auf einen 3D-Würfel anwenden var Material: Material = new ColorMaterial (color); var cube: Cube = neuer Cube (Material: Material, Breite: 2 * _scaleFactor, Höhe: 2 * _scaleFactor, Tiefe: 2 * _scaleFactor); // Positioniere den Würfel aus einem - Wert, so dass der Registrierungs- / Transformationspunkt immer in der Mitte des Würfels liegt.x = 0 - (_width / 2) + Würfel.breite * i; cube.y = (_height / 2) + -cube.height * j; this.addChild (Cube); Dieses Mal haben wir nur drei Dinge wirklich geändert, ein neues zum Schleife, die diese Zeit hat j für seinen Zähler. Das getPixel32 () hat jetzt die j Variable hinzugefügt als y Parameter und schließlich die Würfel wird vertikal mit dem positioniert j Zähler.
Damit ist die Hauptlogik so gut wie abgeschlossen, jetzt wird sie horizontal durchlaufen, die Pixelwerte gelesen, ein erstellt Farbmaterial und ein Würfel und positioniere sie entsprechend. Sobald es das Ende der horizontalen Linie erreicht, wegen der neuen zum Schleife bewegt sich zum nächsten Pixel weiter unten und wird wieder horizontal durchlaufen, bis das Bild vollständig ist. Überzeugen Sie sich selbst, indem Sie den Film testen:
Wir haben jetzt alle diese 3D-Objekte, aber sie sehen sehr 2D aus, also fügen wir ein bisschen Bewegung hinzu und bringen das ganze Objekt in Rotation.
Um dies zu tun, müssen wir uns auf den Weg zurück machen Main.as Datei und suchen Sie die renderLoop () Methode. Denken Sie daran, dass Away3D das 3D-Bild jedes Bild rendern muss (oder malen muss), sodass wir einige einfache Rotationen zu unserem Bild hinzufügen können PixelObject3D um das ganze Kind zu sehen Würfel drehen:
/ ** * die Render-Schleife * / private Funktion renderLoop (Ereignis: Ereignis): void pObject3D.rotationZ ++; view.render ();
Fühlen Sie sich frei, mit zu experimentieren RotationX, rotationY und rotationZ Denken Sie daran, den Code auf den obigen Code zurückzusetzen, bevor Sie fortfahren. Sie können auch hinzufügen create3DObject () um das zu zentrieren und auszurichten Würfel zur Kamera.
/ ** * erstellt ein 3D-Pixelobjekt aus einer MovieClip * / public-Funktion create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (new img1 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);
Jetzt ist es eher so, wir können endlich sehen, wie sich das 3D-Pixelobjekt dreht. Wir können dies anpassen und eine Explosionsansicht hinzufügen, indem wir einfach die z Wert des Würfel wenn wir sie schaffen.
Springe zurück in die PixelObject3d.as Klasse und finden Sie die Zeilen, wo wir die positionieren Würfel's x und y und füge folgendes hinzu:
// wenn das Pixel undurchsichtig ist, wenn (alpha == 255) // eine reguläre hexadezimale Farbzeichenfolge erstellt wird, z. B. FFFFFF oder 000000 var: String = red.toString (16) + green.toString (16) + blue.toString (16 ); if (color == "000") color = "000000"; Spur ("#" + Farbe); // ein Material aus der Farbe erstellen und auf einen 3D-Würfel anwenden var Material: Material = new ColorMaterial (color); var cube: Cube = neuer Cube (Material: Material, Breite: 2 * _scaleFactor, Höhe: 2 * _scaleFactor, Tiefe: 2 * _scaleFactor); // Positioniere den Würfel aus einem - Wert, so dass der Registrierungs- / Transformationspunkt immer in der Mitte des Würfels liegt.x = 0 - (_width / 2) + Würfel.breite * i; cube.y = (_height / 2) + -cube.height * j; cube.z = -25 + (Math.random () * 50); this.addChild (Cube); Dies wird jeden bewegen Würfel auf eine zufällige Tiefe von -25 bis positiv 25 und einen schönen Explosionseffekt erzeugen:
Als die PixelObject3D auf dem Bildschirm etwas klein ist, werden wir die Skala leicht anpassen. Wir können dies schnell tun, indem Sie das anpassen _scaleValue Variable in der PixelObject3D.as Klasse und Erhöhung auf 1,5.
/ ** * erstellt ein 3D-Objekt aus einem MovieClip * * @author Anton Mills * / public-Klasse PixelObject3D erweitert ObjectContainer3D // properties protected var _bitmapData: BitmapData = null; public var _scaleFactor: Number = 1,5; protected var _width: Number = 0; protected var _height: Anzahl = 0;
Verwendung der PixelObject3D Wenn Sie andere Bilder erstellen möchten, importieren Sie einfach das zu bearbeitende Bild in Flash. Dann wandeln Sie es wie gewohnt in einen MovieClip um, diesmal geben Sie es ein Klassenname von img2 so was:
Jetzt kannst du ändern Main.as das neue verwenden img2 Objekt mit einer winzigen Änderung:
/ ** * erstellt ein 3D-Pixelobjekt aus einer MovieClip * / public-Funktion create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (new img2 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);
Sie können so viele davon verwenden, wie Sie möchten. Stellen Sie sicher, dass Sie sie zur Away3D-Szene hinzufügen, und Sie können mehrere davon haben. In diesem Beispiel habe ich die entfernt z Eigenschaft, die wir in Schritt 16 für den Explosionseffekt verwendet haben.
Main.as mit einem anderen PixelObject3D hinzugefügt:
/ ** * Ein Tutorial zur Einführung in BitmapData * von ActionScript 3 und die Verwendung der BitmapData-Informationen zum Erstellen einer 3D * -Pixelform mit Away3D. * * @author Anton Mills * / public class Main erweitert MovieClip // grundlegende Away3D-Eigenschaften protected var scene: Scene3D; geschützte Var-Kamera: TargetCamera3D; geschützte Var-Ansicht: View3D; protected var pObject3D: PixelObject3D; protected var pObject3D2: PixelObject3D;
Dann erstellen Sie eine weitere Instanz:
/ ** * erstellt ein 3D-Pixelobjekt aus einer MovieClip * / public-Funktion create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (new img2 ()); pObject3D.x = 40; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D); pObject3D2 = neues PixelObject3D (); pObject3D2.createFromMovieClip (new img1 ()); pObject3D2.x = 115; pObject3D2.y = -55; pObject3D2.rotationX = -5; scene.addChild (pObject3D2);
Und zum Schluss drehen Sie es in der Away3D-Render-Schleife:
/ ** * die Render-Schleife * / pr
