Hi.
I want create sprite with rounded corner.
Like this,
->
How can I with cocos2d-x ?
Somebody help me T-T
Hi.
I want create sprite with rounded corner.
Like this,
->
How can I with cocos2d-x ?
Somebody help me T-T
just make your png with rounded corners with transparent background color
Thanks Sir. But I want draw by coding, not PhotoShop.
Is there anyway? T-T
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!
Well i guess you will need to port the CCRoundedRectNode to c++
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.
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);
Thanks Sir! This work to me!
I don’t know how can I express my thanksful feeling. XD
you can use shader and a mask image to achieve that
or you can use mask image with clipping node
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!
Hi,
Can anybody give the full working example.
I have tried above sample by @stevetranby but seems like i didn’t got it fully.