Crop or mask image

cocos2d-x JavaScript
#1

Hi, i did crop image like this and with is coed.
Original Image:
images
Crop Image:
croping
crop image with green background.

Code:
clipper content size width and height

        var width = 200, height = 200, winSize = cc.winSize;

        var stencil = new cc.DrawNode();
        stencil.drawCircle(cc.p(width/2, height/2), 40, 0, 200, 0, 100, cc.color(255, 255, 255, 255));

        var clipper = new cc.ClippingNode(stencil);
        clipper.setContentSize(width, height);
        clipper.setAnchorPoint(0.5, 0.5);
        clipper.setPosition(winSize.width/2, winSize.height/2);
        this.addChild(clipper);

        var avatar = cc.Sprite.create(res.image);
        avatar.setPosition( clipper.width / 2, clipper.height / 2);
        avatar.setAnchorPoint(0.5, 0.5);
        clipper.addChild(avatar);

Here I have a two problems:

  • when I am tray to create 6 crop images I got this Waring?
    Failed to allocate buffer for DrawNode: buffer for 64 vertices requested

  • is there any best or simple way to crop images?

#2

@slackmoehrle have you any Idea bout this Warning?

#3

I have never seen this error before. Are all cropped images children to the same node? Batching DrawNode is probably needed.

#4
  • each cropped image ( clipper ) is children of node.
  • And node is children of layer.
  • Hear 6 node are children of layer. Same like this for onther layer (having 6 cropped images).

What is term means "Batching DrawNode"?
How i will do batching?