How to rotate two textures at once in Libgdx, while keeping their relative positions the same?

Question

I am trying to develop a game with cards, where the user can swipe left or right to tilt the cards like this. The red & white cross should stay in the same position on the yellow card as they tilt together, but you can see in the images below that their positions shift relative to one another:

I started this game with the yellow card with purple edges, and I tried to rotate it once the user swipe left or right using this code:

void renderCard(SpriteBatch sb , TextureRegion cardShape)
{
    sb.draw(cardShape, x, y, originX, originY, cardWidth, cardHeight, 1, 1, rotationAngle);
}

Once the user swipes, I modify the rotation angle in the method above.

Now, I want to add another texture region over this one, and I want to rotate it too once the user swipes.

Here is the code for that:

void renderCross(SpriteBatch sb,TextureRegion crossShape)
{
    sb.draw(crossShape, x+130.0f, y+130.0f, originX+130.0f, originY+130.0f, 200, 200, 1, 1, rotationAngle);
}

When there was no swipe performed, anything was okay, all the above are drawn. perfectly drawn.

But when I swipe left or right, there are some offsets added, as you can see in the images above.

So the question is, how do I keep the the same relative positions between these two textures, like the game started?

Answer 1

You need to make it so both sprites rotate around the same point. You will need to set the origin of each sprite so that they are both in the same world space.

cardShape.setOrigin(0, 0); // bottom left corner
crossShape.setOrigin(-2,-2) // 2 units below and 2 units to the left

This should make both sprites rotate around the card bottom left corner if the crossShape is 2 units up and 2 units to the right of the cardShapes bottom left corner.