La oss lage en Augmented Reality -app for MEMES !: 8 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:24

I denne instruksen skal vi lage en augmented reality -app for Android og IOS i Unity3D som bruker Google API for å søke etter memer. Vi kommer til å bruke Vuforias grunnplandeteksjon i Unity, slik at denne mobilappen fungerer for de fleste Android- og IOS -brukere. Bruk av Vuforia vil også tillate oss å ha bildene forankret på ett sted, slik at vi kan gå gjennom dette bildefeltet og objektene forblir der de er.

Vi skal også teste ut det nye IBM Watson API, slik at vi kan gjøre disse søkene med stemmen vår og dra nytte av deres naturlige språkbehandling.

Så de dårlige nyhetene er at ingen av disse API -ene er helt gratis, men den gode nyheten er at de begge er gratis å prøve. Googles tilpassede søk -API gir deg 100 gratis søk per dag, og IBM Watson API gir deg den første måneden gratis.

Kort sagt, denne appen vil få talen vår fra mikrofonen i Unity, sende den til IBM Watson -serverne, som sender teksten tilbake til oss. Vi tar deretter teksten og sender den til Googles servere som gir oss en liste over bildeadresser i JSON -skjema.

Trinn 1: Konfigurer IBM Watson SDK i Unity

For å få Watson API i gang må du først få legitimasjonen din fra nettstedet deres. Gå til Console.bluemix.net, opprett og konto, og logg inn. Gå til IBM -kontoen din og naviger til skystøperier og opprett et nytt mellomrom. Gå nå til dashbordet og klikk for å bla gjennom tjenester, legg til talen i teksttjenesten fordi det er det vi skal bruke. Velg din region, organisasjon og plass og lag prosjektet. Nå vil du se API -legitimasjonen din nederst.

Last ned Unity hvis du ikke allerede har det, og importer IBM Watson SDK fra aktivabutikken i Unity. Vi kan teste dette ut ved å lage et tomt spillobjekt og kalle det IBM Watson og legge til eksempelet streaming -skript. Dette skriptet er allerede satt til å ta opp lyd fra enhet og sende det til Watson -serverne for behandling.

Foreløpig skal vi bare bruke dette eksempelskriptet fordi vi har mye mer å gjøre, men kanskje neste gang kan vi gå dypere inn i Watson -ting fordi jeg vil gjøre noe med Vision API.

Trinn 2: Test IBM Watson Text to Speech

Dette skriptet leter etter et UI -tekstobjekt, så la oss lage en ny UI -knapp, dette vil gi oss teksten vi trenger, vi bruker knappen senere. Sett lerretet til skalering med skjermstørrelse og endre størrelsen på knappen litt. Forankre den nederst til venstre. Dra teksten inn i det tomme sporet. Åpne skriptet og la oss legge til våre IBM Watson -legitimasjon, finne hvor "resultsField" -teksten brukes, og sett den til bare "alt.transcript" fordi vi skal bruke denne teksten til å søke på google. Nå før vi kan teste dette, må vi gjøre selve tekststørrelsen dynamisk, så det vi sier vil passe inn i esken. Gå tilbake til teksten og sett den til å passe best. Skriv inn litt tekst for å teste den. Når vi klikker på play, blir ordene våre transkribert til tekst fra Watson Text to Speech API.

Trinn 3: Konfigurer Google Custom Search API

Det neste stykket vi må gjøre er å sette opp Google tilpasset søk -API for bruk i Unity. På et høyt nivå sender vi en HTTP -forespørsel fra Unity til Googles servere som gir oss et svar i JSON -format.

Så gå til konfigurasjonssiden for Google Custom Search JSON API, klikk for å få en API -nøkkel og opprette en ny app. Hold dette åpent. Nå kan vi gå til kontrollpanelet. Legg inn hva som helst for nettstedene å søke, navngi det uansett, og klikk på opprett.

Klikk på kontrollpanelet og gjør noen endringer: vi vil hovedsakelig søke i memer og slå på bildesøk. Under nettsteder for søk bytt det til hele nettet. Klikk på oppdater for å lagre alt.

Finn nå google api explorer og gå til tilpasset søk -API. Dette lar oss formatere JSON -svaret vi får fra Google. Så legg inn hva som helst for spørringen for øyeblikket, lim inn søkemotoren din, legg inn 1 for filteret slik at vi ikke får duplikater, legg inn 10 under num fordi det er det maksimale antallet resultater vi kan returnere om gangen, legg inn bilde for søketype fordi det er alt vi ønsker å returnere. Sett 1 inn for start, og til slutt under felter, legg inn "elementer/lenke" fordi vi for hver returvare bare vil ha bildelinken. Når du klikker på execute, vil du se at vi får 10 fine bildelinker tilbake.

Nå må vi få disse bildene inn i Unity.

Trinn 4: Sett opp Vuforia i enhet

La oss få Vuforia til å fungere, slik at vi kan dra nytte av deres grunnplandeteksjon. Lagre din nåværende scene og gå til byggeinnstillingene. Bytt plattformen din til Android eller IOS, og hvis din IOS legger inn noe for pakkeidentifikatoren, kan du legge til et bruksbeskrivelse for kamera og mikrofon. Under XR -innstillinger sjekk Vuforia augmented reality støttet.

Slett nå hovedkameraet i scenen og legg til et Vuforia ARCamera. Gå til konfigurasjonsdelen og endre sporingsmodus til posisjonell. Fjern merket for alle databasene fordi vi ikke trenger dem.

Legg til en flysøker, og vi må overstyre standardatferden fordi vi bare vil distribuere grunnplanetappen en gang, så vi kan finne skriptet Deploy Stage once på Vuforia -nettstedet. Ta med skriptet til Unity og legg det på flysøkeren, og fjern det gamle skriptet som var der. Endre modusen til interaktiv og sørg for at "OnInteractiveHitTest" -funksjonen blir kalt på den Unity -hendelsen. Mens vi er her, la oss sette knappen vi gjorde tidligere til aktiv når vi har funnet grunnplanet, sette standardtilstanden til inaktiv. Sett nå et bakkeplan inn i scenen og endre det til midtluft fordi vi vil at alle bildene skal flyte i luften. Dra dette bakkeplanet inn i det tomme sporet på flyfinneren.

Trinn 5: Lag en prefabrikkerte bilde

Før vi begynner å sette alle disse brikkene sammen må vi lage et prefabrikert spillobjekt som vi kan instantiere hver gang et bilde lastes inn. Så lag et tomt spillobjekt under grunnplanet og kall det "picPrefab". Lag en quad som et barn av det og skaler den med 2, roter yen med 180 grader slik at foreldrenes vektor fremover som vises som en blå pil er fronten på quad.

Lag et nytt skript kalt "PictureBehavior" og legg det til i vår picPrefab.

Dra nå dette prefabrikatet til mappen din, og det er dette vi skal sette hvert bilde på.

Skriptet "PictureBehavior" skal se slik ut:

bruk av System. Collections;

bruker System. Collections. Generic; bruker UnityEngine; offentlig klasse PictureBehavior: MonoBehaviour {public Renderer quadRenderer; privat Vector3 ønsketPosisjon; void Start () {// se på kamera transform. LookAt (Camera.main.transform); Vector3 wantedAngle = ny Vector3 (0, transform.localEulerAngles.y, 0); transform.rotation = Quaternion. Euler (wantedAngle); // kraft inn i luften ønsketPosisjon = transform.localPosition; transform.localPosition += ny Vector3 (0, 20, 0); } void Update () {transform.localPosition = Vector3. Lerp (transform.localPosition, winsPosition, Time.deltaTime * 4f); } public void LoadImage (string url) {StartCoroutine (LoadImageFromURL (url)); } IEnumerator LoadImageFromURL (string url) {WWW www = ny WWW (url); avkastning avkastning www; quadRenderer.material.mainTexture = www.texture; }}

Trinn 6: Lag et skript for Google API

Nå kan vi dra inn referansen til quad -rendereren fra vår "picPrefab".

Vi har bare to skript igjen å lage, så vi kan lage et C# -skript som heter GoogleService.cs og PictureFactroy.cs.

Lim inn denne koden som gjør forespørselen vår inne i "GoogleService":

bruk av System. Collections;

bruker System. Collections. Generic; bruker UnityEngine; bruker UnityEngine. UI; offentlig klasse GoogleService: MonoBehaviour {public PictureFactory pictureFactory; offentlig tekst buttonText; private const string API_KEY = "PUT API NØKKEL HER !!!!!"; public void GetPictures () {StartCoroutine (PictureRoutine ()); } IEnumerator PictureRoutine () {buttonText.transform.parent.gameObject. SetActive (false); string query = buttonText.text; spørring = WWW. EscapeURL (spørring + "memes"); // slett gamle bilder pictureFactory. DeleteOldPictures (); // lagre kamera fremover vektor slik at vi kan bevege oss rundt mens objekter blir plassert Vector3 cameraForward = Camera.main.transform.forward; // vi kan bare få 10 resultater om gangen, så vi må gå gjennom og lagre fremdriften vår ved å endre startnummeret etter hver 10 int radNum = 1; for (int i = 1; i <= 60; i + = 10) {string url = "https://www.googleapis.com/customsearch/v1?q=" + forespørsel + "& cx = 011535004225295624669%3Afeb1gwic6bs & filter = 1 & num = 10 & searchType = image & start = " + i +" & fields = items%2Flink & key = " + API_KEY; WWW www = ny WWW (url); avkastning avkastning www; pictureFactory. CreateImages (ParseResponse (www.text), rowNum, cameraForward); rowNum ++; } gi avkastning nye WaitForSeconds (5f); buttonText.transform.parent.gameObject. SetActive (true); } Liste ParseResponse (strengtekst) {Liste urlList = ny Liste (); string urls = text. Split ('\ n'); foreach (strenglinje i nettadresser) {if (line. Contains ("link")) {string url = line. Substring (12, line. Length-13); // Filtrering etter png eller jpg ser ikke ut til å fungere fra Google, så vi gjør det her: if (url. Contains (".jpg") || url. Contains (".png")) {urlList. Add (url); }}} returner urlList; }}

Trinn 7: Lag vår bildefabrikk

Inside PictureFactory.cs setter denne koden for å lage alle bildene våre og laster teksturene fra en URL.

bruk av System. Collections;

bruker System. Collections. Generic; bruker UnityEngine; offentlig klasse PictureFactory: MonoBehaviour {public GameObject picPrefab; offentlig GoogleService googleService; public void DeleteOldPictures () {if (transform.childCount> 0) {foreach (Transform child in this.transform) {Destroy (child.gameObject); }}} public void CreateImages (ListurlList, int resultNum, Vector3 camForward) {int picNum = 1; Vector3 center = Camera.main.transform.position; foreach (string url in urlList) {Vector3 pos = GetPosition (picNum, resultNum, camForward); GameObject pic = Instantiate (picPrefab, pos, Quaternion.identity, this.transform); pic. GetComponent (). LoadImage (url); picNum ++; }} Vector3 GetPosition (int picNum, int rowNum, Vector3 camForward) {Vector3 pos = Vector3.zero; if (picNum <= 5) {pos = camForward + new Vector3 (picNum * -3, 0, rowNum * 3.5f); } annet {pos = camForward + ny Vector3 ((picNum % 5) * 3, 0, rowNum * 3.5f); } returposisjon; }}

Trinn 8: Vi er ferdige

Lag et tomt gameobject kalt GoogleService og legg "GoogleSerivice" -skriptet på det.

Dra "PictureFactory" -manuset til scenen på grunnplanet fordi alle bildene våre kommer til å bli laget som barn av dette spillobjektet.

Dra inn de riktige referansene i inspektøren, gjør det samme for google -tjenesten.

Det siste vi bør gjøre er å sørge for at vår "GetPictures" -funksjon blir oppringt. Så la oss gå til "onClick" -hendelsen på knappen vår og ring den derfra.

Nå kan vi klikke play og teste dette. Sørg for å aktivere grunnplanetappen og knappen. Si et ord, og klikk på knappen for å utføre søket på teksten!

Nå for å få denne appen til telefonen, kobler du den til og går til File-> Build Settings. Hit bygg og kjør!

Gi meg beskjed i kommentarene hvis du har spørsmål!