java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_java实现心形图案|桃心


java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_java实现心形图案|桃心

摘要:针对传统游戏方式存在影响人身心健康的弊端,设计基于kinect2.0体感设备和 unity3D 2017.4.3开发AR体感游戏。介绍游戏总体设计,给出开发流程图,详细阐述游戏开发过程中的关键技术、方法和插件,程序首次大胆地将人物体感过程中的自拍照片按照Sisley油画风格和多尺度弧形笔刷风格进行处理。实验结果表明:该游戏运行流畅,功能和创新达到设计要求,能让玩家在娱乐中保留美好油画回忆。


java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_java实现心形图案|桃心_03

java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_java实现心形图案|桃心_04



java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_java实现心形图案|桃心_05

java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_java实现心形图案|桃心_06


java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_3d_07

0  引言

传统游戏中,人们都通过键盘、鼠标、触摸屏以及手柄游历于游戏世界,弊端是人和游戏交流的肢体仅限于手,长此以往,对人们身心健康无益,特别是对青少年,微软体感设备kinect让人们全身动了起来。随着手游时代的到来,现在主流游戏引擎被unity3d 和虚幻打败,unity3d是由Unity Technologies开发的一个让用户轻松创建3维视频游戏、建筑可视化、实时3维动画等类型互动内容的多平台综合型游戏开发工具,是一个全面整合的专业游戏引擎,支持Windows、Mac和Android等多平台。Unity3d开发游戏的优点有:1) 相对于传统游戏引擎而言,它的功能强大,支持跨平台运行;2) Unity3d拥有非常丰富的插件,如NGUI、Easy Touch、GIF播放工具、UMotion Pro动画制作、地图插件等,能很方便地制作2D和3D游戏;3) 支持多个平台,其编辑器运行在Windows 和Mac OS X下,可发布游戏至Windows、Mac、Wii、iPhone、WebGL(需要HTML5)、Windows phone 8和Android平台,也可以利用Unity web player插件发布网页游戏,支持Mac和Windows的网页浏览;4) 支持第三者写的各种功能的插件可以快速发布,方便他人快速开发和复用;5) 该引擎是3D游戏引擎,渲染游戏效果逼真,可使用3Dmax和maya制作3D人物和游戏模型,只要转换为FBX格式即可使用;6) 可以快捷地在AssetStore中购买所需的素材和相关功能插件;7) untiy3d发展至今已成为做手游和中小3D游戏中最方便、最流行的游戏引擎。体感设备品种繁多,而微软开发的KINECT是最成熟的设备,特别是Kinect2.0问世以来,可同时识别6个人,识别范围为0.8 m~4 m,识别的彩色图像为1 920×1 080×bbp且30 fps。以往体感游戏的开发都是以微软C++或C#框架为基础,逻辑复杂、开发周期长、3D效果差,而将kinect与untiy3d相结合,使人们能快速地开发出理想的体感3D游戏。


java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_3d_07

1  AR体感游戏总体设计

1.1  游戏的原理

运用投影仪将3D游戏模型、玩家的彩色图像以及现实的周围环境投射到墙面,kinect2.0传感器来采集玩家的骨骼、彩色图像和深度图像的数据并传送给unity3d程序,程序根据这些数据来判断玩家的数量和动作,并将玩家动作和游戏中动物模型的动作相结合,增强现实效果,即实时地计算摄影机影像的位置及角度并加上相应图像、视频、3D模型的技术体感交互,整个系统的布置结构见图1。

java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_java实现心形图案|桃心_09

1.2  游戏的功能需求

启动游戏后,将玩家和周围场景投射到游戏中,此时玩家开始游戏:1) 场景1,在玩家背后出现天使翅膀,该翅膀有3种类型,每次出现不一样,当玩家挥动双臂时,翅膀也相应挥动;2) 场景2,游戏界面可随机出现4种小动物中的一种,目前制作为忍者神龟、功夫熊猫、霸王龙和奥特曼,默认在屏幕随机移动,当玩家向动物招手时,动物会向玩家方向移动,并发出友好的声音和玩家互动;3) 场景3,游戏界面出现一个透明球,球上的图案随机由心形、树叶、花瓣和人民币中的一个组成,手臂张开后,球体会增大直至爆炸,此时图案四处纷飞;4) 场景4,屏幕会显示一团火焰(或者画刷),玩家可以隔空书写文字绽放精彩,书写过的火焰停留20 s后消失;5) 场景5,玩家可以晃动身体或摆动手臂形成千手观音状,整个效果停留20 s后消失;6) 场景6,屏幕上出现许多星星或者爱心,玩家可以摘取,在右上角显示玩家摘取的数量。在以上游戏过程中,玩家都可以通过发出声音“photo”来进行照相,留下自己在游戏中的美好记录。每个游戏场景持续1.5 min后随机切换。


java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_3d_07

2  AR游戏开发的流程

本游戏启动后进入游戏主界面,主界面上显示游戏玩法的介绍,当有玩家出现且被Kinect设备识别时(游戏初始设定仅一个玩家被识别,可更改设定3个同时玩),随后随机进入游戏场景1至场景6,每个场景时间设置1.5 min;当被跟踪玩家做游戏中设定的7种动作时,将和场景中动物或动画进行交互。整个游戏的详细流程、人物动作和对应效果见图2。

java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_java实现心形图案|桃心_11


java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_3d_07

3  游戏涉及的关键技术、方法和插件

游戏开发用到Kinect v2 Examples with MS-SDK and Nuitrack SDK、微信支付接口调用,untiy3d中动画状态基技术,Kinect捕捉的运动与Mecanim动画结合、体感动作识别,场景切换实例单一化等。

1) Kinect 和unity3d的插件包。

目前该插件支持unity版本为Unity 2017.1.0,该插件是unity3d为使用Kinect v2而封装microsoft kinect相关的SDK,在工程中导入该插件即可,其主要功能的管理组件在KinectScripts文件夹中,可在项目中使用它们,具体取决于所需要的功能。KinectManager是最常用的组件,其与传感器进行交互,并从中获取基本数据,如颜色、深度流以及Kinect空间中主体和关节的位置(单位:m)。AvatarController的目的是将检测到的关节位置和方向转换为一个操纵的骨架。CubemanController功能类似,但它可与变换和线条一起工作来表示关节和骨骼,以便更轻松地定位跟踪问题。FacetrackingManager处理脸部点和头部/颈部方向。它由KinectManager内部使用来获取头部和颈部的精确位置和方向。InteractionManager用于控制手形光标并检测手柄,释放和点击,最后SpeechManager用于语音命令识别。

2) 微信扫码支付功能。

本次开发基于微信支付SDK3.1.1,安装SDK后需要3种资源:微信支付的APPID、微信支付依赖包libmmsdk.jar和1个Activity类WXPayEntryActivity.java。这里的Activity类直接从之前下载的规范代码拷贝到工程中直接使用。图3是在调起微信支付完成支付(或取消或失败)后,再回到本程序的APP时会调用的一个页面。图4是微信支付时携带的相关参数。整个流程为:提交商品ID和商品数量到服务器;服务器进行处理,并返回一个订单号给APP;通过订单号向服务器发送支付请求;服务器返回给微信支付所需要的参数。

java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_3d_13

3) 场景切换实例单一化。

本游戏在6个游戏场景和1个游戏界面间相互切换,而Kinect v2设备的加载初始化必须在一个唯一场景中并且在场景切换时不能产生其他副本,另外整个游戏界面上显示的文字必须唯一且在游戏生命周期内不能释放。本程序使用单例模式,即整个游戏中仅有一个且可以在游戏任何地方随时访问它的所有变量,如C语言中的全局静态变量。具体做法为:① 在游戏界面建立一个Gamobject,然后挂一个singleton脚本;② 脚本中实现public static SingletonClass Instance=null; voidAwake(){if(Instance==null){Instance=this;DontDestroyOnLoad (transform.gameObject);}else{Destroy(transform.gameObject); }};③ 将整个游戏周期中唯一存在且不能重新生成或产生副本的物体都作为该空Gamobject的子物体。

4) untiy3d中动画状态基技术。

untiy3d采用新的动画系统Mecanim。Mecanim把游戏中的角色设计提高到一个新的层次,使用Mecanim可以通过Retargeting(重定向)来提高角色动画的重用性。在处理人类角色动画时,用户可以使用动画状态机来处理动画之间的过渡及动画之间的逻辑。Mecanim支持运动重定向(Retargeting)功能:即把动画从一个角色模型应用到另一个角色模型上的功能,这样能实现相同动作控制在不同物体上。动作控制采用Animator组件,负责把动画分配给GameObject,创建动画的一个基本步骤就是建立一个从Mecanim系统的简化人形骨架结构到用户实际提供的骨架结构的映射,见图5,这种映射关系称为Avatar。本游戏的小动物建立Animator见图6。

java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_3d_14

5) Kinect捕捉的运动与Mecanim动画结合。

使用AvatarControllerClassic而不是AvatarController组件。只分配这些必须由传感器动画的关节;将AvatarControllerClassic的SmoothFactor设置为0,将其应用于检测到的骨骼运动方向;创建一个头像身体蒙版并将其应用到Mecanim动画层。在此掩码中,禁用上述Kinect动画关节的Mecanim动画,不要禁用根联合;启用KinectManager(示例场景中MainCamera的组件)的“Late Update Avatars”设置;运行场景来检查设置。当玩家被传感器识别时,他的一部分关节将由AvatarControllerClassic组件动画,另一部分由Animator组件动画。

6) 体感动作识别。

创建一个实现动作的KinectGestures. GestureListenerInterface的类,并将其作为组件添加到场景中的游戏对象。它有方法UserDetected()和UserLost(),可使用它作为用户事件处理程序。其他方法可以返回默认值(true)。可以参考示例中SimpleGestureListener或GestureListener类的写法。其可以处理像滑动和姿势的离散手势,如SwipeLeft,SwipeRight,Jump,Squat等。所有的姿势如RaiseLeftHand,RaiseRightHand等可被视为离散手势。手势监听器脚本中处理这些手势相对容易。操作步骤为:① 在脚本的UserDetected()函数中,为每个需要跟踪的手势添加,manager. DetectGesture(userId,KinectGestures. Gestures. SwipeLeft),此处以SwipeLeft为例;② 在GestureInProgress()中添加代码来处理连续的手势,如果(手势= KinectGestures.Gestures.SwipeLeft){//检测到手势—对其进行处理(如设置标志或执行操作)};③ 在GestureCancelled()函数中,添加代码来处理连续手势的取消:如果(手势= KinectGestures.Gestures.SwipeLeft){//手势被取消—处理它(如清除标志)}。

7) 体感中单人物识别。

为保证游戏的体验度和乐趣,本程序仅识别1人,Kinect v2可同时识别6人,本算法先标识6人的空间Z坐标,后找出离Knect最近的一个人,将其设置为ThespecifiedIDMan。这里以人体骨骼类Body中的Joints[JointType.SpineBase].Position.Z坐标计算距离,及以人物骨骼点SpineBase为基点来衡量距离,程序运行后首先ThespecifiedIDMan标识离Kinect最近的一个,随后一直记录此人为最近(即使该人物向后移动变成距离最远的一个,也认为该人物是最近的),假如该人物的骨骼和红外数据在Kinect检测中消失8 s,此时,Kinect会重新计算用ThespecifiedIDMan标识当前识别人物中最近的一个人。


java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_3d_07

4  AR游戏中的创新算法原理

游戏中为了增加趣味性,AR程序在人物体感互动过程中可自行拍照,为了使照片具有艺术气息,笔者创新地采用多尺度弧形笔刷绘画和sisley算法模型将自拍的照片处理为油画。

4.1  多尺度弧形笔刷绘画渲染算法

该算法的思想为在绘画时采用大小不同的画笔用于描述不同层次的细节,对于远处的景物采用粗大的画笔来描绘,而对于近处的景物则采用细小的画笔,并且用一个长的、弧形的笔触来绘制连续的图像颜色区域。算法分为4 个步骤:

1) 计算颜色参考图像与输入图像在每个像素上的颜色空间距离。

2) 逐一扫描图像中的每个像素,对于坐标处的像素求其邻域内的平均颜色空间距离,若该值大于给定阈值,则以该领域内具有最大颜色空间距离的坐标点作为笔刷落点,并将其加入笔刷落点链表中。

3) 从笔刷落点链表中随机取出落笔点在画布上沿向量参考图的梯度法线方向进行绘制,直到该链表为空。

4) 根据用户设定的笔刷大小,由大到小,重复1)—3),在画布上进行多重绘制,得到最终绘制图像。在绘制过程中,设S(x,y)为向量参考图;(x,y)分别为该图像的行列坐标;xS(x,y)、yS(x,y)为其方向导数;gxS(x,y)、gyS(x,y)为该图的颜色梯度单位向量的2个分量,则有:

java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_3d_16

定义dxS(x,y)、dyS(x,y)分别是图像梯度法线向量的2个分量,显然有:

java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_微信支付_17

在上述算法基础上,以式(1)—(3)获得的向量参考图颜色梯度的法线方向作为画笔方向,对输入图像进行绘制,效果见图7。

java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_java实现心形图案|桃心_18

4.2  自拍照片sisley油画处理算法

该算法处理步骤为:

1) 交互式图像解析:首先将要处理的图像分解为分层树,树的节点与图像分量相对应。该过程通过交互式图像分割、节点的分层组织以及人工标签分类来实现一个Sisley解析树。例如把一幅沙滩海景图可以分解成图8,分析树是一个有向无环图(DAG)G=(v,ξ),假设图像I的解析树有K个节点,为了从场景识别和对象的角度解释I,这里给出节点类别标签的可能组合:

java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_java实现心形图案|桃心_19

2) 定制和渲染:用户可以指定所需感知的模糊程度或绘画的结果,根据这些级别,Sisley算法会自动改变图像外观,并合成抽象的绘画图像。由于不同的图像组件具有不同的抽象层次,Sisley会增加模拟感知路径的影响,以增加绘画的细微之处。这里采用香农熵来衡量图像I的抽象层次:

java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_3d_20

3) 计算和控制:Sisley通过引用人类注释图像的大型数据集来评估结果绘画图像的场景和对象的抽象层次,在上下文中传播信息,并计算香农熵。如果计算出的抽象层次与用户期望值之间的差异过大,Sisley将调整参数并重新绘制图像。该过程会在阈值范围内进行多次迭代或达到允许的最大迭代次数,目的是得到满意的Sisley风格油画。为了计算p(L|I),将分析树视为马尔可夫随机场(MRF),标签的概率可以被分解为:

java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_微信支付_21

其中ϕi(ℓi)=p(ℓi|Ii),ψij(ℓi,ℓj)为解析树中的节点i和j的兼容性,影响间接识别中上下文信息的传播,算法处理的效果件如图9。

java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_微信支付_22


java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_3d_07

5  搭建环境所需设备以及测试结果

5.1  系统主要设备配置和技术参数

系统主要的设备配置和参数如下:

1) 计算机:win8 or win8.1,64位(x64)处理器,i7 2.5 GHz或更快的处理器,内置USB 3.0总线,8 GB 内存,DX11图形适配器,160 G硬盘(以上);2) 投影机:4500流明,分辨率1 024×768,视现场环境亮度而定;3) 游戏开发软件为Unity 2017.4.3f1 (64-bit);4) 第二代Kinect for Windows v2和 Kinect SDK 2.0;5) 辅材,包括USB 3.0信号放大器等。

5.2  游戏测试的结果

游戏的测试结果见表1,并对该游戏进行24 h运行测试,功能正常无宕机。

java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_java实现心形图案|桃心_24

5.3  游戏的相关截图

游戏由游戏主界面和6个场景构成,以下截取4个场景合并为图10,内容为千手观音、霸王龙交互、爱心爆炸球和挥动翅膀。玩家通过“文中规定的动作”可以和6个场景进行交互,同时配相关音效。

java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_微信支付_25

5.4  项目现场实施

对于1台装好系统的电脑如何部署“北极熊”游戏,其步骤为:1) 使用Unity 2017.4.3f1 (64 bit)版本;2) 安装kinect2.0的SDK;3) 安装QuickTime_7.79.exe,该应用为unity3d中视频解码插件;4) 安装时间延时应用startup-delayer- v3.0b363.exe,放置北极熊“theArGame.exe”到硬盘任意位置,生成快捷方式,并将其添加到startup-delayer中设置延时为30 s。


java图形设计界面绝对布局怎么显示一个上下分区 java显示图案java_3d_07

6  结束语

基于鼠标键盘的传统游戏不利于人们的身心健康发展。基于kinect体感游戏把人们从“宝座”上请起来并让全身心动起来。该AR游戏将unity3D和Kinect v2完美结合,在开发游戏时效率高、3D效果好。今后将研究:1) 可以和HTC vive结合开发出更加逼真的vr效果;2) 可以进一步开发出操作简单的RPG关卡游戏,使整个过程更逼真。