0

cocos2dv2.0とOpenGLES2.0を使用してsvgファイルから図形を描画するにはどうすればよいですか？

形状のある単純なsvgファイルがあります。svgファイルをポイントとベジェパスハンドルのセットに解析した場合、いくつかのOpenGL ES 2.0呼び出しを使用して形状を描画することは可能ですか？

プレーヤーがズームインおよびズームアウトしても曲線が滑らかに見えるように、svgシェイプを使用してゲームレベルの背景を描画したいと思います。LevelSVGを見てきましたが、box2dを含まないよりシンプルなソリューションを探しています。

別の質問：OpenGL ES 2で、svgファイルにあるような点とベジェ曲線のセットから塗りつぶされた形状を描画するにはどうすればよいですか？

これは、形状を含むGIMPによって生成された私のテストsvgファイルです。 

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

これは、長年の潜伏者であった後のSOに関する私の最初の質問です。皆さんありがとう！

4

1 に答える 1

0

私が提案しているソリューションでは、xml ファイルをロードし、データ頂点を GL トライアングル ストリップまたはトライアングル ファン フォーマットに再フォーマットする必要があります。これまで多くのゲームで滑らかな曲線を描くためにこのテクニックを使用してきましたが、線を滑らかにするのに十分な数のポイントを作成するだけで済みます。

この手法は、ゲーム Tiny Wings の色付きの曲線のような効果を作成するために使用できます。この描画テクニックを使用したゲームには、Enduro Extreme Trials、SnowXross 2 などがあります。曲線を作成するために、レベル スクリプトから渡されたパラメーターに基づいてジオメトリを作成するために、正弦波関数の合計などを使用する関数を実行するスクリプト エンジンを作成しました。

OpenGL トライアングル ストリップの描画に慣れていない場合は、OpenGL ES 2.0 (および OpenGL ES 1.1 も) で描画する非常に一般的な方法であるため、これを調べる必要があります。

glDrawModeは、使用する描画方法を決定するための独自のカスタム列挙型です。トライアングル ストリップは、おそらくベジエに最適です。

以下のコードのdynamicVertsは、3 つの float 構造体の C 配列へのポインターですが、これを CGPoint に置き換え、glVertexAttribPointerパラメーターを 3 から 2 に変更して、3 次元ではなく 2 次元に設定することができます。この配列は、dray するジオメトリを無視します。

dynamicVertColorsは、ccColor4Byte 構造体の C 配列へのポインターです。この配列は glVertexAttribPointer の頂点に合わせて、描画されるものに色を付けます。

CCNode をサブクラス化し、次の draw メソッドを追加して、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/で作成しました。

于 2012-08-03T15:40:06.603 に答える