Creating multiple sprites from Render Texture - Having Problem

Hi,

  • I am using cc.DrawNode to draw a SpiroGraph (a complex curve with 100K and more vertices)
  • I will be drawing multiple such curves and can’t have a million vertices on screen.

So, I am trying to convert the curve in cc.DrawNode to a regular sprite by trying to convert the curve of vertices to curve of texture as follows:

  • After the completion of drawing the curve, I call begin() of a renderTexture.
  • Visit the cc.DrawNode.
  • So the curve gets rendered in RenderTexture.
  • Then I remove the cc.DrawNode.
  • Get the texture of the RenderTexture (which now contains the curve) and Create a new sprite out of it.

All is working well, except for these 2 issues:

  • The sprite created out of texture of RenderTexture is dull, the lines are darkened.
  • When I clear the renderTexture with beginWithClear(), texture of Sprites created before this call, gets disappeared. Is there any chance that only the reference of renderTexture’s texture is being passed onto the Sprite? If yes, how to fix it?

My Code:

ctor                        :   function () {
    this._super();

    var size                =   cc.winSize;

    this.renderTex          =   cc.RenderTexture.create(640, 960, cc.Texture2D.PIXEL_FORMAT_RGBA8888);
    this.renderTex.setPosition(cc.p(size.width / 2, size.height / 2));
    //this.renderTex.setKeepMatrix(true);
    this.addChild(this.renderTex, 1); 
    this.renderTex.retain();

    return                      true;
},  

addNewCurve                 :   function(curveData) {

    var slf                 =   this;
    this.cNode              =   new CurveLayer(curveData);
    this.addChild(this.cNode, 10);
    this.cNode.drawSpiro(function() {
        //slf.renderTex.beginWithClear(0, 0, 0, 0);
        slf.renderTex.begin();
        slf.cNode.visit();
        slf.renderTex.end();
        slf.cNode.setVisible(false);

        slf.cleanup(curveData);
        console.log('drawn');
    }); 
},  

cleanup                     :   function(curveData) {
    var tex             =   this.renderTex.getSprite().getTexture();
    //tex.retain();
    var curveSprite     =   cc.Sprite.create(tex);
    var size                =   cc.winSize;
    curveSprite.setPosition(cc.p(size.width / 2, size.height / 2));
    this.addChild(curveSprite, 2);
    this.cNode.removeFromParent();
},