码迷,mamicode.com
首页 > 其他好文 > 详细

cocos2d 画中画效果

时间:2015-09-06 18:21:09      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:

1.效果图

技术分享


2.如何实现理论

技术分享  技术分享


我们以2张图作为实例。最外面的大图,还有就是红色框框中的图。 这两张图的尺寸是一样的。

准备工作我们就做2件事情:

1.把第二张图缩小,向右旋转添加到第一张图中,看起来还是第一张图

2.把第一张图的锚点设置为紫色的那个点(非常重要,这样缩放才有较好的效果

用户手指滑动的时候,我们做的事情:

1.第一张图同时run 3个action,放大,向左旋转,位移

移动的位置比较讲究,结果是要把紫色的点移动到屏幕中间。(这个点就比较难计算


3.实现的难点


1.已知一个精灵中的点,求它对应锚点?

比如一张图片它的宽度是500,高度400. 那么p(200,300)这个点对应的锚点是多少?

 float anchorPointX = 200 / width;
		   float anchorPointY = 300 / height;

就是当前位置的x,y分别除以这个图片的宽,高度。


2.一个精灵本来是在屏幕中心的,现在有一个点p(200,300), 如何移动这个精灵使得,结果是p(200,300)这个点居于屏幕中心?

Vec2 worldPosition = smallSprite->convertToNodeSpace(Vec2(WIN_WIDTH/2, WIN_HEIGHT /2));
		Vec2 pos = worldPosition - Vec2(smallSprite->getContentSize().width * 0.5, smallSprite->getContentSize().height * 0.5);

2张图慢慢搞,还是可以成功。那么5,6张图呢?

我尝试过按照2张图那样搞,一次全部添加,缩放会有问题,因为倍数太大了,导致了模糊。所以只能弄成一个组

0,1  

1,2  

2,3 

3,4

4,5

每次都是显示2组,刚开始显示 3,4 ,4,5  这两组,3,4隐藏,显示4,5,在4继续往左滑动就隐藏4,5,显示3,4。一旦用户在3这个状态继续往左滑动,就变成 2,3,3,4这2组。

逻辑是这样,实现起来还是需要费点时间。就这样吧。

http://www.waitingfy.com/archives/1754

版权声明:本文为博主原创文章,未经博主允许不得转载。

cocos2d 画中画效果

标签:

原文地址:http://blog.csdn.net/fox64194167/article/details/48245161

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!