美高梅4688.com哪兑现海岛奇兵里的足迹效果

AR增强现实开发介绍(续)
         

  海岛奇兵(boom
beach,炸婊子)是同一缓慢热门之方针手游,我吗是一样称作忠实爱好者。每当登陆一半,系统提醒我的驻地正在为人入侵时,心里总是凉飕飕的,等到终于登陆上游戏,基地盖被人夷为平地,四处还养在敌人作案的足迹时,累觉不爱。回到正题,本文讨论的凡这种脚印效果的兑现。脚印效果异常实细腻,主要因简单碰:

—开发基础篇

  1、根据发展路线更改脚印的样子。

      

  2、有左右脚交替的感到。

      
开发增强现实技术,无论是商业级应用,还是面向儿童教育之一日游产品,都亟需从询问、获取、下载增强现实插件开始。目前全球使用量最深公认最好之滋长现实插件是高通的Vuforia。我们先行由开一个绝简便的AR
Hello World 开始。

  最近我们耍里呢发出以观里留下脚印的要求,实现方式如下。

美高梅4688.com 1

 

 

  第1沾杀好解决:在角色移动过程被,每帧记录角色位置,结合及同样轴位置,计算出角色的位移方向角度。既然知道了动角度,对脚印sprite做相应角度的团团转即可。

支付一个AR
Hello World 需要经验以下步骤:

  相应接口:Math.atan2(x:Number,
y:Number):Number

 

 

1:登陆高通增强现实网站,注册账号且获得授权信息。

  要促成第2触及作用则有点难度,需要理解并因而到某些数学知识——三角函数!没错,就是驾轻就熟的sin和cos。

2:制作目标图

  2.5d视角游戏之左右脚交替的效果为什么难以落实为?

  A)
二维识别图制作

  先打极度简便易行情况分析,当角色从品位走时,脚印只要考虑在y轴方向的拓偏移,脚印一达转的,从而产生脚印效果;同理,当角色当笔直方向动,脚印只要考虑在x轴方向进行偏移,脚印就见面雷同左一下手;那当移动方向无是不过水平要垂直方向时,这时两才脚印之间要相对x,y轴都进展偏移,才能够产生自然的足迹效果。而且,随着角度变化,相对x,y轴的偏移量也是差之。因此,怎样根据活动方向,确定脚印相对x,y的现实性偏移量,就是问题困难。

  B)
三维识别物体制作

  于此处,我们返璞归真,抛弃有高深的概念,以常见经验来设想左右脚交替是怎一转事。看下面草图。

3:SDK下载

  假要为一个碰也圆心画圆,当一但下得于面面俱到之无论一处于时,另一样特下肯定取得于其它一样处在,两脚并线自然经过圆心,那片下轮番的效用不就下了为?

4:
Unity整合高通SDK,进行付出

  假设原点坐标为(x0,y0),如果误脚坐标为(x0+offsetX,y0+offsetY),那么我们就是掌握右下坐标为(x0-offsetX,y0-offsetY)。到目前为止我们已掌握什么规定左右下的相对位置了。

5:发布移动端,测试评估最核心Demo效果

 

 

                                     
  美高梅4688.com 2

专程提示,以下教程为2016年10月份的网站状态(Vuforia
插件版本也6.0)

   那么以事先的解析,我们掌握角色移动的角度,那什么样根据活动角度,来确定脚印的坐标呢?这里就是需要采取三角函数。

 

  

 

  根据定义,三角函数(sinA)^2
+(cosA)^2=1。而完美之表达式则为x^2 + y^2 =
1。假设x=sinA,y=cosA,那(sinA)^2
+(cosA)^2=1在坐标系中的图像就是一个周!

今天咱们即便针对以上五格外步骤,来进展详尽讲解。

  我们借设有一个半径为1底周,且发生同样修斜角角度也A,经过圆心的直线,两者相交,那互相交点的坐标是聊?如下图所示

 

  美高梅4688.com 3

一致:登陆高通增强现实网站,注册账号且赢得授权信息。

  答案是(cosA,sinA)和(-cosA,-sinA)。

     1.1 首先登陆  https://developer.vuforia.com/

  根据百度百科:

美高梅4688.com 4​    
1.2 注册用户,点击右侧上斗的 Register 。

  正弦:在直角三角形饱受,任意一火爆角∠A的对边与斜边的比叫做∠A的正弦,记作sinA(由英语sine一词简写得来),即sinA=角A的对边/斜边

     1.3
输入个人信息,确认登记信息成功。然后会于注册下的邮件被收取确认消息。

  余弦:角A的邻边比斜边
叫做∠A的余弦,记作cosA(由余弦英文cosine简写得来),即cosA=角A的邻边/斜边(直角三角形)。

美高梅4688.com 5

  

 

  而坐宏观之半径为1,所以图备受直角三角形的沿边长为1。因此我们即便懂得了角A的对边边长为sinA,角A的邻边边长为cosA。

美高梅4688.com 6

  所以相交点的坐标当然就是(cosA,sinA)和(-cosA,-sinA)。

 

 

美高梅4688.com 7

  至此,问题全面解决了。我们将各国一样帧角色的位置点作为圆心,通过Math.atan2方法,计算得出移动角度;再通过Math.sin,Math.cos得出相应的正弦值和余弦值,便可清楚两个脚印的坐标。

形成上述步骤,现在始根据用户的不等,选择不同之授权信息。首先点击网站的Develop
–>License Manger 选项。 点击下图的 “Add License Key”。

  

美高梅4688.com 8

  PS:在as3里心想事成,还用专注有细节。

 

  1、Math.atan2(x:Number,
y:Number):Number接口算有的移动角度是相对垂直方向而言之。也就是说,算有之角度,应该是上图备受之角a的余角(90°-∠A),暂且称之为∠B。所以相交点的坐标,则是(sinB,cosB)和(-sinB,-cosB)。

  
这一旦您是率先不善登陆网站,则网会弹来“选择品种项目”(Select your
project type)的提拔。
这个选项非常简短,如果是学习者,选择第1只选项(Development);
如果是索要披露暨App Store
的出品,则选择第2单选择(Consumer);如果是面向企业内采用则选择最后一个(Enterprise)。

  2、as3的以左上角作为坐标系原点,y轴正于为下,x轴正朝着于右侧;而数学里的坐标系则是y轴正向向上,x轴正往为右侧。所以一律角度,两栽坐标系得出的sin值刚好是相反数。所以在as3受,相交点的坐标应该是(-sinB,cosB)和(sinB,-cosB)

美高梅4688.com 9

 

 

  最后贴发出实现代码:

 

  

这时候面世如下图的页面,按照我们的支出目的进展分选。笔者此时摘“Development”选项。

  1         /** 脚印时间间隔,单位ms */
  2         private static const FOOTPRINT_INTERVAL:int = 100;
  3         /** 脚印渐隐时间,单位s */
  4         private static const FOOTPRINT_FADE_OUT_TIME:Number = 2;
  5         /** 两脚距离 */
  6         private static const FOOT_GAP:int = 9;
  7 
  8         /** 系统场景层 */
  9         private var _layer:DisplayObjectContainer;//舞台
 10         /** 玩家siprit */
 11         private var _role:DisplayObject;
 12         /** 脚印容器 */
 13         private static var canvs:Sprite;//特效容器
 14         
 15         private var _footprintList:Array = [];
 16         
 17         /** 脚印mc类 */
 18         private var _footprintCls:Class;
 19 
 20         /** 定时器id */
 21         private var _si:int;
 22         
 23         /**
 24          * 初始化脚印效果
 25          * @param footprintCls 脚印mc类
 26          * @param role 玩家mc
 27          */        
 28         public function init(footprintCls:Class, role:DisplayObject):void
 29         {
 30             this._footprintCls = footprintCls;
 31             this._role = role;
 32             
 33             canvs=new Sprite();//特效容器
 34             _layer.addChildAt(canvs, 0);//创建并且添加特效容器
 35             
 36             clearInterval(_si);
 37             _si = setInterval(onInterval, FOOTPRINT_INTERVAL);
 38         }
 39         
 40         /** 停止脚印效果 */
 41         public function stop():void
 42         {
 43             clearAll();
 44             clearInterval(_si);
 45             
 46             _roleLastLocation = null;
 47         }
 48 
 49                 /** 角色之前的位置 */
 50         private var _roleLastLocation:Point;
 51         
 52         protected function onInterval(event:Event = null):void
 53         {
 54             if(!_role)return;
 55             
 56             if(_roleLastLocation)
 57             {
 58                 if(_roleLastLocation.x == _role.x && _roleLastLocation.y == _role.y)return;
 59                 
 60                 var offsetX:Number = _role.x - _roleLastLocation.x;
 61                 var offsetY:Number = _role.y - _roleLastLocation.y;
 62                 
 63                 var angle:Number = Math.atan2(offsetY, offsetX);
 64                 var sin:Number = Math.sin(angle);
 65                 var cos:Number = Math.cos(angle);
 66                 
 67                 _roleLastLocation.x = _role.x; 
 68                 _roleLastLocation.y = _role.y;
 69                 
 70                 addFootprint(_role.x, _role.y, sin, cos);
 71             }else
 72             {
 73                 _roleLastLocation = new Point();
 74                 _roleLastLocation.x = _role.x;
 75                 _roleLastLocation.y = _role.y;
 76             }
 77             
 78         }
 79 
 80         /** 左右脚交替 */
 81         private static var switchFoot:Boolean;
 82         /**
 83          * 添加一个脚印 
 84          * @param _x  x坐标
 85          * @param _y  y坐标
 86          */
 87         private function addFootprint(_x:int,_y:int, sin:Number, cos:Number):void
 88         {
 89             switchFoot = !switchFoot;
 90             
 91             var footprint:MovieClip = ObjectPool.getObject(_footprintCls) as MovieClip;
 92             footprint.alpha = 1;
 93             footprint.mouseChildren = false;
 94             footprint.mouseEnabled = false;
 95             footprint.play();
 96             
 97             if(switchFoot)
 98             {
 99                 footprint.x = _x + sin * FOOT_GAP;
100                 footprint.y = _y - cos * FOOT_GAP;
101             }
102             else
103             {
104                 footprint.x = _x - sin * FOOT_GAP;
105                 footprint.y = _y + cos * FOOT_GAP;
106             }
107             
108             _footprintList[_footprintList.length] = footprint;
109             canvs.addChild(footprint);
110             
111             Tween.to(footprint, FOOTPRINT_FADE_OUT_TIME ,{x:footprint.x,y:footprint.y,alpha:0.1}, null, clear);
112         }
113 
114         /** 清除一个脚印 */
115         private function clear():void
116         {
117             if(_footprintList && _footprintList.length > 0)
118             {
119                 var dpo:MovieClip = _footprintList.shift() as MovieClip;
120                 if(dpo && dpo.parent)
121                     dpo.parent.removeChild(dpo);
122                 dpo.stop();
123                 
124                 ObjectPool.disposeObject(dpo);
125                 dpo = null;
126             }
127         }
128         
129         /** 清除所有脚印 */
130         private function clearAll():void
131         {
132             if(_footprintList)
133             {
134                 while(_footprintList.length){
135                     var dpo:MovieClip = _footprintList.shift() as MovieClip;
136                     if(dpo && dpo.parent)
137                         dpo.parent.removeChild(dpo);
138                     dpo.stop();
139                     
140                     ObjectPool.disposeObject(dpo);
141                     dpo = null;
142                 }
143             }
144         }                

 

 

美高梅4688.com 10

  

选择了,出现确认消息页面,如下图。

美高梅4688.com 11

 

选“确认”(Confirm)后,出现如下页面,我们得填写项目名称、设备类(移动端、AR眼镜),点击下一样步。美高梅4688.com 12

这儿出现下图页面,我们刚建立之挑三拣四项数据,就因为列表的形式,显示出来。我们点击“TestARDemo1”,查看我们的授权码。

美高梅4688.com 13

授权码是一样堆积看似抽象的假名集合,我们拷贝这些内容,先临时进行存放,后面要填写到Unity的花色工程被。

 

美高梅4688.com 14

 

其次:制作目标图

  A)
二维识别图制作

  B)
三维识别物体制作

 

今我们得到授权码后,开始做“目标图”(识别图)。点击“Target
Manager” 页面,开始制造识别图。此时点击“增加库”(Add
Database)。(如下图)

美高梅4688.com 15

 

 

创建库(Create
Database),例如库名称:TestAR_DB2.
选择不同的品种,我们捎1选项即可。表示以移动设备存储“识别图”。Cloud
代表云识别(把识别图发于云端),VeMark 表示支持Win10 与微软的Holens
眼镜设备。

美高梅4688.com 16

 

点击创建后,我们会得到一个“库”,专门存放我们上传的识别图。当我们为“库”中上加识别图的时刻,我们需要选择不同之项目。如下图从左到右分别是二维识别图、几哪里识别图、3D物体识别图等。笔者选取Single
Image (二维识别图),进行上传。

 

 

美高梅4688.com 17

 

达成传识别图,贴图必须发早晚之画面复杂度,否则会导致识别不清晰的题目。下图中“左下比赛”与下图中(带二维码)的贴图画面极致复杂,其实为是高通插件,识别最好的贴图。

美高梅4688.com 18

 

上传完识别图后,我们得以视如下图内容。”Rating”
就是得辨认贴图的级别(5星体为最高),一般3颗星以下的贴图,是无克顺利完成识别图,建议不使。

 

美高梅4688.com 19

 

勾选​具备高识别度的贴图,然后点击页面的“Download
Database”下载库文件。(*.UnityPackage)

 

美高梅4688.com 20

 

其三:高通插件SDK下载

点击“Downloads”–〉SDK
,下充斥高通SDK。“vuforia-unity-6-0-117.unitypackage”

 

美高梅4688.com 21

 

季:
Unity整合高通SDK,进行支付

  4.1:
新建Unity5.x  演示项目,导入AR SDK。
  4.2: 导入识别图的库文件(*.unitypackage)
  4.3: 在Unity系统面临,删除原始摄像机,使用AR摄像机。(ARCamera)

美高梅4688.com 22

 

 
4.4:层级视图添加“贴图目标(ImageTarget)

美高梅4688.com 23

 

  4.5
现在拓展必要之安装:

  A) AR
Camera 对象所属“Vuforia Behaviour”脚本组件中之“App License
Key”,需要粘贴“授权码”。

  
  B) AR Camera 对象所属“Database Load Behaviour ”脚本勾选“Load xxx
Database ”与下的“Activate”。

 
美高梅4688.com 24

  C)
点击 ImageTarget ,在本子组件“Image Target Behaviour”中之Database
:选择“TestAR_DB1”,在ImageTarge:选择具体的辨认图。

美高梅4688.com 25

 

 D)
在层级视图中,添加基本的3D模型,且当”ImageTarget”的子节点。

 E)
如果笔记本/PC带有摄像头,则运行游戏后系会自动开摄像机,可以观看AR混合图像。

美高梅4688.com 26

作者机器没有安装摄像头,所以展示也红色背景。如果有的话,则网会自行开启摄像机,拍摄真实环境以及Unity的画面进行夹处理显示出。

 

五:发布移动端,测试评估最中心Demo效果。

 

通告移动端和一般的Unity手游都是同一的,这里就概括过去。以下显示做好的局部AR
Demo 项目截图。

 

美高梅4688.com 27

美高梅4688.com 28

美高梅4688.com 29

吓了,感谢大家学习,有疑问,请留言!

发表评论

电子邮件地址不会被公开。 必填项已用*标注