Libgdx - Actor's position is incorrect

Question

I'm pulling my hair out. I've spent a few hours now on this. Here is what I am doing. I have an image that is an actor. I can move this image to wherever I want. That works fine. I added a Slider so I can also resize this image. This is where the problem sets in. Once I resize it, I can still move it, but it is no longer where my finger is. It is, if it shrunk in size, to the NE. If it increased, it is to the SE. (of my finger). Anyways, I have no idea what is causing this. I spent an hour just writing different equations for adjusting per size, but nothing is working. Also, the world bounds become incorrect too. I shouldn't be allowed to move the actor/image outside of the screen. I do a simple check. (actor.getX() <= 0). I feel like I should note that before resizing, everything works fine. Anyways, the bounds check was simple, right? Well, if I make my image smaller, it gets stopped before it reaches the edge. If I make it larger, it can enter the edge a bit. The same for the opposite side, except that this time if its larger, it gets stopped before it reaches, and if its smaller, it can go in a bit. Here, let me show you some code...

My Table for the Slider:

private Table buildSlidersLayer() {
        Table layer = new Table();
        layer.right().top();
        Label label = new Label("A Button Size", skinLibgdx);
        layer.add(label);
        layer.row();
        sldSize = new Slider(0.0f, 1.0f, 0.01f, false, skinLibgdx);
        layer.add(sldSize);
        sldSize.addListener(new ChangeListener() {

            @Override
            public void changed(ChangeEvent event, Actor actor) {
                sldSizeVal = sldSize.getValue();
                divFacAButton = ((((1.0f - sldSizeVal) - 0.01f) * (2.0f - 0.7f)) / (0.99f - 0.01f)) + 0.7f;
                aButton.setSize(120 / divFacAButton, 120 / divFacAButton);
            }

        });
        // sldSize.setPosition(60, 60);
        return layer;
    }

My divFacAButton is between a range of 0.7 and 2.0(aprrox.). I divide 120 by these to get the size.

Now, this is how I move my image:

aButton = new Image(skinCydeonWorld, "a-button");
        layer.addActor(aButton);
        aButton.setSize(aButton.getWidth() / 1.5f,
                aButton.getHeight() / 1.5f);
        aButton.setOrigin(aButton.getWidth() / 2, aButton.getHeight() / 2);
        aButton.setPosition(GamePreferences.instance.aButtonX,
                GamePreferences.instance.aButtonY);
        aButton.setRotation(180f);

        aButton.addListener(new DragListener() {

            @Override
            public void touchDragged(InputEvent event, float x, float y,
                    int pointer) {
                float xAspect = stage.getWidth() / Gdx.graphics.getWidth();
                float yAspect = stage.getHeight() / Gdx.graphics.getHeight();
                aButton.setPosition(
                        (Gdx.input.getX() - aButton.getHeight() / 2f) * xAspect,
                        ((Gdx.graphics.getHeight() - Gdx.input.getY()) - aButton
                                .getHeight() / 2f) * yAspect);
                checkAndAdjustPos(aButton);
                super.touchDragged(event, x, y, pointer);
            }

        });

Here I move the image. I set the image position to wherever I clicked, minus half the width on the x, and half the height on the y.

Here's an illustration on how the positioning is off, as well as it being stopped too early from the wall:

And so that's basically it. After resizing, the bounds and positions seem to get out-of-whack. I'm totally lost and have a major headache. If anybody has any idea why this is happening, what I'm doing wrong, or how I can fix this, I would be eternally(ok, maybe not) grateful. :)







I found a solution with the help of BrainfoG313! Here's my new code:

aButton.addListener(new DragListener() {

            @Override
            public void touchDragged(InputEvent event, float x, float y,
                    int pointer) {
                xAspect = Constants.VIEWPORT_GUI_WIDTH / Gdx.graphics.getWidth();
    yAspect = Constants.VIEWPORT_GUI_HEIGHT/ Gdx.graphics.getHeight();
                aButton.setPosition(
                        (Gdx.input.getX() - (aButton.getWidth() * divFacAButton / 2f))
                                * xAspect,
                        ((Gdx.graphics.getHeight() - Gdx.input.getY()) - (aButton
                                .getHeight() * (divFacAButton < 1.3f ? 0f : divFacAButton) / 2f))
                                * yAspect);
                checkAndAdjustPos(aButton);
                super.touchDragged(event, x, y, pointer);
            }

        });

Checking if the actor leaves the screen:

{
        if (actor.getX() - (aButton.getWidth() / 2 / divFacAButton) + 80f / 2f < 0)
            actor.setPosition(
                    (aButton.getWidth() / 2 / divFacAButton) - 80f / 2f,
                    actor.getY());
        if (actor.getX() + actor.getWidth()
                / (minSize + maxSize - divFacAButton) > stage.getWidth() * xAspect)
            actor.setPosition(stage.getWidth() * xAspect - actor.getWidth()
                    / (maxSize + minSize - divFacAButton), actor.getY());
        if (actor.getY() - (aButton.getHeight() / 2 / divFacAButton) + 80f / 2f < 0)
            actor.setPosition(actor.getX(),
                    (aButton.getWidth() / 2 / divFacAButton) - 80f / 2f);
        if (actor.getY() + actor.getHeight()
                / (minSize + maxSize - divFacAButton)/* / divFactor */> maxHeight * yAspect)
            actor.setPosition(actor.getX(), maxHeight * yAspect - actor.getHeight()
                    / (minSize + maxSize - divFacAButton));
    }

For checking if it left outside of the screen, I used two different formulas/equations:

For the x-axis:

xPosition - (1/2currentWidth / divFacAButton) + 1/2defaultWidth = leftEdge

For the y-axis:

yPosition - (1/2currentHeight / divFacAButton) + 1/2defaultHeight = bottomEdge

And my second formula/equation:

For the x-axis

xPosition + currentWidth / (minSize + maxSize - divFacAButton) = rightEdge

For the y-axis

yPosition + currentHeight / (minSize + maxSize - divFacAButton) = topEdge

It's not perfect, but it's pretty close and works fine! :D

Answer 1

Just breezin' through your code, it looks like the resizing slider is adjusting the image size and not the container. I ran into a similar situation when I was working with Circles and drawing images over them; the hitbox and image wouldn't align. Horrible picture, incoming!

float xAspect = stage.getWidth() / Gdx.graphics.getWidth();

float yAspect = stage.getHeight() / Gdx.graphics.getHeight();

This is the point in your code that makes me wonder.