帶你開發類似Pokemon Go的AR游戲(2)

作者 謝恩銘,公眾號「程序員聯盟」(微信號:coderhub)。
轉載請注明出處。
原文:http://www.lxweimin.com/p/47b22e4fcced


這一課內容實在太多,如果寫成文章,我需要截圖幾百張,因此我把這套課程錄制成了視頻教程,發布在慕課網上,完全免費:http://www.imooc.com/learn/844

前言


大家好,接著上一篇帶你開發類似Pokemon Go的AR游戲(1),我們今天進入第二篇。

這篇開始就進入實戰了, 不過今天還是講不完, 因為內容比較多, 將會有第三篇。

-- 紙上得來終覺淺,絕知此事要躬行。(不是“宮刑”,do not be afraid, 別怕…)

AR是Augmented Reality的縮寫, 表示"增強現實", 能夠把虛擬信息(物體、圖片、視頻、聲音等等)融合在現實環境中,將現實世界豐富起來,構建一個更加全面、更加美好的世界。

之前我也寫了一篇: 從火遍全球的Pokemon GO游戲看AR(增強現實)

1. 安裝Unity 3D

安裝Unity 3D很簡單。

先去Unity官網:

http://unity3d.com/

英文有困難的話,可以去 http://unity3d.com/cn/ 中文版頁面。為了便利大家, 我就用中文頁面演示。

點擊 獲取Unity

Unity中文官網

我們可以看到,有好幾個版本的Unity:

Unity版本

可以選擇適合你的版本下載,我們這里就用免費版即可。

點擊第一個Personal(“個人的”的意思)中的立即下載

下載安裝器

它會自動檢測你的操作系統,比如我是在Windows系統下做演示,因此它直接建議了Windows版本的安裝器,如果你是Mac OS X操作系統,也類似。

這個教程就不在蘋果電腦上演示了, 自從來巴黎第一個月末頂配的Macbook Pro被盜之后, 暫時還不想買新的, 期待一下2016年9月的蘋果發布會。

點擊上圖中綠色的 下載安裝器 ,下載完之后是一個.exe文件,如下圖:

Unity 3D 安裝器

雙擊 UnityDownloadAssistant-5.4.0f3.exe

會打開如下圖窗口:

點擊Next(下一步):

使用條款,勾選“I accept the terms of the License Agreement” (我同意許可證協議的條款),點擊Next

選擇你的操作系統版本,例如我是在Windows 64位操作系統上做演示,因此我選擇“64 bit”,點擊Next

接著進入的窗口比較關鍵,是選擇下載和安裝什么內容。如上圖所示:

  • Unity 5.4.0f3 :Unity引擎的主體,必須勾選。
  • Documentation :Unity開發文檔。可以勾選,也可以不勾選。我們勾選。
  • Standard Assets :標準的素材。可以勾選,也可以不勾選。勾選吧。
  • Example Project :例子項目。可以勾選,也可以不勾選。我們不勾選。
  • Microsoft Visual Studio Community :微軟的Visual Studio社區版本IDE。不勾選。
  • xxx Build Support : Build Support就是“編譯支持”的意思,表示可以編譯到xxx平臺,例如我們看到的Android Build Support就是支持編譯到Android平臺,iOS Build Support就是支持編譯到iOS平臺,等等。我們這里暫時只選Android Build Support即可,因為我們將在Android手機上測試。

點擊Next。

選擇下載和安裝目錄:

  • 對于下載路徑,我們選擇默認的第一個選項:Download files to temporary location (will automatically be removed when done),表示“下載安裝文件到臨時目錄,安裝完即刪除”。
  • 對于安裝路徑,我這里選擇的是E盤(E:\Program Files\Unity),盡量讓C盤只裝系統軟件。
  • 我們看到“Total space required: 3.2GB”,意思是“一共需要3.2GB的空間”,因此要保證你的安裝目錄至少有3.2GB的容量。

再點擊Next,即開始下載安裝。

依你的網速,可能會耗時良久。你可以去買個漢堡,吃個烤雞,看個短片,等等。

下載完成后,會為我們安裝幾個下載的組件,或者提示你按指示一步步安裝。

完成后,桌面會多了一個Unity的快捷方式。

我們可以把它鎖定到任務欄,方便啟動。在桌面的快捷方式上點擊鼠標右鍵,選擇“鎖定到任務欄”:

2. 新建一個Unity項目

雙擊桌面的Unity快捷方式,或單擊任務欄中的Unity圖標,我們即可啟動Unity。

第一次啟動,會讓我們填寫賬戶和密碼。如果你還沒有Unity賬戶,可以去注冊一個,就和注冊QQ賬戶類似。

注冊完畢,填入用戶郵箱和密碼,即登錄Unity。

點擊New(新建。右邊的Open是指“打開”已有Unity項目),填入我們項目的名稱(Project name),我填的是UnityPokemon(名字隨便取)。

3D或2D是指創建3D還是2D游戲,我們這里選擇3D。

Location是項目的目錄,我們指定在F盤的 F:\Unity3D 中。

Enable Unity Analytics可以選擇關閉(OFF),這樣Unity官方就不會收集我們的一些使用數據了。

好了,點擊Create project(創建項目)按鈕,稍等片時,Unity的主界面就打開了:

我們可以看一下“編譯選項”,點擊File->Build Settings (或者快捷鍵組合Ctrl + Shift + B):

會打開如下窗口:

上圖中,點擊Platform(“平臺”,表示可以編譯到的平臺)中的PC,Mac & Linux Standalone (Windows,Mac OS X或Linux操作系統),會看到右下角Build(編譯)和Build And Run(編譯并運行)的按鈕是可以點擊的。

點擊Platform中的Android:

右下角Build(編譯)和Build And Run(編譯并運行)的按鈕也是可以點擊的,因為我們安裝時勾選了Android Build Support(Android編譯支持),已經安裝了相應模塊。

不過,如果我們點擊iOS等其他平臺,會看到No xxx module loaded(沒有xxx模塊):

例如上圖中我們選擇了iOS,顯示的是No iOS module loaded(沒有iOS模塊)。

要安裝相應模塊以便可以編譯到對應平臺,可以點擊Open Download Page(打開下載頁面),即可下載。然后將其安裝到Unity的安裝目錄即可。

到目前為止,我們可以看到,Unity的默認顯示語言是英語,如果不會英語還真比較累(當然了,全程用金山詞霸也是可以的)。

因此,我之前寫的文章可以去看一下:對于程序員, 為什么英語比數學更重要? 如何學習

3. 簡介Unity的編輯器

首先介紹Unity的菜單

Unity3D的菜單界面

  • File(文件)菜單:負責Unity3D工程文件的打開,新建場景,新建項目,打開項目,打開場景,編譯設置,編譯&運行等最基本的操作。

  • Edit(編輯)菜單:負責Unity3D中常見的工程設置,比如設置默認的編輯器或渲染的質量設置等。

  • GameObject(游戲對象)菜單:負責讓開發者可以手動創建的一些物體對象的功能,例如:燈光,基礎的Cube,plane,以及相機等物體。

  • Component(組件)菜單:Unity3D最常用的菜單,主要是負責一些特效,物理碰撞和動畫等組件的添加。

  • Window(窗口)菜單:負責顯示和調控Unity3D界面中出現的各種可視化窗口。

  • Help(幫助)菜單:Unity3D的一些版本信息以及用戶手冊、API以及開發者論壇的鏈接等。

Unity3D中常見的視圖窗口

Unity3D中最常見的窗口有五個,分別是:Scene、Game、Hierarchy、Project、Inspector。

  • Scene(場景)窗口:放置模型文件的地方,所有在游戲中使用的模型都可以在這里被編輯和操作。

  • Game(游戲)窗口:可以說成是玩家視圖。所有在Scene窗口中擺放的模型文件都會通過攝像機直接渲染到Game窗口,幾乎是同步的所見即所得。

  • Hierarchy(層級)窗口:主要負責管理在游戲中使用的模型、相機、燈光、以及相關組件。注意:在Hierarchy里出現的組件或模型對象是一定在游戲中使用的。

  • Project(項目)窗口:工程文件窗口,所有的工程文件資源都在這里,包括模型、貼圖、材質、腳本、以及插件等。注意:在Project窗口中出現的文件不一定在游戲中都會使用到。

  • Inspector(擴展檢視)窗口:當在Hierarchy面板上選中一個對象,就可以在Inspector面板上看到所有該對象的組件信息,并且可以在這里進行編輯,效果會立馬顯示在Game窗口中,非常方便。

暫時,我們還沒對項目做任何操作,我們先來安裝Vuforia這個AR的SDK到Unity中吧。

4. 安裝Vuforia插件到Unity 3D中

上一課我們簡單地介紹過了Vuforia,其實這個產品是高通公司(Qualcomm )旗下的。

Vuforia不僅可用于創建增強現實應用,更可以支持整合了AR增強現實和VR虛擬現實的混合現實應用程序。

Unity 3D的Vuforia擴展插件可以使開發者非常方便地創建AR/VR應用和游戲。

要能使用此插件開發,如果你英語不錯,可以直接參考Vuforia官網的安裝教程:

http://library.vuforia.com/getting-started (這個是配置AR開發環境的總文檔,里面有Unity 3D的配置,Visual Studio(C++)的配置,XCode (C++), Android Studio (Java/C++)的配置)。

今天我們暫不研究其他平臺,先來看如何把Vuforia安裝進Unity 3D中。

http://library.vuforia.com/articles/Solution/Installing-the-Unity-Extension
http://library.vuforia.com/articles/Solution/Compiling-a-Simple-Unity-Project

我們下載Unity 3D的Vuforia擴展插件。

要下載Vuforia官網的軟件,必須先注冊一個免費賬號,注冊很簡單。注冊完畢,登錄。

進入 https://developer.vuforia.com/downloads/sdk

點擊Download for Unity。

下載之后的文件名字是 vuforia-unity-6-0-112.unitypackage

如何安裝呢?

看這里:http://library.vuforia.com/articles/Solution/Installing-the-Unity-Extension

步驟是:

  1. 下載Vuforia的Unity插件 (已下載,就是vuforia-unity-6-0-112.unitypackage)
  2. 打開你的Unity項目,或者創建一個新項目(已完成)
  3. 導入Vuforia的Unity插件有兩種方法:雙擊vuforia-unity-6-0-112.unitypackage文件,或者在Unity的菜單欄選擇Assets -> Import Package -> Custom Package,然后選擇vuforia-unity-6-0-112.unitypackage。
  4. 導入之后,Vuforia擴展會被安裝進你當前的項目里,你的項目會多出一些文件夾

5. 注冊和導入Vuforia證書

注冊Vuforia證書

我們看這個鏈接

http://library.vuforia.com/articles/Solution/Compiling-a-Simple-Unity-Project

要使用Vuforia,需要生成一個License Key(證書密鑰),就跟我們平時用微軟的Windows操作系統需要一個證書是一樣的。

需要依次做兩個步驟:

  1. Create a License Key : 生成一個證書密鑰。
  2. Add the License Key to your Vuforia App : 將生成的證書密鑰添加到你的Vuforia應用。

首先我們來做第一步,進入以下鏈接:

http://library.vuforia.com/articles/Solution/How-To-Create-an-App-License

生成一個證書密鑰有以下步驟(套路還挺多呀,果然做開發不容易。我走過最長的路,是你們的套路~):

  1. Choose a Project Type:選擇項目類型。
  2. Select an application type if you are developing a Consumer or Enterprise application : 如果上面的項目類型你選擇的是Consumer或Enterprise,那么需要選擇一個應用類型。
  3. Define a name for your app :給你的應用起個名字。
  4. Select the device type that your app will be installed on:選擇將你的應用安裝到哪種類型的設備。
  5. Choose a licensing option based on your requirements:根據你的需要,選擇證書選項
  6. Provide your Billing Information if you've chosen to use a paid license:如果你選擇的是付費的證書,那么需要填寫付款信息。
  7. Obtain your license Key:生成證書密鑰。

首先,我們進入證書管理器:License Manager

如上圖所示,目前我的Vuforia賬戶的證書管理器中還沒有證書密鑰,我們點擊Add License Key按鈕來添加一個。

https://developer.vuforia.com/targetmanager/licenseManager/createLicense

可以看到,我們有三種項目類型可以選:

  • Development : 開發類型。應用不發布。
  • Consumer : 消費者類型。應用會發布,供消費者使用。
  • Enterprise : 企業類型。應用會發布,供公司的雇員使用。

我們來看看這些類型的價位:

https://developer.vuforia.com/pricing

可以看到Development類型是免費的。

其他兩種都是要付費的。企業類型還需要聯系商討價格明細。

上圖中我們看到可以安裝到的操作系統平臺是Android,iOS或UWP。

前兩個我們很熟悉,Android和蘋果的iOS系統。

UWP是什么呢? UWP其實是Universal Windows Platform,通用微軟平臺。(就瞧微軟1%都不到的移動市場占有率...呵呵)

因為我們只需要開發給自己來學習和演示,并不需要發布,因此選擇Development。

https://developer.vuforia.com/targetmanager/licenseManager/createLicense

選擇Development后,會跳出一個子頁面,讓我們填寫項目的明細(Project Details):

  1. App Name:應用名稱。隨便填。我們這里填了Pokemon
  2. Device : 設備類型。Mobile表示移動設備,Digital Eyewear(數字眼鏡)表示。我們選擇Mobile
  3. License Key :No Charge表示免費

點擊Next按鈕進入下一步:

需要勾選那個小方框(By clicking...),是同意條款。

點擊Confirm(確認)

可以看到,我們的新證書密鑰已經生成,就是上圖中的Pokemon。

點擊Pokemon藍色字樣,進入證書密鑰:

之后,在Unity的Vuforia應用開發時,把上面方框里那一大段字符黏貼到相應地方即可。

添加AR攝像頭到場景中

我們回到Unity中。

使用Unity進行過開發的朋友一定知道,場景里需要有一個攝像頭,攝像頭的類型有多種,不過得有一個,用來提供玩家的視角。

我們用Vuforia插件來開發AR應用,也需要AR類型的攝像頭。

打開之前我們創建的Unity項目(UnityPokemon),我們已經添加了Vuforia的Unity插件到這個項目中。

不過目前此項目的場景中的攝像頭還是默認的Unity項目的攝像頭:

也就是上圖左邊Hierarchy窗口中的Main Camera(主攝像頭)。

這下它是對著正前方的,因此看到的藍藍的天空(Skybox)。

我們需要先把這個Main Camera刪除,添加Vuforia的AR Camera。

要刪除Main Camera很簡單:選中Main Camera,單擊鍵盤上的Delete按鍵即可。或者也可以用鼠標右鍵點擊Main Camera,然后在彈出的列表中選擇“Delete”即可。

刪除之后,我們再看Scene窗口,發現攝像頭已經沒有了。

而我們玩家的視角也看不到任何東西了,點擊切到Game窗口,會發現黑乎乎一片:

No camera rendering 表示 “沒有攝像頭渲染”。

我們切回Scene窗口中,可以看到Hierarchy窗口中只剩一個Directional Light(“定向光”,用于照亮我們的場景,沒有真正的光源坐標,放置在場景任何地點都不會影響光的效果。如果沒有光源,即使有攝像頭,玩家看到的也是黑乎乎一片)了:

我們要添加Vuforia的AR攝像頭,它在哪里呢?

之前我么已經將Vuforia的Unity插件安裝到我們的項目中了,因此已經有了Vuforia的AR開發素材,其中就有AR攝像頭。

依次點擊Project窗口中的Vuforia->Prefabs,即可看到里面有ARCamera

將這個ARCamera拖動(鼠標左鍵選中, 不放開, 把ARCamera拖動到我們的Scene窗口中即可)到我們的Scene中:

可以看到Hierarchy窗口中新出現了一個攝像頭,是ARCamera。

導入證書到AR應用

http://library.vuforia.com/articles/Solution/How-To-add-a-License-Key-to-your-Vuforia-App

要將我們之前生成的Vuforia的證書密鑰導入到我們的AR項目,只需要將那一長串證書密鑰黏貼到ARCamera的VuforiaBehaviour組件的App License Key的方框中。

如下:

然后,我們下一課繼續咯。關閉Unity,關閉前,需要保存Scene(場景),填入場景名稱,例如我們填Scene1

點“保存”。然后就關閉了Unity,并且保存了我們制作的初步場景為Scene1

好了,下一課我們就把這個AR項目完成吧!

PS:截圖截得我也是醉了~


我是 謝恩銘,公眾號「程序員聯盟」(微信號:coderhub)運營者,慕課網精英講師 Oscar 老師,終生學習者。
熱愛生活,喜歡游泳,略懂烹飪。
人生格言:「向著標桿直跑」

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,606評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,582評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,540評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,028評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,801評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,223評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,294評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,442評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,976評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,800評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,996評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,543評論 5 360
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,233評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,926評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,702評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,991評論 2 374

推薦閱讀更多精彩內容