Why do actors stretch when I add them to a stage in LibGDX?

Question

I have started learning LibGDX and I have been making a few little games to learn how it all works but ever since I started using stages and actors, all of my textures stretch horizontally and I can't seem to fix it at

public class GameScreen extends BaseScreen
{
private BaseActor background;
private PhysicsActor spaceship;
private BaseActor rocketfire;

private PhysicsActor baseLaser;
private AnimatedActor baseExplosion;

private ArrayList<PhysicsActor> laserList;
private ArrayList<PhysicsActor> rockList;
private ArrayList<BaseActor> removeList;

public GameScreen(BaseGame g)
{
    super(g);
}

public void create()
{
    spaceship = new PhysicsActor();
    Texture shipTex = new Texture("fire.png");
    shipTex.setFilter(TextureFilter.Linear, TextureFilter.Linear);
    spaceship.storeAnimation("default", shipTex);
    spaceship.setPosition(400, 300);
    spaceship.setOriginCenter();
    spaceship.setMaxSpeed(200);
    spaceship.setDeceleration(20);
    spaceship.setEllipseBoundary();
    mainStage.addActor(spaceship);
}

public void update(float dt)
{

}
}

BaseScreen class

public abstract class BaseScreen implements Screen, InputProcessor
{
protected BaseGame game;
protected Stage mainStage;
protected Stage uiStage;
public final int viewWidth;
public final int viewHeight;
private boolean paused;

public BaseScreen(BaseGame g)
{
    this(g, 1024, 600);
}

public BaseScreen(BaseGame g, int viewWidth, int viewHeight)
{
    game = g;
    this.viewWidth = viewWidth;
    this.viewHeight = viewHeight;
    mainStage = new Stage(new FitViewport(viewHeight, viewHeight));
    uiStage = new Stage(new FitViewport(viewWidth, viewHeight));
    paused = false;
    InputMultiplexer im = new InputMultiplexer(this, uiStage, mainStage);
    Gdx.input.setInputProcessor(im);
    create();   
}

public abstract void create();
public abstract void update(float dt);

public void render(float dt)
{
    uiStage.act(dt);
    if (!isPaused())
    {
        mainStage.act(dt);
        update(dt);
    }

    Gdx.gl.glClearColor(0, 0, 0, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    mainStage.draw();
    uiStage.draw();
}

I changed the texture to a perfect red square but when renderered on the screen it was more rectangle shaped than square (horizontally) and I have no idea why. I read somewhere that it was something to do with the camera but I have no idea what to do to fix it! Please help :O

Answer 1

There is a mistake in your Viewport parameters that you use in the mainStage. Instead of passing the viewWidth argument, you passed the viewHeight, ending up with a FitViewport(viewHeight, viewHeight).

Change it to FitViewport(viewWidth, viewHeight) and you should be good to go.

Answer 2

try overriding the "resize" method of your "basecreen" class and update the viewport there

@Override
public void resize(int width, int height) {
    stage.getViewport().update(width, height);
}