very strange button size problem

Anything libgdx related goes here!

very strange button size problem

Postby TruePlayer » Sat Aug 17, 2019 10:21 pm

I created the world with a 10x7 grid and expect all my actors to be displayed according to the grid coordinates and be sized according to the conventional units of the grid. And for my actors whom I describe, the behavior is expected, here is a code example where I draw a red rectangle in the middle of the screen:
Code: Select all
public class TestActor extends Actor {
    private ShapeRenderer shapeRenderer;
    static private boolean projectionMatrixSet;

    public TestActor(){
        shapeRenderer = new ShapeRenderer();
        projectionMatrixSet = false;
    }

    @Override
    public void draw(Batch batch, float parentAlpha){
        batch.end();
        if(!projectionMatrixSet){
            shapeRenderer.setProjectionMatrix(batch.getProjectionMatrix());
        }
        shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
        shapeRenderer.setColor(Color.RED);
        shapeRenderer.rect(3, 2, 4, 1);
        shapeRenderer.end();
        batch.begin();

    }
}



The problem starts when I try to add a button to the screen. I know that the button is extends actor, but my technique does not work.
I see only a large blurry spot in the upper right corner, I can not change the position or size of the button. why it happens?

Code: Select all
public class MenuState extends GameState implements Screen {
    private Skin skin;
    private Stage stage;

    private float CAMERA_WIDTH;
    private float CAMERA_HEIGHT;
    private float ASPECT_RATIO;
    private Viewport viewPort;

    private TextButton exitButton;

    public MenuState(GameStateManager gsm) {
        super(gsm);
        CAMERA_WIDTH = 10f;
        CAMERA_HEIGHT = 7f;
        ASPECT_RATIO = gsm.getWeight() / gsm.getHeight();
        this.camera.setToOrtho(false, CAMERA_WIDTH, CAMERA_WIDTH / ASPECT_RATIO);
        this.camera.position.set(new Vector3(CAMERA_WIDTH / 2f, (CAMERA_WIDTH / ASPECT_RATIO) / 2f, 0));
        viewPort = new FillViewport(CAMERA_WIDTH, CAMERA_HEIGHT);
    }


    @Override
    public void show() {
        skin = new Skin(Gdx.files.internal("skin/uiskin.json"));
        stage = new Stage(viewPort);

        exitButton = new TextButton("EXIT",skin, "default");
        exitButton.setWidth(4f);
        exitButton.setHeight(1f);
        exitButton.setPosition(3f, 4f);
        exitButton.addListener(new ClickListener(){
            @Override
            public void clicked(InputEvent event, float x, float y){
                gsm.setState(5);
                dispose();
            }
        });

        stage.addActor(new TestActor());
        stage.addActor(exitButton);
    }

    @Override
    public void render(float delta) {
        Gdx.gl.glClearColor(0, 0, 0, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        batch.setProjectionMatrix(camera.combined);
        stage.draw();
    }
Last edited by TruePlayer on Sun Aug 18, 2019 1:01 am, edited 1 time in total.
TruePlayer
 
Posts: 103
Joined: Sun Jul 28, 2019 12:22 pm

Re: very strange button size problem

Postby TruePlayer » Sat Aug 17, 2019 11:25 pm

in addition, using the option
Code: Select all
 exitButton.setDebug (true);
debugging borders are where I expect, but the color of the skin is smeared across the screen
TruePlayer
 
Posts: 103
Joined: Sun Jul 28, 2019 12:22 pm

Re: very strange button size problem

Postby TruePlayer » Sat Aug 17, 2019 11:54 pm

Image
TruePlayer
 
Posts: 103
Joined: Sun Jul 28, 2019 12:22 pm

Re: very strange button size problem

Postby tenfour04 » Sun Aug 18, 2019 1:51 pm

Probably has to do with you not calling update on the viewport in the resize() method.

Also, I can see you're doing some unusual stuff with your camera. A Stage uses a Viewport as its camera manager. The Viewport contains its own camera. But you are manipulating some other camera that you never pass to your viewport. And you're doing some weird math to come up with your world size for your FillViewport (which in my opinion is the one Viewport that should never be used under any circumstances).

If your camera were passed to your viewport, your manipulations on it would be meaningless because a viewport is a camera manager, and the viewport would be changing its viewportWidth and viewportHeight.

When you call batch.setProjectionMatrix(camera.combined);, that is meaningless because stage has its own viewport, which has its own camera. stage.draw() takes care of applying its camera's matrix to the batch.
tenfour04
 
Posts: 1233
Joined: Sat Jun 18, 2011 3:24 pm

Re: very strange button size problem

Postby TruePlayer » Sun Aug 18, 2019 2:36 pm

in all the articles that I read, and in all the tutorials on YouTube, people create a camera separately, do they really do everything wrong and I need to use the built-in camera?
Also, many trainings show that FillViewport is an excellent choice for scaling under the screens of different devices, but you say that its use is not permissible, I would like to listen to the arguments.

I want to know as much as possible I advise people thanks. My question has NOT been resolved!
I am interested in a specific question why the button debug frame is located where necessary, and the button skin is stretched very much
TruePlayer
 
Posts: 103
Joined: Sun Jul 28, 2019 12:22 pm

Re: very strange button size problem

Postby evilentity » Sun Aug 18, 2019 4:33 pm

Cus ui stuff expects units to be pixels. Ninepatch that is button background cant be smaller then it is in pixels or it will draw wrong.Its size is larger then 4x1.
Looking for a freelancer? PM me!
Check out libgdx discord server!
evilentity
 
Posts: 4854
Joined: Wed Aug 24, 2011 11:37 am

Re: very strange button size problem

Postby TruePlayer » Sun Aug 18, 2019 4:40 pm

evilentity wrote:Cus ui stuff expects units to be pixels. Ninepatch that is button background cant be smaller then it is in pixels or it will draw wrong.Its size is larger then 4x1.

Thanks for the answer, I read a lot, but I hear about it for the first time!
I need to set the size of the world a lot more as I understand it, I'll try it now



You were absolutely right!
this is both good and bad news, now I can work and align the buttons on the screen, but now I can’t work in my conditional coordinates as I wanted before.
A new problem also appeared, the listener area is significantly different from the button location area, I will experiment with the sizes, but if someone has the correct answer, please post it here)
Image
TruePlayer
 
Posts: 103
Joined: Sun Jul 28, 2019 12:22 pm

Re: very strange button size problem

Postby TruePlayer » Sun Aug 18, 2019 4:59 pm

I realized that the listener's hitbox depends on the size of the button with this problem done.
Image

Is there really no one method to work in the conditional coordinates of the grid?
What method should I use to center the buttons on all types of screens? How to save the scale of buttons on all types of screens?
TruePlayer
 
Posts: 103
Joined: Sun Jul 28, 2019 12:22 pm

Re: very strange button size problem

Postby evilentity » Sun Aug 18, 2019 10:08 pm

It is often the case that you have two viewports, one for the game with small units and other for ui, likely 1:1 unit to pixels or something close.
Explore https://github.com/libgdx/libgdx/wiki/Scene2d.ui and https://github.com/libgdx/libgdx/wiki/Table
Last one if about positioning things.
Looking for a freelancer? PM me!
Check out libgdx discord server!
evilentity
 
Posts: 4854
Joined: Wed Aug 24, 2011 11:37 am

Re: very strange button size problem

Postby TruePlayer » Sun Aug 18, 2019 10:56 pm

Thank you, I read and tested, I came to the conclusion that this code is the only way to structure the buttons on the screen of the game menu:
Code: Select all
 Table t = new Table();
        t.setFillParent(true);

        t.add(debugButton).
                expandX().
                center().
                padTop(debugButton.getHeight()/2).
                width(stage.getViewport().getWorldWidth() * 0.25f).
                row();
        t.add(gameButton).
                expandX().
                center().
                padTop(gameButton.getHeight()/2).
                width(stage.getViewport().getWorldWidth() * 0.25f).
                row();
        t.add(scoreButton).
                expandX().
                center().
                padTop(scoreButton.getHeight()/2).
                width(stage.getViewport().getWorldWidth() * 0.25f).
                row();
        t.add(exitButton).
                expandX().
                center().
                padTop(exitButton.getHeight()/2).
                width(stage.getViewport().getWorldWidth() * 0.25f).
                row();



        stage.addActor(t);



only mathematical calculations will help keep the buttons even and the same on different screens?
TruePlayer
 
Posts: 103
Joined: Sun Jul 28, 2019 12:22 pm

Next

Return to Libgdx

Who is online

Users browsing this forum: Google [Bot] and 1 guest