零基础学习之教你如何用Cocos2D实现画中画效果

　　没学过Cocos2D？没关系，多看看我们的教程，一步步成为游戏开发大神。本篇教程将教你如何用Cocos2D实现画中画效果。

　　1.如何实现理论

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

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

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

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

　　用户手指滑动的时候，我们做的事情：

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

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

　　2.实现的难点

　　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组。

　　逻辑是这样，实现起来还是需要费点时间。就这样吧。真正实现出来有成就感。