在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/