赞
踩
项目重述如下:
主要功能模块图示:
在界面设计中,我们希望设计的界面符合课上讲述的各类 GUI 设计原则的要求:
在实验中,我们需要获取场景中已经标记好的迷宫,需要通过拍照实现。除此以外,我们还希望可以上传图片的方式进行处理,从而应对实验环境中没有已标记迷宫的问题。
我们希望能使用OpenCV完成图像的处理,识别图像中的迷宫,并生成格式化的迷宫数据。OpenCV是一个用于计算机视觉和机器学习的库,可以用来进行文件扫描和图像处理。下面是使用OpenCV进行处理的主要流程:
由于需要将迷宫识别的结果发送给服务器,我们在开发前约定了传输的数据格式:通过40位长的01字符串,按照行优先的顺序对应到迷宫的每一条边上,以此表示迷宫的结构。
在进一步介绍系统的具体开发方案之前,我们认为读者对系统的工作流程有进一步的了解,可以更清晰地阅读和理解之后的内容。出于此,本部分将对系统的工作流程做进一步的解释。
在移动端设计可以对二维地图识别的软件,首先可以使用手机摄像头对物理空间中的地图进行拍摄采样,通过图像进行预处理、图像进行分析、图像透视变换与直线识别、模糊处理等一系列处理过程,准确识别物理环境中迷宫的结构。
此后,将迷宫显示在用户可直接操作的GUI上供用户手动修改不完善的部分,最终按照约定组织数据并提交。
用户界面的展示如下:
服务器端首先接收来自移动端收集的迷宫布局数据,将封装的信息解码后获得地图信息,并按照该信息,在web界面上的4*4的地图区域还原出物理空间中的二维地图。设置完成之后首先向手机VR端发送转发地图信息,便于VR端在第一时间构建出三维迷宫地图的墙壁。接着管理员可以在服务器端的web界面上设置金币、TNT炸弹、宝箱的位置信息,设置完成之后发送给VR端。服务器与VR端之间使用Socket通信。当有多人进行游戏的时候,服务器会将设置的信息平等的发送给两个VR端,保证信息的统一性,同时也增加了游戏的竞争性、可玩性,多个用户竞争同一个宝箱。
VR端首先接收一个来自服务器端的封装后的地图信息,将该信息解码后,依据该信息利用Unity3D技术构建出三维迷宫的基本墙体,用户此时便可以观察到迷宫的样貌,也可以进行走动,体验动作识别的灵敏度等。准备完成之后VR端开始接受来自服务器端设置的地图信息,比如:金币、TNT、宝箱等。根据这些道具的位置信息,VR端在三维迷宫之中增加这些道具。当用户赢得金币,或者触碰到炸弹之后,获得相应的奖惩,VR端要取消设置在该位置上的金币或炸弹,并将迷宫中的游戏信息:用户位置、用户数量、地图上的道具信息等返回给服务器端。
服务器端随时接收VR端返回的游戏的信息,包括有游戏玩家的数量、游戏玩家的位置信息、当前游戏世界中金币的数量以及位置信息、TNT炸弹的数量以及位置信息、最终宝箱的数量以及位置信息。服务器要将这些信息展示在服务器的web页面上。并且服务器可以随时添加或删除金币等游戏道具的信息。
7.1.1.1 界面展示
为了更好的解释界面的设计原理,先展示最终的界面,分别是初始的状态以及工作下的状态:
7.1.1.2功能介绍
简要介绍一下各部分:
7.1.1.3 设计准则与原理
在进行设计的过程中,尽可能的应用了课上所学习的GUI设计理论,具体阐述如下。
桌面隐喻:
直接操纵:
所见即所得:
7.1.2.1设计目的
出于一下三个目的,在进行图片识别处理之前,我首先设计了可以点击处理,即手动确定迷宫组成的部分。
7.1.2.2 构建方式
根据实验的要求,如“3.2.1”中的展示的图片,迷宫由4 * 4的正方形组成,边缘以Button的形式组成,以行优先的模式处理,每行有四个或者五个按钮,即 4 + 5 + 4 + 5 + 4 + 5 + 4 + 5 + 4 = 40 个按钮,组成了整个迷宫。每个按钮彼此独立,表示迷宫中的“一堵墙”是否存在。
迷宫的存储由一个二维数组完成,以行优先的结构存储,共有九行。数组中的每一位只能取0或者1,表示当前位置的“墙壁”是否“存在”。
通过点击按钮,可以改变按钮的颜色,同时更新数组中对应位置的数值,即改变一个墙壁的状态。
7.1.2.3 迷宫快速操作按键
在实际开发与测试的过程中,我们发现有一些手动的操作是重复的,比如,我们常常希望可以为迷宫添加四周的边缘,以保证迷宫内的用户有沉浸式的体验。而每次通过点击输入迷宫的四周,是一个令人感到厌倦的工作。
因此,在迷宫的下方,添加了三个按钮,用于直接完成三个常用的操作,分别是:
开发及测试中的过程与体验证明,这三个按钮的设计是十分有必要的。
作为系统的输入,图像获取流程是十分关键的一部分。根据上文的需求分析,我们希望可以通过上传图片或拍照的两种方式完成图像的输入操作。
7.1.3.1 通过拍照获得图片
其主要步骤如下:
7.1.3.2在相册上传图片
这部分的处理流程相对较为简单:
图像的处理以及在其中识别出迷宫是项目的关键部分,在这部分中,我们期望可以在输入的图片中提取出最大矩形的信息,并通过透视变换转换为正方形,还需要一些额外的图像处理的步骤,以便于下一部分中迷宫的识别。
7.1.4.1 处理步骤
7.1.4.2 结果展示
原始图像:
处理结果:
完成了上述的图像处理之后,我们得到了一个正方向的迷宫,其中黑色的部分标识了迷宫的“墙体”,接下来的工作是识别出迷宫中的直线,并对应地映射到迷宫的每个墙壁上,最终更改设置好的迷宫。
7.1.5.1 具体步骤
识别过程主要分为以下几个步骤:
7.1.5.2 结果展示
输入迷宫图像:
处理结果:
经过组内协商,我们使用HTTP协议中的 GET 请求进行数据的发送,数组组织在URL中,以一个40位的字符串发送。
首先,我们设定了一个计数器,每接收到10次数据执行一次更新,这么做的目的是为了更新玩家坐标的操作不能太频繁,实验证明能够稍微提高一些VR的性能,尤其是在设备硬件条件不是很好的情况下。
然后我们写了一个统一分割函数:parseOneComponentPosition()。这个函数是项目的早期阶段写的,里面是对于各个部位做了一下字符串到index的映射,以后调用的时候就比较方便。
实际上在之后的开发过程中,对我们有用的数据也就是头部和手部数据。分割之后,我们把这个头部数据作为人体坐标的依据(头部一般不会抖动,比较稳定),并且存到一个public static的变量中。
实体组件主要有地板、墙壁、宝箱、金币、TNT炸药桶这四个部分。其中,地板作为整个地图的托举部分,上面承担了一些额外的通讯功能(把一些C# Scripts 绑定在了上面)。例如TCPClient,还有movement脚本。这些脚本是作为全局状态存储器或者行动控制器运行的,主要作用是控制全局状态。
墙壁,TNT炸药桶,金币,宝箱都是作为prefab事先存到项目里面。
墙壁是不具有rigidbody的刚体组件,不受重力影响,但碰撞时会妨碍玩家移动。
金币是不受重力影响的刚体组件,会每秒旋转,以吸引玩家过来拾取。当玩家离金币距离为 3 以内,并且右手举过头顶的时候,金币就会被拾取。金币被捡到之后+10分。
TNT如果距离玩家为2以内就会爆炸,并且-20分。可以看到,它有一个爆炸效果的成员变量。如果靠近,就会爆炸并且消失。
对于一条数据,由工具集系统可知:一条信息可能包含多个玩家的位置信息。所以如果是单人游戏,我们直接舍弃其他人物的信息,保留第一个玩家的动作捕捉数据。如果是双人游戏,则需要明确自己究竟是第几个玩家,并且根据玩家号对应的数据来更新自己或者他人的位置。
那么,如何才能确定一个唯一的玩家号呢?我们在服务端设定了一个这样的服务:
它返回的报文格式如下:
也就是说,我们所有的数据最终都在服务端,并且VR在开机的时候就向服务端发送一个HTTP报文,以请求自己的玩家号和初始迷宫布局信息。
关于地图的墙壁编号和地块编号,我们是这样规约解释的:
这样就能用一个字符来唯一描述一个组件的位置。
我们使用springboot+vue搭建了服务端的平台。这里仅仅展示一下效果。如图,可以直接修改并且实时反映到所有的VR端。这一效果达成的方法是:VR端每1秒发送一个HTTP请求到服务端,然后根据其回复来更新VR地图。在服务端前端热更新地图之后,会传到后端并且更改相应的文件。这个文件就是一切数据的最终依据来源。
我们在游戏中引入了积分系统,金币+10分,TNT-20分,最终宝箱+100分,规定时间内赢得分数较高的玩家界定为胜利。
游戏结束界面如下:
服务器端与前端使用socket进行通信,接收到数据转化为JSON的格式,读取之后储存到walls的文件当中,后续所有关于迷宫墙壁的操作都是根据对walls文件的操作。
前端使用Get方法从后端调用walls的信息,读取之后对应到web界面的地图中,对应的墙壁块变为黑色,从而实现了物理空间地图信息到web界面平面信息的转化。
7.3.3.1 更改地图墙壁信息
通过点击对应的墙壁的位置,实现对墙壁的增加或删除。
此时我将全部的内部墙壁都取消了。
7.3.3.2 增加金币、TNT炸弹、最终宝箱等道具
管理员操作:先点击右侧的增加各种类型道具的按钮,然后再点击左边地图中每个方格中间的位置,从而实现出对道具的增加,设置完成之后对应位置会出现有相应的图标,所有道具设置完成之后,点击提交便可以提交到两个VR端。
{
设置完成之后点击右侧提交按钮,若提交成功则会出现相应提示
7.3.3.3 自动刷新/暂停刷新
点击自动刷新之后,前端web界面每隔5s接收一次后端发过来的数据,并将其显示在对应的位置上,其目的是为了实现实时更新VR端用户的位置,是否获取了金币等游戏信息。便于管理员进行上帝视角的查看。暂停刷新之后,管理员可以实时对游戏内道具的信息进行修改。
服务器与VR端使用Socket进行通信,当建立好连接之后,服务器立即发送一个json数据包,该数据包中只包含walls墙壁信息与player_id用户id两个信息,便于VR端在第一时间构建出三维迷宫地图的墙壁。之后每隔5s管理员每点击一次提交便会向VR端发送一个完整的json数据包,包含有道具数量以及位置信息,墙壁信息,用户id等数据。使得VR端能够在虚拟三维迷宫中构建出各种各样的道具。
VR端会实时发送游戏中的信息,包括用户位置、用户数量、地图上的道具信息等,服务器接收之后展示在web界面,便于管理员了解游戏的情况。并作出对应的操作以增加游戏的趣味性。
本实验目的是通过对物理空间的二维地图识别,依据此信息构建出虚拟三维迷宫,并通过设置一系列的奖惩道具,使用户在VR眼镜的帮助下,实现用户在虚拟迷宫中的漫游和交互。
主要完成以下五个方面:
我们所开发的系统在物理环境迷宫识别的任务中表现相当出色。通过图像进行预处理、图像进行分析、图像透视变换与直线识别、模糊处理等一系列严谨的算法设计,实现了“手绘迷宫识别错误率趋近0%,实际应用环境迷宫识别错误率约5%”的出色识别结果。
在服务器端,管理员可以在上帝视角随时更改游戏世界中的道具数量或位置,当用户很长一段时间找不到金币时,可以在用户的周围设置一枚金币,让用户有种柳暗花明的感觉,增加对游戏的兴趣,同时引导用户前往最终宝箱。或者在用户前往最终宝箱的必经之路上放置一枚TNT,用户需要及时进行躲避,才能不被惩罚,大大增加了游戏的可玩性,刺激性。
该游戏系统支持多人同时进行游玩,用户可以选择协作去找最终宝箱,也可以去竞争同一个宝箱,不管怎样都给了用户可选择的权利。多人游玩也给了用户与其他用户交互的机会,,增加了游戏的可玩性。
该游戏系统设置了丰富的道具体系,具体的道具类型有:金币、TNT炸弹、最终宝箱。其中道具的规则:用户走到金币位置之后,Kinect检测到用户触摸金币的信息之后,该用户将获得奖励分。TNT炸弹同理,当用户触碰到TNT炸弹之后,将获得惩罚,积分减少。最终宝箱,设置数量只有一个,当某个用户找到最终的宝箱之后,该用户取得胜利,游戏结束。VR端还需要将游戏世界中的信息发送给服务器端,比如当用户找到一枚金币之后,该位置上便不会再有金币了,金币的数量减一。
服务器端在设置好金币、TNT炸弹等道具的位置信息之后,只会返回给VR大体的位置,并不会返回具体的位置。VR端在接收了服务器的信息之后,根据在大体位置的范围内,随机选择一个具体位置进行道具的放置,极大的增加了游戏的随机性,游戏局势可能随机发生变化,增加了游戏的刺激感、提高了游戏的可玩性。
除了出色地完成整个系统的设计与开发工作,为了验证系统在“人机交互”等方面的合理与完善,我们还对系统进行了一系列单元测试、集成测试、系统测试以及用户测试等,测试的具体执行方案以及测试结果请见《用户评估报告》。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。