Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a rounded rectangle sprite and another sprite that's just a circle. I want the center of the circle to follow the edge of the rounded rectangle. Is there any easy way to accomplish this task? I've seen other answers that talk about curve and AI predictive algorithms, but they all seem more complicated to implement that for my current needs. Is using these algorithms necessary for what I'm trying to do, or is there an easier way to make one sprite follow the edge of another?

share|improve this question
Interesting read: – Eejin Jul 3 '14 at 9:37

You can use Path2d to define the outer edge of your rounded rectangle. This actually creates a Shape. To turn this into something you can use, FlatteningPathIterator can be called to create a list of points that can be used to step along the path. You can use this information to draw your circle as it progresses around your progress bar.

Here is a good example of what you are after. FlatteningPathIterator

share|improve this answer

assuming by sprite you mean that it is an image (loaded from a bitmap):

i would iterate through the pixels in the image, and identify the ones on the edge (adjacent to a transparent pixel) (or load an identical black and white hollow rectangle image showing only the edge points for easier identification) log those Points into an array by starting at one point remove it and then move to an adjacent edge point. get the position the image is displayed at offset the list co-ords by the image position. you then have a list of points for your circle to move through.

that is the simplest way to do it that i know of (dont personally use libgdx).

if the image is moving (animated) apply the offset to the array points just before you display so you dont have to reload the array each time.

there are probably better ways to do it, but this is what comes to mind for me. you could reuse the code to generate paths of any shape by drawing them in paint.

share|improve this answer

If you're looking for a really simplistic approach, here's one I've used in the past:

  • Create an object that has both sub-objects (rectangle and circle)
  • Create a getter/setter pair for x/y coordinates on your object
  • When you move the object by calling setX(x), it sets the rectangle's x coordinate to x, and the circle's x coordinate to x + a where a is the distance from the center of the circle to the rectangle corner.

You can do something similar for the y coordinate; essentially, you're creating a wrapper object and setting coordinates manually to some offset (so the circle is always positioned correctly relative to the rectangle).

share|improve this answer
Thanks! So let's say I wanted to do this the "commercial" way, what methods are generally used? I'm basically trying to create a loading bar that takes the form of a curved rectangle. – John Jul 3 '14 at 20:31
@John I'm not sure what you mean by "commercial." Loading bars are an entirely different beast; you would probably have a sprite (representing "done" progress) which you scale horizontally as the game loads. – ashes999 Jul 3 '14 at 20:54
But what if the sprite is not a simple horizontal/vertical loading bar? The reason I used the ball/rounded rectangle in the OP is because the "ball" is actually going to be a beam of light that covers the entire edge of the rounded rectangle. So the ball will start with it's center at one point on the rectangles edge, and as it moves around the rectangle it's previous position stays, giving the appearance of a loading bar taking the shape of a rounded rectangle. Do you see what I mean? – John Jul 3 '14 at 21:00
@John sorry, I don't see what you mean. – ashes999 Jul 4 '14 at 4:55
Sorry, something like this: so the ball starts at one position, and as it moves around the rectangle the spaces it was previously at are being filled along the way (until moves completely around and the entire outside is filled). – John Jul 4 '14 at 8:38

What I would likely do is convert the rectangle to a Pixmap, then, assuming the rectangle has a solid single color border (with a different color than the rest of the rectangle), I would simply iterate through the pixels in the Pixmap looking for the border color and save all the positions to an array. Then all you would have to do is periodically set the circle's position to the next point in the array, looping (ideally the points would be relative to the center of the rectangle so the circle would stay with the rectangle even if it moved).
To keep the circle moving in one direction around the rectangle instead of jumping you would have to create a search algorithm that moves, for example, first left along the top of the rectangle (assuming the border is the top pixel) then down (scanning to half the rectangles width so as to get the full rounded corner), then right (along the bottom pixel), and finally back up. Now this scanning technique might not fit your exact needs, but take it as a starting point.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.