XboxOne的kinect在Unity上的开发——开始界面

好的，欢迎大家来看这个系列的第二部分的内容，这一次呢，我们就直接进入主题，开发切水果游戏本身。

这次的切水果的demo呢，我们选择使用ugui来制作，因为ugui相对于NGUI的各种优势，让我们选择了ugui，关于这些呢，大家可以参考我的另一篇帖子，关于NGUI与ugui的对比。

NGUI与ugui的对比

首先，我们需要搭建一个游戏的开始界面，，选择建立一个panel，。建立panel的同时，我们也会自动创建一个canvas，并且panel也会在他之下，我们把panel改名为indexpanel，方便辨识。在这个panel下面新建一个image图片，图片选择我们的背景图。然后我们再分别建立三个按钮，按钮的话我们使用一个空物体里面套入两个图片，一个水果一个圆环这样的设计。





以这样的方式我们建立好3个按钮，作为主界面的三个按钮。

但是按钮如果只是这样就显得有些单调了，所以我们可以让圆环的图片旋转起来。我这次使用的是Unity的动画控制器进行旋转，并没有选择使用ugui的dotween的插件。

首先，我们给圆环的图片添加新的动画组件，Animator组件 。我们再添加一个动画控制器，起名为Start_Circle_Contral ，我们把这个动画控制器拖到animator组件里，作为这个圆环的动画控制器。光有动画控制器还不够，所以我们还需要建立一个动画片段，没有动画片段，光有控制器一样是无法播放动画的。动画片段起名为Start_Circle_Rotation，，打开动画控制器编辑，我们把这个动画片段拖进去，作为默认的动画，并且，我们把右边的loop给勾选上，让他进行循环的播放。我们在打开动画的编辑器，选择

进行添加，再选择

rotation，也就是旋转。

右边我们选择曲线模式


时间0的时候我们把Z轴的旋转角度设为0，根据我的调整，选择10秒后的Z轴数值为360，也就是每10秒转一圈，这个速度的话，是比较理想的。我们也可以点击播放，看一下效果，按照自己的喜好调整。

这样，我们的界面也就基本完成了，但是，这只是一个界面，并没有与kinect相连和互动。此时我们建立一个rawimage作为kinect显示我们人体的图片，可以不进行图片拖入，直接选择白色就行。我们给它改名为KinectImg。然后我们给它添加一个canvas group脚本，这样我们就可以调节它的透明度了。

我们再添加一个image，作为我们的右手，这样就可以表示我们的右手所在的位置了。图片也可以按照自己的喜好来做。

最后，我们给indexpanel添加一个脚本，用来控制我们的这个场景。

首先在脚本里我们要获取一些变量

public Canvas canvas;//父级canvas
public Image rightHand;//右手图片
public Sprite[] handStateSprites;//图片数组

public Image btn1;按钮
public Image btn2;
public Image btn3;

public Image circle1;圈
public Image circle2;
public Image circle3;

获取这些变量以后，我们就可以开始内部逻辑的编写了。

第一步，我们首先要获取玩家，也就是要检测到玩家。我们在update中编写。

if (KinectManager.Instance.IsJointTracked(userId, jointType))
{
//关节点被追踪到
Vector3 handPos = KinectManager.Instance.GetJointKinectPosition(userId, jointType);//获取左手信息
Vector3 handScreenPosV3 = Camera.main.WorldToScreenPoint(handPos);//右手转换到屏幕坐标
handScreenPosV3 = Utils.Rec(KinectInterop.JointType.HandRight);
Vector2 handSenPos = new Vector2(handScreenPosV3.x, handScreenPosV3.y);
Vector2 uguiPos;
//执行屏幕坐标到UGUI左边的转换
bool changeSucess = RectTransformUtility.ScreenPointToLocalPointInRectangle((RectTransform)canvas.transform, handSenPos, Camera.main, out uguiPos);

if (changeSucess)
{
//表示右手在canvas所表示的矩形范围内
RectTransform rightRectTf = rightHand.transform as RectTransform;
rightRectTf.anchoredPosition = uguiPos;//更新鼠标图标
}
}

这样就是表示我们获取到玩家的骨骼关节点了。接下来我们就可以判断玩家的手型了，我们用握拳来表示点击。

bool isHandClose = false;
rightHand.sprite = handStateSprites[0];
KinectInterop.HandState rightHandState = KinectManager.Instance.GetRightHandState(userId);
if (rightHandState == KinectInterop.HandState.Closed)
{
//右手握拳了
isHandClose = true;
rightHand.sprite = handStateSprites[1];
}

这样就是表示我们已经握拳了，也就是做出了点击的动作。但是我们需要点击的是按钮，所以要判断是否在按钮上，或者不在，我们以圆圈为按钮（因为圆圈范围相对水果较大）。

if (isHandClose==true)
{
//握拳了，然后再看是否有跟三个按钮重合
if (circle1.enabled==true&& RectTransformUtility.RectangleContainsScreenPoint(circle1.rectTransform, handSenPos, Camera.main))//检测到点在rect里面的时候才会返回true
{
//点击了第一个按钮
hanClickFruit(btn1);
}
else if (circle2.enabled == true && RectTransformUtility.RectangleCont
4000
ainsScreenPoint(circle2.rectTransform, handSenPos, Camera.main))//检测到点在rect里面的时候才会返回true
{
//点击了第二个按钮
hanClickFruit(btn2);
}
else if (circle3.enabled == true && RectTransformUtility.RectangleContainsScreenPoint(circle3.rectTransform, handSenPos, Camera.main))//检测到点在rect里面的时候才会返回true
{
//点击了第三个按钮
hanClickFruit(btn3);
}
}

这样我们就可以知道切到了那个水果了，但是现实游戏中，当我们切中水果之后会有一个向上的飞行动作之后再下落，我们也要实现以下这个效果。所以我给每个水果的图标都添加了刚体，但是默认的刚体重力比例设为0，这样就不会掉落了。

/****切到水果的处理函数****/
private void hanClickFruit(Image clickFruit)
{
Rigidbody2D r1 = btn1.GetComponent<Rigidbody2D>();
Rigidbody2D r2 = btn2.GetComponent<Rigidbody2D>();
Rigidbody2D r3 = btn3.GetComponent<Rigidbody2D>();

r1.gravityScale = gravityScale;
r2.gravityScale = gravityScale;
r3.gravityScale = gravityScale;

circle1.enabled = false;
circle2.enabled = false;
circle3.enabled = false;

curBtn = clickFruit;//记录当前是那个水果

}

获取了切中的水果，以及他们的刚体组件。接下来就可以赋予效果了。但是我们同样需要一些变量。

private Image curBtn;//记录被切中的水果，希望知道水果何时出界，出界时再切换
public int curBtnOutY = -300;//小于这个值为出界

public int upForce = 800;
public int gravityScale = 10;

我们可以赋予被切中的水果做向上运动之后掉落，其他的则直接掉落，掉落后出屏幕外时进行销毁。

if (clickFruit==btn1)
{
r1.AddForce(new Vector2(0, upForce));
}
else if (clickFruit==btn2)
{
r2.AddForce(new Vector2(0, upForce));
}
else
{
r3.AddForce(new Vector2(0, upForce));
}

我们可以使用if和else if来判断，也可以用switch。

接下来就是判断出界了，超出屏幕时销毁，因为水果被赋予了刚体，所以重力会使水果向下掉落，我们只需要判断Y轴小于某个值就可以了。判断的话，需要我们放在update里进行每帧检测。

具体方法如下。

//执行检测什么时候水果出界
private void deteCurBtn()
{
if (curBtn!=null)
{
RectTransform rtf = curBtn.transform as RectTransform;//获取当前水果属性
if (rtf.anchoredPosition.y<curBtnOutY)
{
//被切中水果出界
panelCenter.showGamePanel();
Destroy(gameObject);
}
}
}

以上就是这次的开始界面的开发，下一期我会介绍游戏界面的制作。

第一期：
http://blog.csdn.net/Iwilreal/article/details/78516838