RenderTexture动态生成纹理

Creator 2.x
#1

TestRenderTexture.zip (166.4 KB)### RenderTexture动态生成贴图

我的游戏有一个需求，需要生成动态的纹理，查看Cocos Creator并未发现合适的API，只能使用CocosJs中的RenderTexture来实现，我通过继承cc._RendererUnderSG实现了一个组件，然后在组件中写了可以动态生成纹理的代码。这个组件在Canvas模式可以很好的工作也不会卡顿游戏，但是在WebGL模式就不显示了，请各位前辈帮忙找找问题的原因，谢谢大家了。

附上代码：

cc.Class({
    extends: cc._RendererUnderSG,
    //<a class="attachment" href="/uploads/default/original/3X/6/7/67b55c527b032aa3b95959878571cad9a03c1ef7.zip">TestRenderTexture.zip</a> (166.4 KB)
    _createSgNode: function () {
        return new _ccsg.Sprite();
    },
    _initSgNode: function () {
    },

    drawPoly: function(){
        var renderTexture = cc.RenderTexture.create(300, 300)

        var drawNode = new cc.DrawNode();
        renderTexture.begin();

        for(var i = 0; i< 100; i ++){
            for(var j = 0; j< 100; j ++){
                drawNode.drawDot(cc.p(i, j), 1, cc.color(cc.random0To1()*255, cc.random0To1()*255, cc.random0To1()*255, 255));
            }
        }
        
        drawNode.visit();

        renderTexture.end();

        this._sgNode.setTexture(renderTexture.getSprite().getTexture());
    }
});
#2

该问题已经解决，应该是在WebGL模式下RenderTexture必须被加入渲染层级才可以生效，新的代码如下，不过在Canvas模式和WebGL模式下显示的图形大小不一样的，还需要继续查找下原因。

cc.Class({
    extends: cc._RendererUnderSG,
    //
    _createSgNode: function () {
        return new _ccsg.Sprite();
    },
    _initSgNode: function () {
    },

    drawPoly: function(){
        var renderTexture = cc.RenderTexture.create(300, 300)

        var drawNode = new cc.DrawNode();

        // renderTexture.setVirtualViewport(0, 0, new cc.Rect(0, 0 , 300, 300), new cc.Rect(0, 0 , 300, 300));
        renderTexture.begin();

        for(var i = 0; i< 100; i ++){
            for(var j = 0; j< 100; j ++){
                drawNode.drawDot(cc.p(i, j), 1, cc.color(cc.random0To1()*255, cc.random0To1()*255, cc.random0To1()*255, 255));
            }
        }
        
        drawNode.visit();

        renderTexture.end();
        this._sgNode.addChild(renderTexture);

        // this._sgNode.setTexture(renderTexture.getSprite().getTexture());
    }
});
1赞
#3

哥们，成功了吗

#4

WebGL下试一下把要截的区域缩放到和cc.winSize一样大(通过设置drawNode的scaleX与scaleY，不需要保持等比)。

#5

toddlxt的回答是正确的，是与视窗的设置有关，最后的工程是TestRenderTexture.zip (173.8 KB)

不过这种方式可能在将来版本的Cocos Creator中不支持，所以最后选择了用cc.Graphics。

这两种方式在绘制大量点时一样都会卡，使用RenderTexture只在生成纹理时卡一次，使用Graphics在每次绘制都会卡顿。
但绘制少量点，合理使用填充，就不会卡顿了。所以想实现通过绘制大量点生成纹理，在当前引擎中好像是没有办法的，应该需要底层支持。

1赞
#7

在creator2.1中，如何通过opengl画点？目前graphics组件没有支持这个画像素点接口？

这是以前的做法：

  • //创建draw对象
    var drawNode =new cc.DrawNode();
    //画点，参数：坐标，半径， 颜色
    drawNode.drawDot(cc.p(100,100),10,cc.color(255,255,255));