How can I create Sprite with Rounded corner?

cocos2d-x C++
#1

Hi.

I want create sprite with rounded corner.

Like this,

->

How can I with cocos2d-x ?
Somebody help me T-T

#2

just make your png with rounded corners with transparent background color

#3

Thanks Sir. But I want draw by coding, not PhotoShop.
Is there anyway? T-T

#4

There is a CCRoundedRectNode extension you can download, your question was answered on StackOverflow:
http://stackoverflow.com/questions/18022489/cclayer-with-round-corners

The Git repository for this extension is at: https://github.com/gururajios/CCRoundedRectNode

And this is how you would use this extension:

int layer_width = 200, layer_height = 100;

CCRoundedRectNode *shareRectNode = [[[CCRoundedRectNode alloc]
                                     initWithRectSize: CGSizeMake(layer_width, layer_height)] autorelease];

shareRectNode.position = ccp(s.width/2-layer_width/2, s.height/2-layer_height/2);
shareRectNode.fillColor = ccc4f(0.0, 0.0, 0.0, 0.9);
[self addChild: shareRectNode z:3];

Good luck!

#5

Well i guess you will need to port the CCRoundedRectNode to c++

#6

Once CCRoundedRectNode has been ported, use the resulting DrawNode as a stencil to a ClippingNode. Then add your image as a child of the ClippingNode. I’m actually needing this for a menu as one of my tasks this week. I’ll post any code if no one else has before then.

#7

To test out our needs I threw together a couple methods instead of a full port of that project. I also changed the appendCubicBezier() code to use part of the DrawNode::drawCubicBezier() method.

void CLASSNAME::appendCubicBezier(int startPoint, std::vector<Vec2>& verts, const Vec2& from, const Vec2& control1, const Vec2& control2, const Vec2& to, uint32_t segments)
{
	float t = 0;
	for(int i = 0; i < segments; i++)
	{
        float x = powf(1 - t, 3) * from.x + 3.0f * powf(1 - t, 2) * t * control1.x + 3.0f * (1 - t) * t * t * control2.x + t * t * t * to.x;
        float y = powf(1 - t, 3) * from.y + 3.0f * powf(1 - t, 2) * t * control1.y + 3.0f * (1 - t) * t * t * control2.y + t * t * t * to.y;
        verts[startPoint + i] = Vec2(x,y);
		t += 1.0f / segments;
	}
}

Node* CLASSNAME::createRoundedRectMaskNode(Size size, float radius, float borderWidth, int cornerSegments)
{
    const float kappa = 0.552228474;
    float oneMinusKappa = (1.0f-kappa);

    // define corner control points
    std::vector<Vec2> verts(16);

    verts[0] = Vec2(0, radius);
    verts[1] = Vec2(0, radius * oneMinusKappa);
    verts[2] = Vec2(radius * oneMinusKappa, 0);
    verts[3] = Vec2(radius, 0);

    verts[4] = Vec2(size.width - radius, 0);
    verts[5] = Vec2(size.width - radius * oneMinusKappa, 0);
    verts[6] = Vec2(size.width, radius * oneMinusKappa);
    verts[7] = Vec2(size.width, radius);

    verts[8] = Vec2(size.width, size.height - radius);
    verts[9] = Vec2(size.width, size.height - radius * oneMinusKappa);
    verts[10] = Vec2(size.width - radius * oneMinusKappa, size.height);
    verts[11] = Vec2(size.width - radius, size.height);

    verts[12] = Vec2(radius, size.height);
    verts[13] = Vec2(radius * oneMinusKappa, size.height);
    verts[14] = Vec2(0, size.height - radius * oneMinusKappa);
    verts[15] = Vec2(0, size.height - radius);

    // result
    std::vector<Vec2> polyVerts(4 * cornerSegments + 1);

    // add corner arc segments
    appendCubicBezier(0 * cornerSegments, polyVerts, verts[0], verts[1], verts[2], verts[3], cornerSegments);
    appendCubicBezier(1 * cornerSegments, polyVerts, verts[4], verts[5], verts[6], verts[7], cornerSegments);
    appendCubicBezier(2 * cornerSegments, polyVerts, verts[8], verts[9], verts[10], verts[11], cornerSegments);
    appendCubicBezier(3 * cornerSegments, polyVerts, verts[12], verts[13], verts[14], verts[15], cornerSegments);
    // close path
    polyVerts[4 * cornerSegments] = verts[0];

    // draw final poly into mask
    auto shapeMask = DrawNode::create();
    shapeMask->drawPolygon(&polyVerts[0], polyVerts.size(), Color4F::WHITE, 0.0f, Color4F::WHITE);

    // create clip node with draw node as stencil (mask)
    return ClippingNode::create(shapeMask);
}

example use case:

Size ws = Director::getInstance()->getWinSize();
Size maskSize = ws / 2.0f; // quarter screen area
       
auto sprite = Sprite::create("test.png");
        
// create masked image and position to center it on screen
auto clipNode = createRoundedRectMaskNode(maskSize, radius, 1.0f, 10);
clipNode->addChild(sprite);
clipNode->setPosition(ws.width * 0.25f, ws.height * 0.25f);
this->addChild(clipNode);
1 Like
#8

Thanks Sir! This work to me!
I don’t know how can I express my thanksful feeling. XD

#9

you can use shader and a mask image to achieve that

or you can use mask image with clipping node

#10

Is it possible to create a rounded rectangle without Sprite? Can we draw a rounded rectangle using just DrawNode functions?
Any help is much appreciated. Thanks!

#11

Hi,
Can anybody give the full working example.
I have tried above sample by @stevetranby but seems like i didn’t got it fully.

1 Like