Clippingnode for novice led highlight cutting

Use of Clippingnode

Overview

The Clippingnode (clipping node) can be used to crop nodes, and the nodes of a picture can be cut according to a template, creating a node display of any shape.

Clippingnode is a subclass of node that can be placed in layer,scene,node like a normal node.

• Clippingnode principle:

  Clippingnode is the technique of using template masks to cut the node area. How to understand the Clippingnode mask? Look at the example of it.

  The so-called template, is a shape, through the shape can see the layer on the backplane, if there is no content on the backplane, then directly see the content on the layer, and the bottom of things on the floor will not hinder things on the layer, that is, the template outside the backplane space is transparent to the layer.

Clippingnode Common methods

2. Create

   You can use static ClippingNode* create(); methods to create a Clippingnode object. As follows:

   auto clipper = ClippingNode::create();

   You can also use static ClippingNode* create(Node *stencil); the method to create, and at the time of creation, specify the crop template

   auto stencil = Sprite::create("CloseNormal.png");//模板节点clipper = ClippingNode::create(stencil);

4. Setstencil You can use void setStencil(Node *stencil); the method to set the crop template node. As follows:

   clipper->setStencil(stencil);//设置裁剪模板

6. setinverted

   You can use void setInverted(bool inverted); the method to set whether the cropped part is displayed or the crop is displayed. True to show the rest of the section. False to show the cut off part. As follows:

   clipper->setInverted(true);//设置底板可见，显示剩余部分

8. Setalphathreshold

   You can use void setAlphaThreshold(GLfloat alphaThreshold); the alpha threshold to set the content to be drawn only if the alpha pixel of the template (stencil) is greater than the alpha threshold (Alphathreshold). The alpha threshold (threshold) range should be a floating-point number between 0 and 1. The Alpha threshold value (threshold) defaults to 1. As follows:

   clipper->setAlphaThreshold(0);//设置绘制底板的Alpha值为0

Clippingnode Example

    auto bg = LayerColor::create(Color4B(255, 255, 255,255));    this->addChild(bg, -1);//1    auto stencil = Sprite::create("CloseNormal.png");    stencil->setScale(2);//2    auto clipper = ClippingNode::create();    clipper->setStencil(stencil);//设置裁剪模板 //3    clipper->setInverted(true);//设置底板可见    clipper->setAlphaThreshold(0);//设置绘制底板的Alpha值为0    this->addChild(clipper);//4    auto content = Sprite::create("HelloWorld.png");//被裁剪的内容    clipper->addChild(content);//5    clipper->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

1. Added a white layercolor as the background layer.
2. Create a Sprite, as a clipping template, and zoom in twice times
3. Create a Clippingnode node and set the crop template
4. Set the crop display, alpha threshold, and add clipping nodes to the layer
5. Set content to be cropped

Run effect

Will clipper->setInverted(true); clipper->setInverted(false); run effect instead

• Resource picture

http://www.cocos.com/doc/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework/native/ V3/clippingnode/zh.md

Http://www.2cto.com/kf/201207/144656.html

Fog of war effect:

Http://bbs.9ria.com/thread-157487-1-1.html

http://www.benmutou.com/archives/455

Clippingnode for novice led highlight cutting