cocos2d-x 繪制基本圖元

轉自：http://4137613.blog.51cto.com/4127613/754729

第一部分：基本圖形繪制

 

cocos2dx封裝了大量opengl函數，用於快速繪制基本圖形，這些代碼的例子在，tests\DrawPrimitivesTest目錄下

 

注意，該方法是重載node的draw方法實現的，在智能機上，並不推薦直接繪制幾何圖形，因為大量的坐標編碼會極大降低工作效率，應盡量使用Image。而且cocos2dx的渲染機制會造成前后遮擋問題，尤其是幾何圖形與圖片等其他node混合繪制時。

void DrawPrimitivesTest::draw() 
{ 
    CCLayer::draw(); 

    CCSize s = CCDirector::sharedDirector()->getWinSize(); 
         
        // draw a simple line 
        // The default state is: 
        // Line Width: 1 
        // color: 255,255,255,255 (white, non-transparent) 
        // Anti-Aliased 
        glEnable(GL_LINE_SMOOTH); 
        ccDrawLine( CCPointMake(0, 0), CCPointMake(s.width, s.height) ); 
         
        // line: color, width, aliased 
        // glLineWidth > 1 and GL_LINE_SMOOTH are not compatible 
        //注意：線寬>1 則不支持GL_LINE_SMOOTH 
        // GL_SMOOTH_LINE_WIDTH_RANGE = (1,1) on iPhone 
        glDisable(GL_LINE_SMOOTH); 
        glLineWidth( 5.0f ); 
        /*glColor4ub(255,0,0,255);*/ 
        glColor4f(1.0, 0.0, 0.0, 1.0); 
        ccDrawLine( CCPointMake(0, s.height), CCPointMake(s.width, 0) ); 
 
        // TIP: 
        // If you are going to use always the same color or width, you don't 
        // need to call it before every draw 
        // 
        // Remember: OpenGL is a state-machine. 
         
        // draw big point in the center 
        // 注意：cocos2dx繪制的是方塊點 
        glPointSize(64); 
        /*glColor4ub(0,0,255,128);*/ 
        glColor4f(0.0, 0.0, 1.0, 0.5); 
        ccDrawPoint( CCPointMake(s.width / 2, s.height / 2) ); 
         
        // draw 4 small points 
        // 注意：cocos2dx繪制的是方塊點 
        CCPoint points[] = { CCPointMake(60,60), CCPointMake(70,70), CCPointMake(60,70), CCPointMake(70,60) }; 
        glPointSize(4); 
        /*glColor4ub(0,255,255,255);*/ 
        glColor4f(0.0, 1.0, 1.0, 1.0); 
        ccDrawPoints( points, 4); 
         
        // draw a green circle with 10 segments 
        glLineWidth(16); 
        /*glColor4ub(0, 255, 0, 255);*/ 
        glColor4f(0.0, 1.0, 0.0, 1.0); 
       //參數依次是：中心點，半徑，角度，分段數，是否連接中心點 
        ccDrawCircle( CCPointMake(s.width/2,  s.height/2), 100, 0, 10, false); 
 
        // draw a green circle with 50 segments with line to center 
        glLineWidth(2); 
        /*glColor4ub(0, 255, 255, 255);*/ 
        glColor4f(0.0, 1.0, 1.0, 1.0); 
        ccDrawCircle( CCPointMake(s.width/2, s.height/2), 50, CC_DEGREES_TO_RADIANS(90), 50, true);   
         
        // open yellow poly 
        /*glColor4ub(255, 255, 0, 255);*/ 
        glColor4f(1.0, 1.0, 0.0, 1.0); 
        glLineWidth(10); 
        CCPoint vertices[] = { CCPointMake(0,0), CCPointMake(50,50), CCPointMake(100,50), CCPointMake(100,100), CCPointMake(50,100) }; 
        //參數依次是：點數組，點數量，是否封閉 
        ccDrawPoly( vertices, 5, false); 
         
        // closed purple poly 
        /*glColor4ub(255, 0, 255, 255);*/ 
        glColor4f(1.0, 0.0, 1.0, 1.0); 
        glLineWidth(2); 
        CCPoint vertices2[] = { CCPointMake(30,130), CCPointMake(30,230), CCPointMake(50,200) }; 
        ccDrawPoly( vertices2, 3, true); 
         
        // draw quad bezier path 
          //繪制有一個控制點的貝塞爾曲線 
       ccDrawQuadBezier(CCPointMake(0,s.height), CCPointMake(s.width/2,s.height/2), CCPointMake(s.width,s.height), 50); 

       // draw cubic bezier path 
       //繪制有兩個控制點的貝塞爾曲線 
       ccDrawCubicBezier(CCPointMake(s.width/2, s.height/2), CCPointMake(s.width/2+30,s.height/2+50), CCPointMake(s.width/2+60,s.height/2-50),CCPointMake(s.width, s.height/2),100); 
 
        //恢復opengl的正常參數 
        // restore original values 
        glLineWidth(1); 
        /*glColor4ub(255,255,255,255);*/ 
        glColor4f(1.0, 1.0, 1.0, 1.0); 
        glPointSize(1); 
} 

第二部分：字符串繪制

 

#1 cocos2dx的字符串繪制使用的是Label，cocos2dx並不直接支持在屏幕中繪制字符串（這是有道理的，因為我們不能直接把一個string做成一個節點，那樣很難理解），如果要直接繪制的話，可以自己封裝opengl函數（網上有很多例子，一般是用texture做）。

 

其實最簡單的繪制例子就是最開始的那個Helloworld。核心代碼如下：

// Create a label and initialize with string "Hello World". 
CCLabelTTF* pLabel = CCLabelTTF::labelWithString("Hello World", "Thonburi", 64); 
CC_BREAK_IF(! pLabel); 
 
// Get window size and place the label upper. 
CCSize size = CCDirector::sharedDirector()->getWinSize(); 
pLabel->setPosition(ccp(size.width / 2, size.height - 20)); 
 
// Add the label to HelloWorld layer as a child layer. 
this->addChild(pLabel, 1); 

建立一個 CCLabelTTF 並添加到子節點即可。

 

 

#2 繪制中文

 

但，如果繪制中文呢？

 

CCLabelTTF* pLabel = CCLabelTTF::labelWithString("你好，世界", "Thonburi", 64);

 

注意：需要使用VS的另存為功能

 

將含有中文字符串的源代碼，保存為UTF-8格式

否則顯示為亂碼。

 

手動保存比較麻煩，可以使用批量轉換工具，如：boomworks的“文件編碼轉換工具”

 

#3 文字錨點對齊與坐標計算

 

為了便於字體對齊，我們在很多游戲引擎中，都使用對齊錨點的功能，如j2me的anchor參數接口。

 

我們添加一個CCLayer，並重載他的draw函數，然后在draw中繪制十字線。

void HelloWorldLayer::draw() 
{ 
        CCLayer::draw(); 

       CCSize s = CCDirector::sharedDirector()->getWinSize(); 

        glEnable(GL_LINE_SMOOTH); 
        ccDrawLine( CCPointMake(0, s.height/2), CCPointMake(s.width, s.height/2) ); 
        ccDrawLine( CCPointMake(s.width/2, 0), CCPointMake(s.width/2, s.height) ); 
} 

然后，我們重寫繪制字體函數，將坐標修改為屏幕正中

pLabel->setPosition(ccp(size.width / 2, size.height/2)); 

可以看到，cocos2d默認錨點是node的中心。

如果要采用其他方式對齊，如左上角，可以使用 getContentSize() 獲取CCSize。然后調整位置。

 

注意：中文字符獲取寬高似乎有bug，在win32上面獲得不了准確的數值。

 

注意：由於手機不同平台的適配方案不同，我們在寫坐標時，不要使用絕對坐標值的加減，而應使用比例，乘除等方法。否則，開啟適配函數后，坐標值會被映射成多個像素點，造成渲染錯位。

 

 

第三部分：繪制圖片

 

cocos2dx中並沒有直接繪制圖片的概念，我們一般是使用CCSprite。核心代碼如下：

 

// 3. Add add a splash screen, show the cocos2d splash image. 
CCSprite* pSprite = CCSprite::spriteWithFile("HelloWorld.png"); 
CC_BREAK_IF(! pSprite); 

// Place the sprite on the center of the screen 
pSprite->setFlipX(true); //可以手動設置圖形旋轉和鏡像，而不是使用Action，因為有許多Action是個過程，而不是直接顯示結果 
pSprite->setRotation(90); 
pSprite->setPosition(ccp(size.width/2, size.height/2)); 

// Add the sprite to HelloWorld layer as a child layer. 
this->addChild(pSprite, 0); 

繪制后的效果如下：