在openGL 2.0中绘制由贝塞尔曲线组成的填充形状

Question

如何使用cocos2d v2.0和OpenGL ES 2.0从svg文件绘制形状？

我有一个形状简单的svg文件。如果我将svg文件解析为点集合和贝塞尔路径句柄，是否可以使用一些OpenGL ES 2.0调用来绘制形状？

我想使用svg形状绘制我的游戏关卡的背景，以便玩家放大和缩小时曲线继续显得平滑。我看过LevelSVG，但我正在寻找一个不涉及box2d的更简单的解决方案。

问另一种方式：在OpenGL ES 2中，如何从一组点和贝塞尔曲线中绘制出像svg文件中的实心曲线？

这是我的测试svg文件生成的GIMP包含一个形状。

<svg xmlns="http://www.w3.org/2000/svg" 
    width="14.2222in" height="10.6667in" 
    viewBox="0 0 1024 768"> 
    <path id="Unnamed" 
     fill="purple" stroke="purple" stroke-width="1" 
     d="M 165.00,477.00 
      C 165.00,477.00 249.00,348.00 325.50,373.50 
      402.00,399.00 318.00,516.00 447.00,507.00 
      576.00,498.00 412.50,327.00 480.00,301.50 
      547.50,276.00 639.00,429.00 655.50,510.00 
      672.00,591.00 597.00,633.00 454.50,607.50 
      312.00,582.00 211.50,589.50 184.50,546.00 
      157.50,502.50 165.00,477.00 165.00,477.00 Z 
      M 486.00,267.00" /> 
</svg> 

这是一个长期的潜伏者后，所以我的第一个问题。谢谢大家！

Answer 1

对于我提出的解决方案，您需要加载您的xml文件并将您的数据顶点重新格式化为GL三角形或三角形扇形格式。我曾经使用过这种技术在许多游戏中绘制平滑曲线，您只需创建足够数量的点以使线条平滑即可。

这种技术可以用来创建一个效果，如游戏Tiny Wings中的彩色曲线。我使用过这种绘图技术的一些游戏包括Enduro Extreme Trials，SnowXross 2和其他几款游戏。为了创建曲线，我编写了一个脚本引擎，该引擎执行的函数使用诸如正弦函数求和之类的函数来根据级别脚本传入的参数来创建几何。

如果你不熟悉OpenGL三角形条形图绘制，你应该研究它，因为它是在OpenGL ES 2.0（也是OpenGL ES 1.1）中绘制的一种非常常见的方式。

该glDrawMode是我自己的自定义枚举来决定使用哪种绘制方法。三角带可能对贝塞尔来说效果最好。

的dynamicVerts在下面的代码是一个指针，指向3浮动结构的数组c，但是可以用CGPoint替换它并改变glVertexAttribPointer参数从3到2到其设置为两个维度代替三个。这个数组违反了你将要玩的几何。

dynamicVertColors是指向ccColor4Byte结构的C数组的指针。该数组与glVertexAttribPointer中的顶点对齐以绘制所绘制的内容。

子类CCNode并添加以下绘制方法以在Cocos2d 2.0中绘制OpenGL 2.0 ES。

-(void) draw { 

    if (shouldDrawDynicVerts == YES) { 

     ccGLUseProgram(shaderProgram->program_); 
     [shaderProgram setUniformForModelViewProjectionMatrix]; 
     ccGLEnableVertexAttribs(kCCVertexAttribFlag_Position); 

     glVertexAttribPointer(kCCVertexAttrib_Position, 3, GL_FLOAT, GL_FALSE, 0, dynamicVerts);  
     glEnableVertexAttribArray(kCCVertexAttribFlag_Position); 

     glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_UNSIGNED_BYTE, GL_TRUE, 0, dynamicVertColors); 
     glEnableVertexAttribArray(kCCVertexAttribFlag_Color); 



     if (glDrawMode == kDrawTriangleStrip) { 
      glDrawArrays(GL_TRIANGLE_STRIP, 0, dynamicVertCount); 

     }else if (glDrawMode == kDrawLines){ 
      glDrawArrays(GL_LINES, 0, dynamicVertCount);  
      glLineWidth(1); 

     }else if (glDrawMode == kDrawPoints){ 
      glDrawArrays(GL_POINTS, 0, dynamicVertCount); 

     }else if (glDrawMode == kDrawTriangleFan){ 
      glDrawArrays(GL_TRIANGLE_FAN, 0, dynamicVertCount); 

     } 

    } 

} 

在，做图纸或其他地方适当的自定义节点的init方法，分配GLES着色器程序绘制时使用。 最简单的方法是使用Coocos2d内置的一个。

self.shaderProgram = [[CCShaderCache sharedShaderCache] programForKey:kCCShader_PositionColor]; 

我创建了样本的Xcode项目的教程和绘图辅助类免费电话：http://heyalda.com/drawing-with-opengl-es-2-0-in-cocos2d-2-0/