Unity3D之NGUI入坑<二>

来源:互联网 发布:药品进销存软件免费版 编辑:程序博客网 时间:2024/05/29 17:41
乱斗西游效果图如下:

QQ图片20150202175511.jpg


首先对这个界面分析了一下,有两种:
猜测 1. 可能是用2D模拟实现的伪3D,只是通过大小,角度的变换实现了3D旋转的效果。
猜测2. 可能在三维坐标系中创建了一个圆面,而每张卡牌均分在圆的某一角度的边上。而实现了这种每张卡牌视觉上上下大小一致,两边平行的效果,除了调整摄像机,还有可能圆面和XZ平面有夹角。猜测图如下:

QQ截图20150202175537.png


QQ截图20150202175550.png


思来想去,还是用3D的坐标系的位置坐标去实现吧,对于一些2D模拟3D不是太熟悉。设计思路如下:
  1. 卡牌原始位置的确定: 确定适合大小的圆的半径R,以(0,0,0)为圆心,方便起见将圆面与XZ轴夹角定为0。如图,A卡的位置是面对玩家中心位置的卡牌,向量OA与Z轴重合作为基准,分别计算OA,OB,OC,OD,OE与OA的夹角,由于Y轴垂直于盘面,所以Y=0,各点的坐标可以按照如下的方式确定:
    X=R * Mathf.Sin(i * 2 * Mathf.PI / gos.Count)
    Z= R * Mathf.Cos(i * 2 * Mathf.PI / gos.Count)
    其中gos为盛放卡牌的List容器,i为容器中的第i张牌,由此可以把所有的牌按照:顺序->角度->坐标的方式进行在3维空间中进行摆放了。
  2. 实现点击后的转动 点击后,将被点击的某卡牌以gameobject参数的形式传入到判断旋转方向的方法中。如果点击中间左侧的卡牌,那么所有卡牌应该要向右移动;如果点击中间右侧的卡牌,所有的卡牌都应该向左移动,以实现被点击的卡牌旋转到中心的效果。
    由于摆放位置的原因,我们可以通过距离判断是否点击了离中间最近的左侧或者右侧,以判定转还是不转。计算思路如下:estimateDistance = 2 * Mathf.Sin(Mathf.PI / count) * R;
    其实就是图中AB,或者AE的距离,通过角度+半径获取距离的方式来确定,而实际距离是通过
    √((A.X-B.x)^2 )+〖(A.z-B.z)〗^2计算得到的,二者比较可以确定点击的卡牌是否需要转动。其次通过x>0 or x<0 的判定,可以确定该卡牌位于中心卡牌的左侧还是右侧,以确定旋转方向。
  3. 实现点击后的转动 接下来就是比较关键的问题了,怎么转?此时我们可以通过Vector3.Angle拿到每个卡牌与OA的角度了,并且旋转的角度就是360°/count,所以每张卡牌旋转就是从原来的位置,旋转到角度增加360°/count的位置,就比如:B->C,实际上是<AOB+360/count,因此所有的角度旋转的终点的角度可以确定,角度+半径=新的坐标点,由此,旋转的起点和终点可以确定。但是为了体现出旋转的效果,可以在起点和终点中设置一个中间点,中间点的角度可以通过原角度增加(360/count)/2来确定,如BC间的中间点可以为<AOB+(360/count)/2,由此也能确定中间点的坐标,所以每个点转动的轨迹可以为:原位置->中间点->终位置来确定。可以在路径中添加中间点和终位置,然后调用ITween的MoveTo来进行移动。
  4. 过程中Depth的遮挡问题 由于转动过程中,不同Depth位置的点会彼此遮挡,导致视觉
    导致视觉效果会混乱。所以必然要解决遮挡问题,由于最初的设计思路导致最终的问题解决比较顺利,同样是通过角度去实现,解决思路如下所示:

QQ截图20150202175619.png


<AOB的绝对值等于<AOE,<AOC的绝对值等于<AOD,规律显示出,任何Z值相等的卡牌,其角度的绝对值是一致的,并且是360/count的整数倍。并且角度绝对值越大,Z值越小越靠后。所以可以先把depth设为0,然后减去角度绝对值与360/count相除的结果,就得到了它应该的depth。 所以在Update里面很容易实现动态的改变depth,具体如下:

QQ图片20150202175637.jpg


至此,整体上的功能能够实现,具体的3D效果有待微调。
QQ截图20150202175604.png
0 0
原创粉丝点击