How to draw a rotated Image from its center in Slick2D?

Question

The problem is the following: I have a position of lets say a spaceship and the position has to be defined in the middle of it (e.g. because of collision issues etc.). If the Spaceship would not be rotated, the image would be drawn like this:

spaceship.draw(xPos - width/2 , yPos - height/2);

The Spaceship is now Image in Slick2D, that has a random angle (0 <= angle <360), and still the position has to be defined at it's center. What slick does in the draw()-methods is the following:

It draws an oval around the image (i guess with the smallest possible surface area) and then looks where the line from the center at 135° off cuts the ellipse (red point) and sets that as position.

I still want to draw it centered, that means, i have to subract a value in both dimensions (draw(xPos - xOff, yPos - yOff)):

But im unabled to calculate that! Can someone help me please? I wasted two days to understand what the problem is...

Thanks a lot and Greets, r

Here the rendering code:

> public void render(GameContainer gc, StateBasedGame sbg, Graphics g)
> throws SlickException{
>           
>           // This sets all rotation to the middle of the graphics.
>           // The method works RELATIVE TO THE TOP-LEFT-CORNER OF THE IMAGE.
>           skin.setCenterOfRotation(skin.getWidth() * Revolve.getGS()/2 + Revolve.getXShift(),
>                   skin.getHeight() * Revolve.getGS()/2 + Revolve.getYShift());
>           
>           // This sets the Angle properly
>           skin.setRotation(angle);
>           
>           // This draws the image: xPos and yPos define THE CENTER of the Image.
>           skin.draw(
>               (float) (Revolve.getXShift() + Revolve.getGS() * xPos),
>               (float) (Revolve.getYShift() + Revolve.getGS() * yPos),
>               Revolve.getGS()
>           );
>     
>           // Draws the xPos and yPos of the Ship
>           g.setColor(Color.white);
>           g.drawOval(Revolve.getXShift() + Revolve.getGS() * xPos, Revolve.getYShift() + Revolve.getGS() * yPos, 2, 2);
>       }

Answer 1

Well all becomes clear with some code.

Here is a solution:

@Override
public void init(GameContainer container) throws SlickException
{
    this.character = new Image("/home/ronan/Images/20150517010612.jpg");
    this.scale = 0.5f;
    // When you set your center of rotation is is relative to your image ONLY.
    // this will make the center of my image to be the center of the rotation
    // NOTHING more to add
    this.character.setCenterOfRotation((this.character.getWidth()/2)*this.scale, (this.character.getHeight()/2)*this.scale);
}

@Override
public void update(GameContainer container, int delta) throws SlickException
{
    this.rotation +=delta/10;
    this.character.setRotation(this.rotation);
}

public void render(GameContainer container, Graphics g) throws SlickException
{
    // Here I consider that my position is (500,500). then to draw it, I just substract hal the size of my image.
    // It will draw from top-lefft corner but based on my center.
    character.draw(500-(this.character.getWidth()/2)*this.scale, 500 - (this.character.getHeight()/2)*this.scale,this.scale);
}

I separate everything to be clear.

In the init method, you have to set you center of rotation. This center is relative to the image so just divide your width ad height by two to have the coordinate of the center of your image. when it work you multiply by you scale. Nothing more to add as it is really local for your image.

In the render method, to draw an image its always from top left corner. Just substract half width and half height to set use your center.

Just adapt this code to yours and it should go fine. Ask if you need more precision.