AR培训丨零基础制作第一个AR应用——AR绘本
实现效果:
视频链接
课前资源:
链接: https://pan.baidu.com/s/1UxPPUo5UmAkeUYWonEOCPQ
提取码: s59e
本资源包括:
用于本应用的房子模型、识别图、UI以及重要脚本
一、软件安装
1、安装Unity
打开课前资源中的“01-Unity2017.4.4”文件夹,根据你电脑是苹果还是windows,选择对应的dmg还是exe安装包进行安装。
注意勾选如下两项,完成安装。
2、安装Visual Studio
运行课前资源中的“02-vs_community__2017.exe”文件,在工作负载中勾选“通用Windows平台开发”、“使用Unity的游戏开发”,进行安装。
二、程序配置
1、创建Unity项目
2、对Unity进行初始设置
a、右上角Layout下拉改为Tall
b、Project设置为One Column Layout
c、Game视图从上方拖到下方来
该视图为游戏视图,该画面显示的即实际打包的应用运行时显示的画面。
d、显示Console窗口
Console窗口用于显示你的代码有没有报错、打包时有没有问题等。
Windows——Console,弹出Console界面。将该界面放到Scene位置
3、切换Android平台,对App进行配置
a、左上角File—PlayerSetting,选择Android,点击Switch Platform切换到Android平台。
a、左上角File—PlayerSetting,右侧Inspector对公司名称、app名称、app图标进行配置
b、Resolution and Presentation设置旋转方式由自动旋转改为画面在手机左侧
c、OtherSettings设置包名
d、取消勾选Android TV
e、XRSettings勾选Vuforia Augented Reality Support
f、Build System改为Internal
三、Vuforia注册及网页配置
1、注册Vuforia及创建证书
a、注册Vuforia:链接
b、创建证书
登陆Vuforia,创建Vuforia证书以及识别数据
输入Vuforia证书名称(英文),勾选协议,Confirm。现在就创建了Vuforia的证书。下面第二张图上的Key就是该证书的Key。
证书为Vuforia进行识别提供了授权。
注:Vuforia采用自己的识别图时,即使不输入License也能进行识别。但要识别的是用户自定义的识别图时,必须要输入License。
2、上传识别图并下载识别数据
a、点击TargetManager—AddDatabase
b、找到对应的识别数据,点进去上传识别数据
注意:图片名称要为英文,格式jpg或png,大小小于2M。
宽度为实际大小,单位m
c、上传之后点击Download Database,下载识别数据。接下来我们会将它导入到Unity中去(暂时先不做)。
四、程序制作
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
b、填入App License Key(我们三—1—b申请的Key)
c、Database 选择你上传到Vuforia官网的识别数据,勾选进行激活
d、层级窗口右键Vuforia—Image,创建识别图。ImageTargetBehaviour选择你要识别的图片:
注:先打开Scene窗口,双击ImageTarget可快速看到该物体。
4、配置小屋及钟表
1)、配置合适显示位置
a、将Project—ClassResources里的xiaowu拖到层级窗口ARCamera下,调整它们的属性如下:
ARCamera:
xiaowu:
b、把小屋调到能让摄像机看到的合适位置。
2)、配置钟表动的事件
a、给小屋添加BoxCollider,Collider的大小能刚好包括小屋。
b、给小屋的钟表添加DoTweenAnimation,进行如下设置
c、层级窗口新建空物体,重命名“GameManager”,将Project—ClassResources里的GameManager脚本放到GameManager物体上。将小屋的钟表挂载到脚本的clock
3)让小屋一开始隐藏,识别后显示出来
f、将Project—ClassResources里的“PaintTrackableEventHandler”脚本拖放到层级窗口的ImageTarget物体上,并删除原先的“DefaultTrackableEventHandler”脚本。将xiaowu挂载到该脚本的House上
4)、让小屋能放大缩小、能旋转、触发钟表事件
给小屋添加如下组件,并进行如下配置
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,并进行旋转放大缩小,置于屋子如下为止
e、点击Image物体—Image组件—Color属性的吸管,吸取墙壁颜色,使该面片变为墙壁颜色。
f、将Project—ClassResources里的“Skode_UIGlinting”拖放到该Image物体上,勾选AutoGlinting、Skode_UIGlinting的Color复制下方的color
g、在Canvas下新建三个Text,做出如下所示Text
h、将Canvas和EventSystem放到小屋下面去,成为小屋的子节点。
2)、音频模块
a、GameManager物体上添加AudioSource组件
取消勾选PlayOnAwake,将Project—ClassResources里的Question音频挂载到AudioClip上。
6、UI制作
1)退出游戏按钮
a、新建Canvas,进行如下设置
b、选中EventSystem,Ctrl+D,将新创建的EventSystem移到层级窗口最下面
选中Canvas,新建Button物体,更改名称:CloseButton
CloseButton图片赋值为Project—ClassResources里的“关闭”图片
CloseButton绑定事件GameManager中的QuitGame
删掉CloseButton下的Text
2)重新开始按钮
同1)所示,进行设置。不同的是位置调整,绑定的事件为ReloadGame
3)音量调节按钮
a、同1)所示,进行设置。进行位置调整,绑定事件ShowSlider
b、选中VoiceButton物体,右键UI—Slider,创建Slider,进行如下设置。
c、将该Slider物体赋值到GameManager物体GameManager脚本的Slider上。
4)测试按钮
1、制作按钮
a、在Canvas下新建名为LeftButton、RightButton的两个Button,分别绑定GameManager中的
b、Button下的文字进行如下设置
2、制作测试内容
a、制作测试界面
①、Canvas下新建Image,改名Test,赋值课前资源里的Background图片,Image—Reset后,宽度和高度设为1000、600
②、Test下新建Text,进行如下设置。文字如下所示
<size=100>小测试</size>屋子三角部分底边a=5m,高h=2m小朋友,屋子该部分的面积是多少?已知:面积=底x高÷2
③、Test下新建UI-InputField,并在InputField下又新建Text(1),调整如下:
InputField
Placeholder
Text
Text(1)
④、Test下新建Button,进行如下设置
Button下的Text设置如下:
现在隐藏掉Test。
b、同理,制作查询界面
5)查询按钮
AR培训丨零基础制作第一个AR应用——AR绘本相关推荐
- 【微信小游戏实战】零基础制作《欢乐停车场》二、关卡设计
1.游戏立项 微信小游戏中有一款<欢乐停车场Plus>的小游戏,大家可以搜索玩下.这是一款益智类的小游戏,游戏中有红.黄.绿.蓝.紫5辆豪车6个停车位,玩家通过可行走路线移动小车,最终让各 ...
- (转)CocosCreator零基础制作游戏《极限跳跃》二、制作游戏开始场景
CocosCreator零基础制作游戏<极限跳跃>二.制作游戏开始场景 我们刚刚分析了<极限跳跃>这款游戏,下面我们开始制作第一个游戏场景,也就是游戏的开始场景. 首先,打开C ...
- 黑马h5学习代码_如何零基础制作酷炫实用的H5页面
H5页面已经成为了当下移动端主要的宣传方式,一个好的H5页面有极高的营销价值,无论是企业还是个人都非常需要.制作一个炫酷的H5页面一定要会写代码吗,下面千锋网络营销小编就给大家分享如何零基础制作炫酷实 ...
- 如何零基础制作一款自己的游戏!(一)
如何零基础制作一款游戏(一) 文章目录 如何零基础制作一款游戏(一) 前言 一.软件下载以及创建工程 二.使用步骤 1.进入工程 2.设置更改 3.更改界面 4.脚本更改 5.下载插件 6.如何设置障 ...
- 零基础Unity做一个中秋诗词鉴赏网页,提前祝您中秋快乐!(DoTween动画 | WebGL视频 | 大文件上传GitHub)
零基础Unity做一个中秋诗词鉴赏网页,提前祝您中秋快乐! 前言 一,环境搭建 1.1 安装Unity 1.2 添加WebGl模块 二,开发项目 2.1 导入插件 2.2 项目搭建 2.3 逻辑处理 ...
- 零基础制作【武林外传】辅助工具(一)
零基础制作[武林外传]辅助工具(一) 工具: VB6企业版(盗版)/VB6精装版 CE 一,打开游戏和CE用CE载入游戏 二,让你的血量回到最满状态,记住血量值 如上图,我的是1312点血,好的,用C ...
- creator 跳跃弧线_CocosCreator零基础制作游戏《极限跳跃》
原标题:CocosCreator零基础制作游戏<极限跳跃> 刚刚我们制作了游戏的开始场景,现在我们来制作游戏的主场景.还是同样的方法,新建一个名为MainScene的场景,双击打开,修改场 ...
- creator 跳跃弧线_CocosCreator零基础制作游戏《极限跳跃》教程4
原标题:CocosCreator零基础制作游戏<极限跳跃>教程4 八.添加游戏积分系统 前面我们实现了整个游戏的流程,下面我们来完善游戏的积分系统..先来分析下游戏的积分,第一次展示积分的 ...
- creator 跳跃弧线_(转)CocosCreator零基础制作游戏《极限跳跃》八、添加游戏积分系统...
CocosCreator零基础制作游戏<极限跳跃>八.添加游戏积分系统 前面我们实现了整个游戏的流程,下面我们来完善游戏的积分系统..先来分析下游戏的积分,第一次展示积分的地方就是我们的游 ...
最新文章
- C# 世界坐标 页面坐标 PageUnit PageScale
- Python IDLE快捷键一览
- IPv6 — 协议头
- 武汉大学2010年数学分析试题解答
- QImage 与 cv::Mat 之间的相互转换
- [react] React中你有使用过getDefaultProps吗?它有什么作用?
- A20修改串口设备文件
- linux简介ubuntu,Linux文件系统简介(基于Ubuntu)
- C语言--学生管理系统--(完整代码)
- 单板计算机作用上位机,SCB-1单板机的基本操作
- java笔_JAVA笔试题(基础一)
- python integral_Pycharm:应为“Integral”类型,而应为“str”
- asp.net生成缩略图、文字图片水印
- Randomized Cuts for 3D Mesh Analysis (SIGGRAPH Asia 08)
- 微软系统工具套装(Windows Sysinternals Suite)
- 《零基础学习Liunx之三》 The following takes place between 04:00PM and 05:00PM
- PHP file_get_contents(‘php://input‘) 和POST的区别
- 【Bug】下载steam游戏的E盘莫名其妙爆满
- Android的六大布局详解
- 2022年系统分析师考试大纲
热门文章
- VS2010+DDK配置
- ArcMap中的各种GIS文件的变换(img转tif,tif坐标系转换,shp坐标系转换)
- AG9311/AG9310 Type-C转HDMI设计方案|替代AG9310/AG9311芯片|GSV2201可完全替代兼容AG9310/AG9311
- GPT系列简介与gpt训练(nanoGPT)
- JDBC,你真的知道怎么用吗?
- 正则匹配---匹配包含指定字符串
- vue 在数组中添加字段
- 海思3559A pwm驱动编写记录
- android 设置布局宽度,Android布局宽度为50%
- 推荐一个免费的PDF在线编辑网站