Beginner guide til Augmented Reality del 2
en
Del
en
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Velkommen til del 2 av min nybegynners å Augmented Reality, jeg håper du avsluttet den første delen av denne opplæringen, eller i det minste ned og lese kildefilene (ellers kan du få litt forvirret med hva som skjer).
rask oppsummering
Sist gang vi så på å sette opp en enkel AR miljø, skape en kube, påføring av materialer til kuben og "hull i veggen" effekt.
I dag skal vi bygge videre på denne kunnskapen og skape finalen som vist i demoen. Å skape den endelige effekten, må vi vite hvordan å gjengi sfærer, animere objekter, spille lydeffekter og til slutt, gjengi 3D-objekter. Rendering 3D-objekter i håndflaten er den viktigste grunnen til at Augmented Reality har blitt en stor hit i år, spesielt når du lager noen av de mer interessante figurer eller animere dem. Dersom du er i Storbritannia du kanskje har sett The Gadget Show nylig hvor de omtalt Augmented reality og hadde en animert versjon av Suzi Perry som du kan holde i hånden. Veldig bra.
Så la oss komme til saken. Jeg skal starte med verden og stjerner gjengi først av alt, deretter gå videre til å animere figurene og til slutt skape kua. Åpne opp filene dine fra forrige gang, og la oss komme skape
Trinn 1:. Last ned World
. Credit:. Reto Stöckli, Robert Simmon
Last ned 2048x1024px versjon av bildet ovenfor fra NASA Visible Earth side og kaller det map.jpg. Sett den inn i følgende mappe: distribuere > eiendeler. Dette er den samme mappen der du lagret bildene for innsiden av kuben i siste del av opplæringen. Denne nydelige bildet av verden kom fra NASA. De tar gode bilder gjør ikke de
Trinn 2: Opprette en Sphere
I koden din, navigere til hvor vi setter opp "hull i veggen" effekt for Marker 0 siste gang. Like etter "hull i veggen" kode, legge inn følgende kode:
Var Earth: Sphere = new Sphere (jord, 40); Earth.z = 200; dispObj.addChild (Earth);
< h2> Trinn 3: Kartlegging World
Nå som vi har satt opp en sfære, trenger den en tekstur. Dette gjøres på nøyaktig samme måte som tilordne en tekstur til en kube. Legg merke til hvordan i oppsettet for tjeneste, er det på jakt etter noe som kalles "jord" dette er vår tekstur variabel.
Naviger i koden til der vi satt opp materialer før. Legg til at koden følgende linje:
Var jorden BitmapFileMaterial = new BitmapFileMaterial ("eiendeler /map.jpg");
Akkurat det samme som de andre
Trinn 4.: Test det
Når du teste den, skal du se noe sånt som følgende bilde (men selvfølgelig uten at kjekk djevelen holder opp markør for deg):
Akkurat som forrige gang, du 'll trenger å laste ned markør bildet og skrive det med mye hvitt område rundt kantene
Trinn 5:. Stjerner i øynene
Nå hva ville en plass image være uten noen stjerner? La oss legge til noen i skal vi? Dette er muligens den mest kjedelige delen for meg å skrive opp siden alle stjernene må være individuelt plassert. Men dere frekke Rascals få nytte av kopier og lim
Legg inn følgende kode etter jord gjengi kode:
Var star1. Sphere = new Sphere (stjerne, 4); star1.z = 65; star1.x = 84; star1.y = 164; dispObj.addChild (star1); Var STAR2: Sphere = new Sphere (stjerne, 3); star2.z = 246; star2.x = 32; star2.y = 64; dispObj.addChild (STAR2); Var star3: Sphere = new Sphere (stjerne, 2); star3.z = 163; star3.x = 78; star3.y = 98; dispObj.addChild (star3); Var Star4: Sphere = new Sphere (stjerne, 4); star4.z = 120; star4.x = 164; star4.y = 157; dispObj.addChild (Star4); Var star5: Sphere = new Sphere (stjerne, 2); star5.z = 148; star5.x = - 164; star5.y = -157; dispObj.addChild (star5); Var star6: Sphere = new Sphere (stjerne, 3); star6.z = 46; star6.x = -36; star6.y = -156; dispObj.addChild (star6); Var star7: Sphere = new Sphere (stjerne, 5); star7.z = 40; star7.x = -16; star7.y = -84; dispObj.addChild (star7); Var star8: Sphere = new Sphere (stjerne, 5); star8.z = 59; star8.x = -84; star8.y = 30; dispObj.addChild (star8); Var star9: Sphere = new Sphere (stjerne, 4 ); star9.z = 87; star9.x = -134; star9.y = 84; dispObj.addChild (star9); Var star10: Sphere = new Sphere (stjerne, 2); star10.z = 49; star10.x = 10; star10.y = 18; dispObj.addChild (star10); Var star11: Sphere = new Sphere (stjerne, 5); star11.z = 94; star11.x = -84; star11.y = 41; dispObj. addChild (star11); Var star12: Sphere = new Sphere (stjerne, 3); star12.z = 54; star12.x = 91; star12.y = -46; dispObj.addChild (star12); Var star13: Sphere = new Sphere (stjerne, 2); star13.z = 180; star13.x = 88; star13.y = -130; dispObj.addChild (star13); Var star14: Sphere = new Sphere (stjerne, 4); star14.z = 102; star14.x = 134; star14.y = -13; dispObj.addChild (star14); Var star15: Sphere = new Sphere (stjerne, 1); star15.z = 61; star15.x = -35; star15. y = 145; dispObj.addChild (star15),...
Phew, at "er ganske mye Selvfølgelig kan du legge til flere hvis du vil ha flere stjerner Eller bare bruke en løkke en matrise for å legge til et vilkårlig antall
Trinn 6: Farge the Stars
Nå må vi legge et materiale for stjernene. Legg til følgende med annet materiale kode:
Var stjerne: ColorMaterial = new ColorMaterial (0xFFFFFF);
Trinn 7: Testing Tid
Test flash film og forhåpentligvis vil du se omtrent slik ut:
Trinn 8: Trapped in a Box
Ville det ikke vært kult om, sier vi kunne ha plass scene vi nettopp opprettet, være fanget i en liten boks holdt innenfor markeringen og deretter eksplodere ut? Vel du er på hell, og sannsynligvis så utfallet som det er akkurat hva vi skal gjøre.
Det er ganske enkelt å animere ting i AR. Spesielt hvis du bare ønsker å flytte dem fra ett punkt til et annet som vi vil. For å gjøre dette, må vi laste ned noen ekstra klasser for Flash. GreenSock gjør en veldig fin serie med animasjons biblioteker som hjelper oss enkelt flytte objekter fra ett punkt til et annet.
Leder over til greensock.com og laste ned AS3 TweenMax biblioteket.
Trinn 9: Importere et nytt bibliotek
Når du har lastet ned TweenMax bibliotek, må du pakke ut ZIP-filen og plasser greensock mappen inn src > com av vårt prosjekt. Det er der squidder biblioteket er også holdt. Pakk her og alt vil bli bare svelle.
Nå flytter tilbake over til Flash. Legg til følgende linje på toppen av koden med andre importlinjer:.
Import com.greensock *;
Nå har du tilgang til GreenSock bibliotek
Trinn 10:. animere Jorden
Finn koden der du setter opp jorda variabel. Erstatte den med følgende kode:
Var Earth: Sphere = new Sphere (jord, 1); Earth.z = -40; TweenMax.to (Earth, 4, {scaleX: 40, Scaley: 40, scaleZ: 40 , z: "200", delay: 4});
Det jeg har gjort her er å endre jordas utgangspunkt og størrelse, slik at det er svært liten, og inne i boksen. TweenMax er en flott animasjon klasse. Her har vi satt opp som variabel for å animere (jorden), hvor lang tid det vil ta i sekunder (4), hvor mye det skal skalere opp variabelen, dens z punkt, og til slutt hvor lenge den skal vente før animere. Dette er satt til 4 slik at vi kan animere andre ting først.
Trinn 11: Animere the Stars
Erstatt all din stjerne oppsett kode med følgende:
Var star1: Sphere = new Sphere (stjerne, 1); star1.z = -40; TweenMax.to (star1, 4, {scaleX: 1, Scaley: 1, scaleZ: 1, x: "84", y: "164", z: "65", delay: 4}); dispObj .addChild (star1); Var STAR2: Sphere = new Sphere (stjerne, 1); star2.z = -40; TweenMax.to (STAR2, 4, {scaleX: 3, Scaley: 3, scaleZ: 3, x: "32", y: " 64 ", z:" 246 ", delay: 4}); dispObj.addChild (STAR2); Var star3: Sphere = new Sphere (stjerne, 1); star3.z = -40; TweenMax.to (star3, 4, {scaleX: 2, Scaley: 2, scaleZ: 2, x: "78", y: " 98 ", z:" 163 ", delay: 4}); dispObj.addChild (star3); Var Star4: Sphere = new Sphere (stjerne, 1); star4.z = -40; TweenMax.to (Star4, 4, {scaleX: 4, Scaley: 4, scaleZ: 4, x: "164", y: " 157 ", z:" 120 ", delay: 4}); dispObj.addChild (Star4); Var star5: Sphere = new Sphere (stjerne, 1); star5.z = -40; TweenMax.to (star5, 4, {scaleX: 2, Scaley: 2, scaleZ: 2, x: "- 164", y: "-157", z: "148", delay: 4}); dispObj.addChild (star5); Var star6: Sphere = new Sphere (stjerne, 1); star6.z = -40; TweenMax.to (star6, 4, {scaleX: 3, Scaley: 3, scaleZ: 3, x: "- 36", y: "-156", z: "46", delay: 4}); dispObj.addChild (star6); Var star7: Sphere = new Sphere (stjerne, 1); star7.z = -40; TweenMax.to (star7, 4, {scaleX: 5, Scaley: 5, scaleZ: 5, x: "- 16", y: "-84", z: "40", delay: 4}); dispObj.addChild (star7); Var star8: Sphere = new Sphere (stjerne, 1); star8.z = -40; TweenMax.to (star8, 4, {scaleX: 5, Scaley: 5, scaleZ: 5, x: "- 84", y: "30", z: "59", delay: 4}); dispObj.addChild (star8); Var star9: Sphere = new Sphere (stjerne, 1); star9.z = -40; TweenMax.to (star9, 4, {scaleX: 4, Scaley: 4, scaleZ: 4, x: "- 134", y: "84", z: "87", delay: 4}); dispObj.addChild (star9); Var star10: Sphere = new Sphere (stjerne, 1); star10.z = -40; TweenMax.to (star10, 4, {scaleX: 2, Scaley: 2, scaleZ: 2, x: "10", y: " 18 ", z:" 49 ", delay: 4}); dispObj.addChild (star10); Var star11: Sphere = new Sphere (stjerne, 1); star11.z = -40; TweenMax.to (star11, 4, {scaleX: 5, Scaley: 5, scaleZ: 5, x: "- 84", y: "41", z: "94", delay: 4}); dispObj.addChild (star11); Var star12: Sphere = new Sphere (stjerne, 1); star12.z = -40; TweenMax.to (star12, 4, {scaleX: 3, Scaley: 3, scaleZ: 3, x: "91", y: " -46 ", z:" 54 ", delay: 4}); dispObj.addChild (star12); Var star13: Sphere = new Sphere (stjerne, 1); star13.z = -40; TweenMax.to (star13, 4, {scaleX: 2, Scaley: 2, scaleZ: 2, x: "88", y: " -130 ", z:" 180 ", delay: 4}); dispObj.addChild (star13); Var star14: Sphere = new Sphere (stjerne, 1); star14.z = -40; TweenMax.to (star14, 4, {scaleX: 4, Scaley: 4, scaleZ: 4, x: "134", y: " -13 ", z:" 102 ", delay: 4}); dispObj.addChild (star14); Var star15: Sphere = new Sphere (stjerne, 1); star15.z = -40; TweenMax.to (star15, 4, {scaleX: 1, Scaley: 1, scaleZ: 1, x: "- 35", y: "145", z: "61", delay: 4}); dispObj.addChild (star15);
Dette vil animere stjerner fra en skjult startpunkt til sine endelige posisjoner. Igjen, jeg har forandret stjernenes z-posisjoner slik at de starter inne i boksen
Trinn 12:.! Test det
La oss teste Flash movie igjen. Du bør ha en fin animert overgang fra ingenting til jorden og stjerner eksploderer ut av boksen vi fanget dem i
Trinn 13:.! Det er alt en Cover opp
For boks lokk som vil åpne opp og har jorden og stjernene eksplodere ut, vil vi bruke fire bilder. Jeg bruker en treplate utseende for min boks men gjerne lage dine egne. Her er bildene jeg laget, laste ned disse og lagre dem i distribuere > eiendeler.
Lagre som top.png
Lagre som bottom.png
Lagre som left.png
Lagre som right.png
Trinn 14: Lag Box Lid
Under der vi satt opp stjernene, legge til følgende kode:
Var top: Cube = new Cube (ny MaterialsList ({alt: Top}), 80, 0, 80); top.z = 0; top.y = 40; TweenMax.to (topp, 2, {rotationX: -180, delay: 2}); dispObj.addChild (øverst); Var bottom: Cube = new Cube (ny MaterialsList ({alt: Bottom}), 80, 0, 80); bottom.z = 0; bottom.y = -40; TweenMax.to (nederst, 2, {rotationX: 180, delay: 2}); dispObj.addChild (nederst); Var venstre: Cube = new Cube (ny MaterialsList ({alt: Left}), 80, 0, 80); left.z = 0; left.rotationZ = 90; left.x = -40; TweenMax.to (venstre, 2, {rotationX: 180, delay: 2}); dispObj.addChild (til venstre); Var akkurat: Cube = new Cube (ny MaterialsList ({alt: Right}), 80, 0, 80); right.z = 0; right.x = 40; right.rotationZ = 90; TweenMax.to (høyre, 2, {rotationX: -180, delay: 2}); dispObj.addChild (til høyre);
Dette setter opp alle deler som utgjør boksen lokket, plasserer dem riktig og levendegjør dem. Flotte greier
Hver "kube" er satt til å ha en dybde på null (den tredje argument i konstruktøren), slik at de ser ut til å være flate plan
Trinn 15..: Lid Material
I materialet seksjonen, legg til følgende kode:
Var Top: BitmapFileMaterial = new BitmapFileMaterial ("assets /top.png"); Var Bunn: BitmapFileMaterial = new BitmapFileMaterial ("eiendeler /bunn .png "); Var Venstre: BitmapFileMaterial = new BitmapFileMaterial (" assets /left.png "); Var akkurat: BitmapFileMaterial = new BitmapFileMaterial (" assets /right.png ");
Nå lokket vil se den delen. Jeg er sikker på at du lagt merke til at venstre og høyre bilde roteres og da jeg rotere dem tilbake igjen i koden i trinn 14. Du lurer kanskje på hvorfor jeg gjorde det i stedet for bare å forlate bildene som de var. Vel, det er en grunn til det. De vil ikke fungere riktig med mindre du rotere dem. Det er en merkelig bug, men bildene skru opp bakover når gjengis, og når du bruker en animasjon til dem de går feil vei. Rotere dem først, og deretter tilbake i koden som gjør dem fungerer som de skal. Det er ganske rart, men det du går
Trinn 16:.! Testing
Nå er alle delene er klar for en ny test, er det alt kommer på plass. Jeg er sikker på at du gjør alle slags oohing lyder akkurat nå. . Marvelous
Trinn 17: Dette må noen Drama
Hvis du er som meg, du ser på denne tankegangen, wow det er flott, men det virkelig trenger litt mer drama . Vel, vi kommer til å gjøre nettopp det. La oss legge til noen dramatisk musikk når boksen åpnes.
Gå til Hollywood Edge lydeffekter bibliotek og nedlasting BrightPad.wav. (Det er ikke inkludert i kilde nedlastingen.) Jeg har konvertert dette til en MP3 kalt "dramatic.mp3", men du kan følge disse instruksjonene mens du holder den som en WAV.
Lagre det til mappen distribuere > eiendeler
Trinn 18:. Legge i Lyd
Åpne opp FLA filen og gå til Fil > Import > Importer til bibliotek. Import dramatic.mp3.
Åpne opp biblioteket, og du bør se den nylig importerte filen sitter der.
Høyreklikk på den og klikk på Egenskaper. Sjekk "Export for Action" boksen. Klassen boksen skal nå bli aktive; skriver i det "dramatiske" uten anførselstegn.
Trinn 19: Mer Coding
Gå tilbake til .as filen. På toppen av filen, finner import kode. Legg til følgende import kode:
import flash.media.SoundMixer, import flash.media.SoundChannel;
Litt lenger ned, er det noen private vars. Du husker kanskje dette fra sist gang da vi satt opp den grønne kuben. Legg til følgende kode i de private vars:
private Var drama: dramatiske = ny dramatisk (); privat Var dramaChnl: SoundChannel = nye SoundChannel ();
Nå hva vi har gjort her er å sette opp lydfilen "dramatisk" og en lydkanal. Lyden kanal tillater start og stopp av lyden gjennom koden
Trinn 20:. Spille Sound
Siden vi bare vil at lyden skal spille en gang (når boksen åpnes, og ikke hver gang vi viser markøren) du trenger for å sette inn følgende kode med all form satt opp kode. Jeg satte meg rett etter jeg satt opp boksen lokket
dramaChnl = drama.play (0,1);.
Dette spiller lyden en gang når lokket åpnes.
Trinn 21:!. Testing
Lyden skal nå spille, og forhåpentligvis vil det føles veldig dramatisk faktisk
Du skal føle deg veldig fornøyd med deg selv akkurat nå, du har laget noe du kan imponere vennene dine med.
Trinn 22: Kuer
Nå får vi til den delen hvor vi gjengi en 3d ku som du kan holde i hånden. Først av alt, må du laste ned følgende to filer, lagre dem på vanlig sted:
tekstur, som du bør lagre som Cow.png og kua modell fil som du trenger for å lagre som ku. dae
Trinn 23:. Sette opp Cow
På toppen av filen, må du legge til en import. Legg til følgende linje:
import org.papervision3d.objects.parsers.Collada;
Finn den private vars litt lenger ned og legge til følgende:
private Var cowskin: BitmapFileMaterial; private Var cowMat: MaterialsList; private Var ku: Collada;
Trinn 24: Flere Sette opp
Vi kommer til å laste kua opp på en ny markør. Dette er for å vise deg at denne metoden for å laste forskjellige objekter på ulike markører er ganske robust og kan håndtere ikke bare figurer men 3d komplekse objekter også.
Husk i forrige del av opplæringen, hadde vi fire markører på et enkelt ark, og skapte ulike fargede kuber for hver markør? . Vi kommer til å gjenbruke denne koden for å la oss bruke en egen markør for kua og Jorden
Naviger gjennom filen din til du finner else if (id == 1) {- sjekk for . den andre markør
Erstatt alt innenfor de to klammeparenteser med følgende kode:
cowMat = new MaterialsList (); cowskin = new BitmapFileMaterial ("assets /Cow.png"); cowMat.addMaterial ( cowskin, "alle"); //Opprett ny Collada objekt med cowMatcow = new Collada ("eiendeler /cow.dae", cowMat); cow.rotationX = 90; cow.scale = 0,5; dispObj.addChild (ku);
Trinn 25: Testing
Ja, mer testing allerede, var ikke så rask. Laste ned og skrive ut ny markør. Hvis alt går bra, bør du bli den stolte eier av en ny liten 3d ku. Gratulerer
Trinn 26:!? Er kua på Moo-t Anmeldelser
Det er flott at vi har en så fin ser ku, men ville det ikke være bedre om kua var ? å moo
Gå til denne katalogen av filer fra en CD kalt, The Best Of Tucows, Volume 2 - og laste MOO.WAV. (Det er ikke inkludert i kilde nedlastingen.)
Lagre det på vanlig sted som moo.wav.
Kjør over til din FLA filen og importere filen til biblioteket. Akkurat som du gjorde med den forrige lydfilen du importerte, åpne opp sine egenskaper, tikk Eksporter for Actionscript og endre sin klasse mooSnd
Trinn 27:. Moo-sic i mine ører
< p> Naviger til de private vars og legge til følgende linjer med kode:
private Var moo: mooSnd = new mooSnd (); privat Var mooChnl: SoundChannel = nye SoundChannel ();
Nå, for denne markøren, jeg vil lyden å spille hver gang kua vises, men å bare spille en gang. For å gjøre dette, må du legge inn koden for å spille av lyden i en litt annen plass enn vi gjorde forrige gang.
Finn denne linjen i koden din:
privat funksjon _addCube (id: int, Indeks: int): void {
Vi ønsker å legge til koden vår like etter dette. Ved å ta følgende ut av formen satt opp koden, vil det spille hver gang at ID blir funnet snarere enn når formen er satt opp, noe som skjer bare en gang
Legg denne koden.
If ( id == 1) {mooChnl = moo.play (0, 1);}
Konklusjon
Test filen for siste gang, og kua skulle MOO. Du kan også bruke begge merkene på samme tid og være super kul ut.
Jeg håper du har hatt glede av denne todelt tutorial på Augmented Reality og håper at du kan gå av nå, og skape noen veldig kule ting. Anmeldelser