![Make a Killer Augmented Reality App: 7 ขั้นตอน Make a Killer Augmented Reality App: 7 ขั้นตอน](https://img.gwsigeps.com/img/circuits/make-a-killer-augmented-reality-app-8.jpg)
สารบัญ:
- วัสดุ:
- ขั้นตอนที่ 1: WWW Class ของ Unity
- ขั้นตอนที่ 2: ให้ทำการร้องขอ HTTP
- ขั้นตอนที่ 3: แนะนำ Web Scraping
- ขั้นตอนที่ 4: API ของ
- ขั้นตอนที่ 5: สวัสดีฉันชื่อ JSON ยินดีที่ได้รู้จักค่ะ
- ขั้นตอนที่ 6: ตอนนี้คืออะไร
- ขั้นตอนที่ 7: ทำตามขั้นตอนต่อไป …
บทช่วยสอนนี้จะแสดงให้คุณเห็นวิธีการใช้ API ใน Unity เพื่อให้คุณสามารถทำให้แอปเติมความเป็นจริงของคุณฉลาดขึ้น ทุกอย่างจะมุ่งไปที่ผู้เริ่มต้น เราจะใช้เอ็นจิ้นวิดีโอเกม Unity 3D เพราะจะทำให้เราสามารถสร้างแอพข้ามแพลตฟอร์มที่จะทำงานบน IOS หรือ Android ปลั๊กอิน Vuforia จะช่วยให้เราสามารถเข้าถึงกระแสข้อมูลของกล้องและคลาส WWW ของ Unity จะช่วยให้เราสามารถสื่อสารกับ API ผ่านโปรโตคอล http นี่เป็นกลไกเดียวกับที่ใช้เมื่อคุณเข้าถึงเว็บไซต์ในเบราว์เซอร์ของคุณ
ฉันคิดว่าแอปพลิเคชันนักฆ่าตัวจริงที่เติมความเป็นจริงไม่ใช่การเล่นเกม แต่แทนที่จะใช้ AR เป็นเครื่องมือในการเพิ่มการรับรู้ในปัจจุบันของความเป็นจริง วิธีในการทำเช่นนี้คือการสร้างแอพที่เชื่อมต่อซึ่งใช้ประโยชน์จากพลังของอินเทอร์เน็ต
เท่าซอฟต์แวร์ที่คุณจะต้องมี Unity 3D:
และ SDK Vuforia:
วัสดุ:
ขั้นตอนที่ 1: WWW Class ของ Unity
ดังนั้นคลาส WWW ของ Unity จึงเป็นขั้นตอนแรกในการทำสิ่งนี้เพราะช่วยให้คุณสามารถส่งคำขอผ่าน http ไปยังเซิร์ฟเวอร์ เมื่อคุณเยี่ยมชมเว็บไซต์ที่คุณทำเช่นนี้คุณกำลังพิมพ์ URL ลงในเบราว์เซอร์ของคุณและทำการร้องขอ HTTP ไปยังเซิร์ฟเวอร์ตามที่อยู่นั้นเว็บเซิร์ฟเวอร์จะส่งคืนรหัส html ที่เบราว์เซอร์ของคุณใช้เพื่อแสดงผลหน้าเว็บ
ขั้นตอนที่ 2: ให้ทำการร้องขอ
เพื่อแสดงให้เห็นถึงสิ่งนี้เพิ่มเติมขออนุญาตได้ที่ www.unity.com
เริ่มโปรเจ็กต์ Unity ใหม่สร้างสคริปต์ C # ชื่อ test แล้วลากลงบนกล้องหลักของคุณ
ขั้นแรกสร้างตัวแจงนับที่เรียกว่าคำขอเราต้องการทำงานกับวัตถุ www ภายใน coroutine ดังนั้นเราจะไม่หยุดโปรแกรมทั้งหมดในขณะที่กำลังประมวลผล จากนั้นให้ตรวจสอบให้แน่ใจว่ารหัสนี้จะทำงานโดยเริ่มต้น coroutine ในฟังก์ชั่นเริ่มต้น
ภายใน coroutine ให้สร้างสตริงและกำหนดเป็นที่อยู่เว็บของ Unity
สร้างวัตถุ www ใหม่และส่งผ่าน URL
Yield return www (เพื่อที่เราจะไม่ดำเนินการต่อจนกว่าการดำเนินการจะเสร็จสิ้น)
สร้างสตริงที่เรียกว่า html และกำหนดเป็น www.text ซึ่งเป็นสตริงข้อความที่ส่งคืนจากคำขอของเรา
เมื่อเราพิมพ์ออกมาเราจะเห็นว่านี่คือ html ของ unity.com
ขั้นตอนที่ 3: แนะนำ Web Scraping
ขณะนี้ยังไม่ได้เข้าสู่ api เราสามารถแยกวิเคราะห์ข้อมูลนี้เพื่อดึงข้อมูลที่เป็นประโยชน์บางอย่างจากเว็บไซต์เพื่อใช้ในแอปของเรา นี่เรียกว่าการขูดเว็บ พูดเช่นเราต้องการแยกชื่อของหน้าเว็บ
เรารู้จาก html มาตรฐานที่ชื่อจะอยู่ระหว่างสองแท็กชื่อ
แท็กชื่อเริ่มต้นและแท็กชื่อตอนท้าย:
เพิ่งรู้ว่ามีวิธีที่ดีกว่าและสะอาดกว่าในการทำเช่นนี้ แต่เพื่อให้เวลาสามารถจัดการกับสตริงเพื่อดึงสิ่งที่เราต้องการ
ตอนนี้เรามีสตริงที่คั่นด้วยอักขระแต่ละตัว ดังนั้นเมื่อเราพิมพ์ html 2 เราจะได้ตัวที่สาม (เนื่องจากดัชนีเริ่มต้นที่ 0) ให้สร้างรายการของสตริงแทนและแยกด้วยอักขระบรรทัดใหม่ ตอนนี้เมื่อเราพิมพ์ htmlList 2 เราจะได้รับข้อความบรรทัดที่สาม
ในการค้นหาบรรทัดที่มี“ ชื่อเรื่อง” เราสามารถวนรอบข้อความทุกบรรทัดโดยใช้ for for loop
เราสามารถค้นหาบรรทัดที่ต้องการโดยตรวจสอบว่าบรรทัดปัจจุบันมีชื่อคำ เมื่อเราพบบรรทัดนั้นเราสามารถแทนที่แท็กชื่อแรกด้วยสตริงว่างแล้วแทนที่แท็กชื่อที่สองด้วยสตริงว่าง ให้พิมพ์ผลลัพธ์แล้วเราสามารถมาพักที่นี่เพราะเราไม่จำเป็นต้องไปไกลกว่านี้อีกแล้ว ผลลัพธ์จะมีชื่อของหน้าเว็บ หากคุณต้องการวิธีที่ดีกว่า แต่ซับซ้อนกว่าเล็กน้อยในการบรรลุเป้าหมายนี้ให้ดูที่นิพจน์ทั่วไปหรือ REGEX
ขั้นตอนที่ 4: API ของ
ตอนนี้ให้ดูที่การร้องขอ API จริง เราจะใช้ Google Custom Search API ก่อนอื่นเราต้องใช้รหัสเฉพาะ ดังนั้นค้นหาคีย์ api ของ Google ค้นหาที่กำหนดเองและไปที่ลิงก์แรก สร้างบัญชีหากคุณยังไม่มีและสร้างแอป เปิดใช้งาน API การค้นหาที่กำหนดเองสำหรับแอพนี้และคัดลอกคีย์ไปยังคลิปบอร์ดของคุณ
คุณสามารถค้นหาได้ฟรี 100 ครั้งต่อวันด้วย API นี้
ขั้นตอนที่ 5: สวัสดีฉันชื่อ JSON ยินดีที่ได้รู้จักค่ะ
กลับไปที่ Unity และเริ่มต้นด้วยการลบทุกอย่างจนกว่าเราจะตั้งค่าสตริง html ของเรา ให้เปลี่ยนชื่อ "json" นี้เพราะเราจะได้รับวัตถุ JSON กลับมา ให้เพียงคัดลอกคีย์ API ของเราตอนนี้
กลับไปที่ google และคลิกที่ "การใช้ส่วนที่เหลือ" หากคุณมองไปรอบ ๆ ที่นี่คุณจะพบว่า api ต้องการ 3 พารามิเตอร์, คีย์ api, รหัสเครื่องมือค้นหาที่กำหนดเองและข้อความค้นหา คัดลอกคำขอตัวอย่างและวางลงในสตริง URL ใน Unity
ย้ายคีย์ใบอนุญาตของคุณไปยังตำแหน่งที่เหมาะสมใน URL และเนื่องจากเราจะไม่สร้างเครื่องมือค้นหาที่กำหนดเองให้เปลี่ยนพารามิเตอร์ cx เป็น cref และทำให้เป็นสตริงว่าง
สร้างตัวแปรสตริงส่วนตัวที่เรียกว่าแบบสอบถามและตั้งค่าเท่ากับสิ่งที่คุณต้องการค้นหา กลับไปที่ url และลบทุกอย่างหลังจาก "q =" และเชื่อมสตริงกับตัวแปรเคียวรีที่เราเพิ่งกำหนด ตอนนี้เมื่อเราพิมพ์คำตอบออกมาเราจะได้ผลลัพธ์ google ทั้งหมดจัดเป็นวัตถุ JSON ที่เรียบร้อย
ขั้นตอนที่ 6: ตอนนี้คืออะไร
เยี่ยมมากตอนนี้เราพูดพล่อยๆมากขึ้น
คุณสามารถแยกสิ่งที่คุณต้องการโดยใช้ห้องสมุดชื่อ LitJSON
github.com/lbv/litjson
นั่นจะทำให้เราสามารถจัดการกับข้อมูลทั้งหมดนี้ได้อย่างเรียบร้อย
สำหรับการแก้ไขอย่างรวดเร็วคุณสามารถแยกวิเคราะห์ได้เหมือนกับที่เราทำกับ html จากตัวอย่างล่าสุด
ตอนนี้เพื่อให้มองเห็นได้ในมุมมองเกมคลิกขวาในลำดับชั้นของ Unity และสร้างข้อความ UI ใหม่
เพิ่มสิ่งนี้โดยใช้คำสั่งกับสคริปต์ของคุณ: "UnityEngine.UI;"
ตอนนี้เพียงแค่สร้างการอ้างอิงถึงข้อความ UI โดยการกำหนด GameObject yourTextObject สาธารณะ
ลากข้อความลงในช่องว่างที่เพิ่งสร้างในตัวตรวจสอบ
ตอนนี้คุณสามารถตั้งค่าเป็นดังนี้:
yourTextObject.GetComponent ฉันทำแบบฝึกหัดนี้เพราะฉันได้เรียนรู้มากมายที่พยายามหาวิธีแก้ปัญหาสำหรับการขาด API การค้นหารูปภาพแบบย้อนกลับฟรี Google อนุญาตให้คุณค้นหาภาพย้อนกลับในเบราว์เซอร์ แต่ไม่สามารถทำได้ผ่าน http เช่นบริการอื่น ๆ ทั้งหมดของพวกเขา ฉันตั้งใจที่จะให้เรื่องนี้ทำงานดังนั้นนี่คือสิ่งที่ฉันทำ: ปรากฎผลลัพธ์ของคำขอไปยังการค้นหาภาพย้อนกลับของ Google ได้รับการเปลี่ยนเส้นทางหลายครั้งและในที่สุดก็แสดงผลเป็น html ผ่านทาง javascript ดังนั้นการรับข้อมูลที่เราต้องการนั้นเป็นไปไม่ได้ใน Unity เพียงอย่างเดียว วิธีเดียวที่ฉันสามารถคิดได้คือสร้าง api แปลก ๆ ของฉันใน php ฉันสามารถส่ง URL ของภาพที่ฉันต้องการค้นหาจาก Unity ไปยังสคริปต์ php ที่ฉันได้โฮสต์ไว้บนเซิร์ฟเวอร์ สคริปต์ php ติดตามการเปลี่ยนเส้นทางจาก google โดยใช้ cURL และสามารถดู havascript javascript ที่แสดงผลโดยใช้ Node.js ซึ่งเป็นสภาพแวดล้อม javascript ฝั่งเซิร์ฟเวอร์ หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ลองดูวิดีโอในบทนำ ขอบคุณที่มองและแจ้งให้เราทราบหากคุณมีคำถามใด ๆ !ขั้นตอนที่ 7: ทำตามขั้นตอนต่อไป …