Cocos2d-x可擦除的Layer：ErasableLayer

說明

ErasableLayer是一個可擦除的Layer，可實現相似橡皮擦、刮獎等效果。原理是經過顏色混合實現的。關於顏色混合可查看這篇文章（點擊查看）。

 

測試環境：Cocos2d-x v3.三、Cocos2d-x v3.5

 

源碼下載：ErasableLayer.zip

 

源碼

ErasableLayer.cpp

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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147

#include "ErasableLayer.h"   ErasableLayer::ErasableLayer() :isErasable_( true ) { }   ErasableLayer::~ErasableLayer() {      CC_SAFE_RELEASE(layer_);      CC_SAFE_RELEASE(erasa_); }    ErasableLayer* ErasableLayer::create( const  char * layerPath,  const  char * erasaPath){      CCSprite* layer = CCSprite::create(layerPath);      CCSprite* erasa = CCSprite::create(erasaPath);        ErasableLayer* ret =  new  ErasableLayer;      if  (ret->init(layer, erasa))      {          ret->autorelease();          return  ret;      }      delete  ret;      return  nullptr; }   ErasableLayer* ErasableLayer::create(Node* layer, Sprite* erasa){        ErasableLayer* ret =  new  ErasableLayer;      if  (ret->init(layer, erasa))      {          ret->autorelease();          return  ret;      }      delete  ret;      return  nullptr; }   ErasableLayer* ErasableLayer::create(Node* layer,  const  char * erasaPath){      CCSprite* erasa = CCSprite::create(erasaPath);      ErasableLayer* ret =  new  ErasableLayer;      if  (ret->init(layer, erasa))      {          ret->autorelease();          return  ret;      }      delete  ret;      return  nullptr; }   ErasableLayer* ErasableLayer::create( const  char * layerPath, Sprite* erasa){      CCSprite* layer = CCSprite::create(layerPath);        ErasableLayer* ret =  new  ErasableLayer;      if  (ret->init(layer, erasa))      {          ret->autorelease();          return  ret;      }      delete  ret;      return  nullptr; }   bool  ErasableLayer::init(Node *layer, Sprite* erasa){        if  (!Layer::init())      {          return  false ;      }        layer_ = layer;      erasa_ = erasa;        layer_->retain();      erasa_->retain();        this ->setContentSize(layer_->getContentSize());        // 設置顏色混合模式      BlendFunc erasaBf = { GL_ZERO, GL_ONE_MINUS_SRC_ALPHA };  //源因子：值爲0，橡皮擦顏色爲透明；目標因子：目標顏色透明度減去源顏色的透明度      erasa_->setBlendFunc(erasaBf);        auto size = layer_->getContentSize();      rt_ = RenderTexture::create(size.width, size.height);      rt_->setAnchorPoint(Vec2(0, 0));      rt_->setPosition(Vec2(size.width/2, size.height/2));      this ->addChild(rt_);        clear();        schedule(CC_SCHEDULE_SELECTOR(ErasableLayer::tick));        // 觸摸事件      auto listener = EventListenerTouchOneByOne::create();      listener->onTouchBegan = CC_CALLBACK_2(ErasableLayer::onTouchBegan,  this );      listener->onTouchMoved = CC_CALLBACK_2(ErasableLayer::onTouchesMoved,  this );      listener->onTouchEnded = CC_CALLBACK_2(ErasableLayer::onTouchEnded,  this );      _eventDispatcher->addEventListenerWithSceneGraphPriority(listener,  this );      listener->setSwallowTouches( false );        return  true ; }     void  ErasableLayer::tick( float ){      if  (!isErasable_)      {          return ;      }            // 設置源顏色alpha值爲最大值，目標顏色alpha值減去源顏色alpha值後就爲0了，混合出來的效果就變透明瞭，這樣就實現了橡皮擦效果了。      erasa_->setOpacity(255);        // 更新RenderTexture      rt_->begin();            // 繪製      erasa_->visit();        rt_->end(); }   void  ErasableLayer::clear(){      layer_->setAnchorPoint(Vec2(0, 0));      layer_->setPosition(Vec2(0, 0));        rt_->begin();      layer_->visit();      rt_->end(); }   void  ErasableLayer::setErasable( bool  flag){      isErasable_ = flag; }   bool  ErasableLayer::onTouchBegan(Touch* touch, Event  *event) {      erasa_->setPosition( this ->convertToNodeSpace(touch->getLocation()));      return  true ; } void  ErasableLayer::onTouchesMoved(Touch* touch, Event  *event){      erasa_->setPosition( this ->convertToNodeSpace(touch->getLocation())); } void  ErasableLayer::onTouchEnded(Touch* touch, Event  *event) {      erasa_->setPosition( this ->convertToNodeSpace(touch->getLocation())); }

ErasableLayer.h

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

#ifndef __ERASABLELAYER_H__ #define __ERASABLELAYER_H__   #include "cocos2d.h"   USING_NS_CC;   // http://blog.csdn.net/linchaolong // 可擦除的Layer class  ErasableLayer : public  Layer {      public :      // 建立ErasableLayer      //1.遮罩層      //2.橡皮擦（能夠是Sprite或者紋理的路徑）      static  ErasableLayer* create( const  char * layerPath,  const  char * erasaPath);      static  ErasableLayer* create(Node *layer, Sprite* erasa);      static  ErasableLayer* create(Node *layer,  const  char * erasaPath);      static  ErasableLayer* create( const  char * layerPath, Sprite* erasa);        // 還原      void  clear();      // 是否可擦除      void  setErasable( bool );        bool  onTouchBegan(Touch* touch, Event  *event);      void  onTouchesMoved(Touch* touch, Event *event);      void  onTouchEnded(Touch* touch, Event  *event);      protected :      ErasableLayer();      ~ErasableLayer();        bool  init(Node *layer, Sprite* erasa);      void  tick( float );      private :      Node* layer_;      Sprite* erasa_;      bool  isErasable_;      RenderTexture* rt_; };   #endif

調用示例代碼.cpp

1 2 3 4 5 6 7 8 9 10

// 調用示例   // 遮罩層 auto maskLayer = LayerColor::create(Color4B(0,0,255,200)); maskLayer->setContentSize(sprite->getContentSize());   // 建立可擦除的Layer auto layer = ErasableLayer::create(maskLayer,  "eraser.png" ); layer->setPosition(Vec2(visibleSize.width / 4, visibleSize.height / 4)); this ->addChild(layer);

這裏建立了一個藍色的LayerColor，並擦除該Layer。

 

 

http://cn.cocos2d-x.org/tutorial/show?id=2790