【转】cocos2d-x学习笔记03：绘制基本图元

第一部分：基本图形绘制

cocos2dx封装了大量opengl函数，用于快速绘制基本图形，这些代码的例子在，tests\DrawPrimitivesTest目录下

注意，该方法是重载node的draw方法实现的，在智能机上，并不推荐直接绘制几何图形，因为大量的坐标编码会极大降低工作效率，应尽量使用Image。而且cocos2dx的渲染机制会造成前后遮挡问题，尤其是几何图形与图片等其他node混合绘制时。

void HelloWorld::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); 

        // restore original values,恢复opengl的正常参数
        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做）。为了便于字体对齐，我们在很多游戏引擎中，都使用对齐锚点的功能，如j2me的anchor参数接口。默认情况下，锚点在（0，0）处。为了说明锚点的设置对字体对齐的影响，我们使用如下代码：

bool HelloWorld::init() {
    if ( !CCLayer::init() ) {
        return false;
    }
    CCSize size = CCDirector::sharedDirector()->getWinSize();
    CCLabelTTF* pLabel = CCLabelTTF::create("Hello World", "Thonburi", 64);
    pLabel->setAnchorPoint(ccp(0,0.5));//设置锚点，默认是在node的中心，即锚点为（0.5,0.5），显示为居中对齐
    pLabel->setPosition(ccp(size.width / 2, size.height/2));
    this->addChild(pLabel, 1);

    draw();
    return true;
}
//重载CCLayer的draw函数，然后绘制十字线;
void HelloWorld::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) );
}

可以看到，cocos2dx默认锚点是node的中心。你自己可以设置不同的锚点，使文本具有不同的对齐方式。

2.显示中文字体

第三部分：绘制图片

cocos2dx中并没有直接绘制图片的概念，我们一般是使用CCSprite。核心代码如下：

CCSize size=CCDirector::sharedDirector()->getWinSize();
    CCSprite* pSprite = CCSprite::create("HelloWorld.png");
    //pSprite->setFlipX(true); //可以手动设置图形旋转和镜像，而不是使用Action，因为有许多Action是个过程，而不是直接显示结果;
    pSprite->setFlipY(true);
    //pSprite->setRotation(90);
    pSprite->setPosition(ccp(size.width/2, size.height/2));
    this->addChild(pSprite, 0);