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.RectangleContainsScreenPoint(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));
        }

接下来就是判断出界了，超出屏幕时销毁，因为水果被赋予了刚体，所以重力会使水果向下掉落，我们只需要判断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