顯示具有 ClippingNode 標籤的文章。 顯示所有文章
顯示具有 ClippingNode 標籤的文章。 顯示所有文章

2016年12月29日 星期四

1229 cocos2d-x 圖檔 遮罩 使用ClippingRectangleNode

範例
auto clipperNode = ClippingRectangleNode::create();
//設定遮罩位置
auto nodePoint2 = sprHead->convertToNodeSpace(Vec2(LBLobby_LvevlPho.x, G_WinSize.height - LBLobby_LvevlPho.y));
//不用setAnchorPoint 因為node 沒有 AnchorPoint 概念
 clipperNode->setPosition(nodePoint2);  
 sprHead->addChild(clipperNode, 4);  //加入主程式中


    saveNode(LBITEMUP_CLI_LvBlue, clipperNode); //將她額外記錄在Vector 日後直接取出不用TAG
//載入底板
    auto spriteBlue = Sprite::createWithSpriteFrameName(LBLobby_LvevlPho.name);
//依樣設定好位置 這裡不用Vec2::Zero 因為一直會貼錯 所以改為用convertToNodeSpace 計算位置
    nodePoint2 = clipperNode->convertToNodeSpace(Vec2(LBLobby_LvevlPho.x, G_WinSize.height - LBLobby_LvevlPho.y));
    spriteBlue->setAnchorPoint(Vec2::ANCHOR_TOP_LEFT);
    spriteBlue->setPosition(nodePoint2);
    clipperNode->addChild(spriteBlue);

//設定要顯示的部分
    auto NewRect = spriteBlue->getBoundingBox();
    clipperNode->setClippingRegion(Rect(NewRect.origin.x, NewRect.origin.y, NewRect.size.width*0.5, NewRect.size.height));

日後修改方式

//LV BAR 比列0~100%
void PageCommand::ReleaseUI_LvBar(float scale)
{
    auto clipping = dynamic_cast<ClippingRectangleNode*>(getNode(LBITEMUP_CLI_LvBlue));  
    auto sprite = dynamic_cast<Sprite*>(getNode(LBLobby_LvevlPho));
    auto rect = sprite->getBoundingBox().size;
    auto site = clipping->getClippingRegion().origin;
    //float scale = 0.01f*parter;
    clipping->setClippingRegion(Rect(site.x, site.y, rect.width*scale, rect.height));
}

相關參考資料



http://blog.csdn.net/u010010184/article/details/42803971


在Cocos2d-x 的3.3 版本中，添加了一個新類 ClippingRectangleNode，此類與ClippingNode，均有裁剪作用。兩個類做裁剪時有不同的適用背景。區別如下：


  ClippingRectangleNode
  ClippingNode
  裁剪區域
  只能為矩形
  任意圖形
  效率
  高
  低，使用較多時，容易導致低端機掉幀
  適用場景  
  出現數量較多，且對裁剪圖形要求不高時  
  出現數量少，對裁剪區域要求較高時。（例如遊戲新手引導）
  靈活性
  使用簡單，靈活性低
  較為靈活

在使用過程中，發現一個ClippingRectangleNode的bug，該bug導致ClippingRectangleNode或是其上層節點有進行縮放時，會使ClippingRectangleNode的裁剪區域變得異常。
相關代碼如下：
[cpp] view plain copy
  1. void ClippingRectangleNode::onBeforeVisitScissor()  
  2. {  
  3.     if (_clippingEnabled) {  
  4.         glEnable(GL_SCISSOR_TEST);  
  5.           
  6.         float scaleX = _scaleX;  
  7.         float scaleY = _scaleY;  
  8.         Node *parent = this->getParent();  
  9.         while (parent) {  
  10.             scaleX *= parent->getScaleX();  
  11.             scaleY *= parent->getScaleY();  
  12.             parent = parent->getParent();  
  13.         }  
  14.           
  15.         const Point pos = convertToWorldSpace(Point(_clippingRegion.origin.x, _clippingRegion.origin.y));<span style="white-space:pre">   </span>// 將裁剪區域的原點轉為世界坐標系  
  16.         GLView* glView = Director::getInstance()->getOpenGLView();  
  17.         glView->setScissorInPoints(pos.x * scaleX,  
  18.                                    pos.y * scaleY,  
  19.                                    _clippingRegion.size.width * scaleX,  
  20.                                    _clippingRegion.size.height * scaleY);  
  21.   
  22.     }  
  23. }  

開發人員在將裁剪區域的原點正確的轉為世界坐標系之後， 又乘了scaleX 和 scaleY， 這就導致裁剪區域的原點變得不正常了。 （converToWorldSpace在轉換pos時用的變化矩陣已將scale值計算過一次）
修改方法即將
[cpp] view plain copy
  1. glView->setScissorInPoints(pos.x * scaleX,  
  2.                            pos.y * scaleY,  
  3.                            _clippingRegion.size.width * scaleX,  
  4.                            _clippingRegion.size.height * scaleY);  
改為
[cpp] view plain copy
  1. glView->setScissorInPoints(pos.x,  
  2.                            pos.y,  
  3.                            _clippingRegion.size.width * scaleX,  
  4.                            _clippingRegion.size.height * scaleY);  

裁剪區域就正常了。
於 沒有留言:
標籤： ,

2016年5月17日 星期二

0517 不錯文章備份 Cocos2d-x 3.2：通過ClippingNode實現一個功能完善的跑馬燈公告（2）

Cocos2d-x 3.2：通過ClippingNode實現一個功能完善的跑馬燈公告（2）

本文的主要內容是根據跑馬燈解析ClippingNode實現原理。本文涉及到Cocos2d-x 3.x的渲染機制以及部分opengl的知識。
首先看看上一篇文章中說到的跑馬燈的簡單實現：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//設置模板    
auto stencil = Sprite::create();    
//設置顯示區域大小    
stencil->setTextureRect(Rect(0, 0, 50, 30));    
     
//設置跑馬燈文字    
auto text = Label::createWithSystemFont("-1dasdasdasd efadaewfevgds dfhrthrbgrg1-", "", 24);    
//設置錨點    
text->setAnchorPoint(Vec2::ANCHOR_MIDDLE_LEFT);    
     
//創建裁剪節點    
auto clippingNode = ClippingNode::create(stencil);    
//設置節點位置    
clippingNode->setPosition(Vec2(700, 400));    
//顯示模板內的內容    
clippingNode->setInverted(false);    
//添加顯示內容    
clippingNode->addChild(text, 2);    
//加入到UI樹    
addChild(clippingNode);

1.跑馬燈代碼分析
從創建裁剪節點這裡開始分析
1
2
//創建裁剪節點    
auto clippingNode = ClippingNode::create(stencil);
這一句話實現了怎麼樣的功能呢？走進去看看（create函數中，實際上調用的是init函數，所以這裡就直接展示init函數了）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
bool ClippingNode::init(Node *stencil)  
{  
    CC_SAFE_RELEASE(_stencil);  
    _stencil = stencil;  
    CC_SAFE_RETAIN(_stencil);  
       
    _alphaThreshold = 1;  
    _inverted = false;  
    // get (only once) the number of bits of the stencil buffer  
    static bool once = true;  
    if (once)  
    {  
        glGetIntegerv(GL_STENCIL_BITS, &g_sStencilBits);  
        if (g_sStencilBits <= 0)  
        {  
            CCLOG("Stencil buffer is not enabled.");  
        }  
        once = false;  
    }  
       
    return true;  
}
首先設置_stencil ，這裡實際上與setStencil方法一樣的（在上文有說過這個方法的作用）
1
2
3
4
5
6
void ClippingNode::setStencil(Node *stencil)  
{  
    CC_SAFE_RETAIN(stencil);  
    CC_SAFE_RELEASE(_stencil);  
    _stencil = stencil;  
}
然後設置_alphaThreshold ，實際上與setAlphaThreshold是一樣的（在上文有說過這個方法的作用）
1
2
3
4
void ClippingNode::setAlphaThreshold(GLfloat alphaThreshold)  
{  
    _alphaThreshold = alphaThreshold;  
}
其次設置_inverted ，實際上與setInverted方法是一樣的（在上文有說過這個方法的作用）
1
2
3
4
void ClippingNode::setInverted(bool inverted)  
{  
    _inverted = inverted;  
}
然後調用一個opengl的API，
1
glGetIntegerv(GL_STENCIL_BITS, &g_sStencilBits);
從邏輯上可以看到這個API在類第一次被創建的時候才會調用。那麼這個方法的作用是什麼呢，他的作用是將模板緩存中的每一個像素的位數賦值給g_sStencilBits，如果這個值小於0，說明不支持模板緩存。模板緩存的作用就是將繪圖的範圍限定在屏幕的固定區域，這個區域可以是一個複雜的圖形，這個區域稱之為繪圖模板。
此時，已經將跑馬燈的實現代碼分析得差不多了，接下來看看具體的渲染部分。

2.渲染代碼分析
根據Cocos2d-x的渲染機制，渲染部分從visit函數開始分析。以下是visit的實現代碼
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
void ClippingNode::visit(Renderer *renderer, const Mat4 &parentTransform, uint32_t parentFlags)  
{  
    if(!_visible)  
        return;  
       
    //父節點坐標轉換  
    uint32_t flags = processParentFlags(parentTransform, parentFlags);  
   
    //設置gl使用的矩陣類型  
    Director* director = Director::getInstance();  
    CCASSERT(nullptr != director, "Director is null when seting matrix stack");  
    director->pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);  
    director->loadMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW, _modelViewTransform);  
   
    //使用組渲染指令  
    _groupCommand.init(_globalZOrder);  
    renderer->addCommand(&_groupCommand);  
    //下面的渲染指令都會加入到組渲染指令中，一起渲染  
    renderer->pushGroup(_groupCommand.getRenderQueueID());  
   
    //渲染前 _beforeVisitCmd是一個自定義渲染指令（CustomCommand），  
    //作用就是在渲染的這個指令的時候，實際上執行的是ClippingNode::onBeforeVisit這個函數  
    _beforeVisitCmd.init(_globalZOrder);  
    _beforeVisitCmd.func = CC_CALLBACK_0(ClippingNode::onBeforeVisit, this);  
    renderer->addCommand(&_beforeVisitCmd);  
    //alpha測試（上文說到：Alpha測試的作用通過一句話解釋就是：所有像素的透明度值低於某個閥值的統統拋棄，不繪製到屏幕上。）  
    if (_alphaThreshold < 1)  
    {  
#if (CC_TARGET_PLATFORM == CC_PLATFORM_MAC || CC_TARGET_PLATFORM == CC_PLATFORM_WINDOWS || CC_TARGET_PLATFORM == CC_PLATFORM_LINUX)  
#else  
        //引擎提供GLProgram類來處理著色器相關操作  
        //下述代碼的具體作用就是將_alphaThreshold與alphaValueLocation關聯，然後將_stencil與著色器程序program關聯，  
        //著色器程序program的作用就是執行ALPHA_TEST  
        GLProgram *program = GLProgramCache::getInstance()->getGLProgram(GLProgram::SHADER_NAME_POSITION_TEXTURE_ALPHA_TEST_NO_MV);  
        GLint alphaValueLocation = glGetUniformLocation(program->getProgram(), GLProgram::UNIFORM_NAME_ALPHA_TEST_VALUE);  
        program->use();  
        program->setUniformLocationWith1f(alphaValueLocation, _alphaThreshold);  
        setProgram(_stencil, program);  
#endif  
   
    }  
    //渲染模板  
    _stencil->visit(renderer, _modelViewTransform, flags);  
       
    //渲染模板後  
    //作用就是在渲染的這個指令的時候，實際上執行的是ClippingNode::onAfterDrawStencil  
    _afterDrawStencilCmd.init(_globalZOrder);  
    _afterDrawStencilCmd.func = CC_CALLBACK_0(ClippingNode::onAfterDrawStencil, this);  
    renderer->addCommand(&_afterDrawStencilCmd);  
   
    //下面是渲染所有的子節點  
    int i = 0;  
    if(!_children.empty())  
    {  
        sortAllChildren();  
        // draw children zOrder < 0  
        for( ; i < _children.size(); i++ )  
        {  
            auto node = _children.at(i);  
               
            if ( node && node->getLocalZOrder() < 0 )  
                node->visit(renderer, _modelViewTransform, flags);  
            else  
                break;  
        }  
        // self draw  
        this->draw(renderer, _modelViewTransform, flags);  
           
        for(auto it=_children.cbegin()+i; it != _children.cend(); ++it)  
            (*it)->visit(renderer, _modelViewTransform, flags);  
    }  
    else  
    {  
        this->draw(renderer, _modelViewTransform, flags);  
    }  
   
    //渲染後  
    //作用就是在渲染的這個指令的時候，實際上執行的是ClippingNode::onAfterVisit  
    _afterVisitCmd.init(_globalZOrder);  
    _afterVisitCmd.func = CC_CALLBACK_0(ClippingNode::onAfterVisit, this);  
    renderer->addCommand(&_afterVisitCmd);  
   
    //將組渲染命令推出棧，作用是讓後續的渲染命令不加入到組渲染命令中  
    renderer->popGroup();  
   
    director->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);  
}
代碼中已經寫了比較多的解釋了，在這裡就只看代碼中出現了三個比較特殊的函數，分別是
1
2
3
ClippingNode::onBeforeVisit         //渲染前 首先執行  
ClippingNode::onAfterDrawStencil    //渲染模板後 其次  
ClippingNode::onAfterVisit          //渲染後 最後執行
首先開看看onBeforeVisit的實現
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
void ClippingNode::onBeforeVisit()  
{  
    // 靜態變量，用於記錄當前程序一共用到的模版緩衝遮罩數量。 每次渲染都會加1  
    s_layer++;  
   
    // 當前模版緩衝位的參數值  
    GLint mask_layer = 0x1 << s_layer;  
    // 模版緩衝位的參數值的掩碼  
    GLint mask_layer_l = mask_layer - 1;  
    // 上面兩個值做或運算的結果值  
    _mask_layer_le = mask_layer | mask_layer_l;  
   
    // 獲取是否使用模版緩衝  
    _currentStencilEnabled = glIsEnabled(GL_STENCIL_TEST);  
    // 取得一些參數，並且賦值給相關變量  
    glGetIntegerv(GL_STENCIL_WRITEMASK, (GLint *)&_currentStencilWriteMask);        //當前寫入的模板掩碼參數  
    glGetIntegerv(GL_STENCIL_FUNC, (GLint *)&_currentStencilFunc);                  //當前模板函數  
    glGetIntegerv(GL_STENCIL_REF, &_currentStencilRef);                             //當前模板參考值  
    glGetIntegerv(GL_STENCIL_VALUE_MASK, (GLint *)&_currentStencilValueMask);       //當前模板掩碼  
    glGetIntegerv(GL_STENCIL_FAIL, (GLint *)&_currentStencilFail);                  //當前模板測試失敗後的操作  
    glGetIntegerv(GL_STENCIL_PASS_DEPTH_FAIL, (GLint *)&_currentStencilPassDepthFail);  //當前模板測試通過，深度測試失敗後的操作  
    glGetIntegerv(GL_STENCIL_PASS_DEPTH_PASS, (GLint *)&_currentStencilPassDepthPass);  //當前模板測試通過，深度測試通過後的操作  
   
    // 開啟模板測試  
    glEnable(GL_STENCIL_TEST);  
    // 檢測開啟模板測試的時候是否存在OpenGL錯誤  
    CHECK_GL_ERROR_DEBUG();  
   
    // 設置模版緩衝的掩碼值    
    glStencilMask(mask_layer);  
   
    //取得是否可以寫入模版掩碼參數  
    glGetBooleanv(GL_DEPTH_WRITEMASK, &_currentDepthWriteMask);  
   
    // 禁止寫入深度緩衝  
    glDepthMask(GL_FALSE);  
   
    // 永遠不能通過測試  
    glStencilFunc(GL_NEVER, mask_layer, mask_layer);  
    // 根據是否反向運算來決定如果測試不能通過時是否將相應像素位置的模版緩衝位的值設為0。   
    glStencilOp(!_inverted ? GL_ZERO : GL_REPLACE, GL_KEEP, GL_KEEP);  
   
    // 用白色繪製一下屏幕矩形，因為都不能通過嘛，所以就全屏的模版緩衝位的值都被設為0  
    drawFullScreenQuadClearStencil();  
   
    // 永遠不能通過測試  
    glStencilFunc(GL_NEVER, mask_layer, mask_layer);  
    // 根據是否反向運算來決定如果測試不能通過時是否將相應像素位置的模版緩衝位的值設為當前參數值  
    glStencilOp(!_inverted ? GL_REPLACE : GL_ZERO, GL_KEEP, GL_KEEP);  
   
    // 如果需要alpha測試，並且是下述平台，則在這裡執行alpha測試，否則在visit函數中執行  
    if (_alphaThreshold < 1) {  
#if (CC_TARGET_PLATFORM == CC_PLATFORM_MAC || CC_TARGET_PLATFORM == CC_PLATFORM_WINDOWS || CC_TARGET_PLATFORM == CC_PLATFORM_LINUX)  
        // 獲取是否允許alpha測試  
        _currentAlphaTestEnabled = glIsEnabled(GL_ALPHA_TEST);  
        // 獲取一些參數  
        glGetIntegerv(GL_ALPHA_TEST_FUNC, (GLint *)&_currentAlphaTestFunc); //當前alpha測試函數  
        glGetFloatv(GL_ALPHA_TEST_REF, &_currentAlphaTestRef);              //當前alpha參考值  
        // 開啟alpha測試  
        glEnable(GL_ALPHA_TEST);  
        // 檢測開啟alpha測試的時候是否存在OpenGL錯誤  
        CHECK_GL_ERROR_DEBUG();  
        // 執行並且傳入參數  
        glAlphaFunc(GL_GREATER, _alphaThreshold);  
#else  
           
#endif  
    }  
   
    //Draw _stencil  
}
然後是onAfterDrawStencil
的實現：
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
void ClippingNode::onAfterDrawStencil()  
{  
    // 還原alpha測試狀態  
    if (_alphaThreshold < 1)  
    {  
#if (CC_TARGET_PLATFORM == CC_PLATFORM_MAC || CC_TARGET_PLATFORM == CC_PLATFORM_WINDOWS || CC_TARGET_PLATFORM == CC_PLATFORM_LINUX)  
        glAlphaFunc(_currentAlphaTestFunc, _currentAlphaTestRef);  
        if (!_currentAlphaTestEnabled)  
        {  
            glDisable(GL_ALPHA_TEST);  
        }  
#else  
// 在其他平台暫時沒有找到解決方法去還原狀態 233  
#endif  
    }  
   
    // 還原深度測試寫入狀態  
    glDepthMask(_currentDepthWriteMask);  
   
    // 這裡設置如果當前模版緩衝中的模版值與運算結果相等則保留相應像素  
    glStencilFunc(GL_EQUAL, _mask_layer_le, _mask_layer_le);  
    glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP);  
   
    // draw (according to the stencil test func) this node and its childs  
}
最後是onAfterVisit的實現
1
2
3
4
5
6
7
8
9
10
11
12
13
14
void ClippingNode::onAfterVisit()  
{  
    // 還原模板狀態  
    glStencilFunc(_currentStencilFunc, _currentStencilRef, _currentStencilValueMask);  
    glStencilOp(_currentStencilFail, _currentStencilPassDepthFail, _currentStencilPassDepthPass);  
    glStencilMask(_currentStencilWriteMask);  
    if (!_currentStencilEnabled)  
    {  
        glDisable(GL_STENCIL_TEST);  
    }  
   
    // 結束使用當前模版緩衝位數，就減1.以保證下次還能正常使用  
    s_layer--;  
}
本文涉及到許多關於opengl的相關知識，例如深度測試，模板測試，alpha測試等，以及著色器的使用、渲染機制等。

感謝本文筆者NxShow的分享，Cocos引擎中文官網歡迎更多的開發者分享開發經驗。來稿請發送至：support@cocos.org。    
於 沒有留言:
標籤： , , , ,
訂閱： 文章 (Atom)

cocos2dx-lua 建立滑鼠監聽

重要關鍵字  EVENT_MOUSE_SCROLL addEventListenerWithSceneGraphPriority      if IsPc() then --建立滑鼠監聽         local listener = cc.EventListenerMouse...

  • 0608 MAC空間不足 軟體介紹
    https://changeyu.wordpress.com/2015/03/25/%E4%BD%A0%E7%9A%84macbook-air%E7%B8%BD%E6%98%AF%E7%A9%BA%E9%96%93%E4%B8%8D%E5%A4%A0%E5%97%8E%EF%BC...
  • 0614 打包教學 IOS ADD HOC 教學
      http://kirkhsutw.blogspot.tw/2015/05/ios-ad-hoc.html [iOS] 第一次 Ad Hoc 就上手 之前都沒想過要用這個 Ad Hoc，這一次是因為用到了Dropbox API，在Submit被re...
  • 0630 vector 如何回傳比較好？
    答案：直接回傳   std :: vector < MyObj > myFunction (); C++: What is the best method to return a vector of objects from a function...