Need help to implement custom UI control

cocos2d-x C++
#1

Hi,

What I’m trying to do is a “carousel” control that is where is the nodes are evenly distributed from the origin and evenly distributed from each other on the arc.

Of course, nodes can be added/removed.

Here is the picture of what I’m trying to achieve:

aaa628663e615c74.png593×596

#2

http://gamedev.stackexchange.com/questions/18340/get-position-of-point-on-circumference-of-circle-given-an-angle

You could space the nodes out by using something like:

CCPoint calcPointOnCircumference(CCPoint center, float radius, float angle)
{
   float x = cosf(angle) * radius + center.x;
   float y = sinf(angle) * radius + center.y;
   return CCPoint(x,y);
}

int step = 360 / nodes.size();
for(int i = 0; i < node.size(); i++)
{
   theta = step * i;
   CCPoint p = calcPointOnCircumference(CCPoint(0,0), radius, step);
   node->setPosition(p);
}

Then all you need is to create a control that updates the node positions as children of the origin when ever the node list changes.

Hope this helps

2 Likes
#3

It helps indeed, thank you very much almax27! :thumbsup:

#4

One more question, now more specifically about implementing this UI control in cocos2d-x:

Which class (Sprite, Layer) do I need to derive from (if any?) in order to implement this thing?

Thanks.

#5

Depends on how it integrates with the rest of your UI. You could derive from Widget if you need relative coordinates, focus handling etc or you could just inherit from Node. In both these cases your control will probably be acting as the origin point. I would recommend reading through the wiki and cocos2d-x code to understand what each type provides and how it fits with the rest of your application.

#6

Depends on how it integrates with the rest of your UI.

@almax27 In general, it should be addable to a layer as a UI element, be
responsive to touch events (derive from the Layer class?) (do we have gestures support in cocos2d-x
framework?)

Here is a more clear picture of a custom UI control I want to implement:

5f053d46cbc98784.png865×596

  • Red zone will respond to touch events: new nodes will be added
    according to a touch location (between other nodes)
  • Nodes should respond to touch events: double-tap on a node will
    remove it.

Would like to hear any recommendations!