Jump to content
  • Advertisement

Draw chained rotated rectangles next to each other

Recommended Posts


I am developing a 2D game in Java where top-left corner is (0,0) and bottom-right is (max x, max  y). 

I want to render rotated rectangles next to each other. Say I have the following image(rotation 0):


If I wanted to draw an other one of this next to this one so that the green line connects(or "chains"), I would simply draw it at previous rectangle position + rectangle with. Easy.

If it however was rotated, like this(30 degrees):


Then I would somehow have to recalculate both the x and y coordinate. Not sure how to do this.

Any help would be appropriated. 

Share this post

Link to post
Share on other sites

You'll need to shift the position of the rectangle, and the amount depends on the angle, the center of rotation, and the length of the side. 

The math is your basic trig operations of sine and cosine. For a unit of 1 from the rotation's center, the shift up/down is the sine and the shift to the side is the cosine.  Multiply by your actual length from the center by that value to get the scaled distance.  Use one minus that value to get the amount to shift the sprite.

Edited by frob
Remove possibly confusing example.

Share this post

Link to post
Share on other sites
1 hour ago, P0jahn said:

If it however was rotated, like this(30 degrees):

You need a hook. So if your image is (0,0)(maxX,maxY) then the middle point is (maxX /2, maxY/2).

Move the sprite next to the other using the position + position. Then also rotate the second sprite.

Rotate it around the other sprites middle point using this:  xrot=cos(θ)⋅(x−cx)−sin(θ)⋅(y−cy)+cx   and yrot=sin(θ)⋅(x−cx)+cos(θ)⋅(y−cy)+cy Important this is for radians, degree to radian.

#This is mock code so you can adapt it.

angleInRad = (angleInDeg ) * (Math.PI/180);
Sprite1Cen = (Sprite1.x/2, Sprite1.y/2);
Sprite2Cen = (Sprite2.x/2, Sprite2.y/2)

Sprite2Cen.x = cos(angleInRad) * (Sprite2Cen.- Sprite1Cen.x) -Math.sin(angleInRad ) * (Sprite2Cen.y-Sprite1Cen.y) + Sprite1Cen.x;

Sprite2Cen.y= Math.sin(angleInRad) * (Sprite2Cen.- Sprite1Cen.x) +Math.cos(angleInRad) * (Sprite2Cen.- Sprite1Cen.y) + Sprite1Cen.y;

This is the same answer @frob gave just a small bit different. In fact depending on your engine there will always be small differences.

Edited by Scouting Ninja

Share this post

Link to post
Share on other sites
13 hours ago, Scouting Ninja said:

Rotate it around the other sprites middle point

Cleaver and simple solution. Thanks!

Edited by P0jahn

Share this post

Link to post
Share on other sites

Back again. So I got it to work. Here is the method I use to rotate points:

    public static Vector2 rotatePoint(final float x, final float y, final float cx, final float cy, final float rotation) {
        if (rotation % 360 == 0)
            return new Vector2(x, y);

        final float angleInRadians = (float) (rotation * (Math.PI / 180));
        final float cosTheta = MathUtils.cos(angleInRadians);
        final float sinTheta = MathUtils.sin(angleInRadians);

        return new Vector2(
                (cosTheta * (x - cx) - sinTheta * (y - cy) + cx),
                (sinTheta * (x - cx) + cosTheta * (y - cy) + cy));

Now I want to draw a small ball between these rectangles. They are like connectors. The thing that keeps the parts together. I did in a similar way, but they are slightly of. 

How do I get the correct position for these connectors? 

Edited by P0jahn

Share this post

Link to post
Share on other sites

You'll be better off understanding the math rather than asking people to spoon-feed you answers.

When you rotate things, points of the object are shifted based on the angle.  Sine and cosine of the angle tell you the new positions as they move around a circle.  The sine tells the vertical shift, the cosine tells the horizontal shift for an item of distance 1.0. You need to multiply that result by the actual distance from the rotation point, which may be in pixels or meters or whatever units you are using.

All the positions of rotated objects follow from that.

Share this post

Link to post
Share on other sites

The method above works fine, I just posted it for the sake of completeness. Am actually trying to learn the math and not to get spoon feed.

Anyway I resolved this by giving this unit its own camera/matrix, which I rotate and apply to the sprite batch before render and clear afterwards.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!