Share
Willkommen zu Teil 2 meines Anfängerleitfadens zu Augmented Reality. Ich hoffe, Sie haben den ersten Teil dieses Tutorials abgeschlossen oder zumindest die Quelldateien heruntergeladen und gelesen (sonst werden Sie vielleicht etwas verwirrt mit dem, was los ist).
Letztes Mal haben wir uns eine einfache AR-Umgebung eingerichtet, einen Würfel erstellt, Materialien auf den Würfel aufgebracht und den Effekt "Loch in der Wand" angewendet.
Heute werden wir auf diesem Wissen aufbauen und das Finale erstellen, wie in der Demo gezeigt. Um diesen Endeffekt zu erzeugen, müssen wir wissen, wie man Kugeln rendert, Objekte animiert, Soundeffekte spielt und schließlich 3D-Objekte rendert. Das Rendern von 3D-Objekten in der Handfläche ist der Hauptgrund, warum Augmented Reality in diesem Jahr zu einem großen Erfolg geworden ist, insbesondere wenn Sie einige der interessanteren Formen erstellen oder sie animieren. Wenn Sie sich in Großbritannien befinden, haben Sie kürzlich die Gadget-Show gesehen, in der Augmented Reality vorkam und eine animierte Version von Suzi Perry hatte, die Sie in der Hand halten konnten. Sehr schön.
Kommen wir zur Sache. Ich beginne mit der Welt und den Sternen, die zuerst gerendert werden, dann werden die Formen animiert und schließlich die Kuh geschaffen. Öffnen Sie Ihre Dateien vom letzten Mal und lassen Sie uns erstellen.
Quelle: Sichtbare Erde der NASA. Bildnachweis: Reto Stöckli, Robert Simmon.
Laden Sie die 2048x1024px-Version des obigen Bildes von der NASA-Seite "Visible Earth" herunter und nennen Sie es "map.jpg". Legen Sie es in den folgenden Ordner: deploy> assets. Dies ist derselbe Ordner, in dem Sie die Bilder für das Innere des Cubes im letzten Teil des Lernprogramms gespeichert haben. Dieses schöne Bild der Welt kam von der NASA. Sie machen gute Fotos, nicht wahr??
Navigieren Sie in Ihrem Code zu dem Ort, an dem wir zuletzt den Effekt "Loch in der Wand" für Marker 0 eingerichtet haben. Fügen Sie direkt nach dem Code für das "Loch in der Wand" den folgenden Code ein:
var Erde: Kugel = neue Kugel (Erde, 40); Earth.z = 200; dispObj.addChild (Erde);
Nun, da wir eine Kugel eingerichtet haben, braucht sie eine Textur. Dies geschieht auf dieselbe Weise wie das Zuordnen einer Textur zu einem Würfel. Beachten Sie, dass im Setup für die Kugel nach etwas gesucht wird, das "Erde" genannt wird. Dies ist unsere Texturvariable.
Navigieren Sie im Code dahin, wo wir zuvor Materialien eingerichtet haben. Fügen Sie diesem Code folgende Zeile hinzu:
Accentsconagua
var earth: BitmapFileMaterial = neues BitmapFileMaterial ("assets / map.jpg"); Genau wie die anderen.
Wenn Sie es testen, sollten Sie etwas wie das folgende Bild sehen (aber natürlich ohne dass der hübsche Teufel die Markierung für Sie hochhält):
Wie beim letzten Mal müssen Sie das Markierungsbild herunterladen und mit viel weißer Fläche an den Rändern ausdrucken.
Nun, was wäre ein Weltraumbild ohne Sterne? Lassen Sie uns noch etwas hinzufügen. Dies ist möglicherweise der langwierigste Teil, den ich aufschreiben muss, da alle Sterne einzeln positioniert werden müssen. Aber du freche Gauner bekommst die Vorteile von Kopieren und Einfügen.
Fügen Sie im folgenden Code nach dem Earth-Render-Code hinzu:
var star1: Kugel = neue Kugel (Stern, 4); star1.z = 65; star1.x = 84; star1.y = 164; dispObj.addChild (star1); var star2: Kugel = neue Kugel (Stern, 3); star2.z = 246; star2.x = 32; star2.y = 64; dispObj.addChild (star2); var star3: Kugel = neue Kugel (Stern, 2); star3.z = 163; star3.x = 78; star3.y = 98; dispObj.addChild (star3); var star4: Kugel = neue Kugel (Stern, 4); star4.z = 120; star4.x = 164; star4.y = 157; dispObj.addChild (star4); var star5: Kugel = neue Kugel (Stern, 2); star5.z = 148; star5.x = -164; star5.y = -157; dispObj.addChild (star5); var star6: Kugel = neue Kugel (Stern, 3); star6.z = 46; star6.x = -36; star6.y = -156; dispObj.addChild (star6); var star7: Kugel = neue Kugel (Stern, 5); star7.z = 40; star7.x = -16; star7.y = -84; dispObj.addChild (star7); var star8: Kugel = neue Kugel (Stern, 5); star8.z = 59; star8.x = -84; star8.y = 30; dispObj.addChild (star8); var star9: Kugel = neue Kugel (Stern, 4); star9.z = 87; star9.x = -134; star9.y = 84; dispObj.addChild (star9); var star10: Kugel = neue Kugel (Stern, 2); star10.z = 49; star10.x = 10; star10.y = 18; dispObj.addChild (star10); var star11: Kugel = neue Kugel (Stern, 5); star11.z = 94; star11.x = -84; star11.y = 41; dispObj.addChild (star11); var star12: Kugel = neue Kugel (Stern, 3); star12.z = 54; star12.x = 91; star12.y = -46; dispObj.addChild (star12); var star13: Kugel = neue Kugel (Stern, 2); star13.z = 180; star13.x = 88; star13.y = -130; dispObj.addChild (star13); var star14: Kugel = neue Kugel (Stern, 4); star14.z = 102; star14.x = 134; star14.y = -13; dispObj.addChild (star14); var star15: Kugel = neue Kugel (Stern, 1); star15.z = 61; star15.x = -35; star15.y = 145; dispObj.addChild (star15);
Puh, das ist ziemlich viel. Natürlich können Sie mehr hinzufügen, wenn Sie mehr Sterne wünschen. Oder verwenden Sie einfach eine Schleife, um eine beliebige Zahl hinzuzufügen.
Jetzt müssen wir ein Material für die Sterne hinzufügen. Fügen Sie Folgendes mit dem anderen Materialcode hinzu:
var star: ColorMaterial = neues ColorMaterial (0xFFFFFF);
Testen Sie den Flash-Film und hoffentlich sehen Sie Folgendes:
Wäre es nicht cool, wenn wir die Weltraumszene, die wir gerade erstellt haben, in einem kleinen Kasten in der Markierung gefangen halten und dann explodieren würde? Nun, Sie haben Glück und haben wahrscheinlich das Ergebnis als genau das gesehen, was wir tun werden.
Es ist ziemlich einfach, Dinge in AR zu animieren. Vor allem, wenn Sie sie einfach von einem Punkt zum anderen verschieben möchten, wie wir es möchten. Dazu müssen wir einige zusätzliche Klassen für Flash herunterladen. GreenSock bietet eine sehr schöne Reihe von Animationsbibliotheken, mit deren Hilfe Objekte problemlos von einem Punkt zum anderen verschoben werden können.
Gehen Sie zu greensock.com und laden Sie die AS3 TweenMax-Bibliothek herunter.
Nachdem Sie die TweenMax-Bibliothek heruntergeladen haben, müssen Sie die ZIP-Datei extrahieren und den Ordner "greensock" in "src> com" unseres Projekts ablegen. Hier befindet sich auch die Squidder-Bibliothek. Auszug hier und alles wird nur anschwellen.
Gehen Sie jetzt zurück zu Flash. Fügen Sie die folgende Zeile oben in Ihrem Code mit den anderen Importzeilen hinzu:
import com.greensock. *;
Jetzt haben Sie Zugriff auf die GreenSock-Bibliothek.
Suchen Sie den Code, in dem Sie die Earth-Variable eingerichtet haben. Ersetzen Sie es durch den folgenden Code:
var Erde: Kugel = neue Kugel (Erde, 1); Erde.z = -40; TweenMax.to (Erde, 4, scaleX: 40, scaleY: 40, scaleZ: 40, z: "200", Verzögerung: 4);
Was ich hier getan habe, ist, den Startpunkt und die Größe der Erde so zu verändern, dass sie sehr klein ist und sich in der Box befindet. TweenMax ist eine großartige Animationsklasse. Hier legen wir fest, welche Variable (Erde) animiert werden soll, wie lange es in Sekunden dauern wird (4), wie stark die Variable skaliert werden soll, ihr Z-Punkt und schließlich, wie lange sie warten muss, bevor sie animiert wird. Dies ist auf 4 eingestellt, damit wir zuerst andere Dinge animieren können.
Ersetzen Sie Ihren Star-Setup-Code durch Folgendes:
var star1: Kugel = neue Kugel (Stern, 1); star1.z = -40; TweenMax.to (Stern1, 4, MaßstabX: 1, MaßstabY: 1, MaßstabZ: 1, x: "84", y: "164", z: "65", Verzögerung: 4); dispObj.addChild (star1); var star2: Kugel = neue Kugel (Stern, 1); star2.z = -40; TweenMax.to (star2, 4, scaleX: 3, scaleY: 3, scaleZ: 3, x: "32", y: "64", z: "246", Verzögerung: 4); dispObj.addChild (star2); var star3: Kugel = neue Kugel (Stern, 1); star3.z = -40; TweenMax.to (star3, 4, scaleX: 2, scaleY: 2, scaleZ: 2, x: "78", y: "98", z: "163", Verzögerung: 4); dispObj.addChild (star3); var star4: Kugel = neue Kugel (Stern, 1); star4.z = -40; TweenMax.to (star4, 4, scaleX: 4, scaleY: 4, scaleZ: 4, x: "164", y: "157"), z: "120", Verzögerung: 4); dispObj.addChild (star4); var star5: Kugel = neue Kugel (Stern, 1); star5.z = -40; TweenMax.to (star5, 4, scaleX: 2, scaleY: 2, scaleZ: 2, x: "- 164", y: "- 157", z: "148", Verzögerung: 4); dispObj.addChild (star5); var star6: Kugel = neue Kugel (Stern, 1); star6.z = -40; TweenMax.to (star6, 4, scaleX: 3, scaleY: 3, scaleZ: 3, x: "- 36", y: "- 156", z: "46", Verzögerung: 4); dispObj.addChild (star6); var star7: Kugel = neue Kugel (Stern, 1); star7.z = -40; TweenMax.to (star7, 4, scaleX: 5, scaleY: 5, scaleZ: 5, x: "- 16", y: "- 84", z: "40", Verzögerung: 4); dispObj.addChild (star7); var star8: Kugel = neue Kugel (Stern, 1); star8.z = -40; TweenMax.to (star8, 4, scaleX: 5, scaleY: 5, scaleZ: 5, x: "- 84", y: "30", z: "59", Verzögerung: 4); dispObj.addChild (star8); var star9: Kugel = neue Kugel (Stern, 1); star9.z = -40; TweenMax.to (star9, 4, scaleX: 4, scaleY: 4, scaleZ: 4, x: "- 134", y: "84", z: "87", Verzögerung: 4); dispObj.addChild (star9); var star10: Kugel = neue Kugel (Stern, 1); star10.z = -40; TweenMax.to (star10, 4, scaleX: 2, scaleY: 2, scaleZ: 2, x: "10", y: "18", z: "49", Verzögerung: 4); dispObj.addChild (star10); var star11: Kugel = neue Kugel (Stern, 1); star11.z = -40; TweenMax.to (star11, 4, scaleX: 5, scaleY: 5, scaleZ: 5, x: "- 84", y: "41", z: "94", Verzögerung: 4); dispObj.addChild (star11); var star12: Kugel = neue Kugel (Stern, 1); star12.z = -40; TweenMax.to (star12, 4, scaleX: 3, scaleY: 3, scaleZ: 3, x: "91", y: "- 46", z: "54", Verzögerung: 4); dispObj.addChild (star12); var star13: Kugel = neue Kugel (Stern, 1); star13.z = -40; TweenMax.to (Stern13, 4, MaßstabX: 2, MaßstabY: 2, MaßstabZ: 2, x: "88", y: "- 130", z: "180", Verzögerung: 4); dispObj.addChild (star13); var star14: Kugel = neue Kugel (Stern, 1); star14.z = -40; TweenMax.to (star14, 4, scaleX: 4, scaleY: 4, scaleZ: 4, x: "134", y: "- 13", z: "102", Verzögerung: 4); dispObj.addChild (star14); var star15: Kugel = neue Kugel (Stern, 1); star15.z = -40; TweenMax.to (star15, 4, scaleX: 1, scaleY: 1, scaleZ: 1, x: "- 35", y: "145", z: "61", Verzögerung: 4); dispObj.addChild (star15);
Dadurch werden Ihre Sterne von einem versteckten Startpunkt bis zu ihren endgültigen Positionen animiert. Auch hier habe ich die Z-Position der Sterne so geändert, dass sie in der Box beginnen.
Lassen Sie uns den Flash-Film noch einmal testen. Du solltest einen schönen animierten Übergang von nichts zur Erde haben und Sterne explodieren aus der Box, in der wir sie eingeschlossen haben.
Für den Kastendeckel, der geöffnet wird und Erde und Sterne explodieren lassen, verwenden wir vier Bilder. Ich verwende eine Holzpaneeloptik für meine Box, kann aber gerne Ihre eigene gestalten. Hier sind die von mir erstellten Images. Laden Sie diese herunter und speichern Sie sie in Bereitstellungsassets.
Speichern Sie als top.png
Speichern Sie als bottom.png
Speichern Sie als left.png
Speichern Sie als right.png
Fügen Sie unterhalb der Stelle, an der wir die Sterne eingerichtet haben, den folgenden Code hinzu:
var top: Cube = neuer Cube (neue MaterialsList (all: Top), 80, 0, 80); top.z = 0; top.y = 40; TweenMax.to (oben, 2, DrehungX: -180, Verzögerung: 2); dispObj.addChild (oben); var bottom: Cube = neuer Cube (neue MaterialsList (all: Bottom), 80, 0, 80); bottom.z = 0; bottom.y = -40; TweenMax.to (unten, 2, DrehungX: 180, Verzögerung: 2); dispObj.addChild (unten); var left: Cube = neuer Cube (neue MaterialsList (all: Left), 80, 0, 80); left.z = 0; left.rotationZ = 90; left.x = -40; TweenMax.to (links, 2, DrehungX: 180, Verzögerung: 2); dispObj.addChild (links); var right: Cube = neuer Cube (neue MaterialsList (all: Right), 80, 0, 80); right.z = 0; rechts.x = 40; rechte.RotationZ = 90; TweenMax.to (rechts, 2, DrehungX: -180, Verzögerung: 2); dispObj.addChild (rechts);
Dadurch werden alle Teile des Kastendeckels eingerichtet, korrekt positioniert und animiert. Tolles Zeug.
Jeder "Cube" ist auf eine Tiefe von Null (das dritte Argument im Konstruktor) festgelegt, sodass es sich um flache Ebenen handelt.
Fügen Sie im Materialabschnitt den folgenden Code hinzu:
var Top: BitmapFileMaterial = neues BitmapFileMaterial ("assets / top.png"); var Bottom: BitmapFileMaterial = new BitmapFileMaterial ("assets / bottom.png"); var Left: BitmapFileMaterial = neues BitmapFileMaterial ("assets / left.png"); var Right: BitmapFileMaterial = neues BitmapFileMaterial ("assets / right.png"); Nun sieht der Deckel das Teil aus. Ich bin mir sicher, dass Sie bemerkt haben, dass die linken und rechten Bilder gedreht wurden, und dann drehe ich sie im Code in Schritt 14 wieder zurück. Nun, dafür gibt es einen Grund. Sie funktionieren nicht richtig, wenn Sie sie nicht drehen. Es ist ein seltsamer Fehler, aber die Bilder werden beim Rendern nach hinten gedreht und wenn Sie eine Animation auf sie anwenden, gehen sie in die falsche Richtung. Wenn Sie sie zuerst und dann wieder im Code drehen, funktionieren sie so, wie sie sollen. Es ist ziemlich seltsam, aber da gehst du hin.
Jetzt sind alle Teile für einen weiteren Test bereit. Ich bin sicher, du machst jetzt alle möglichen Arten von Oohing-Geräuschen. Wunderbar.
Wenn Sie wie ich sind, betrachten Sie dieses Denken. Wow, das ist großartig, aber es braucht wirklich etwas mehr Drama. Nun, wir werden genau das tun. Lassen Sie uns dramatische Musik hinzufügen, wenn sich die Box öffnet.
Gehen Sie zur Hollywood Edge-Soundeffekt-Bibliothek und laden Sie BrightPad.wav herunter. (Es ist nicht im Source-Download enthalten.) Ich habe dies in eine MP3-Datei namens "dramatic.mp3" konvertiert, aber Sie können diese Anweisungen befolgen, während Sie sie als WAV verwenden.
Speichern Sie es im Ordner deploy> assets.
Öffnen Sie die .fla-Datei und wählen Sie Datei> Importieren> In Bibliothek importieren. Importieren Sie dramatic.mp3.
Öffnen Sie Ihre Bibliothek und Sie sollten Ihre neu importierte Datei direkt dort sehen.
Klicken Sie mit der rechten Maustaste darauf und klicken Sie auf Eigenschaften. Aktivieren Sie das Kontrollkästchen "Export für ActionScript". Die Klassenbox sollte jetzt aktiv werden. tippen Sie es "dramatisch" ohne die Anführungszeichen ein.
Kehren Sie zur .as-Datei zurück. Suchen Sie am oberen Rand der Datei den Importcode. Fügen Sie den folgenden Importcode hinzu:
import flash.media.SoundMixer; import flash.media.SoundChannel;
Etwas weiter unten gibt es einige private Vars. Sie erinnern sich vielleicht an das letzte Mal, als wir den grünen Würfel aufstellten. Fügen Sie den privaten Variablen den folgenden Code hinzu:
privates Var-Drama: dramatisch = neu dramatisch (); private var dramaChnl: SoundChannel = new SoundChannel ();
Nun haben wir hier die Sounddatei "dramatisch" und einen Soundkanal eingerichtet. Der Tonkanal ermöglicht das Starten und Stoppen des Tons durch Code.
Da der Sound nur einmal abgespielt werden soll (wenn sich die Box öffnet und nicht jedes Mal, wenn wir den Marker anzeigen), müssen Sie den folgenden Code mit dem gesamten Shape-Setup-Code einfügen. Ich steckte meinen gerade nachdem ich den Kastendeckel aufgestellt habe.
DramaChnl = Drama.play (0,1);
Dies gibt den Ton einmal wieder, wenn sich der Deckel öffnet.
Der Sound sollte jetzt abgespielt werden und hoffentlich wird er sich wirklich dramatisch anfühlen.
Sie sollten sich jetzt sehr zufrieden mit Ihnen fühlen, Sie haben etwas geschaffen, mit dem Sie Ihre Freunde beeindrucken können.
Nun kommen wir zu dem Teil, wo wir eine 3D-Kuh rendern, die Sie in Ihrer Hand halten können. Zunächst müssen Sie die folgenden beiden Dateien herunterladen und an der üblichen Stelle speichern:
Die Textur, die Sie als Cow.png speichern sollten, und die Kuhmodelldatei, die Sie als Cow.Dae speichern müssen.
Oben in Ihrer Datei müssen Sie einen Import hinzufügen. Fügen Sie die folgende Zeile hinzu:
import org.papervision3d.objects.parsers.Collada;
Finden Sie die privaten Vars etwas weiter unten und fügen Sie Folgendes hinzu:
private var cowSkin: BitmapFileMaterial; private var cowMat: MaterialsList; private var Kuh: Collada;
Wir laden die Kuh auf eine zweite Markierung. Dies soll Ihnen zeigen, dass diese Methode, verschiedene Objekte auf verschiedene Marker zu laden, ziemlich robust ist und nicht nur Formen, sondern auch komplexe 3D-Objekte verarbeiten kann.
Denken Sie daran, dass wir im vorherigen Teil des Tutorials vier Markierungen auf einem einzigen Blatt Papier hatten und für jede Markierung unterschiedliche farbige Würfel erstellten. Wir werden diesen Code erneut verwenden, um einen separaten Marker für die Kuh und die Erde verwenden zu können.
Navigieren Sie durch Ihre Datei, bis Sie gefunden haben sonst wenn (id == 1) - die Überprüfung auf die zweite Markierung.
Ersetzen Sie alles innerhalb der zwei geschweiften Klammern durch den folgenden Code:
cowMat = new MaterialsList (); cowSkin = new BitmapFileMaterial ("assets / Cow.png"); cowMat.addMaterial (cowSkin, "all"); // Das neue Collada-Objekt mit cowMat erstellen cow = new Collada ("assets / cow.dae", cowMat); cow.rotationX = 90; Kuhwaage = 0,5; dispObj.addChild (Kuh); Ja, schon mehr getestet, war nicht so schnell. Laden Sie die zweite Markierung herunter und drucken Sie sie aus. Wenn alles gut geht, sollten Sie stolzer Besitzer einer neuen kleinen 3D-Kuh sein. Herzliche Glückwünsche!
Es ist großartig, dass wir eine so schön aussehende Kuh haben, aber es wäre besser, wenn die Kuh moo wäre?
Wechseln Sie in dieses Dateiverzeichnis von der CD The Best Of Tucows, Volume 2 - und laden Sie MOO.WAV herunter. (Es ist nicht im Quelldownload enthalten.)
Speichern Sie es an der üblichen Stelle als moo.wav.
Gehen Sie zu Ihrer .fla-Datei und importieren Sie die Datei in Ihre Bibliothek. Öffnen Sie die Eigenschaften der zuletzt importierten Sounddatei, aktivieren Sie das Kontrollkästchen Exportieren für ActionScript und ändern Sie die Klasse in mooSnd.
Navigieren Sie zu den privaten Variablen und fügen Sie die folgenden Codezeilen hinzu:
private var moo: mooSnd = new mooSnd (); private var mooChnl: SoundChannel = new SoundChannel ();
Für diesen Marker möchte ich, dass der Sound jedes Mal wiedergegeben wird, wenn die Kuh erscheint, aber nur einmal gespielt wird. Dazu müssen Sie den Code hinzufügen, um den Sound an einer etwas anderen Stelle abzuspielen als beim letzten Mal.
Finden Sie diese Zeile in Ihrem Code:
private Funktion _addCube (id: int, index: int): void
Gleich danach möchten wir unseren Code hinzufügen. Wenn Sie den folgenden Code aus dem Shape-Setup-Code herausnehmen, wird er jedes Mal abgespielt, wenn die ID gefunden wird, und nicht beim Einrichten der Shape. Dies geschieht nur einmal.
Fügen Sie diesen Code hinzu:
if (id == 1) mooChnl = moo.play (0, 1);
Testen Sie die Datei zum letzten Mal und die Kuh sollte moo. Sie können sogar beide Marker gleichzeitig verwenden und sind super schnell.
Ich hoffe, Ihnen hat dieses zweiteilige Tutorial zu Augmented Reality gefallen und ich hoffe, dass Sie jetzt loslegen und einige sehr coole Dinge erstellen können.
