LibGdx了解視口並將其與Scene2D關聯

Question

每當我嘗試將視口設置為舞台時，我放入場景中的演員就會變得模糊且很大。 我想將游戲世界的大小設置為50x100單位的矩形，然后根據該單位縮放所有內容（精靈，演員，標簽，字體）。 每個狀態都構成一個提供渲染功能等的類State。

public abstract class State {
    public static final float GAME_SIZE_WIDTH = 50 ;
    public static final float GAME_SIZE_HEIGHT = 100 ;
    protected OrthographicCamera camera;

    protected  GameStateManager gsm;
    protected Viewport viewport;

    public State(GameStateManager gsm) {
        this.gsm = gsm;
        camera = new OrthographicCamera();
        viewport = new ExtendViewport(GAME_SIZE_WIDTH, GAME_SIZE_HEIGHT, camera);
        viewport.apply();
        camera.position.set(GAME_SIZE_WIDTH / 2, GAME_SIZE_HEIGHT  / 2, 0);
    }

    public  abstract void handleInput();
    public abstract void update(float dt);
    public abstract void render (SpriteBatch sb);
    public abstract void dispose();
    public abstract void resize(int width, int height) ;
    }

在每一個State我想補充的Stage ，並通過viewPort為根據我的狀態類，以保持GAME_SIZE_WIDTH /GAME_SIZE_HEIGHT尺寸，但Ive得到未經調整的背景（即使它的全高清畫面的白色邊框左側）和按鈕所迷離帶有未調整的文字。

 public class MenuState extends State implements InputProcessor {

private Skin skin;
private Stage stage;

private Sprite background;
private Table table;
private  TextButton startButton,quitButton;
private Sprite flappyButton;
private Sprite chodzenieButton;
private Sprite memoryButton;
private Sprite rememberSquare;
private  static  final String TAG = "kamil";
private Vector3 touchPoint;

public MenuState(GameStateManager gsm) {
    super(gsm);

    skin = new Skin(Gdx.files.internal("button/uiskin.json"));
    stage = new Stage(viewport);
    table = new Table();
    table.setWidth(stage.getWidth());
    table.align(Align.center | Align.top);

    table.setPosition(0,GAME_SIZE_HEIGHT);
    startButton = new TextButton("New Game",skin);
    quitButton = new TextButton("Quit Game",skin);
   startButton.addListener(new ClickListener() {
        @Override
        public void clicked(InputEvent event, float x, float y) {
            Gdx.app.log("Clicked button","Yep, you did");
            event.stop();
        }
    });

    table.padTop(5);
    table.add(startButton).padBottom(5).size(20,10);
    table.row();
    table.add(quitButton).size(20,10);

    stage.addActor(table);

    background =new Sprite(new Texture(Gdx.files.internal("backgrounds/bg.jpg")));
    background.setSize(GAME_SIZE_WIDTH,GAME_SIZE_HEIGHT);
    background.setPosition(0,0);
    touchPoint= new Vector3();

    InputMultiplexer im = new InputMultiplexer(stage,this);
    Gdx.input.setInputProcessor(im);
   flappyButton=new Sprite(new Texture("menuButton/floopyBirdButtonTexture.png"));
    chodzenieButton =new Sprite(new Texture("menuButton/swipeMovementsButtonTexture.png"));
    memoryButton =new Sprite(new Texture("menuButton/memory.png"));
    rememberSquare = new Sprite(new Texture("menuButton/rememberSquare.png"));
    rememberSquare.setSize(20,10);
    flappyButton.setSize(20,10);
    chodzenieButton.setSize(20,10);
    memoryButton.setSize(20,10);
    flappyButton.setPosition(GAME_SIZE_WIDTH/2-flappyButton.getWidth()/2,GAME_SIZE_HEIGHT/2-flappyButton.getHeight()/2);
    chodzenieButton.setPosition(GAME_SIZE_WIDTH/2-flappyButton.getWidth()/2,flappyButton.getY()- chodzenieButton.getHeight() -2);
    memoryButton.setPosition(chodzenieButton.getX(),chodzenieButton.getY()- flappyButton.getHeight() -2);
    rememberSquare.setPosition(flappyButton.getX(),flappyButton.getY()+flappyButton.getHeight()+2);
}



@Override
public void render(SpriteBatch sb) {
    sb.setProjectionMatrix(camera.combined);
    sb.begin();
    background.draw(sb);
   flappyButton.draw(sb);
    chodzenieButton.draw(sb);
    memoryButton.draw(sb);
    rememberSquare.draw(sb);
    sb.end();
   stage.act(Gdx.graphics.getDeltaTime());
    stage.draw();
}

@Override
public void dispose() {
    flappyButton.getTexture().dispose();
    chodzenieButton.getTexture().dispose();
    background.getTexture().dispose();
}

@Override
public void resize(int width, int height) {
    Gdx.app.log("kamil","Resize");

    viewport.update(width,height);
}
@Override
public void handleInput() {
  if(Gdx.input.justTouched())
    {
       //

    viewport.unproject(touchPoint.set(Gdx.input.getX(),Gdx.input.getY(),0));
    if(flappyButton.getBoundingRectangle().contains(touchPoint.x,touchPoint.y)) {
        gsm.set(new FlopyBirdState(gsm));
    }
        else if (chodzenieButton.getBoundingRectangle().contains(touchPoint.x,touchPoint.y)){
        gsm.set(new ChodzenieState(gsm));
    }
    else if (memoryButton.getBoundingRectangle().contains(touchPoint.x,touchPoint.y)){
        gsm.set(new MemoryState(gsm));
    }
    else if (rememberSquare.getBoundingRectangle().contains(touchPoint.x,touchPoint.y)){
        gsm.set(new FoodEaterState(gsm));
    }}
}

Answer 1

模糊且很大 ：這是由於您使用的字體大小。

當以適當的方式縮放某些字體時，它會模糊，無論是由您還是由視口縮放。

您使用50和100作為視口的世界寬度和高度，並且使用的皮膚BitmapFont的大小比50和100大。因此，當您通過屏幕寬度和高度更新視口時，BitmapFont也會放大，因此看起來很大也很模糊

解：

1. 通過比較您使用的BitmapFont，使用更大的視口世界寬度和高度。

2. 使用較小的BitmapFont尺寸，否則可以縮小以免縮放太多而看上去很丑。

    skin.get("font-name",BitmapFont.class).getData().setScale(.25f); 

您正在使用Table因此您可能需要檢查Actor在單元格/ Table中的位置。 您可以通過此標志stage.setDebugAll(true);啟用調試stage.setDebugAll(true);

編輯

您正在使用來自Wiki的 ExtendViewport

ExtendViewport通過在一個方向上擴展世界來保持世界長寬比而不會出現黑條。 首先對世界進行縮放以適合視口，然后將較短的維度加長以填充視口。

假設您的設備寬度和高度分別為400和640，然后將視口更新為400和640時會發生什么。首先將背景Sprite縮放為高度並將其高度設置為640（因為視口worldheight等於背景高度）完成，現在是時候設置背景Sprite的寬度了，因為您將寬度設置為高度的一半，因此可以縮放並設置大小640/2 = 320。

您的問題到來了，我的設備寬度為400，但是我的背景精靈大小僅為320個剩余部分（兩側均為40 * 2白色）。

使用48 * 80（大多數設備處於此比例）而不是50 * 100