带你开发类似Pokemon Go的AR游戏(2)

作者 谢恩铭,公众号「程序员联盟」(微信号:coderhub)。
转载请注明出处。
原文:http://www.jianshu.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阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容