1
\$\begingroup\$

I'm trying to implement an arrow at the bottom of the screen on an Android device. This arrow is placed in the center of the screen and is supposed to rotate by a given angle. The problem is that when using the SpriteBatch's draw function for a TextureRegion it rotates the whole image, so the y coordinate also moves up a bit.

I want the arrow to always be in the center of the screen with the x, y coordinates and not move up the y coordinate. I want the y coordinate to stick to the bottom of the screen, but I still need to rotate the arrow. So I don't know if this is possible in my approach to do this.

If you have an approach in LibGDX that is very different from mine. I still want to see it because I don't care how I get this to work, I just want to get it to work somehow.

This far I've found this Rotation - libGDX that helped me get the rotation a little better, but I need an arrow like in the game called Bubble Shooter. Image of Bubble Shooter Arrow

The arrow should be the radius inside of an invisible circle, I guess, is one way to see it. See images below.

Example: enter image description here

enter image description here enter image description here

\$\endgroup\$
0
\$\begingroup\$

You can set the origin when using SpriteBatch#draw function. You'll have to substract half of the width when setting the x coordinate too:

batch.draw(
    yourTexture,                                  // the texture or texture region
    x - yourTextureWidth / 2, y,                  // x and y coordinates taking into account the origin (horizontal origin is the middle yourTextureWidth / 2, vertical origin is the bottom 0)
    yourTextureWidth / 2, 0,                      // the origin (horizontal origin is the middle yourTextureWidth / 2, vertical origin is the bottom 0)
    yourTextureWidth, yourTextureHeight,          // width and height (keep them the same)
    1, 1,                                         // scale (unaffected)
    rotation                                      // rotation in degrees
);

According to your needs, you'll have to set x to be half the screen width and set y to 0.

Note: We have to substract or add the origin offset to the position because the draw method origin parameters only affect rotation and scale. Thus, the origin to position should be added manually by substracting or adding to the x and y coordinates.

\$\endgroup\$
  • \$\begingroup\$ So basically, just set the y orgin coordinate to a constant value for it to not move away? Thanks for your help. \$\endgroup\$ – kevvex Jul 16 '18 at 14:50
  • \$\begingroup\$ @kevvex Actually the y origin is the simplest one. It should be 0. The x origin is the tricky one as you should substract half the width. Look! Let width and height be the texture width and height, respectively. Let screenWidth and screenHeight be the screen width and height, respectively. This should work for you: batch.draw(yourTexture, screenWidth / 2 - width / 2, 0, width / 2, 0, width, height, 1, 1, yourRotationAmountInDegrees); \$\endgroup\$ – ibrahim mahrir Jul 16 '18 at 14:58
  • \$\begingroup\$ The texture region is just an image of the arrow with transparent background, but there are no transparent paddings in the image. Just the size of the arrow. \$\endgroup\$ – kevvex Jul 16 '18 at 15:03
  • \$\begingroup\$ Your solution do work. Sorry, maybe I didn't express myself clearly. I've already marked your solution as correct. \$\endgroup\$ – kevvex Jul 16 '18 at 15:08
  • \$\begingroup\$ @kevvex Ah, I see! You're welcome then! :D \$\endgroup\$ – ibrahim mahrir Jul 16 '18 at 15:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.