cocos2d-x添加遮罩【CCRenderTexture】

原创 2013年12月03日 09:19:11

CCRenderTexture,它允许你来动态创建纹理,并且可以在游戏中重用这些纹理。

使用 CCRenderTexture非常简单 – 你只需要做以下5步就行了:

  1. ①.创建一个新的CCRenderTexture:指定所要创建纹理的宽度和高度。
    ②.调用CCRenderTexture的begin方法:设置OpenGL以便之后的任何图形绘制都在CCRenderTexture上,而不是屏幕上。
    ③.绘制纹理:使用原始的OpenGL命令来绘制,或通过调用现有的Cocos2D对象的visit方法。
    ④.调用CCRenderTexture的end方法:渲染纹理,关闭绘制到纹理上。
    ⑤.以纹理创建一个新的精灵:以CCRenderTexture的getSprite()->getTexture()来创建一个新的精灵。
    注意这里不是调用CCRenderTexture:begin方法,而是调用一个更方便的方法beginWithClear,可以在绘制之前,用特定的颜色来清除纹理。

步骤如下:
1.新建Cocos2d-win32工程,工程名为"TinySeal",勾选"Box2D"选项(后续文章会使用到),勾选"Simple Audio Engine in Cocos Denshion"选项;
2.打开HelloWorldScene.cpp文件,在添加如下方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
CCSprite *HelloWorld::spriteWithColor(ccColor4F bgColor, float textureWidth, float textureHeight)
{
    // 1: Create new CCRenderTexture
    CCRenderTexture *rt = CCRenderTexture::create(textureWidth, textureHeight);

    // 2: Call CCRenderTexture:begin
    rt->beginWithClear(bgColor.r, bgColor.g, bgColor.b, bgColor.a);

    // 3: Draw into the texture
    // You'll add this later

    // 4: Call CCRenderTexture:end
    rt->end();

    // 5: Create a new Sprite from the texture
    return CCSprite::createWithTexture(rt->getSprite()->getTexture());
}

3.接着打开HelloWorldScene.h文件,添加如下代码: 

1
2
private:
    cocos2d::CCSprite *_background;

打开HelloWorldScene.cpp文件,在构造函数里添加如下代码: 

1
_background = NULL;

修改init函数为如下: 

1
2
3
4
5
6
7
8
9
10
11
12
bool HelloWorld::init()
{
    bool bRet = false;
    do 
    {
        CC_BREAK_IF(! CCLayer::init());

        bRet = true;
    } while (0);

    return bRet;
}

添加以下方法: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
ccColor4F HelloWorld::randomBrightColor()
{
    while (true)
    {
        float requiredBrightness = 192;
        ccColor4B randomColor = ccc4(rand() % 255,
                                     rand() % 255,
                                     rand() % 255,
                                     255);
        if (randomColor.r > requiredBrightness || 
            randomColor.g > requiredBrightness ||
            randomColor.b > requiredBrightness)
        {
            return ccc4FFromccc4B(randomColor);
        }
    }
}

void HelloWorld::genBackground()
{
    if (_background)
    {
        _background->removeFromParentAndCleanup(true);
    }

    ccColor4F bgColor = this->randomBrightColor();
    _background = this->spriteWithColor(bgColor, 512512);

    CCSize winSize = CCDirector::sharedDirector()->getWinSize();
    _background->setPosition(ccp(winSize.width / 2, winSize.height / 2));
    this->addChild(_background, -1);
}

void HelloWorld::onEnter()
{
    CCLayer::onEnter();
    this->genBackground();
    this->setTouchEnabled(true);
}

void HelloWorld::ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent)
{
    this->genBackground();
}

cocos2d-x添加遮罩【CCRenderTexture】


//===========Declaration Part==========================

  //首先声明一个显示精灵

  CCSprite* sprite = CCSprite::create("CloseNormal.png");
  //声明一个遮罩精灵
  CCSprite* maskSprite = CCSprite::create("CloseNormal.png");
  //maskSprite->setFlipY(false);
  //通过上面的两个精灵并结合maskedSpriteWithSprite方法创建一个完成遮罩效果的精灵!正是我们想要的!

  CCSprite* maskCal = maskedSpriteWithSprite(sprite, maskSprite);
  maskCal->setPosition( ccp(size.width/2, size.height/2) );
  addChild(maskCal);

//===========Declaration End===========================

 

CCSprite* HelloWorld::maskedSpriteWithSprite(CCSprite* srcSp,CCSprite* maskSp)
{
 //首先我们先来根据遮罩的大小来创建一个CCRenderTexture
 int w = maskSp->getContentSize().width * maskSp->getScaleX();
 int h = maskSp->getContentSize().height * maskSp->getScaleY();
 CCRenderTexture* rt = CCRenderTexture::renderTextureWithWidthAndHeight(w, h);

 //接下来设置srcSp和maskSp的位置
 maskSp->setPosition( ccp(maskSp->getContentSize().width *  maskSp->getScaleX()/2,
  maskSp->getContentSize().height * maskSp->getScaleY()/2));
 srcSp->setPosition( ccp(srcSp->getContentSize().width *  srcSp->getScaleX() /2,
  srcSp->getContentSize().height * srcSp->getScaleY()/2));

 //设置精灵的混合模式
 ccBlendFunc blendFunc;
 blendFunc.src = GL_ONE;
 blendFunc.dst = GL_ZERO;
 maskSp->setBlendFunc(blendFunc);

 blendFunc.src = GL_DST_ALPHA;   // mask图片的当前alpha值是多少,如果是0(完全透明),那么就显示mask的。如果是1(完全不透明)
 blendFunc.dst = GL_ZERO;    // maskSprite不可见
 srcSp->setBlendFunc(blendFunc);

 //开始rt中写入纹理
 rt->begin();
 maskSp->visit();
 srcSp->visit();
 rt->end();

 //利用纹理创建一个精灵!
 CCSprite* retval = CCSprite::spriteWithTexture(rt->getSprite()->getTexture());
 //retval->setFlipY(true);
 return retval;
}

 

以上是参考http://blog.sina.com.cn/s/blog_c2beacdd0101c0oj.html和http://blog.csdn.net/akof1314/article/details/9190901在此表示感谢原文作者

以下是在做一个项目中要实现一个擦除的圆去寻找动物的场景

在.h中添加

CCRenderTexture *renderTexture;

在.cpp中

void FindMediator::init(){

    Sprite_BG1 = new BBSprite(TAG_BG1,"FindAnimal/bg.png",_ccp_(FindAnimalScene.bg));

    Sprite_BG1->retain();

    

    Sprite_BG2 = new BBSprite(TAG_BG2,"FindAnimal/bg2.png",_ccp_(FindAnimalScene.bg));

    getView()->addChild(Sprite_BG2,-1);

    

    animalArray = CCArray::create();

    animalArray->retain();

    //增加5种动物,蝙蝠,猴子,猫,猫头鹰,青蛙

    for (int i=1; i<6; i++) {

        FindSprite *animals = new FindSprite(this,("FindAnimal/animals.plist@" +$str(i)+$str(".png")),i,_ccp("FindAnimalScene.animal"+$str(i)));

        getView()->addChild(animals, i, TAG_ANIMAL+i);

//        animals->setVisible(false);

        animalArray->addObject(animals);

    }

    

    finderSprite =new BBSprite("FindAnimal/colorBg.png",_ccp_(FindAnimalScene.bg));

    getView()->addChild(finderSprite);

    finderSprite->setZOrder(11111);

    finderSprite->setOpacity(230);

    finderSprite->setVisible(false);

//    finderSprite->setAnchorPoint(CCPoint(0.53, 0.46));

    tempSprite = new BBSprite("FindAnimal/xiantou_quan.png",_ccp_(FindAnimalScene.temp));

    finderSprite->addChild(tempSprite);

    

    BBSharePre::setBool("isExisted", true);

    this->addAnimalsAction();

    this->addButton();

    this->schedule(schedule_selector(FindMediator::addAnimalsAction), 5.0);

    

    

    

    

    

    //*******************************************

    renderTexture = CCRenderTexture::create(1024, 768);

    renderTexture->setPosition(_ccp_(FindAnimalScene.bg));

    renderTexture->getSprite()->setBlendFunc((ccBlendFunc) { GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA });

    getView()->addChild(renderTexture,999);

    

    

    brushSprite = new BBSprite("FindAnimal/temp.png",_ccp_(FindAnimalScene.bg));

    brushSprite->retain();

    brushSprite->setBlendFunc((ccBlendFunc) { GL_ZERO, GL_ONE_MINUS_SRC_ALPHA });

    

    renderTexture->clear(0.0f, 0.0f, 0.0f, 0.0f);

    renderTexture->begin();

    Sprite_BG1->visit();

    brushSprite->visit();

    renderTexture->end();

    

}



cocos2d-x 菜单选项卡、遮罩层

#include "GameScene.h" GameScene::GameScene(){ } GameScene::~GameScene(){ } bool GameScene::init(){ ...
  • wxc734809128
  • wxc734809128
  • 2014年03月10日 17:26
  • 1871

Cocos2dx-lua制作遮罩

cocos2dx的资源文件有两种存在方式(只代表我在实战项目中用到的):单个图片文件和plist文件 因项目原因一个项目中两种资源形式并存,所以在生成CCSprite时,涉及两种构建的方式,构建cc...
  • marunshengabc
  • marunshengabc
  • 2015年03月27日 14:45
  • 1322

cocos2d-x节点(CCRenderTexture.h)API

本文来自http://blog.csdn.net/runaying ,引用必须注明出处! cocos2d-x节点(CCRenderTexture.h)API 温馨提醒:为了大家能更好学习,强烈推...
  • runaying
  • runaying
  • 2013年12月03日 15:07
  • 1439

Cocos2d-x使用ClippingNode实现遮罩效果

关于ClippingNode 以下解析来自官方文档:http://cn.cocos2d-x.org/doc/cocos2d-x-3.0/d2/d06/classcocos2d_1_1_clippi...
  • linchaolong
  • linchaolong
  • 2014年10月15日 09:46
  • 2854

【玩转cocos2d-x之二十九】利用CCClipingNode做游戏遮罩

新手引导是游戏中必备的(除了奇葩的MT用一段动画开始),也是玩家对游戏的第一印象,重要性不言而喻。一般采用的遮罩的形式来突出引导重点,同时屏蔽其他功能。这里简单的介绍一下游戏遮罩的实现,并给出一个示例...
  • jackyvincefu
  • jackyvincefu
  • 2013年12月06日 10:33
  • 11566

cocos2d-x CCClippingNode遮罩实现手电筒效果

cocos2d-x CCClippingNode遮罩实现手电筒效果 http://www.firedragonpzy.com.cn/index.php/archives/3810 ...
  • oMingZi12345678
  • oMingZi12345678
  • 2014年05月07日 19:13
  • 1265

cocos2d-x CCRenderTexture

转自:http://blog.csdn.net/bill_man/article/details/7250911 1.CCRenderTexture 在j2me的手游写法中,我们一般是开一个线程,...
  • gf771115
  • gf771115
  • 2013年05月09日 13:48
  • 1059

cocos2d-x 制作透明遮罩

在新公司的游戏项目中做新手引导..其中指定某些范围是亮的 其余地方都是暗的示意玩家去点击这个区域... 在网上找到 CCRenderTexture 很方便的就能实现 记录下这段学习历程 效...
  • azymq
  • azymq
  • 2013年09月05日 10:13
  • 2267

quick-cocos2d-x 實現遮罩并實踐運用

实现遮罩的最经常使用的两个方式
  • longolder
  • longolder
  • 2014年07月14日 23:33
  • 1720

cocos2d-x利用ClipingNode做游戏遮罩制作新手引导

原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/17160973 新手引导是游戏中必备的(除了奇葩的MT用...
  • x1426096761
  • x1426096761
  • 2016年02月10日 20:05
  • 1698
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cocos2d-x添加遮罩【CCRenderTexture】
举报原因:
原因补充:

(最多只允许输入30个字)