読者です 読者をやめる 読者になる 読者になる

フニゲの開発日記

Electronとか...

cc.drawingUtil

cocos2d-html5


点やラインをちょっと表示したいときに便利なcc.drawingUtil。
cocos2d-html5に同梱のサンプルHelloHTML5Worldでも使われている。

// HelloHTML5World/src/myApp.js
var CircleSprite = cc.Sprite.extend({
    _degree:0,
    ctor:function () {
        this._super();
    },
    draw:function () {
        cc.drawingUtil.setDrawColor4B(255,255,255,255);

        if (this._degree < 0)
            this._degree = 360;
        cc.drawingUtil.drawCircle(cc.PointZero(), 30, cc.DEGREES_TO_RADIANS(this._degree), 60, true);
    },
    myUpdate:function (dt) {
        this._degree -= 6;
    }
});
...

こんな感じでdraw()メソッドをオーバーライドして、プリミティブを描画するコードに差し替えればいい。setPosition()とかsetRotation()もちゃんと動く。サンプルではcc.Spriteを継承してるけど、cc.Nodeを継承しても結果は変わらない。

f:id:funige:20131025171422p:plain

drawCircle()の引数はちょっとわかりにくいな。

drawCircle(center, radius, angle, segments, drawLineToCenter)
- center - 中心点の位置
- radius - 半径
- angle - 始点の角度
- segments - 円の分割数
- drawLineToCenter - 始点と中心点を結ぶラインを描くかどうか。

他にもdrawLine()とかdrawPoint()とかひととおり揃っているので、覚えておいて損はないと思う。

広告を非表示にする