Cocos creator add clipping mask to fb instant games user image to make it round

Cocos Creator
#1

Using cocos creator i have retrieved the users image and added it to the player prefab. Now i want to make the image round. Im thinking there are 2 ways. Either do it using css (im quite new to cocos so i don’t know how to change the css yet, not pre build anyway. Sure after the build i can just edit the css. Not even looked into it yet). The way i have seen here https://gist.github.com/qertis/633465a9d804fd085596 is to create a clipping mask. but i cant figure out how to make it work. this is what i have so far that is working as a square.

var photoUrl = FBInstant.player.getPhoto();
cc.loader.load(photoUrl, (err, texture) => {
this.getComponent(cc.Sprite).SpriteFrame = new cc.Sprite(texture);
});

i tried this

    var photoUrl = FBInstant.player.getPhoto();
	cc.loader.load(photoUrl, (err, texture) => {

	this.getComponent(cc.Sprite).SpriteFrame = new cc.Sprite(texture);
	/////////////////

	var sprite = this.getComponent(cc.Sprite).SpriteFrame; 

	var circle = new cc.DrawNode();
	circle.drawCircle(
	cc.p(0,0),
	Math.PI,
	0,
	128,
	false,
	sprite.width / 2,
	console.log(sprite.width),
	console.log('-----'),
	);

	var mask = new cc.ClippingNode(circle);
	mask.addChild(sprite);


	///////////////////




	});

but this doesn’t work.

Can any one see why? how to do this?? Thanks in advance for your help :slight_smile:

#2

Make a parent node to the image an add a Mask component to it and chose the ellipse type.