用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧

跟随着Damon的步伐,谨以此文纪念一下自己的IME项目,和过去的一段日子。

六周之前,IME的final project开启,六周之后,很开心看到的是自己满意的孩子。

下面先附上孩子视频:


Zombie vs.Peashooters


互动

开学伊始,便已经筹备这一project,仍记得开学的Peer Lab,在Vitor和Damon的陪伴下体验Kinect,Leap Motion,还有MaxMSP和Arduino间的联系。

大家一切从零开始,如同浩海拾遗,互动的装置繁杂,娱乐的内容万千。这篇Instructables上的文章绝对是一笔浓缩的财富http://www.instructables.com/id/Create-Interactive-Electronic-Instruments-with-Max/。也正是从这篇讲解MaxMSP的创意互动中,我了解到将来会用到的reacTIVision,这个监测图案的应用。

了解的过程花费了一些时间,但尝试就是最好的老师,过程让自己对MaxMSP更加熟悉,也对以后的课业和其他project起了很大帮助。


想法

看了很多后,便要开始想自己要做什么了。起先由于对reacTIVision的喜爱和执念,便想用他来做个控制音乐的互动,但是鉴于声乐不才,也是放弃了这个想法。

思来想去,能让大家和互动装置玩得很开心,也只有游戏了。记得那天晚上和Victor在studio讨论没多久,一拍脑袋便决定要用飞机打帝国大厦上的金刚。

最初的设想是,将整个游戏投影至墙上。

一个玩家面对墙,距离三米左右,可以用自己的身体的姿势改变,控制游戏里的金刚角色姿势改变。

剩下几个玩家定期将贴纸贴在墙上,游戏画面里便会出现飞机,向金刚发射子弹。金刚可以用手臂抵挡,或是用脚去踢开子弹。

游戏成绩就是金刚的存活时间。

下图是最初的的Floor Plan:

用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第1张图片
没错,这就是我最起初的残暴的画风

后来,随着伟大的组员,Skylar的加入。我们对于画面及角色设计的细节进行了细致入微的探讨。

飞机大战金刚,变成植物大战僵尸; 

从再由于3D僵尸太丑了,将3D游戏改为2D场景

再从普通2D游戏,将整个画风转换为pixel怀旧风格

修改的历程是艰辛的也是快乐的,期间真是辛苦了伟大又辣鸡的Skylar,不厌其烦地修改着背景和人物。

用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第2张图片
可爱僵尸
用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第3张图片
可爱四种豌豆射手
用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第4张图片
可爱背景

记得William第一次听到我们的设想时,说这个很适合在一个home party里面,大家一起玩。

出于跪舔老师的目的,我也在之后的proposal和pre不断强调这一点。基于此,我们的interactive flow如下:

用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第5张图片
Interactive Flow

还有Skylar的图像版:

用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第6张图片
One
用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第7张图片
Two
用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第8张图片
Three

至此,这便是我们的想法,和游戏画面。


技术

硬件

很幸运,我们从大Victor那里借到了一台Kinect-用来侦测玩家动作

从William那里借到webcam-用来侦测预设好的豌豆射手图案的出现位置

场地有提供投影仪-投影互动游戏画面到墙上

软件

Ni Mate- 用来获得Kinect检测到的用户身体移动变化的数据,传输至Unity
reacTIVision- 识别豌豆射手图案,并传输至Unity
Unity-做游戏。 相比Blender,Unity兼容更容易,插件更多一些,尤其是有reacTIVision的assets

当然还有Skylar的pixel画图的软件,我忘记了叫什么名字了。。。

再说吧。。。


游戏

做游戏的整个过程,是实现每一个function的过程。其中遇到了很多难点,其中最困难的部分在开始就出现了。

Ni Mate有几种监测玩家动作的方式,可传输至Unity,一是Basics,监测到的是user的xyz轴的位置,二是Orientations,监测user的关节的旋转角度,三是Basics+Orientations,可使动画人物完全就像真人一样地关节旋转和移动。但是第三种方式却怎样也不好用。

在大神Harry的亲自指导下,他用将上下两级的两个点的Basics的x,y值相减,得出一个矢量值,然后次关节的变换依据此矢量,便可完成旋转了。

代码如下

用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第9张图片
以Shoulder和Elbow的rotation为例

其次就是设计关于碰到豌豆时,手臂和脚能抵挡,身体会掉血。这里面需要设定每个部位的Tag,这里的指导要感谢另一个大神奚连的帮助。

代码如下,其中身体Tag为Player,胳膊和脚为Arm:

用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第10张图片
写在豌豆身上BulletController的豌豆触碰代码

主要的问题设定就是上述两个,剩下的还有很多很多小的function,例如触发animation,血条减少,触发切换下一个场景,加音效等。

其中还有reacTIVision监测到图案,显示豌豆射手的应用。其实非常简单,reacTIVision使用的是TUIO框架,首先需要下载一个TUIO for Unity,链接是http://www.tuio.org/,直接将其解压至你的assets里就好了。

TUIO非常强大,你可以发现通过它,你可以在众多众多软件里使用reacTIVision。

其次,你可以在http://reactivision.sourceforge.net/上下载到各个版本的reacTIVision,最新的是1.5.1。打开这个图案监测的app的画风是这样的:

用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第11张图片
hahahahahaha

当其监测自己设定的上百种图案时,便会很精准地定位。

用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第12张图片
中间绿色的1就是这个symbol的编号

 几百种图案差不多是这个样子的:

用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第13张图片
symbols

其次的就是布展时遇到一些困难,但也并不是很棘手,做出一些小牺牲就可以解决得掉。

在这个project布展一周之前,我们有参加一个组的marketing的展台的活动,旨在吸引路人来参加他们的研磨品尝咖啡的活动。

当时我们应marketing活动的内容,将游戏进行了改动,当时的游戏具体是这样子的:


collect coffee bean interactive game


这个游戏只是简单地左右移动地接咖啡豆,一共50个,得分高者奖品越丰厚。还记得当天玩家玩的很开心,大家害羞或不害羞,都左右移动,尽量地去接住更多的咖啡豆,得更多的分数。

相比IME的游戏,这个游戏规则极其简单,我个人感觉,在游戏一场之后获得的快感,会超过僵尸与豌豆射手的游戏。

无论是PC,端游还是手游,现在风靡群体有很多操作简单粗暴的游戏。正如当天路上匆匆的行人,能够花一些时间停下来,希望获得的是能匹得上自己所花费时间的快感和荣耀感。

怎样的游戏机制能让玩家在生活的快节奏中获得之外的性价比最高的轻松方式,可能是一个游戏需要做到的很重要的事情吧。


感谢

一如以往,要感谢的人很多,都是上天的眷恋,怕我在生活中陨落,在我身边安插了众多天使和天才。

感恩Skylar同学不知疲倦和我solo的运气很好的几次胜利,还有一直都很美很精良的作图和视频

感恩奚连和Harry,没有你们的指导就没有我的游戏,我就仰望大神一般地继续学习,继续仰望

感恩小Victor一直以来idea的分享,还有生活和学业上各种的教导和技术支持

感恩Damon的技术分享和榜样作用,让我一直在尝试望其项背

感谢大Victor的Kinect和之前各种设备材料的提供

感谢William的usb延长线,和很多细节的建议


放一些图片来记录一下那几天吧

用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第14张图片
用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第15张图片
用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第16张图片
用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第17张图片
用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第18张图片
用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第19张图片
用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第20张图片
用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧_第21张图片


春暖花开又花落,夏季将至又未来。

一年学期结束时,校园里一往地充斥着一股脑的寂静味道,南方的夏天却没有以往来得那么猛烈。在红磡的第二个学期就在热闹与繁哗后结束了,就像楼下曾看到一团绽放的花簇,现在也寻不到了。

天真地以为自己在过去的一年做了很多事情,回头来却发现自己还是自己,未来还是在未来,不知道等在那里的是什么事,什么人。一切又是从头开始,好似从来没有发生过。如同梦一场,醒来的枕边还是熟识的景象。

收拾好心情和行囊,是起身,也是等待。


2017.05.06

史家源

你可能感兴趣的:(用Unity,Kinect和reacTIVision来做一场人与墙的互动游戏吧)