Fit a sprite into a circle

cocos2d-x JavaScript
#1

Hi,

I need to display a rectangular user photo inside a circular frame, the outside of the frame is transparent so it won’t work to just put the frame on top of the photo.
I’m wondering if there’s a way to do it using cocos2d-js that would make it cross platfrom.

Thanks much in advance!

#2

Try looking at ClippingNode. They use a node - such as an image - to define which part of the children nodes will be rendered.

So if you create the ClippingNode and give it a sprite the same size as your frame that is a filled-in white circle then add your rectangular picture to the clipping node, it should restrict the photo to that circle.

#3

@grimfate,
Can you show an example for what you have mentioned in the above post??
I am in need of the same!!

#4

@jonah13,
did you find how to fit a sprite into a circle??

#5

ClippingNode is a subclass of Node.

  • It draws its content (children) clipped using a stencil.
  • The stencil is an other Node that will not be drawn.
  • The clipping is done using the alpha part of the stencil (adjusted with an alphaThreshold).

Example:

auto clippingNode = ClippingNode::create(circularSprite);
clippingNode->addChild(photo);
addChild(clippingNode);

But in that case there are may be sharp edges.

So it may be better to consider next approach Create Puzzle pieces from a single image

#6

@MikhailSh,
Thanks for ur reply!! I am trying to do that in js…so I want some example in js…