Why is my image rotating off center?

Question

I'm using Java/Slick 2D to play with graphics and using the mouse to rotate an image. Something strange happens though: the image doesn't necessarily face the mouse. At 45 degrees from the normal line it does, but the further you get, the further your are off. See the images below (the white circle being the mouse, the text being the angle): Image at 80 degrees Image at 45 degrees

Here is the rotation code I used:

int mX = Mouse.getX();
        int mY = HEIGHT - Mouse.getY();
        int pX = sprite.x;
        int pY = sprite.y;
        int tempY, tempX;
        double mAng, pAng = sprite.angle;
        double angRotate=0;

        if(mX!=pX){
            mAng = Math.toDegrees(Math.atan2(mY - pY, mX - pX));
            if(mAng==0 && mX<=pX)
                mAng=180;
        }
        else{
            if(mY>pY)
                mAng=90;
            else
                mAng=270;
        }

        sprite.angle = mAng;
        sprite.image.setRotation((float) mAng);

Any ideas what's going on? I'm assuming it has something to do with the fact that the image coordinates come from the top left, but I don't know how to counter it. FYI: screen 640x460, image 128x128 and centered in window.

EDIT: Unfortunately, nothing there really worked. Here is a picture with some more information:

Arrow at 35 degrees

EDIT2: Found the answer! had to change: int px/py = sprite.x/y to

        int pX = sprite.x+sprite.image.getWidth()/2;
    int pY = sprite.y+sprite.image.getHeight()/2;

score 2 · Answer 1 · answered Sep 26 '12 at 21:09

2

It looks like your getting the value of your mouse from the left and setting that distance to your rotation... Here's something that might help:

http://www.instructables.com/id/Using-Java-to-Rotate-an-Object-to-Face-the-Mouse/?ALLSTEPS

answered Sep 26 '12 at 21:09

Stephen

576
8
19

score 0 · Answer 2 · answered Sep 26 '12 at 22:51

This is some example code I wrote of a similar question which might help.

Now it doesn't use slick, it uses Swing and Graphics2D but it might help you gain some ideas.

public class TestRotatePane extends JPanel {

    private BufferedImage img;
    private Point mousePoint;

    public TestRotatePane() {

        try {
            img = ImageIO.read(getClass().getResource("/MT02.png"));
        } catch (IOException ex) {
            ex.printStackTrace();
        }

        addMouseMotionListener(new MouseAdapter() {

            @Override
            public void mouseMoved(MouseEvent e) {

                mousePoint = e.getPoint();

                repaint();

            }

        });

    }

    @Override
    public Dimension getPreferredSize() {

        return new Dimension(img.getWidth(), img.getHeight());

    }

    @Override
    protected void paintComponent(Graphics g) {

        super.paintComponent(g);

        Graphics2D g2d = (Graphics2D) g.create();

        double rotation = 0f;

        int width = getWidth() - 1;
        int height = getHeight() - 1;

        if (mousePoint != null) {

            int x = width / 2;
            int y = height / 2;

            int deltaX = mousePoint.x - x;
            int deltaY = mousePoint.y - y;

            rotation = -Math.atan2(deltaX, deltaY);

            rotation = Math.toDegrees(rotation) + 180;

        }

        int x  = (width - img.getWidth()) / 2;
        int y  = (height - img.getHeight()) / 2;

        g2d.rotate(Math.toRadians(rotation), width / 2, height / 2);
        g2d.drawImage(img, x, y, this);

        x = width / 2;
        y = height / 2;
        g2d.setStroke(new BasicStroke(3));
        g2d.setColor(Color.RED);
        g2d.drawLine(x, y, x, y - height / 4);
        g2d.dispose();

    }

}

enter image description here

You will, obviously, need to supply your own image ;)

Why is my image rotating off center?

2 Answers2