taoru's memo

Objective-c,cocos2d,など開発についてのメモ(andoroidも少しだけ)

cocos2dv2.1で追加されたCCDrawNodeを試す

cocos2d v2.1-rc0 が出ましたので、色々試してみようかと。

中でも以下の2つ

  • CCClippingNode
  • CCDrawNode

をマスターしたいところです。

とりあえずCCDrawNodeを練習した記録を残す。

まずはサンプルを見ながらシンプルな三角形を書くコード

- (id)init
{
    if (self = [super init])    {
        
        CCDrawNode *drawNode = [CCDrawNode node];
        
        CGPoint triangleVerts[] = {{-100,-100}, {100,-100}, {0, 100}};
        ccColor4F red           = {1, 0, 0, 1};
        ccColor4F green         = {0, 1, 0, 1};
        
        [drawNode drawPolyWithVerts:triangleVerts count:3 fillColor:red borderWidth:2 borderColor:green];
        
        drawNode.position = ccp(self.contentSize.width/2, self.contentSize.height/2);
        [self addChild:drawNode];

    }
    return self;
}

borderも角が尖ってる。borderWidth:0でフチ無し。

drawPolyやらdrawDotを連続で呼び出すと、合成したdrawNodeになってくれる.

- (id)init
{
    if (self = [super init])    {
        
        CCDrawNode *drawNode = [CCDrawNode node];
        
        CGPoint triangle[] = {{-100,-100}, {100,-100}, {0, 100}};
        CGPoint square[] = {{-60,-60}, {60,-60}, {60,60}, {-60, 60}};
        
        ccColor4F red = {1, 0, 0, 1};
        ccColor4F green = {0, 1, 0, 1};
        ccColor4F blue = {0, 0, 1, 1};
        ccColor4F yellow = ccc4FFromccc3B(ccYELLOW); // covertマクロも用意されている
        
        // 三角形の描画
        [drawNode drawPolyWithVerts:triangle count:3 fillColor:red borderWidth:2 borderColor:green];
        
        // 四角形の描画
        [drawNode drawPolyWithVerts:square   count:4 fillColor:green borderWidth:2 borderColor:blue];
        
        // 線の描画
        [drawNode drawSegmentFrom:ccp(-50, -50) to:ccp(50, 50) radius:5.0f color:yellow];
        
        // 点の描画
        [drawNode drawDot:ccp(0, 0) radius:10.0f color:red];
        
        drawNode.position = ccp(self.contentSize.width/2, self.contentSize.height/2);
        [self addChild:drawNode];

    }
    return self;
}

星形を描画してみようと思ったけど、どうもうまくいかない。
凹みのある多角形を綺麗に表示されるためのコツが知りたい。

CCDrawNode *drawNode = [CCDrawNode node];

CGPoint starVerts[] = {
    {-100,-100}, {0, -50},
    {100, -100}, {50,-15},
    {100,25}, {35,25},
    {0, 100}, {-35,25},
    {-100,25}, {-50,-15}
};

ccColor4F red = {1, 0, 0, 1};
ccColor4F yellow = ccc4FFromccc3B(ccYELLOW);

[drawNode drawPolyWithVerts:starVerts count:10 fillColor:yellow borderWidth:2 borderColor:red];

drawNode.position = ccp(self.contentSize.width/2, self.contentSize.height/2);
[self addChild:drawNode];


starVerts[]に始点と同位置の{-100,100}を加えて、count:11にして試してもダメだった。

内部的には、いくつかの三角形に分割してポリゴンを描画しているようだから、
工夫してやらないとうまくいかないかも。
複雑な図形はpng用意してspriteWithFileした方がよっぽど簡単ですね(当たり前)

QLOOKアクセス解析