Cocos2d x Cocoss2d js通过显示底层来创建着色效果

我有一个面向孩子的Android应用程序，它有一个彩色屏幕，我正在尝试将它转换为CoCoS2DJS。我在安卓系统中实现这一点的方式是两张图片相互重叠：底部是彩色图片，顶部是灰度图片。当检测到触摸时，顶部的灰度图片将在显示底部图片的位置被擦除

我正在查看RenderTexture以获得着色效果，而ClippingNode用于显示底层，但当我将RenderTexture设置为ClippingNode的模具时，顶部图像是完全透明的（模具是不透明的？）

这是我目前为止的代码（仅顶层，因为底层只是一个覆盖整个屏幕的精灵）：

var grayscalayer=cc.Layer.extend({
winsize:null，
_刷：空，
_目标：空，
_lastLocation:null，
ctor：函数（）{
这个；
this.init（）；
},
init：函数（）{
if（抄送系统功能中的“接触”）{
cc.eventManager.addListener({
事件：cc.EventListener.TOUCH_ALL_一次性，
OnTouchsMoved：功能（触摸、事件）{
event.getCurrentTarget（）.drawInLocation（触摸[0].getLocation（））；
}
}，这个）；
}else if（“鼠标”在cc.sys.capabilities中）
cc.eventManager.addListener({
事件：cc.EventListener.MOUSE，
onMouseDown：函数（事件）{
event.getCurrentTarget（）。_lastLocation=event.getLocation（）；
},
onMouseMove:函数（事件）{
if（event.getButton（）==cc.EventMouse.BUTTON\u左）
event.getCurrentTarget（）.drawInLocation（event.getLocation（））；
}
}，这个）；
//获取游戏画布的屏幕大小
this.winsize=cc.director.getWinSize（）；
这个；
this.\u lastLocation=cc.p（this.winsize.width，this.winsize.height）；
//创建RenderTexture对象
var stencil=this.erase（）；
stencil.setPosition（cc.p（this.winsize.width/2，this.winsize.height/2））；
//创建剪报节点并将RenderTexture添加为模具
var clipper=new cc.ClippingNode（）；
削波器设定位置（cc.p（0,0））；
clipper.stencil=模具；
clipper.SetInversed（真）；
这是addChild（clipper）；
//创建灰度图像并将其添加到剪裁节点
var grayItem=新的cc.Sprite（res.image\u gs\u png）；
var grayScale=this.winsize.width/grayItem.width；
grayItem.setScale（灰度，灰度）；
setPosition（cc.p（this.winsize.width/2，this.winsize.height/2））；
clipper.addChild（灰色项）；
},
擦除：函数（）{
var target=new cc.RenderTexture（this.winsize.width，this.winsize.height）；
这个._target=target；
回报目标；
},
drawInLocation:功能（位置）{
var距离=cc.P距离（位置，此位置）；
如果（距离>1）{
var locLastLocation=此；
这是。_target.begin（）；
这个；
对于（变量i=0；i

我尝试在RenderTexture上使用.clear（rgba）函数，但没有效果

---

我注意到js测试中的ClippingNode示例添加了一个DrawNode对象作为模具，有没有办法将RenderTexture“转换”为DrawNode？

您不需要使用

ClippingNode

只需在底部设置彩色图层，在顶部设置灰度渲染器

---

触摸时，您可以通过使用此混合函数在渲染器上绘制精灵来擦除透明度

{src:gl_ZERO，dst:gl_ONE_减去src_ALPHA}

谢谢！js中的语法是sprite.setBlendFunc（cc.ZERO，cc.ONE_减去SRC_ALPHA）；

var GrayScaleLayer = cc.Layer.extend({

    winsize: null,
    _brushs:null,
    _target:null,
    _lastLocation:null,

    ctor:function () {
        this._super();
        this.init();
    },

    init:function () {

        if ('touches' in cc.sys.capabilities){
            cc.eventManager.addListener({
                event: cc.EventListener.TOUCH_ALL_AT_ONCE,
                onTouchesMoved:function (touches, event) {
                    event.getCurrentTarget().drawInLocation(touches[0].getLocation());
                }
            }, this);
        } else if ('mouse' in cc.sys.capabilities)
            cc.eventManager.addListener({
                event: cc.EventListener.MOUSE,
                onMouseDown: function(event){
                    event.getCurrentTarget()._lastLocation = event.getLocation();
                },
                onMouseMove: function(event){
                    if(event.getButton() == cc.EventMouse.BUTTON_LEFT)
                        event.getCurrentTarget().drawInLocation(event.getLocation());
                }
            }, this);

        // Get the screen size of your game canvas
        this.winsize = cc.director.getWinSize();

        this._brushs = [];
        this._lastLocation = cc.p(this.winsize.width, this.winsize.height);

        // Create the RenderTexture object
        var stencil = this.erase();
        stencil.setPosition(cc.p(this.winsize.width/2, this.winsize.height/2));

        // Create the clippingNode and add the RenderTexture as a stencil
        var clipper = new cc.ClippingNode();
        clipper.setPosition(cc.p(0,0));
        clipper.stencil = stencil;
        clipper.setInverted(true);
        this.addChild(clipper);

        // Create gray scale image and add it to the Clipping node
        var grayItem = new cc.Sprite(res.image_gs_png);
        var grayScale = this.winsize.width/grayItem.width;
        grayItem.setScale(grayScale, grayScale);
        grayItem.setPosition(cc.p(this.winsize.width/2, this.winsize.height/2));
        clipper.addChild(grayItem);

    },

    erase:function () {
        var target = new cc.RenderTexture(this.winsize.width, this.winsize.height);

        this._target = target;

        return target;
    },

    drawInLocation:function (location) {
        var distance = cc.pDistance(location, this._lastLocation);

        if (distance > 1) {
            var locLastLocation = this._lastLocation;
            this._target.begin();
            this._brushs = [];
            for(var i = 0; i < distance; ++i) {
                var diffX = locLastLocation.x - location.x;
                var diffY = locLastLocation.y - location.y;
                var delta = i / distance;
                var sprite = new cc.Sprite(res.brush_png);
                sprite.attr({
                    x: location.x + diffX * delta,
                    y: location.y + diffY * delta,
                    rotation: Math.random() * 360,
                    color: cc.color(Math.random() * 255, 255, 255),
                    scale: Math.random() + 0.25,
                    opacity: 20
                });
                sprite.retain();
                this._brushs.push(sprite);
            }
            for (var i = 0; i < distance; i++) {
                this._brushs[i].visit();
            }
            this._target.end();
        }
        this._lastLocation = location;
    },

    onExit:function () {
        for(var i in this._brushs){
            this._brushs[i].release();
        }
        this._super();
    }
});