[cocos2d-js]cc.RenderTexture几种用法(数字图片、刮刮乐效果)

概述本文基于cocos2d-js 3.0版本引擎开发 RenderTexture用法1：数字图片 通过这张图片实现任意数字 //数字图片精灵 var PictureNumber = cc.Sprite.extend({ m_Number:null, m_NumberTexture:null, ctor:function(){ this._super(); }, buildNumbe

本文基于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,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,iNumWIDth * iNumCount,iNumHeight);		this.setTextureRect(stRect,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,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几种用法(数字图片、刮刮乐效果)全部内容，希望文章能够帮你解决[cocos2d-js]cc.RenderTexture几种用法(数字图片、刮刮乐效果)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。