How to create ellipse in cocos2dx

cocos2d-x C++
#1

I am working on one game in which we need to create an eclipse, we searched for that and we are able to create basic shapes like circle and line and polygon but we want to draw an ellipse, so any help and we want to set a click event listener on it @bilalmirza @slackmoehrle

#2

Eclipse or ellipse? :grinning:

#3

Actually good point.

Eclipse like a god rays style effect?

Or an ellipse shape?

#4

:slight_smile: ellipse

#5

ellipse shape :slight_smile:

#6

Did you try to google it?
Did you try this Draw Ellipse (ccDrawingPrimitives)

#7

You can also scale a circle in a non-uniform way to achieve an ellipse. ie: scaleX = 1, scaleY = 0.5

#8

thanks again, yeah i googled it and i have tried it today and it’s not working.

#9

well i am able to create ellipse now, but what I am looking for is create rectangle with rounded corner, I thought can make it with ellipse but nope i can’t get rectangle with rounded corner… so do you know other method to do that?

#10

use a 9patch

1 Like
#11

I like captainflyaway’s response of just using a Scale9Sprite. However, if you want to physically create one, create a polygon function, you will need to curve on the edges with a bezier/curve function. I use something similar to create a rounded rectangle like this (note some parts might be out of context like the clipping part):

void RoundedEdgeClippingNode::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;
    }
}

ClippingNode* RoundedEdgeClippingNode::createRoundedRectMaskNode(Size size, float radius, float borderWidth, int cornerSegments) {
    DrawNode *shapeMask = RoundedEdgeClippingNode::createRoundedBorder(size, radius, borderWidth, cornerSegments, Color4F::WHITE);
    return ClippingNode::create(shapeMask);
}

DrawNode* RoundedEdgeClippingNode::createRoundedBorder(Size size, float radius, float borderWidth, int cornerSegments, Color4F borderColor) {
    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->setLineWidth(1);
    shapeMask->drawPolygon(&polyVerts[0], (int)polyVerts.size(), Color4F(0,0,0,0), borderWidth, borderColor);
    
    return shapeMask;
}