Gezeichnete Formen als CCSprites (cocos2d)

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Gezeichnete Formen als CCSprites (cocos2d)

    Hallo Entwickler,

    da ich dynamische Formen verwenden will, die sich während der Laufzeit in ihrer Form und Farbe ändern, möchte ich keine statischen PNGs verwenden, um CCSprites zu erstellen.
    Gibt es einen Weg gezeichnete Formen als Sprite zu verwenden (z.B. rotes Dreieck, grünes Fünfeck)? Diese sollen natürlich auch animiert und vom User verwendet werden.

  • Entweder du subclasst CCNode zum Beispiel zu einem ShapeRenderer und baust dir deine eigene Zeichenroutine auf OGL Basis, oder du zeichnest in eine CCRenderTexture und verwendest diese mit einem CCSprite. Letzteres ist weniger sinnvoll, wenn du animierst.

    LG David.

    PS: Wie sagt man deutsch zu "subclasst", statt dieses hässliche Denglisch zu verwenden? :D

  • Ich habe mir jetzt eine CCRenderTexture erstellt, in die ich Zeichnen kann.

    Was ist der beste Weg um freie Formen zu zeichnen?
    (Ich möchte ein unregelmäßiges Fünfeck zeichnen und habe 5 Punkte.)

  • Vyax schrieb:

    Ich habe mir jetzt eine CCRenderTexture erstellt, in die ich Zeichnen kann.

    Was ist der beste Weg um freie Formen zu zeichnen?
    (Ich möchte ein unregelmäßiges Fünfeck zeichnen und habe 5 Punkte.)


    Damit kommst du in den Genuss von CoreGraphics. Ist auf jeden Fall langsamer als mit OpenGL. Einfache konvexe Körper gehen aber super einfach mit OGL. Cocos2d bietet sogar Hilfsfunktionen in der Datei CCDrawPrimitives.

    LG

    @matz: ja danke, ich Dummbold

  • Quellcode

    1. CGContextRef context = UIGraphicsGetCurrentContext();
    3. CGContextMoveToPoint(context, rect.size.width - CORNER, 0.0);
    4. CGContextAddLineToPoint(context, rect.size.width, 0.0);
    5. CGContextAddLineToPoint(context, rect.size.width, CORNER);
    6. CGContextAddLineToPoint(context, rect.size.width - WIDTH, CORNER);
    7. CGContextAddLineToPoint(context, rect.size.width - CORNER, WIDTH);
    8. CGContextAddLineToPoint(context, rect.size.width - CORNER, 0.0);
    9. CGContextSetRGBFillColor(context, 1.0, 0.0, 1.0, 1.0);
    10. CGContextFillPath(context);


    Ich habe jetzt diesen Code, um in ein UIView zu zeichnen.
    Wie kann ich das jetzt umsetzten, damit ich das in CCRenderTexture zeichnen kann?

  • Auf der Seite war ich auch schon, ABER oben steht nur

    // 3: Draw into the texture
    // You'll add this later

    Und später soll man folgendes hinzufügen:

    CCSprite *noise = [CCSprite spriteWithFile:@"Noise.png"];
    [noise setBlendFunc:(ccBlendFunc){GL_DST_COLOR, GL_ZERO}];
    noise.position = ccp(textureWidth/2, textureHeight/2);
    [noise visit];

    Ich möchte aber keine png Textur einfügen, sondern eine freie Form zeichnen.

  • Der folgende Code "schneidet" aus einer CCRenderTexture eine Form (cutSprite) aus.

    Quellcode

    1. // Update the render texture
    2. [myRenderTexure begin];
    4. // Limit drawing to the alpha channel
    5. glColorMask(0.0f, 0.0f, 0.0f, 1.0f);
    7. // Draw
    8. [cutSprite visit];
    10. // Reset color mask
    11. glColorMask(1.0f, 1.0f, 1.0f, 1.0f);
    13. [myRenderTexure end];
    Alles anzeigen


    Du kannst die Punkte zwischen deinen Linien errechnen und cutSprite in einer Schleife darauf setzen und visit.

    Quellcode

    1. // Update the render texture
    2. [myRenderTexure begin];
    4. // Limit drawing to the alpha channel
    5. glColorMask(0.0f, 0.0f, 0.0f, 1.0f);
    7. for (int i = 0; i < d; i ++) {
    8. [cutSprite setPosition:ccp(someFancyCalculation)];
    9. [cutSprite visit];
    10. }
    13. // Reset color mask
    14. glColorMask(1.0f, 1.0f, 1.0f, 1.0f);
    16. [myRenderTexure end];
    Alles anzeigen


    Ich hoffe das geht in die richtige Richtung. Bin mir nicht sicher die Anforderung 100% verstanden zu haben :D

  • Also nochmal die Anforderungen.

    Nehmen wir mal an, CCRenderTexture hat eine Größe von 1, 1 und der Punkt links unten ist 0, 0.

    Ich möchte ein Fünfeck mit diesen Punkten hineinzeichnen:

    Quellcode

    1. ccp(0.0, 0.0)
    2. ccp(0.0, 1.0)
    3. ccp(0.5, 1.0)
    4. ccp(1.0, 0.5)
    5. ccp(1.0, 0.0)

  • Ich treffe mal andere Annahmen, damit das Beispiel funktioniert. Wir haben also eine CCRenderTexture von 10x10 und ein CutSprite von 1x1, so dass wir eine 1 Pixel dick Linie zeichnen würden. Außerdem liegt in deinem Beispiel Punkt drei auf der Linie zwischen 1 und 2.

    Quellcode

    1. [myRenderTexure begin];
    3. // Limit drawing to the alpha channel
    4. glColorMask(0.0f, 0.0f, 0.0f, 1.0f);
    6. // von (0,0) zu (0,10) zeichnen
    7. for (int i = 0; i < 10; i ++) {
    8. [cutSprite setPosition:ccp(0,i)];
    9. [cutSprite visit];
    10. }
    12. // von (0,10) zu (5,5) zeichnen
    13. for (int i = 0; i < 5; i ++) {
    14. [cutSprite setPosition:ccp(i,10-i)];
    15. [cutSprite visit];
    16. }
    18. // und so weiter
    20. // Reset color mask
    21. glColorMask(1.0f, 1.0f, 1.0f, 1.0f);
    23. [myRenderTexure end];
    Alles anzeigen


    Natürlich musst du dir die Schleifen Werte anhand der Punkte berechnen und die Positionsbestimmung des Cutsprite auch variabel gestalten.
    Wenn ich es mir recht überlege wird das bestimmt nicht der performanteste Weg :whistling:

  • Ich habe es jetzt mit visit versucht.

    Ich habe also eine Subklasse von CCSprite erstellt und die draw Methode überschrieben.
    Bei visit entsteht aber eine gezackte (schräge) Kante, während bei den CGContext Methoden eine weichere Linie entstanden ist.

    Lässt sich das irgendwie glätten?