Slick Forums

Issues drawing rotated image from spritesheet.
Page 1 of 1

Author:  packetpirate [ Thu Oct 05, 2017 6:10 pm ]
Post subject:  Issues drawing rotated image from spritesheet.

Hello. I'm working on a game in which I'm using a sprite sheet with 4 frames of an animation, and the render method of my Animation class should be drawing one frame at a time (which it does), but rotated and at a given position. The animation in question is an enemy.

I'm also drawing a red bounding box where the enemy is and a red dot at the center of rotation. But the behavior I'm getting is extremely unexpected and confusing. I start the enemy at the top left of the screen, but the image is always drawing off to the top-left of the bounding box relative to its rotation, and the image enlarges as the enemy gets closer to me. I have not been able to figure out what is causing the growth, as I am using the Graphics.drawImage(x, y, x2, y2, srcx, srcy, srcx2, srcy2) method to specifically draw the source frame at the correct width and height.

I have stepped through the code, and the x2 and y2 values are the expected values, and the rotation seems to be correct since the bounding box is facing the correct position. Does anyone know what might be wrong with my render method (see below for code):

public void render(Graphics g, Pair<Float> position, float theta) {
   Image image = getImage();
   if(image != null) {
      g.rotate(position.x, position.y, (float)Math.toDegrees(theta));
      g.drawImage(image, (position.x - (sw / 2)), (position.y - (sh / 2)),
               sw, sh, sx, sy,
               (sx + sw), (sy + sh));
      g.drawRect((position.x - (sw / 2)), (position.y - (sh / 2)), sw, sh);
      g.fillOval((position.x - 5.0f), (position.y - 5.0f), 10.0f, 10.0f);

For context, the variables are:
position - a custom x,y pair object representing the position of the enemy (its center). The x,y values are floats.
theta - a float representing the radian value of the rotation; calculated by using Math.atan2 with the two points being the enemy and player
image - an org.newdawn.slick.Image object containing the sprite sheet (192x48 px); there are 4 frames of the animation
sw - the width of each frame of the animation, in this case, 48
sh - the height of each frame of the animation, in this case, 48
sx - the starting x position of the current frame of the animation
sy - the starting y position of the current frame of the animation

Using this information, can anyone tell me if I'm using the g.drawImage method wrong? I can upload a WEBM of the behavior if it will help you to understand what is happening.

gzsr-issue01.png [ 97.09 KiB | Viewed 16990 times ]

Author:  jahmaican [ Wed Oct 11, 2017 2:46 pm ]
Post subject:  Re: Issues drawing rotated image from spritesheet.

I did something similar but I never relied on Graphics::rotate and drawing shapes. I'd have an image for bounding box and call it like

    Image sprite = ... // character sprite
    Image box = ... // just a square image

    public void render(GameContainer gc, Graphics g) throws SlickException {
        sprite.drawCentered(x, y);
        box.drawCentered(x, y);

(For providing different sized rectangles i have a helper method using ImageBuffer, it seems quite expensive to use but then I use it only for debug view.)

Page 1 of 1 All times are UTC
Powered by phpBB® Forum Software © phpBB Group