cocos2d-js (v3.2) で多角形をレンダリングする

http://qiita.com/nise_nabe/items/c4d07c5c9fc34f0a616c と同様のことを v3.2 で実現するためのコードです。

v3.2 では多角形を表示する際には DrawNode を用います。DrawNode (APIリファレンス)

内容

cocos new で作成される src/app.js を下記のように変更していきます。
描画の指定は DrawNode の drawPoly() で行います。drawPoly の第一引数には各頂点座標の情報を cc.Point の配列の形式で指定します (cc.Point は cc.p を使用して作成します)。この配列の値にしたがって辺が描画されます。

var DrawLayer = cc.Layer.extend({
    node: null,
    ctor:function () {
        this._super();
        this.node = new cc.DrawNode();
        this.addChild(this.node);

        this.node.drawPoly([cc.p(0, 0), cc.p(200,0), cc.p(200, 200)]);
        return true;
    }
});

var DrawScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new DrawLayer();
        this.addChild(layer);
    }
});

また、加えて drawPoly に塗りつぶしの色と線の太さ、線の色を指定することも可能です。色の指定は cc.color() を使用し、引数として R,G,B,A の順に 0から 255の値を指定します。

        this.node.drawPoly([cc.p(0, 0), cc.p(100,0), cc.p(100, 100)],
                          cc.color(255, 0, 0, 255), 3, 
                          cc.color(255, 128, 128, 255));