cc.DrawnNode acts weird in the latest version 3.14.1

cocos2d-x JavaScript
4

Meanwhile apart from this problem. If you need, you can draw even concave polygons using a combination of triangulation and draw node: Here is an example:

requirements:

  • a triangulation method. I used this library flawlessly: https://github.com/mapbox/earcut

  • you have to flatten your array of vertices to feed them to earcut function such as:

    function flatten(nestedXY) { // nestedXY is like [cc.p(0, 80), cc.p(20, 90), … cc.p(200, 70) ]
    var result = [];
    for(i=0; i<nestedXY.length; i++){
    result.push(nestedXY[i].x);
    result.push(nestedXY[i].y);
    }
    return result; // result is like: [0, 80, 20, 90, … 200, 70 ]
    }

    function triangulate(vertices){
    var data = flatten(vertices);
    var triangles = earcut(data); // earcut func from https://github.com/mapbox/earcut
    return triangles;
    }

    …
    var triangles = triangulate(nestedXY );
    var n_tri = triangles.length/3;

          var d_node = new cc.DrawNode();
      for(i=0; i<n_tri; i++){
          var a_triangle = [cc.p(nestedXY[triangles[3*i]]), cc.p(nestedXY[triangles[3*i+1]]), cc.p(nestedXY[triangles[3*i+2]])];
          d_node.drawPoly(a_triangle, cc.color(0,255,0,200), 0,  cc.color(0,0,0,0));
      }
      // now you can display your d_node like:
      this.region.addChild(d_node);

    …

1 Like