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

標籤：span   精靈   使用方法   getc   event   str   cto   border   manage   

【轉】http://blog.csdn.net/realcrazysun1/article/details/42393629

本文基於cocos2d-js 3.0版本引擎開發

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()    {        this.pEraser.setBlendFunc(cc.GL_ONE_MINUS_SRC_ALPHA, cc.ZERO);             this.pRTex.begin();        this.pEraser.visit();        this.pRTex.end();    }    });

運行效果如下：

 

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