cocos2d-js cc.RenderTexture幾種用法(數字圖片、刮刮樂效果)

本文轉載於：http://blog.csdn.net/realcrazysun1/article/details/42393629

RenderTexture用法1：數字圖片

通過這張圖片實現任意數字

var PictureNumber = cc.Sprite.extend({  
    m_Number:null,  
    m_NumberTexture:null,  
    ctor:function(){  
        this._super();  
          
    },  
    buildNumber:function(paramNumber, paramTexture)  
    {  
        this.setNumber(paramNumber);  
        this.setNumberTexture(cc.textureCache.addImage(paramTexture));  
        return this.build();  
    },  
    build:function(){  
  
        var iNumCount = (this.m_Number+"").length;   //取得字符個數  
        var stSize = this.m_NumberTexture.getContentSize(); //取得紋理大小，要求紋理中每個數字都是等寬等高，並依照0123456789排列  
          
        var iNumWidth = parseInt( stSize.width / 10);   //紋理中每個數字的寬度  
        var iNumHeight =  parseInt( stSize.height);    //紋理中每個數字的高度  
  
        var pRT = new cc.RenderTexture(iNumWidth * iNumCount, iNumHeight); //創建渲染紋理對象，並數字確定寬度  
          
          
          
        pRT.begin();  
        for (var i = 0; i < iNumCount; i++)  
        {  
            var pSprite   = new cc.Sprite(); //創建精靈對象，用於繪制數字  
            pSprite.setAnchorPoint(0, 0);  
            pSprite.setTexture(this.m_NumberTexture);  
            var iNumber = (this.m_Number+"")[i];  
            //設置要顯示數字的紋理區域，這個區域是指參數中paramTexture中區域  
            var stRect = new cc.rect(iNumber * iNumWidth, 0, iNumWidth, iNumHeight);  
            pSprite.setTextureRect(stRect, false, cc.size(stRect.width, stRect.height));  
            pSprite.setPosition(i * iNumWidth, 0);                //計算顯示的偏移位置  
            pSprite.visit(); //渲染到pRT中  
        }  
        pRT.end();  
        //取得生成的紋理  
        this.setTexture(pRT.getSprite().getTexture());  
        //設置顯示的內容  
        var stRect = new cc.rect(0, 0, iNumWidth * iNumCount, iNumHeight);  
        this.setTextureRect(stRect, false, cc.size(stRect.width, stRect.height));  
        //默認的情況下，通過CCRenderTexture得到的紋理是倒立的，這里需要做一下翻轉  
        this.setFlippedY(true);  
    },  
      
    setNumber:function(paramNumber){  
        this.m_Number = paramNumber;  
    },  
    getNumber:function(){  
        return this.m_Number;  
    },  
    setNumberTexture:function(paramTexture)  
    {  
        this.m_NumberTexture = paramTexture;  
    }  
});  

使用方法：

var pNum = new PictureNumber();  
pNum.buildNumber(1234567, "res/number.png");  
pNum.setPosition(200, 200);  
pNum.setAnchorPoint(0, 0); 

運行如下：

 

RenderTexture用法2：刮刮樂效果

主要代碼如下：

var HelloWorldLayer = cc.Layer.extend({  
    sprite:null,  
    pEraser:null,  
    pRTex:null,  
      
    ctor:function () {  
        //////////////////////////////  
        // 1. super init first  
        this._super();  
  
        var size = cc.winSize;  
  
        // add a "close" icon to exit the progress. it's an autorelease object  
        var closeItem = new cc.MenuItemImage(  
            res.CloseNormal_png,  
            res.CloseSelected_png,  
            function () {  
                cc.log("Menu is clicked!");  
            }, this);  
        closeItem.attr({  
            x: size.width - 20,  
            y: 20,  
            anchorX: 0.5,  
            anchorY: 0.5  
        });  
  
        var menu = new cc.Menu(closeItem);  
        menu.x = 0;  
        menu.y = 0;  
        this.addChild(menu, 1);  
  
        /////////////////////////////  
        // 3. add your codes below...  
        // add a label shows "Hello World"  
        // create and initialize a label  
        var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38);  
        // position the label on the center of the screen  
        helloLabel.x = size.width / 2;  
        helloLabel.y = size.height / 2;  
        // add the label as a child to this layer  
        this.addChild(helloLabel, 5);  
  
        // hello world 背景圖片  
        this.sprite = new cc.Sprite(res.HelloWorld_png);  
        this.sprite.attr({  
            x: size.width / 2,  
            y: size.height / 2,  
        });  
        this.addChild(this.sprite, 0);  
          
        //橡皮擦  
        this.pEraser = new cc.DrawNode();     
        this.pEraser.drawDot(cc.p(0, 0), 20, cc.color(255, 255, 255, 0));  
        this.pEraser.retain();  
          
        //通過pRTex實現橡皮擦  
        this.pRTex = new cc.RenderTexture(size.width,size.height);  
        this.pRTex.setPosition(size.width/2, size.height/2);  
        this.addChild(this.pRTex, 10);  
          
        //加載等待被擦除的圖片  
        var pBg = new cc.Sprite(res.dirt_png);  
        pBg.setPosition(size.width/2, size.height/2);  
        this.pRTex.begin();  
        pBg.visit();  
        this.pRTex.end();  
  
          
          
        cc.eventManager.addListener({             
            event: cc.EventListener.TOUCH_ONE_BY_ONE,         
            onTouchBegan:function(touches, event){  
                cc.log("start");  
                var target = event.getCurrentTarget();  
                return true;  
            },            
            onTouchMoved:function (touch, event) {  
                var target = event.getCurrentTarget();  
                target.pEraser.setPosition(touch.getLocation());  
                target.eraseByBlend();  
            }  
        }, this);  
          
        return true;  
    },  
      
    eraseByBlend :function()  
    {  

　　　　　　//橡皮檫圖片中間透明的圖。  BlendFunc為 cc.blendFunc(cc.ZERO, cc.SRC_ALPHA)

　　　　　　//如果是實心外透明  BlendFunc為 cc.blendFunc(cc.ZERO, cc.ONE_MINUS_SRC_ALPHA)

this.pEraser.setBlendFunc(cc.ONE_MINUS_SRC_ALPHA, cc.ZERO);    
        this.pRTex.begin();  
        this.pEraser.visit();  
        this.pRTex.end();  
    }  
      
}); 

運行效果如下：