有时候我们需要一张圆形的图片,可是美术提供的是一个矩形的资源图片,怎么办?让美术再做一张圆形的?即使这样能暂时解决问题,无疑增加了开销,何况有时候你可能需要显示一张图片里的不同部分,不可能每种情况都让美术都做一次修改吧,这时候 cocos2d-x 里提供的节点裁剪技术就派上用场了。
节点裁剪 原理
cocos2d-x 提供 CCClippingNode 类的可以用来对节点进行裁剪,可以根据一个模板切割节点图片,生成任何形状(取决于模板)的节点显示。
CCClippingNode 是 CCNode 的子类,可以放入到其他 CCNode、CCLayer、CCScene中。
节点裁剪是利用模板遮罩来完成对Node区域裁剪的技术,看下图:
图中的模板和底板一起构成了CCClipperNode,但是在底板上,只有模板在底板上的投影部分是可见的(或者取反,除投影以外的地方可见),底板上投影之外的地方都是不可见的(或者说是透明的),这样将CCClipperNode放到Layer中后,你看到的就是Layer中间位置有底板的部分图像,没错这部分图像就是对底板进行节点裁剪的结果。
通过下面一个例子来加深理解,图1是模板图片,图2是底板图片,这里Layer是黑色(没有任何内容),使用模板对底板进行裁剪后的结果(也就是CCClipperNode)放到Layer中,看到的效果如图3。
图 1 模板
图 2 底板
图 3 从上往下看
使用节点裁剪(CCClipperNode类)
CCClipperNode 的使用一般步骤:
bool Scene0::init(){ if (!CCScene::init()) return false; CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize(); CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin(); CCSprite *stencil = CCSprite::create("stencil.png"); CCSprite *content = CCSprite::create("content.png"); CCClippingNode *clipper = CCClippingNode::create(); // 设置模板 clipper->setStencil(stencil); // 默认为false. 该值为false时,以模板中不透明区域作为模板;该值为true时,以模板中透明区域作为模板 clipper->setInverted(false); // 默认为0.0,表示模板透明区域的alpha阈值,其值越小模板中透明区域越小,不透明区域就越大 clipper->setAlphaThreshold(0.4f); clipper->addChild(content); addChild(clipper); // 设置模板位置(改变该值,会改变裁剪出来的内容) stencil->setPosition(ccp(0, 0)); // 设置底板位置(改变该值,会改变裁剪出来的内容) content->setPosition(ccp(0, 0)); // 设置裁剪后的节点位置(改变该位置,裁剪出来的内容不会变化) clipper->setAnchorPoint(ccp(0.5f, 0.5f)); clipper->setPosition(ccp(visibleSize.width/4 + origin.x, visibleSize.height/2 + origin.y)); return true;}
- 反转模板,即以模板中透明部分作为模板