课前资源:

链接: https://pan.baidu.com/s/1UxPPUo5UmAkeUYWonEOCPQ

提取码: s59e

本资源包括:

用于本应用的房子模型、识别图、UI以及重要脚本

 

一、软件安装

1、安装Unity

打开课前资源中的“01-Unity2017.4.4”文件夹,根据你电脑是苹果还是windows,选择对应的dmg还是exe安装包进行安装。

注意勾选如下两项,完成安装。

AR语言地图绘本适合几岁 ar绘本下载_ide

 

2、安装Visual Studio

运行课前资源中的“02-vs_community__2017.exe”文件,在工作负载中勾选“通用Windows平台开发”、“使用Unity的游戏开发”,进行安装。

AR语言地图绘本适合几岁 ar绘本下载_AR语言地图绘本适合几岁_02

 

 

二、程序配置

1、创建Unity项目

AR语言地图绘本适合几岁 ar绘本下载_AR语言地图绘本适合几岁_03

 

2、对Unity进行初始设置

a、右上角Layout下拉改为Tall

b、Project设置为One Column Layout

AR语言地图绘本适合几岁 ar绘本下载_Image_04

c、Game视图从上方拖到下方来

该视图为游戏视图,该画面显示的即实际打包的应用运行时显示的画面。

AR语言地图绘本适合几岁 ar绘本下载_Image_05

d、显示Console窗口

Console窗口用于显示你的代码有没有报错、打包时有没有问题等。

Windows——Console,弹出Console界面。将该界面放到Scene位置

AR语言地图绘本适合几岁 ar绘本下载_AR语言地图绘本适合几岁_06

 

3、切换Android平台,对App进行配置

a、左上角File—PlayerSetting,选择Android,点击Switch Platform切换到Android平台。

AR语言地图绘本适合几岁 ar绘本下载_AR语言地图绘本适合几岁_07

a、左上角File—PlayerSetting,右侧Inspector对公司名称、app名称、app图标进行配置

AR语言地图绘本适合几岁 ar绘本下载_Image_08

b、Resolution and Presentation设置旋转方式由自动旋转改为画面在手机左侧

AR语言地图绘本适合几岁 ar绘本下载_Text_09

c、OtherSettings设置包名

AR语言地图绘本适合几岁 ar绘本下载_ide_10

d、取消勾选Android TV

AR语言地图绘本适合几岁 ar绘本下载_AR语言地图绘本适合几岁_11

e、XRSettings勾选Vuforia Augented Reality Support

AR语言地图绘本适合几岁 ar绘本下载_Image_12

f、Build System改为Internal

AR语言地图绘本适合几岁 ar绘本下载_ide_13

 

三、Vuforia注册及网页配置

1、注册Vuforia及创建证书

a、注册Vuforia:链接

b、创建证书

登陆Vuforia,创建Vuforia证书以及识别数据

AR语言地图绘本适合几岁 ar绘本下载_Image_14

 

输入Vuforia证书名称(英文),勾选协议,Confirm。现在就创建了Vuforia的证书。下面第二张图上的Key就是该证书的Key。

证书为Vuforia进行识别提供了授权。

注:Vuforia采用自己的识别图时,即使不输入License也能进行识别。但要识别的是用户自定义的识别图时,必须要输入License。

AR语言地图绘本适合几岁 ar绘本下载_Image_15

AR语言地图绘本适合几岁 ar绘本下载_ide_16

 

2、上传识别图并下载识别数据

a、点击TargetManager—AddDatabase

AR语言地图绘本适合几岁 ar绘本下载_AR语言地图绘本适合几岁_17

 

b、找到对应的识别数据,点进去上传识别数据

注意:图片名称要为英文,格式jpg或png,大小小于2M。

宽度为实际大小,单位m

AR语言地图绘本适合几岁 ar绘本下载_Image_18

 

c、上传之后点击Download Database,下载识别数据。接下来我们会将它导入到Unity中去(暂时先不做)。

AR语言地图绘本适合几岁 ar绘本下载_ide_19

 

四、程序制作

1、保存场景

Unity Ctrl+S,在弹出的窗口填入“paint”,保存当前场景。

 

2、导入Package

a、右键层级窗口Hierarchy,选择Vuforia-ARCamera-Import,导入Vuforia资源

b、双击三—2—c下载的unitypackage,inport导入到Unity中去。

c、导入课前资源中的ClassResources包、Dotween插件、EasyTouch插件

 

3、配置Vuforia

a、删掉层级窗口里MainCamera,点击ARCamera—Open Vuforia configuration

AR语言地图绘本适合几岁 ar绘本下载_ide_20

b、填入App License Key(我们三—1—b申请的Key)

c、Database 选择你上传到Vuforia官网的识别数据,勾选进行激活

AR语言地图绘本适合几岁 ar绘本下载_ide_21

d、层级窗口右键Vuforia—Image,创建识别图。ImageTargetBehaviour选择你要识别的图片:

注:先打开Scene窗口,双击ImageTarget可快速看到该物体。

AR语言地图绘本适合几岁 ar绘本下载_Image_22

 

4、配置小屋及钟表

1)、配置合适显示位置

a、将Project—ClassResources里的xiaowu拖到层级窗口ARCamera下,调整它们的属性如下:

ARCamera:

AR语言地图绘本适合几岁 ar绘本下载_Text_23

xiaowu:

AR语言地图绘本适合几岁 ar绘本下载_AR语言地图绘本适合几岁_24

b、把小屋调到能让摄像机看到的合适位置。

AR语言地图绘本适合几岁 ar绘本下载_Image_25

 

2)、配置钟表动的事件

a、给小屋添加BoxCollider,Collider的大小能刚好包括小屋。

b、给小屋的钟表添加DoTweenAnimation,进行如下设置

AR语言地图绘本适合几岁 ar绘本下载_Text_26

c、层级窗口新建空物体,重命名“GameManager”,将Project—ClassResources里的GameManager脚本放到GameManager物体上。将小屋的钟表挂载到脚本的clock
 

3)让小屋一开始隐藏,识别后显示出来

f、将Project—ClassResources里的“PaintTrackableEventHandler”脚本拖放到层级窗口的ImageTarget物体上,并删除原先的“DefaultTrackableEventHandler”脚本。将xiaowu挂载到该脚本的House上

 

4)、让小屋能放大缩小、能旋转、触发钟表事件

给小屋添加如下组件,并进行如下配置

AR语言地图绘本适合几岁 ar绘本下载_Image_27

 

5、配置测试模块

1)、UI模块

a、右键UI-Image,Canvas设置为World Space,Transform-reset,Scale设为0.001

b、选中Project—ClassResources里的Pic下的所有图片,检视面板TextureType设为Sprite(2DandUI),Apply

c、将Project—ClassResources里的三角形图片赋值到层级窗口Image的SourceImage里面。

d、拖动该Image,并进行旋转放大缩小,置于屋子如下为止

AR语言地图绘本适合几岁 ar绘本下载_Text_28

e、点击Image物体—Image组件—Color属性的吸管,吸取墙壁颜色,使该面片变为墙壁颜色。

f、将Project—ClassResources里的“Skode_UIGlinting”拖放到该Image物体上,勾选AutoGlinting、Skode_UIGlinting的Color复制下方的color

AR语言地图绘本适合几岁 ar绘本下载_ide_29

g、在Canvas下新建三个Text,做出如下所示Text

AR语言地图绘本适合几岁 ar绘本下载_Text_30

h、将Canvas和EventSystem放到小屋下面去,成为小屋的子节点。

 

2)、音频模块

a、GameManager物体上添加AudioSource组件

取消勾选PlayOnAwake,将Project—ClassResources里的Question音频挂载到AudioClip上。

AR语言地图绘本适合几岁 ar绘本下载_Text_31

 

6、UI制作

1)退出游戏按钮

a、新建Canvas,进行如下设置

AR语言地图绘本适合几岁 ar绘本下载_Text_32

b、选中EventSystem,Ctrl+D,将新创建的EventSystem移到层级窗口最下面

      选中Canvas,新建Button物体,更改名称:CloseButton

      CloseButton图片赋值为Project—ClassResources里的“关闭”图片

      CloseButton绑定事件GameManager中的QuitGame

      删掉CloseButton下的Text

AR语言地图绘本适合几岁 ar绘本下载_Text_33

 

2)重新开始按钮

同1)所示,进行设置。不同的是位置调整,绑定的事件为ReloadGame

 

3)音量调节按钮

a、同1)所示,进行设置。进行位置调整,绑定事件ShowSlider

b、选中VoiceButton物体,右键UI—Slider,创建Slider,进行如下设置。

c、将该Slider物体赋值到GameManager物体GameManager脚本的Slider上。

AR语言地图绘本适合几岁 ar绘本下载_Text_34

 

4)测试按钮

1、制作按钮

a、在Canvas下新建名为LeftButton、RightButton的两个Button,分别绑定GameManager中的

AR语言地图绘本适合几岁 ar绘本下载_Text_35

b、Button下的文字进行如下设置

AR语言地图绘本适合几岁 ar绘本下载_Text_36

 

2、制作测试内容

a、制作测试界面

①、Canvas下新建Image,改名Test,赋值课前资源里的Background图片,Image—Reset后,宽度和高度设为1000、600

②、Test下新建Text,进行如下设置。文字如下所示

<size=100>小测试</size>

  屋子三角部分底边a=5m,高h=2m
  小朋友,屋子该部分的面积是多少?


  已知:面积=底x高÷2

AR语言地图绘本适合几岁 ar绘本下载_Text_37

③、Test下新建UI-InputField,并在InputField下又新建Text(1),调整如下:

InputField

AR语言地图绘本适合几岁 ar绘本下载_Text_38

AR语言地图绘本适合几岁 ar绘本下载_AR语言地图绘本适合几岁_39

 

Placeholder

AR语言地图绘本适合几岁 ar绘本下载_Text_40

 

Text

AR语言地图绘本适合几岁 ar绘本下载_AR语言地图绘本适合几岁_41

 

Text(1)

AR语言地图绘本适合几岁 ar绘本下载_Image_42

 

④、Test下新建Button,进行如下设置

AR语言地图绘本适合几岁 ar绘本下载_Image_43

 

Button下的Text设置如下:

AR语言地图绘本适合几岁 ar绘本下载_AR语言地图绘本适合几岁_44

 

现在隐藏掉Test。

 

b、同理,制作查询界面

AR语言地图绘本适合几岁 ar绘本下载_ide_45

 

5)查询按钮

AR语言地图绘本适合几岁 ar绘本下载_ide_46