Make a Killer Augmented Reality App: 7 ขั้นตอน

Make a Killer Augmented Reality App: 7 ขั้นตอน

สารบัญ:

Anonim

บทช่วยสอนนี้จะแสดงให้คุณเห็นวิธีการใช้ 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().text = "สิ่งที่คุณต้องการ"

ขั้นตอนที่ 7: ทำตามขั้นตอนต่อไป …

ฉันทำแบบฝึกหัดนี้เพราะฉันได้เรียนรู้มากมายที่พยายามหาวิธีแก้ปัญหาสำหรับการขาด API การค้นหารูปภาพแบบย้อนกลับฟรี Google อนุญาตให้คุณค้นหาภาพย้อนกลับในเบราว์เซอร์ แต่ไม่สามารถทำได้ผ่าน http เช่นบริการอื่น ๆ ทั้งหมดของพวกเขา

ฉันตั้งใจที่จะให้เรื่องนี้ทำงานดังนั้นนี่คือสิ่งที่ฉันทำ:

ปรากฎผลลัพธ์ของคำขอไปยังการค้นหาภาพย้อนกลับของ Google ได้รับการเปลี่ยนเส้นทางหลายครั้งและในที่สุดก็แสดงผลเป็น html ผ่านทาง javascript ดังนั้นการรับข้อมูลที่เราต้องการนั้นเป็นไปไม่ได้ใน Unity เพียงอย่างเดียว วิธีเดียวที่ฉันสามารถคิดได้คือสร้าง api แปลก ๆ ของฉันใน php ฉันสามารถส่ง URL ของภาพที่ฉันต้องการค้นหาจาก Unity ไปยังสคริปต์ php ที่ฉันได้โฮสต์ไว้บนเซิร์ฟเวอร์ สคริปต์ php ติดตามการเปลี่ยนเส้นทางจาก google โดยใช้ cURL และสามารถดู havascript javascript ที่แสดงผลโดยใช้ Node.js ซึ่งเป็นสภาพแวดล้อม javascript ฝั่งเซิร์ฟเวอร์

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ลองดูวิดีโอในบทนำ

ขอบคุณที่มองและแจ้งให้เราทราบหากคุณมีคำถามใด ๆ !