Skip to main content
 首页 » 资源教程

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

2016年10月09日 20:36:546450

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第1张

-- 作者 谢恩铭 转载请注明出处

大家好,接着上一篇带你开发类似Pokemon GOAR游戏(1),我们今天进入第二篇。

这篇开始就进入实战了, 不过今天还是讲不完, 因为内容比较多, 将会有第三篇。

-- 纸上得来终觉浅,绝知此事要躬行。(不是“宫刑”,do not be afraid, 别怕…)

AR是Augmented Reality的缩写, 表示"增强现实", 能够把虚拟信息(物体、图片、视频、声音等等)融合在现实环境中,将现实世界丰富起来,构建一个更加全面、更加美好的世界。

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第2张

之前我也写了一篇: 从火遍全球的Pokemon GO游戏看AR(增强现实)

我们的实战教程大致分下面几个步骤依次进行(之后随着实战进行也许会调整):

  1. 安装Unity 3D

  2. 新建Unity项目

  3. 简介Unity的编辑器

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

  5. 注册和导入Vuforia证书

  6. 导入模型资源

  7. 制作模型动画

  8. 增加手势控制

  9. 导出对应平台

1. 安装Unity 3D

安装Unity 3D很简单。

先去Unity官网:

http://unity3d.com/

英文有困难的话,可以去 http://unity3d.com/cn/ 中文版页面。为了便利大家, 我就用中文页面演示。

点击 获取Unity

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第3张

Unity中文官网

我们可以看到,有好几个版本的Unity:

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第4张

Unity版本

可以选择适合你的版本下载,我们这里就用免费版即可。

点击第一个Personal(“个人的”的意思)中的立即下载

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第5张

下载安装器

它会自动检测你的操作系统,比如我是在Windows系统下做演示,因此它直接建议了Windows版本的安装器,如果你是Mac OS X操作系统,也类似。

这个教程就不在苹果电脑上演示了, 自从来巴黎第一个月末顶配的Macbook Pro被盗之后, 暂时还不想买新的, 期待一下2016年9月的苹果发布会。

点击上图中绿色的 下载安装器 ,下载完之后是一个.exe文件,如下图:

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第6张

Unity 3D 安装器

双击 UnityDownloadAssistant-5.4.0f3.exe

会打开如下图窗口:

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第7张

点击Next(下一步):

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第8张

使用条款,勾选“I accept the terms of the License Agreement” (我同意许可证协议的条款),点击Next

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第9张

选择你的操作系统版本,例如我是在Windows 64位操作系统上做演示,因此我选择“64 bit”,点击Next

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第10张

接着进入的窗口比较关键,是选择下载和安装什么内容。如上图所示:

  • 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。

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第11张

选择下载和安装目录:

  • 对于下载路径,我们选择默认的第一个选项: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的快捷方式。

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第12张

我们可以把它锁定到任务栏,方便启动。在桌面的快捷方式上点击鼠标右键,选择“锁定到任务栏”:

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第13张

2. 新建一个Unity项目

双击桌面的Unity快捷方式,或单击任务栏中的Unity图标,我们即可启动Unity。

第一次启动,会让我们填写账户和密码。如果你还没有Unity账户,可以去注册一个,就和注册QQ账户类似。

注册完毕,填入用户邮箱和密码,即登录Unity。

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第14张

点击New(新建。右边的Open是指“打开”已有Unity项目),填入我们项目的名称(Project name),我填的是UnityPokemon(名字随便取)。

3D或2D是指创建3D还是2D游戏,我们这里选择3D。

Location是项目的目录,我们指定在F盘的 F:\Unity3D 中。

Enable Unity Analytics可以选择关闭(OFF),这样Unity官方就不会收集我们的一些使用数据了。

好了,点击Create project(创建项目)按钮,稍等片时,Unity的主界面就打开了:

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第15张

我们可以看一下“编译选项”,点击File->Build Settings (或者快捷键组合Ctrl + Shift + B):

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第16张

会打开如下窗口:

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第17张

上图中,点击Platform(“平台”,表示可以编译到的平台)中的PC,Mac & Linux Standalone (Windows,Mac OS X或Linux操作系统),会看到右下角Build(编译)和Build And Run(编译并运行)的按钮是可以点击的。

点击Platform中的Android:

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第18张

右下角Build(编译)和Build And Run(编译并运行)的按钮也是可以点击的,因为我们安装时勾选了Android Build Support(Android编译支持),已经安装了相应模块。

不过,如果我们点击iOS等其他平台,会看到No xxx module loaded(没有xxx模块):

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第19张

例如上图中我们选择了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中。

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第20张

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

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第21张

点击Download for Unity。

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

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第22张

如何安装呢?

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

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第23张

步骤是:

  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扩展会被安装进你当前的项目里,你的项目会多出一些文件夹

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第24张

5. 注册和导入Vuforia证书

注册Vuforia证书

我们看这个链接

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

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第25张

要使用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

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第26张

如上图所示,目前我的Vuforia账户的证书管理器中还没有证书密钥,我们点击Add License Key按钮来添加一个。

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

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第27张

可以看到,我们有三种项目类型可以选:

  • Development : 开发类型。应用不发布。

  • Consumer : 消费者类型。应用会发布,供消费者使用。

  • Enterprise : 企业类型。应用会发布,供公司的雇员使用。

我们来看看这些类型的价位:

https://developer.vuforia.com/pricing

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第28张

可以看到Development类型是免费的。

其他两种都是要付费的。企业类型还需要联系商讨价格明细。

上图中我们看到可以安装到的操作系统平台是Android,iOS或UWP。

前两个我们很熟悉,Android和苹果的iOS系统。

UWP是什么呢? UWP其实是Universal Windows Platform,通用微软平台。(就瞧微软1%都不到的移动市场占有率...呵呵)

因为我们只需要开发给自己来学习和演示,并不需要发布,因此选择Development。

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

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第29张

选择Development后,会跳出一个子页面,让我们填写项目的明细(Project Details):

  1. App Name:应用名称。随便填。我们这里填了Pokemon

  2. Device : 设备类型。Mobile表示移动设备,Digital Eyewear(数字眼镜)表示。我们选择Mobile

  3. License Key :No Charge表示免费

点击Next按钮进入下一步:

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第30张

需要勾选那个小方框(By clicking...),是同意条款。

点击Confirm(确认)

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第31张

可以看到,我们的新证书密钥已经生成,就是上图中的Pokemon。

点击Pokemon蓝色字样,进入证书密钥:

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第32张

之后,在Unity的Vuforia应用开发时,把上面方框里那一大段字符黏贴到相应地方即可。

添加AR摄像头到场景中

我们回到Unity中。

使用Unity进行过开发的朋友一定知道,场景里需要有一个摄像头,摄像头的类型有多种,不过得有一个,用来提供玩家的视角。

我们用Vuforia插件来开发AR应用,也需要AR类型的摄像头。

打开之前我们创建的Unity项目(UnityPokemon),我们已经添加了Vuforia的Unity插件到这个项目中。

不过目前此项目的场景中的摄像头还是默认的Unity项目的摄像头:

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第33张

也就是上图左边Hierarchy窗口中的Main Camera(主摄像头)。

这下它是对着正前方的,因此看到的蓝蓝的天空(Skybox)。

我们需要先把这个Main Camera删除,添加Vuforia的AR Camera。

要删除Main Camera很简单:选中Main Camera,单击键盘上的Delete按键即可。或者也可以用鼠标右键点击Main Camera,然后在弹出的列表中选择“Delete”即可。

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第34张

删除之后,我们再看Scene窗口,发现摄像头已经没有了。

而我们玩家的视角也看不到任何东西了,点击切到Game窗口,会发现黑乎乎一片:

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第35张

No camera rendering 表示 “没有摄像头渲染”。

我们切回Scene窗口中,可以看到Hierarchy窗口中只剩一个Directional Light(“定向光”,用于照亮我们的场景,没有真正的光源坐标,放置在场景任何地点都不会影响光的效果。如果没有光源,即使有摄像头,玩家看到的也是黑乎乎一片)了:

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第36张

我们要添加Vuforia的AR摄像头,它在哪里呢?

之前我么已经将Vuforia的Unity插件安装到我们的项目中了,因此已经有了Vuforia的AR开发素材,其中就有AR摄像头。

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

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第37张

将这个ARCamera拖动(鼠标左键选中, 不放开, 把ARCamera拖动到我们的Scene窗口中即可)到我们的Scene中:

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第38张

可以看到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的方框中。

如下:

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第39张

然后,我们下一课继续咯。关闭Unity,关闭前,需要保存Scene(场景),填入场景名称,例如我们填Scene1

带你开发类似Pokemon Go的AR游戏(2) 资源教程 第40张

点“保存”。然后就关闭了Unity,并且保存了我们制作的初步场景为Scene1

好了,下一课我们就把这个AR项目完成吧!

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

评论列表暂无评论
发表评论