1. 程式人生 > >cocos2d-x 製作透明遮罩

cocos2d-x 製作透明遮罩

  我們將使用這張圖片來給我們的日曆圖片新增一個邊框,是那種帶有波紋效果的邊框,而不是四邊形的。這張圖片透明的部分,就是遮罩效果的部分,而白色區域則是日曆圖片會顯示的區域。

    為了實現這個效果,我們將使用OpenGL的混合模式。

    如果你回過頭去看《如何使用CCRenderTexture來動態建立紋理》這篇教程的話,我們在那裡討論過OpenGL的混合模式。我在那裡提到過一個非常方便的線上工具可以用來可見化調節混合模式的效果。

    為了完成我們想要的效果,我們需要採取下面的策略:

  1. 我們首先渲染mask精靈,把src color(就是mask精靈)設定為GL_ONE,並且把destination color(一個空的buffer)設定為GL_ZERO。所以,效果就是簡單的把mask圖片顯示來。
  2. 接下來,我們渲染日曆圖片精靈。把src color(日曆)設定為GL_DST_ALPHA。意思是,看看mask圖片的當前alpha值是多少,如果是0(完全透明),,那麼就顯示日曆圖片。如果是1(完全不透明)那麼就顯示mask的。(譯者注:如果大家對此不明白,可以參考這個連結)。然後把dst color(the mask)設計成GL_ZERO,這樣的話,之前渲染上去的mask就消失了。

建立一個乾淨的“黑板”,然後在那執行1,2步來製作一個遮罩紋理。很幸運的是,用CCRenderTexture非常方便。

Masking and CCRenderTexture

    CCRenderTexture是一個這樣的類,它可以讓你在螢幕之外的buffer裡面渲染。

    它用起來非常方便,主要有以下原因---你可以使用它來給你的遊戲截圖,可以高效地快取使用者渲染的內容,可以在執行時動態地建立sprite sheet,或者,就像本教程中一樣,可以製作一個mask sprite。

    為了使用CCRenderTexture,你需要採取以下4步:

  1. 建立CCRenderTexture類,以畫素為單位,指定你想要繪製的紋理的寬度和高度.
  2. 呼叫CCRenderTexture的begin方法來初始化渲染操作。
  3. 呼叫OpenGL函式來繪製實際的內容--但是,這些OpenGL呼叫最終都會繪製到螢幕之外去,而不會影響遊戲中現在渲染的影象。
  4. 呼叫CCRenderTexture的end方法來結束繪製操作。一旦你完成之後,CCRenderTexture有一個sprite屬性,你可以把它當用CCSprite來用。

  不要覺得第3步很奇怪---因為你正在使用cocos2d,90%的情況你是不需要手動直接呼叫OpenGL函式的。但是,如果你想渲染一個節點的話,你可以直接呼叫某一個節點的visit方法,如[sprite visit],然後這個函式會自動為你發射一些OpenGL函式指標給圖形硬體去顯示。

  這裡有一點需要注意的就是座標問題。(0,0)點是渲染的紋理的左下角位置,所以,你在使用CCRenderTexture的時候,一定要把座標設定對。

    好了,你可能聽得有些煩了,程式設計師還是喜歡看程式碼的。好,讓我們開始coding吧!