Cocos Creator 橡皮擦效果:RenderTexture跟DrawNode还在.

翻了翻旧博客,偶然看到下面这篇:
http://blog.csdn.net/no99es/article/details/39209681

回想了下,貌似没有看到Creator里有RenderTexture,DrawNode相关的API,习惯性的搜了下gitHub源码,果然这两个类还在:

cc.DrawNode

cc.RenderTexture

Creator的文档还在完善,这些功能还没有组件化,但是源码就是最好的文档。

cocos2dx已经试过了,再来试试Creator的橡皮擦效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// use this for initialization
onLoad: function () {
this.label.string = this.text;

this.render = cc.RenderTexture.create(960, 540);
this.node._sgNode.addChild(this.render);
this.render.begin();
//纯色填充
this.bgDrawNode = new cc.DrawNode();
this.bgDrawNode.setDrawColor(new cc.Color(0, 100, 0, 255));
this.bgDrawNode.drawRect(cc.v2(0, 0), cc.v2(960, 540), new cc.Color(50, 200, 50, 255), 10);
this.bgDrawNode.visit();
this.render.end();
this.bgDrawNode.release();
//擦除Node
this.eraserDrawNode = new cc.DrawNode();
this.eraserDrawNode.setBlendFunc(cc.macro.ZERO,cc.macro.ONE_MINUS_SRC_ALPHA);
//触摸擦除
this.node.on(cc.Node.EventType.TOUCH_MOVE, (touch) => {
cc.log("TOUCH_START");
var touchLocation = touch.getLocation();
//清除下DrawNode,否则会使DrawVert数目暴增
this.eraserDrawNode.clear();
this.eraserDrawNode.drawDot(
touchLocation,//位置
50,//半径
new cc.Color(255, 255, 255, 255)
);
this.render.begin();
this.eraserDrawNode.visit();
this.render.end();
}, this);
},

思路就是,RenderTexture填充后,使用DrawNode继续访问RenderTexture,Blend混合使Alpha为0(即透明)即可。
需要注意的是及时调用DrawNode.clear(),否则Vert数目会暴增。

效果图:

橡皮擦效果