Cocos2d-x2.0 -- 从点，线，面学起

        

转自：

http://www.oschina.net/question/565065_79818

 一个图形引擎，总是由构建点，线，面的绘制功能写起来的。点，线，面。构成了最初的图形基础。所以说，掌握点，线，面是掌握引擎的基础。

 

         在Cocos2d-x 1.0版本中，提供了使用OpenGL API来创建点，线，面的例子DrawPrimitivesTest。而在2.0中，同样的例子名称，而内部实现却差别巨大。我们知道，在Cocos2d-x 2.0版本，相较于1.0，增加了shader的支持，而DrawPrimitivesTest这个例子，就是学习基础Shader的最好教程。

 

学前提示：

        OpenGL着色语言（GLSL――OpenGL Shading Language）是用来在OpenGL中着色编程的语言，也即开发人员写的短小的自定义程序，他们是在图形卡的GPU （Graphic Processor Unit图形处理单元）上执行的，代替了固定的渲染管线的一部分。比如：视图转换、投影转换等。GLSL（GL Shading Language）的着色器代码分成2个部分：Vertex Shader（顶点着色器）和Fragment（片断着色器），有时还会有Geometry Shader（几何着色器）。负责运行顶点着色的是顶点着色器。它可以得到当前OpenGL 中的状态，GLSL内置变量进行传递。

 

       打开TestCpp工程，找到Classes下的DrawPrimitivesTest目录。打开两个文件：

DrawPrimitivesTest.h/cpp

源码 打印 ？

1. #ifndef _DRAW_PRIMITIVES_TEST_H_  
2. #define _DRAW_PRIMITIVES_TEST_H_  
3. //包含Cocos2d头文件  
4. ----#include "cocos2d.h"  
5. //使用TestScene这个CCScene类  
6. #include "../testBasic.h"  
7. //定义派生于CCLayer的类DrawPrimitivesTest,重载draw用于进行手动渲染处理  
8. class DrawPrimitivesTest : public CCLayer  
9. {  
10. public:  
11. //构造  
12.     DrawPrimitivesTest();  
13.     //析构  
14. virtual void draw();  
15. };  
16. //定义派生于TestScene的类DrawPrimitiveTestScene,做为TestCpp工程中TestController类集中管理的各个小功能例子的场景  
17. class DrawPrimitivesTestScene : public TestScene  
18. {  
19. public:  
20. //重载启动此功能例子的场景函数  
21.     virtual void runThisTest();  
22. };  
23.   
24. #endif  

 

OK，头文件看完了，现在看CPP文件：

源码 打印 ？

1. #include "DrawPrimitivesTest.h"  
2. //构造函数  
3. DrawPrimitivesTest::DrawPrimitivesTest()  
4. {  
5. }  
6. //手动处理的渲染函数  
7. void DrawPrimitivesTest::draw()  
8. {  
9. //取得屏幕大小  
10.     CCSize s = CCDirector::sharedDirector()->getWinSize();  
11. //检测是否有OpenGL错误发生，如果有则打印错误  
12.     CHECK_GL_ERROR_DEBUG();  
13.   
14.     //平滑模式，即高洛德着色  
15. //    glEnable(GL_LINE_SMOOTH);  
16. //绘制一条件,参1为起点，参2为终点，ccp为生成CCPoint的宏  
17.     ccDrawLine( ccp(0, 0), ccp(s.width, s.height) );  
18.   
19. //检测是否有OpenGL错误发生，如果有则打印错误  
20.     CHECK_GL_ERROR_DEBUG();  
21.   
22.     //设置线宽  
23. glLineWidth( 5.0f );  
24. //设置后面要进行绘制时所用的色彩  
25. ccDrawColor4B(255,0,0,255);  
26. //绘制线条  
27. ccDrawLine( ccp(0, s.height), ccp(s.width, 0) );  
28.   
29. //检测是否有OpenGL错误发生，如果有则打印错误  
30.     CHECK_GL_ERROR_DEBUG();  
31.   
32.     //设置点的大小  
33. ccPointSize(64);  
34. //设置后面要进行绘制时所用的色彩  
35. ccDrawColor4B(0,0,255,128);  
36. //绘制一个点  
37.     ccDrawPoint( ccp(s.width / 2, s.height / 2) );  
38. //检测是否有OpenGL错误发生，如果有则打印错误  
39.     CHECK_GL_ERROR_DEBUG();  
40.   
41. // 绘制四个点  
42.     //这里创建位置点数组  
43. CCPoint points[] = { ccp(60,60), ccp(70,70), ccp(60,70), ccp(70,60) };  
44. ccPointSize(4);  
45. //设置后面要进行绘制时所用的色彩  
46. ccDrawColor4B(0,255,255,255);  
47. //使用位置点数组做为四个顶点的位置进行绘制  
48.     ccDrawPoints( points, 4);  
49. //检测是否有OpenGL错误发生，如果有则打印错误  
50.     CHECK_GL_ERROR_DEBUG();  
51.   
52. //绘制一个绿色圆  
53. glLineWidth(16);  
54. //设置后面要进行绘制时所用的色彩  
55. ccDrawColor4B(0, 255, 0, 255);  
56.     //绘制圆函数，参1是中心点，参2为半径,参3为圆的逆时针旋转角度，参4为圆的平均切分段数，最后一个参数是指定是否从圆分段起止点位置向圆中心连线，这里不进行连线  
57.     ccDrawCircle( ccp(s.width/2,  s.height/2), 100, 0, 10, false);  
58. //检测是否有OpenGL错误发生，如果有则打印错误  
59.     CHECK_GL_ERROR_DEBUG();  
60.   
61. //绘制一个蓝色圆,进行连线  
62. glLineWidth(2);  
63. //设置后面要进行绘制时所用的色彩  
64. ccDrawColor4B(0, 255, 255, 255);  
65. //这里使用了一个宏CC_DEGREES_TO_RADIANS把角度值转为弧度。转动了90度，目的是为了让中心连线垂直显示。  
66.     ccDrawCircle( ccp(s.width/2, s.height/2), 50, CC_DEGREES_TO_RADIANS(90), 50, true);  
67. //继续检错  
68.      CHECK_GL_ERROR_DEBUG();  
69.   
70. // 绘制多边形线框。  
71.     ccDrawColor4B(255, 255, 0, 255);  
72.     glLineWidth(10);  
73. CCPoint vertices[] = { ccp(0,0), ccp(50,50), ccp(100,50), ccp(100,100), ccp(50,100) };  
74. //这里绘制多边形线框函数，使用上面的顶点数组做为多边形线框的顶点位置，第二个参数为顶点数量，第三个参数指定是否首尾自动连接形成封闭线框。  
75. //注：其实这个函数拆成两个函数比较好,一个是去掉最后一个参数的ccDrawPoly，用于绘制默认封闭的多边形线框。另一个ccDrawLineList用于绘制线段列。  
76.     ccDrawPoly( vertices, 5, false);  
77. //继续检错  
78.     CHECK_GL_ERROR_DEBUG();  
79.       
80.     //绘制实体多边形  
81.     glLineWidth(1);  
82.     CCPoint filledVertices[] = { ccp(0,120), ccp(50,120), ccp(50,170), ccp(25,200), ccp(0,170) };  
83.     //这里绘制内部填充指定色彩的多边形  
84.     ccDrawSolidPoly(filledVertices, 5, ccc4f(0.5f, 0.5f, 1, 1 ) );  
85.   
86.     // 绘制封闭多边形线框，这里就是个三角形线框了。  
87.     ccDrawColor4B(255, 0, 255, 255);  
88.     glLineWidth(2);  
89.     CCPoint vertices2[] = { ccp(30,130), ccp(30,230), ccp(50,200) };  
90.     ccDrawPoly( vertices2, 3, true);  
91.   
92.     CHECK_GL_ERROR_DEBUG();