I have an Android app for kids that has a coloring screen, and I am trying to convert it to Cocos2d-js. The way I implemented this in Android is to have two pictures on top of each other: a colored one at the bottom, and a grayscale on top. When a touch is detected, the gray scale picture on top is erased on that location revealing the bottom picture.
I am looking at RenderTexture for coloring effect, and ClippingNode for revealing the bottom layer, but when I set the RenderTexture as the stencil for the ClippingNode, the top image is completely transparent (stencil is opaque?)
This is my code so far (top layer only, as the bottom layer is just a sprite that covers the entire screen):
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();
}
});
I tried using the .clear(rgba) function on the RenderTexture to no avail.
I noticed that the ClippingNode example in the js-tests is adding a DrawNode object as a stencil, is there a way to “convert” the RenderTexture to a DrawNode?