cocos2d-x学习笔记03:绘制基本图元

时间:2023-02-06 15:41:44

 第一部分:基本图形绘制


cocos2dx封装了大量opengl函数,用于快速绘制基本图形,这些代码的例子在,tests\DrawPrimitivesTest目录下
注意,该方法是重载node的draw方法实现的,在智能机上,并不推荐直接绘制几何图形,因为大量的坐标编码会极大降低工作效率,应尽量使用Image。而且cocos2dx的渲染机制会造成前后遮挡问题,尤其是几何图形与图片等其他node混合绘制时。

  
 
 
  1. void DrawPrimitivesTest::draw() 
  2.         CCLayer::draw(); 
  3.  
  4.     CCSize s = CCDirector::sharedDirector()->getWinSize(); 
  5.          
  6.         // draw a simple line 
  7.         // The default state is: 
  8.         // Line Width: 1 
  9.         // color: 255,255,255,255 (white, non-transparent) 
  10.         // Anti-Aliased 
  11.         glEnable(GL_LINE_SMOOTH); 
  12.         ccDrawLine( CCPointMake(0, 0), CCPointMake(s.width, s.height) ); 
  13.          
  14.         // line: color, width, aliased 
  15.         // glLineWidth > 1 and GL_LINE_SMOOTH are not compatible 
  16.           //注意:线宽>1 则不支持GL_LINE_SMOOTH 
  17.         // GL_SMOOTH_LINE_WIDTH_RANGE = (1,1) on iPhone 
  18.         glDisable(GL_LINE_SMOOTH); 
  19.         glLineWidth( 5.0f ); 
  20.         /*glColor4ub(255,0,0,255);*/ 
  21.         glColor4f(1.0, 0.0, 0.0, 1.0); 
  22.         ccDrawLine( CCPointMake(0, s.height), CCPointMake(s.width, 0) ); 
  23.  
  24.         // TIP: 
  25.         // If you are going to use always the same color or width, you don't 
  26.         // need to call it before every draw 
  27.         // 
  28.         // Remember: OpenGL is a state-machine. 
  29.          
  30.         // draw big point in the center 
  31.         // 注意:cocos2dx绘制的是方块点 
  32.         glPointSize(64); 
  33.         /*glColor4ub(0,0,255,128);*/ 
  34.         glColor4f(0.0, 0.0, 1.0, 0.5); 
  35.         ccDrawPoint( CCPointMake(s.width / 2, s.height / 2) ); 
  36.          
  37.         // draw 4 small points 
  38.         // 注意:cocos2dx绘制的是方块点 
  39.         CCPoint points[] = { CCPointMake(60,60), CCPointMake(70,70), CCPointMake(60,70), CCPointMake(70,60) }; 
  40.         glPointSize(4); 
  41.         /*glColor4ub(0,255,255,255);*/ 
  42.         glColor4f(0.0, 1.0, 1.0, 1.0); 
  43.         ccDrawPoints( points, 4); 
  44.          
  45.         // draw a green circle with 10 segments 
  46.         glLineWidth(16); 
  47.         /*glColor4ub(0, 255, 0, 255);*/ 
  48.         glColor4f(0.0, 1.0, 0.0, 1.0); 
  49.         //参数依次是:中心点,半径,角度,分段数,是否连接中心点 
  50.         ccDrawCircle( CCPointMake(s.width/2,  s.height/2), 100, 0, 10, false); 
  51.  
  52.         // draw a green circle with 50 segments with line to center 
  53.         glLineWidth(2); 
  54.         /*glColor4ub(0, 255, 255, 255);*/ 
  55.         glColor4f(0.0, 1.0, 1.0, 1.0); 
  56.         ccDrawCircle( CCPointMake(s.width/2, s.height/2), 50, CC_DEGREES_TO_RADIANS(90), 50, true);   
  57.          
  58.         // open yellow poly 
  59.         /*glColor4ub(255, 255, 0, 255);*/ 
  60.         glColor4f(1.0, 1.0, 0.0, 1.0); 
  61.         glLineWidth(10); 
  62.         CCPoint vertices[] = { CCPointMake(0,0), CCPointMake(50,50), CCPointMake(100,50), CCPointMake(100,100), CCPointMake(50,100) }; 
  63.         //参数依次是:点数组,点数量,是否封闭 
  64.         ccDrawPoly( vertices, 5, false); 
  65.          
  66.         // closed purple poly 
  67.         /*glColor4ub(255, 0, 255, 255);*/ 
  68.         glColor4f(1.0, 0.0, 1.0, 1.0); 
  69.         glLineWidth(2); 
  70.         CCPoint vertices2[] = { CCPointMake(30,130), CCPointMake(30,230), CCPointMake(50,200) }; 
  71.         ccDrawPoly( vertices2, 3, true); 
  72.          
  73.         // draw quad bezier path 
  74.           //绘制有一个控制点的贝塞尔曲线 
  75.         ccDrawQuadBezier(CCPointMake(0,s.height), CCPointMake(s.width/2,s.height/2), CCPointMake(s.width,s.height), 50); 
  76.  
  77.         // draw cubic bezier path 
  78.           //绘制有两个控制点的贝塞尔曲线 
  79.         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); 
  80.  
  81.         //恢复opengl的正常参数 
  82.         // restore original values 
  83.         glLineWidth(1); 
  84.         /*glColor4ub(255,255,255,255);*/ 
  85.         glColor4f(1.0, 1.0, 1.0, 1.0); 
  86.         glPointSize(1); 



cocos2d-x学习笔记03:绘制基本图元

cocos2d-x学习笔记03:绘制基本图元

第二部分:字符串绘制
#1 cocos2dx的字符串绘制使用的是Label,cocos2dx并不直接支持在屏幕中绘制字符串(这是有道理的,因为我们不能直接把一个string做成一个节点,那样很难理解),如果要直接绘制的话,可以自己封装opengl函数(网上有很多例子,一般是用texture做)。
其实最简单的绘制例子就是最开始的那个Helloworld。核心代码如下:

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


建立一个CCLabelTTF并添加到子节点即可。

#2 绘制中文
但,如果绘制中文呢?
          CCLabelTTF* pLabel = CCLabelTTF::labelWithString("你好,世界", "Thonburi", 64);
注意:需要使用VS的另存为功能

cocos2d-x学习笔记03:绘制基本图元

cocos2d-x学习笔记03:绘制基本图元,将含有中文字符串的源代码,保存为UTF-8格式cocos2d-x学习笔记03:绘制基本图元

cocos2d-x学习笔记03:绘制基本图元

。否则显示为乱码。
手动保存比较麻烦,可以使用批量转换工具,如:boomworks的“文件编码转换工具”    

cocos2d-x学习笔记03:绘制基本图元

cocos2d-x学习笔记03:绘制基本图元
#3 文字锚点对齐与坐标计算
为了便于字体对齐,我们在很多游戏引擎中,都使用对齐锚点的功能,如j2me的anchor参数接口。
我们添加一个CCLayer,并重载他的draw函数,然后在draw中绘制十字线。
  
 
 
  1. void HelloWorldLayer::draw() 
  2.         CCLayer::draw(); 
  3.  
  4.         CCSize s = CCDirector::sharedDirector()->getWinSize(); 
  5.  
  6.         glEnable(GL_LINE_SMOOTH); 
  7.         ccDrawLine( CCPointMake(0, s.height/2), CCPointMake(s.width, s.height/2) ); 
  8.         ccDrawLine( CCPointMake(s.width/2, 0), CCPointMake(s.width/2, s.height) ); 

然后,我们重写绘制字体函数,将坐标修改为屏幕正中

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


可以看到,cocos2d默认锚点是node的中心。
cocos2d-x学习笔记03:绘制基本图元

cocos2d-x学习笔记03:绘制基本图元

如果要采用其他方式对齐,如左上角,可以使用getContentSize()获取CCSize。然后调整位置。
注意:中文字符获取宽高似乎有bug,在win32上面获得不了准确的数值。
注意:由于手机不同平台的适配方案不同,我们在写坐标时,不要使用绝对坐标值的加减,而应使用比例,乘除等方法。否则,开启适配函数后,坐标值会被映射成多个像素点,造成渲染错位。

第三部分:绘制图片
cocos2dx中并没有直接绘制图片的概念,我们一般是使用CCSprite。核心代码如下:

   
  
  
  1. // 3. Add add a splash screen, show the cocos2d splash image. 
  2. CCSprite* pSprite = CCSprite::spriteWithFile("HelloWorld.png"); 
  3. CC_BREAK_IF(! pSprite); 
  4.  
  5. // Place the sprite on the center of the screen 
  6. pSprite->setFlipX(true); //可以手动设置图形旋转和镜像,而不是使用Action,因为有许多Action是个过程,而不是直接显示结果 
  7. pSprite->setRotation(90); 
  8. pSprite->setPosition(ccp(size.width/2, size.height/2)); 
  9.  
  10. // Add the sprite to HelloWorld layer as a child layer. 
  11. this->addChild(pSprite, 0); 

绘制后的效果如下:  

cocos2d-x学习笔记03:绘制基本图元

参考资料:

cocos2d 官方test例子

cocos2d-x学习笔记03:绘制基本图元

本文出自 “做游戏的老G” 博客,请务必保留此出处http://goldlion.blog.51cto.com/4127613/754729