cocos2dx 实现gallery (二)

前端之家收集整理的这篇文章主要介绍了cocos2dx 实现gallery (二)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们先把前面的模型简化,我们最后要看到的是这样:

这个图上,构成这个效果的主要因素有3个。

一、x方向的位置,就是图上绿点标记的地方,锚点0.5。(这里我不需要Y方向的变化,需要的也可以自己类推)

二、大小,有了大小的差别,就有了远近的差别

三、zorder,这个是决定遮挡关系,然后我们就会产生一种立体的错觉

PS:其实图上,每个item的图片还用了投影。。。但是这是美工的事情)


我们再来看决定上面3个因素的东西(俯视图):

按标准坐标系,x轴正方向为0度,x轴负方向为180度。

图上的x,决定的是x方向的位置,图上的Y,是距离我们的距离,距离越远,自然就应该越小。而且距离我们越远,也就应该越靠后,zorder越低。


然后就应该补习下透视相关的东西了。请参考这里,只需要知道视椎体就行了。然后我们看侧面图:

为了方便,直接取Y轴所在平面为视平面,所做连线与Y轴的焦点,就是实际显示大小。这里涉及3个变量。物体距视点的距离d,视点到视平面之间的距离d1,视平面到物体的距离dx。设物体高度为L,物体显示高度为L'。通过相似三角形,可以轻易的得出L'的长度,但是我们其实只需要scale就够了,所以:

scale = d1 / (d1+dx)

但是这个d1和dx又怎么去获取,根据视椎体,有如下:

斜着的那个,就是上面侧面图我们要求的那个。根据相似三角形,又可以轻易得出:

scale = d‘ / (d' + dx ')

这个d'和dx',可以通过俯视图,就是上面一个圆圈圈,那个图算出来。要算这个,涉及3个变量还未知。一是角度,二是圆圈半径,3是上图的d',也就是视点到视平面的距离。简单的说,这3个值只能自己试。。。。不过是有一定规律的

角度是根据想看多少自己来分布,实际能看到的部分,只有整个园的前半圆,一共180度,加入我想一共放5个,我就按45度分布就行了。

半径可以推测,比如我想看我全部的半圆,那么直径就是窗口的大小。

最后一个,主要是涉及一个缩放比例,通过公式可以看出,如果d'越大,那么最前面的item和最后面的item,大小差距就越大,反之差距就越小。




然后就开始写代码了。。。

猜你在找的Cocos2d-x相关文章