Share
Bine ați venit în partea a 2-a a Ghidului meu pentru începători cu privire la realitatea augmentată, sper că ați terminat prima parte a acestui tutorial sau cel puțin ați descărcat și ați citit fișierele sursă (altfel puteți deveni puțin confuz cu ceea ce se întâmplă).
Ultima dată ne-am uitat la crearea unui simplu mediu AR, creând un cub, aplicând materiale cubului și efectul "gaura în perete".
Astăzi vom construi pe acea cunoaștere și vom crea finala așa cum se arată în demo. Pentru a crea acest efect final, trebuie să știm cum să facem sfere, să animăm obiecte, să jucăm efecte sonore și, în final, să facem obiecte 3D. Obținerea obiectelor 3D în palmă este principalul motiv pentru care Realitatea Augmented a devenit un mare succes în acest an, mai ales când creați unele dintre cele mai interesante forme sau le animați. Dacă vă aflați în Marea Britanie, ați văzut recent The Gadget Show unde au prezentat realitatea augmentată și a avut o versiune animată a lui Suzi Perry pe care ați putea să o țineți în mână. Foarte frumos.
Deci, să mergem la afaceri. Voi începe cu lumea și stelele vor face mai întâi de toate, apoi veți trece la animarea formelor și, în final, la crearea vacii. Deschideți fișierele de la ultima dată și să creați.
Sursa: NASA Pământ vizibil. Credit: Reto Stöckli, Robert Simmon.
Descărcați versiunea de 2048x1024px a imaginii de mai sus de pe pagina NASA Earth Visible și numiți-o map.jpg. Plasați-l în următorul dosar: implementați> active. Acesta este același director în care ați salvat imaginile pentru interiorul cubului în ultima parte a tutorialului. Această imagine minunată a lumii a venit de la NASA. Ei fac fotografii bune, nu-i așa?
În codul dvs., navigați la locul unde am setat efectul "gaură în perete" pentru Marker 0 ultima dată. Imediat după codul "gaură în perete", adăugați codul următor:
var Pământ: sferă = sferă nouă (pământ, 40); Earth.z = 200; dispObj.addChild (Earth);
Acum că am creat o sferă, ea are nevoie de o textura. Acest lucru se face în același mod ca și cartografierea unei texturi într-un cub. Observați cum în configurația pentru sferă se caută ceva numit "pământ", aceasta este variabila noastră de textură.
Navigați în codul în care am creat materiale înainte. Adăugați la acest cod următorul rând:
Accentsconagua
var pământ: BitmapFileMaterial = BitmapFileMaterial nou ("assets / map.jpg"); La fel ca ceilalți.
Când încercați, ar trebui să vedeți ceva asemănător imaginii următoare (dar, bineînțeles, fără ca diavolul frumos să vă țină marcatorul):
La fel ca ultima oară, va trebui să descărcați imaginea marcatorului și să o imprimați cu mult spațiu alb în jurul marginilor.
Acum, ce ar fi o imagine spațială fără niște stele? Să mai adăugăm ceva? Aceasta este probabil cea mai plictisitoare parte pentru mine de a scrie, deoarece toate stelele trebuie să fie poziționate individual. Dar tu rascals cheeky obține avantajul de a copia și lipiți.
Adăugați după codul de redare a pământului următorul cod:
var star1: Sphere = Sferă nouă (stea, 4); star1.z = 65; star1.x = 84; star1.y = 164; dispObj.addChild (star1); var star2: Sphere = Sferă nouă (stea, 3); star2.z = 246; star2.x = 32; star2.y = 64; dispObj.addChild (Star2); var star3: Sphere = Sferă nouă (stea, 2); star3.z = 163; star3.x = 78; star3.y = 98; dispObj.addChild (star3); var star4: Sphere = Sferă nouă (stea, 4); star4.z = 120; star4.x = 164; star4.y = 157; dispObj.addChild (star4); var star5: Sphere = Sferă nouă (stea, 2); star5.z = 148; star5.x = -164; star5.y = -157; dispObj.addChild (star5); var star6: Sphere = Sferă nouă (stea, 3); star6.z = 46; star6.x = -36; star6.y = -156; dispObj.addChild (star6); var star7: Sphere = Sferă nouă (stea, 5); star7.z = 40; star7.x = -16; star7.y = -84; dispObj.addChild (star7); var star8: Sphere = Sferă nouă (stea, 5); star8.z = 59; star8.x = -84; star8.y = 30; dispObj.addChild (star8); var star9: Sphere = Sferă nouă (stea, 4); star9.z = 87; star9.x = -134; star9.y = 84; dispObj.addChild (star9); var star10: Sphere = Sferă nouă (stea, 2); star10.z = 49; star10.x = 10; star10.y = 18; dispObj.addChild (star10); var star11: Sphere = Sferă nouă (stea, 5); star11.z = 94; star11.x = -84; star11.y = 41; dispObj.addChild (star11); var star12: Sphere = Sferă nouă (stea, 3); star12.z = 54; star12.x = 91; star12.y = -46; dispObj.addChild (star12); var star13: Sphere = Sferă nouă (stea, 2); star13.z = 180; star13.x = 88; star13.y = -130; dispObj.addChild (star13); var star14: Sphere = Sferă nouă (stea, 4); star14.z = 102; star14.x = 134; star14.y = -13; dispObj.addChild (star14); var star15: Sphere = sferă nouă (stea, 1); star15.z = 61; star15.x = -35; star15.y = 145; dispObj.addChild (star15);
Phew, acest lucru este destul de mult.Desigur, puteți adăuga mai mult dacă doriți mai multe stele.Utilizați doar o buclă un matrice pentru a adăuga un număr arbitrar.
Acum trebuie să adăugăm un material pentru stele. Adăugați următoarele cu celălalt cod de material:
var stea: ColorMaterial = ColorMaterial nou (0xFFFFFF);
Testați filmul flash și, sperăm, veți vedea ceva de genul:
Nu ar fi bine dacă, să zicem, am putea avea scena spațiului pe care tocmai am creat-o, să fim prinși într-o cutie mică ținută în marcator și apoi să explodeze? Ei bine, aveți noroc și probabil ați văzut rezultatul, deoarece exact așa vom face.
Este destul de simplu să animați lucrurile în AR. Mai ales dacă doriți doar să le mutați de la un punct la altul, așa cum dorim. Pentru a face acest lucru, trebuie să descărcați câteva clase suplimentare pentru Flash. GreenSock face o serie foarte frumoasă de biblioteci de animație care ne ajută să mutați cu ușurință obiecte de la un punct la altul.
Treceți la greensock.com și descărcați biblioteca AS3 TweenMax.
După ce ați descărcat biblioteca TweenMax, trebuie să extrageți fișierul .zip și să plasați folderul greensock în src> com al proiectului nostru. Aici este păstrată și biblioteca de squidere. Extrageți aici și toate vor fi doar umfla.
Acum du-te înapoi la Flash. Adăugați următoarea linie în partea de sus a codului dvs. cu celelalte linii de import:
import com.greensock. *;
Acum aveți acces la biblioteca GreenSock.
Găsiți codul în care ați configurat variabila Pământ. Înlocuiți-l cu următorul cod:
var Pământ: sferă = sferă nouă (pământ, 1); Earth.z = -40; TweenMax.to (Pământ, 4, scaleX: 40, scaleY: 40, scaleZ: 40, z: "200", întârziere: 4);
Ceea ce am făcut aici este modificarea punctului de pornire și a dimensiunii Pământului, astfel încât să fie foarte mic și în interiorul cutiei. TweenMax este o clasă de animație excelentă. Aici am stabilit ce variabilă să animăm (Pământ), cât timp va dura în câteva secunde (4), cât de mult ar trebui să crească variabila, punctul său z și, în sfârșit, cât timp ar trebui să aștepte înainte de a anima. Acest lucru este setat la 4, astfel încât să putem anima alte lucruri mai întâi.
Înlocuiți toate codul de configurare a stelelor cu următoarele:
var star1: Sphere = Sferă nouă (stea, 1); star1.z = -40; TweenMax.to (star1, 4, scaleX: 1, scaleY: 1, scaleZ: 1, x: "84", y: "164", z: "65", întârziere: 4); dispObj.addChild (star1); var star2: Sphere = Sferă nouă (stea, 1); star2.z = -40; TweenMax.to (star2, 4, scaleX: 3, scaleY: 3, scaleZ: 3, x: "32", y: "64", z: "246", întârziere: 4); dispObj.addChild (Star2); var star3: Sphere = Sferă nouă (stea, 1); star3.z = -40; TweenMax.to (star3, 4, scaleX: 2, scaleY: 2, scaleZ: 2, x: "78", y: "98", z: "163", întârziere: 4); dispObj.addChild (star3); var star4: Sphere = Sferă nouă (stea, 1); star4.z = -40; TweenMax.to (star4, 4, scaleX: 4, scaleY: 4, scaleZ: 4, x: "164", y: "157", z: "120", întârziere: 4); dispObj.addChild (star4); var star5: Sphere = Sferă nouă (stea, 1); star5.z = -40; TweenMax.to (star5, 4, scarăX: 2, scaleY: 2, scaleZ: 2, x: "- 164", y: "- 157", z: "148", întârziere: 4); dispObj.addChild (star5); var star6: Sphere = Sferă nouă (stea, 1); star6.z = -40; TweenMax.to (star6, 4, scaleX: 3, scaleY: 3, scaleZ: 3, x: "- 36", y: "- 156", z: "46", întârziere: 4); dispObj.addChild (star6); var star7: Sphere = Sferă nouă (stea, 1); star7.z = -40; TweenMax.to (star7, 4, scarăX: 5, scaleY: 5, scaleZ: 5, x: "- 16", y: "- 84", z: "40", întârziere: 4); dispObj.addChild (star7); var star8: Sphere = Sferă nouă (stea, 1); star8.z = -40; TweenMax.to (star8, 4, scaleX: 5, scaleY: 5, scaleZ: 5, x: "- 84", y: "30", z: "59", întârziere: 4); dispObj.addChild (star8); var star9: Sphere = Sferă nouă (stea, 1); star9.z = -40; TweenMax.to (star9, 4, scaleX: 4, scaleY: 4, scaleZ: 4, x: "- 134", y: "84", z: "87", întârziere: 4); dispObj.addChild (star9); var star10: Sphere = Sferă nouă (stea, 1); star10.z = -40; TweenMax.to (star10, 4, scaleX: 2, scaleY: 2, scaleZ: 2, x: "10", y: "18", z: "49", întârziere: 4); dispObj.addChild (star10); var star11: Sphere = Sferă nouă (stea, 1); star11.z = -40; TweenMax.to (star11, 4, scaleX: 5, scaleY: 5, scaleZ: 5, x: "- 84", y: "41", z: "94", întârziere: 4); dispObj.addChild (star11); var star12: Sphere = Sferă nouă (stea, 1); star12.z = -40; TweenMax.to (star12, 4, scaleX: 3, scaleY: 3, scaleZ: 3, x: "91", y: "- 46", z: "54", întârziere: 4); dispObj.addChild (star12); var star13: Sphere = Sferă nouă (stea, 1); star13.z = -40; TweenMax.to (star13, 4, scaleX: 2, scaleY: 2, scaleZ: 2, x: "88", y: "- 130", z: "180", întârziere: 4); dispObj.addChild (star13); var star14: Sphere = Sferă nouă (stea, 1); star14.z = -40; TweenMax.to (star14, 4, scaleX: 4, scaleY: 4, scaleZ: 4, x: "134", y: "- 13", z: "102", întârziere: 4); dispObj.addChild (star14); var star15: Sphere = Sferă nouă (stea, 1); star15.z = -40; TweenMax.to (star15, 4, scarăX: 1, scaleY: 1, scaleZ: 1, x: "- 35", y: "145", z: "61", întârziere: 4); dispObj.addChild (star15);
Acest lucru vă va anima stelele dintr-un punct ascuns ascuns în pozițiile lor finale. Din nou, am modificat pozițiile z-ale stelelor, astfel încât să pornească în interiorul casetei.
Să testați din nou filmul Flash. Ar trebui să aveți o tranziție animată drăguță de la nimic la pământ și stelele explodează din cutia în care am prins-o.
Pentru capacul cutiei care se va deschide și va avea Pamantul și stelele să explodeze, vom folosi patru imagini. Eu folosesc un panou din lemn pentru caseta mea dar simțiți-vă liber să creați-vă propriul. Iată imaginile pe care le-am făcut, descărcați-le și salvați-le în implementarea> materialelor.
Salvați ca top.png
Salvați ca bottom.png
Salvați ca left.png
Salvați drept.png
Sub locul în care am creat stelele, adăugați următorul cod:
var top: Cube = Cube nou (new MaterialsList (toate: Top), 80, 0, 80); top.z = 0; top.y = 40; TweenMax.to (top, 2, rotationX: -180, întârziere: 2); dispObj.addChild (sus); var bottom: Cube = Cube nou (new MaterialsList (toate: Bottom), 80, 0, 80); bottom.z = 0; bottom.y = -40; TweenMax.to (fund, 2, rotationX: 180, întârziere: 2); dispObj.addChild (jos); var stânga: Cube = Cube nou (new MaterialsList (toate: Stânga), 80, 0, 80); left.z = 0; left.rotationZ = 90; left.x = -40; TweenMax.to (stânga, 2, rotationX: 180, întârziere: 2); dispObj.addChild (stânga); var dreapta: Cube = Cube nou (new MaterialsList (toate: Right), 80, 0, 80); right.z = 0; right.x = 40; right.rotationZ = 90; TweenMax.to (dreapta, 2, rotationX: -180, întârziere: 2); dispObj.addChild (dreapta);
Aceasta stabilește toate părțile care alcătuiesc capacul cutiei, le poziționează corect și le animă. Lucruri minunate.
Fiecare "cub" este setat să aibă o adâncime de zero (al treilea argument în constructor), astfel încât acestea par a fi planuri plane.
În secțiunea material, adăugați următorul cod:
var Top: BitmapFileMaterial = BitmapFileMaterial nou ("assets / top.png"); var Partea de jos: BitmapFileMaterial = BitmapFileMaterial nou ("assets / bottom.png"); var Stânga: BitmapFileMaterial = BitmapFileMaterial nou ("assets / left.png"); var Dreapta: BitmapFileMaterial = nou BitmapFileMaterial ("assets / right.png"); Acum capacul va arăta partea. Sunt sigur că ați observat că imaginile din stânga și din dreapta sunt rotite și apoi le rotesc înapoi în codul de la pasul 14. Probabil vă întrebați de ce am făcut asta, în loc să părăsesc doar imaginile așa cum erau. Ei bine, există un motiv pentru asta. Ele nu vor funcționa corect decât dacă le rotiți. Este un bug ciudat, dar imaginile se întorc înapoi atunci când sunt redate și când aplici o animație pentru ei merg pe un drum greșit. Rotirea lor în primul rând și apoi înapoi în cod le face să funcționeze așa cum ar trebui. E ciudat, dar te duci acolo.
Acum, toate părțile sunt pregătite pentru un alt test, totul intră în vigoare. Sunt sigură că faci tot felul de zgomote în acest moment. Minunat.
Dacă ești ca mine, te uiți la acest gând, ce e minunat, dar are nevoie de ceva dramă. Ei bine, o să facem asta. Să adăugăm muzică dramatică când se deschide caseta.
Du-te la biblioteca de efecte sonore la Hollywood Edge și descarcă BrightPad.wav. (Nu este inclus în descărcarea sursei). Am convertit acest lucru într-un MP3 numit "dramatic.mp3", dar puteți urma aceste instrucțiuni păstrând în același timp un WAV.
Salvați-l în dosarul de desfășurare> active.
Deschideți fișierul .fla și mergeți la File> Import> Import to Library. Import dramatic.mp3.
Deschideți biblioteca dvs. și ar trebui să vedeți fișierul dvs. nou importat șezând chiar acolo.
Faceți clic dreapta pe el și faceți clic pe Proprietăți. Bifați caseta "Export pentru ActionScript". Caseta de clasă ar trebui să devină acum activă; introduceți în ea "dramatic" fără citate.
Reveniți la fișierul .as. În partea de sus a fișierului, găsiți codul de import. Adăugați următorul cod de import:
import flash.media.SoundMixer; import flash.media.SoundChannel;
Puțin mai jos, sunt niște veri privați. Ați putea să vă amintiți acest lucru de la ultima dată când am creat cubul verde. Adăugați următorul cod la vars privat:
drama privată var: dramatică = nouă dramatică (); private var dramaChnl: SoundChannel = nou SoundChannel ();
Acum, ceea ce am făcut aici este să setăm fișierul audio "dramatic" și un canal de sunet. Canalul de sunet permite pornirea și oprirea sunetului prin intermediul codului.
Din moment ce dorim ca sunetul să se joace o singură dată (când se deschide caseta și nu de fiecare dată când afișăm marcatorul), trebuie să introduceți codul următor cu codul de configurare a formei. Mi-am pus mâna după ce am pus capacul cutiei.
dramaChnl = drama.play (0,1);
Aceasta redă sunetul o dată când se deschide capacul.
Sunetul ar trebui să joace acum și, sperăm, se va simți într-adevăr foarte dramatic.
Ar trebui să te simți foarte mulțumit de tine acum, ai creat ceva cu care să-ți impresionezi prietenii.
Acum ajungem la partea unde vom face o vaca 3d pe care o poti tine in mana. Mai întâi, trebuie să descărcați următoarele două fișiere, salvați-le în locul obișnuit:
Textura, pe care ar trebui să o salvați ca Cow.png și fișierul model de vaci pe care trebuie să-l salvați ca cow.dae.
În partea de sus a fișierului dvs., trebuie să adăugați un import. Adăugați următoarea linie:
import org.papervision3d.objects.parsers.Collada;
Găsiți vars privat puțin mai jos și adăugați următoarele:
private var cowSkin: BitmapFileMaterial; privat var cowMat: MaterialsList; vacă privată var: Collada;
Vom încărca vaca pe un al doilea marcator. Acest lucru vă arată că această metodă de încărcare a diferitelor obiecte pe diferite markere este destul de robustă și se poate ocupa nu numai de forme, ci și de obiecte complexe complexe.
Amintiți-vă în partea anterioară a tutorialului, am avut patru marcatori pe o singură coală de hârtie și ați creat cuburi colorate diferite pentru fiecare marcator? Vom reutiliza acest cod pentru a ne permite să folosim un marker separat pentru vacă și Pământ.
Navigați prin fișier până găsiți altfel dacă (id == 1) - verificarea celui de-al doilea marcator.
Înlocuiți totul în cele două paranteze curbate cu următorul cod:
cowMat = new MaterialsList (); cowSkin = BitmapFileMaterial nou ("assets / Cow.png"); cowMat.addMaterial (cowSkin, "toate"); // Creați noul Obiect Collada cu vaca cowMat = noua Collada ("assets / cow.dae", cowMat); cow.rotationX = 90; cow.scale = 0,5; dispObj.addChild (vaca); Da, mai multe teste, nu au fost așa de rapide. Descărcați și imprimați al doilea marcator. Dacă totul merge bine, ar trebui să fii proprietarul mândru al unei noi vacă 3d. Felicitări!
Este minunat că avem o vacă atât de frumoasă, dar nu ar fi mai bine ca vacăa să fie moartă?
Du-te la acest director de fișiere de pe un CD numit, The Best Of Tucows, volumul 2 - și descărca MOO.WAV. (Nu este inclus în descărcarea Sursă.)
Salvați-l în locul obișnuit ca moo.wav.
Treceți la fișierul .fla și importați fișierul în bibliotecă. La fel cum ați făcut și cu ultimul fișier de sunet pe care l-ați importat, deschideți proprietățile sale, bifați Export pentru ActionScript și schimbați clasa lui la mooSnd.
Navigați la vars privat și adăugați următoarele linii de cod:
privat var moo: mooSnd = new mooSnd (); privat var mooChnl: SoundChannel = nou SoundChannel ();
Acum, pentru acest marker, vreau ca sunetul să se joace de fiecare dată când va apărea vacă, ci doar să se joace o singură dată. Pentru a face acest lucru, trebuie să adăugați codul pentru a reda sunetul într-un loc ușor diferit de cel pe care l-am făcut ultima oară.
Găsiți această linie în codul dvs.:
funcția privată _addCube (id: int, index: int): void
Vrem să adăugăm codul nostru imediat după asta. Prin luarea urmatoarelor din codul de configurare a formei, acesta se va juca de fiecare data cand ID-ul este gasit mai degraba decat atunci cand forma este configurata, ceea ce se intampla doar o data.
Adăugați acest cod:
dacă (id == 1) mooChnl = moo.play (0, 1);
Testați fișierul pentru ultima oară și vaca ar trebui să moo. Puteți utiliza ambele marcatori în același timp și puteți fi foarte buni.
Sper că v-ați bucurat de acest tutorial în două părți despre Realitatea Augmented și sperăm că puteți pleca acum și puteți crea câteva lucruri foarte interesante.
