在 Libgdx 中将屏幕拆分为 3

Question

如标题中所述，我在使用 Libgdx 将屏幕分成 3 个部分时遇到问题。我正在尝试制作一个包含 3 个区域的纸牌游戏：棋盘、玩家卡片和菜单。在寻找 SO 中的解决方案时，我发现我应该对屏幕的每个部分使用 Stage 并使用 setScreenBounds func 更改视口。但是它没有按预期工作。这是我的代码：

public void create(){
        board = new Stage();
        userCards = new Stage();

        Gdx.input.setInputProcessor(board);

        skin = new Skin(Gdx.files.internal("data/uiskin.json"));

        TextButton asd = new TextButton("asd", skin);
        TextButton asd2 = new TextButton("asd", skin);

        Table tab = new Table();
        Table tab2 = new Table();

        tab.setFillParent(true);
        tab2.setFillParent(true);

        tab.debug();
        tab2.debug();

        board.addActor(tab);

        userCards.addActor(tab2);

        tab.addActor(asd);
        tab2.addActor(asd2);

        board.getViewport().setScreenBounds(0, 0, 960, 270);
        userCards.getViewport().setScreenBounds(0, 270, 960, 270);

    }


    @Override
    public void render(float delta) {
        Gdx.gl.glClearColor(0.2f, 0.2f, 0.2f, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);       

          userCards.getViewport().apply();
          userCards.act(delta); 
          userCards.draw();

          board.getViewport().apply();
          board.act(delta);  
          board.draw();   


    }

如您所见，我正在 960x540 的窗口大小上对其进行测试。屏幕按我的意愿拆分（分成两部分），但是按钮看起来不正常（它们的高度按比例缩小）。我究竟做错了什么？另外，如何为所有阶段设置输入处理器？调用 Gdx.input.setInputProcessor() 只为最后调用的阶段设置它。希望您能够帮助我。提前致谢。

更新 所以我的代码现在看起来像这样：

public class GameScreen implements Screen{
    Skin skin;
    Stage board;
    Stage userCards;    
    Game g;
    Viewport viewportB, viewportUC;

    public GameScreen(Game g){
        create();
        this.g=g;
    }

    public GameScreen(){
        create();
    }
    public void create(){
        board = new Stage();
        userCards = new Stage();

        InputMultiplexer inputMultiplexer = new InputMultiplexer();

        inputMultiplexer.addProcessor(board);
        inputMultiplexer.addProcessor(userCards);


        Gdx.input.setInputProcessor(inputMultiplexer);


        viewportB = new ExtendViewport(Gdx.graphics.getWidth(), 540/3*2);
        board.setViewport(viewportB);

        viewportUC = new ExtendViewport(Gdx.graphics.getWidth(), 540/3);
        userCards.setViewport(viewportUC);

        skin = new Skin(Gdx.files.internal("data/uiskin.json"));

        TextButton asd = new TextButton("asd", skin);
        TextButton asd2 = new TextButton("asd", skin);


        Table tab = new Table();
        Table tab2 = new Table();

        tab.setFillParent(true);
        tab2.setFillParent(true);

        tab.debug();
        tab2.debug();

        board.addActor(tab);

        userCards.addActor(tab2);

        tab.addActor(asd);      
        tab2.addActor(asd2);

    }

    @Override
    public void show() {
        // TODO Auto-generated method stub

    }

    @Override
    public void render(float delta) {
        Gdx.gl.glClearColor(0.2f, 0.2f, 0.2f, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);       

         viewportUC.update(Gdx.graphics.getWidth(),  Gdx.graphics.getHeight()/3); //set the currentWindow... variables in the resize method to keep proper ratio
          userCards.act(delta); 
          userCards.draw();

         viewportB.update(Gdx.graphics.getWidth(), Gdx.graphics.getHeight()/3*2);
          board.act(delta);  
          board.draw();   


    }

不知道它是否重要但是我根本没有更改调整大小的方法（为空白）。我的输出：windowImg

按钮的大小现在看起来还可以，但我猜它的位置不对，或者我错过了一些东西。你知道如何解决这个问题吗？

更新 2 代码现在看起来像这样：http://pastebin.com/e5K8Y2fN。问题：表格不以阶段为中心+向表格添加元素无法正常工作。

Answer 1

您观察到的效果是关于拉伸图形，这是由于默认舞台视口的特性，即 ScalingViewport 类型。您必须创建自己的 ExtendViewport，它实际上不会缩放任何东西并将其设置为屏幕的三分之一，然后将其设置为舞台。

    //in the show() method
    viewport = new ExtendViewport(SCREEN_WIDTH, Runner.SCREEN_HEIGHT/3);
    stage.setViewport( viewport );

    //in the render method
    viewport.update(currentWindowWidth, currentWindowHeight/3); //set the currentWindow... variables in the resize method to keep proper ratio
    stage.act();
    stage.draw();

您可以阅读more about viewports here

---

要设置多个 inputProcessor 你应该使用InputMultiplexer instance

    InputMultiplexer inputMultiplexer = new InputMultiplexer();

    inputMultiplexer.addProcessor(stage1);
    inputMultiplexer.addProcessor(stage2);
    inputMultiplexer.addProcessor(stage3);
    ...

    Gdx.input.setInputProcessor(inputMultiplexer);

---------

更新

你缺少两件事

• 摄像机位置居中 - 这就是为什么舞台在中间，但在右侧某处
• 设置视口位置 - 相机居中后，您会观察到其中一个舞台与第二个重叠，因此您需要将第一个移到第二个上方，这实际上会进行分割

实现这一点的示例代码：

    ExtendViewport viewport1, viewport2;
    Stage stage1 = new Stage(), stage2 = new Stage();

    @Override
    public void show() 
    {
        viewport1 = new ExtendViewport(Gdx.graphics.getWidth(), Gdx.graphics.getHeight()/3*2); 
        stage1.setViewport(viewport1);  

        viewport2 = new ExtendViewport(Gdx.graphics.getWidth(), Gdx.graphics.getHeight()/3);        
        stage2.setViewport(viewport2); 

        //... adding actors etc     
    }


    @Override
    public void render(float delta) {
        Gdx.gl.glClearColor(0, 0, 0, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        //here you are centering camera
        viewport2.update(Gdx.graphics.getWidth(), Gdx.graphics.getHeight()/3, true); 
        stage2.act(delta); 
        stage2.draw(); 

        //here you are centering camera
        viewport1.update(Gdx.graphics.getWidth(), Gdx.graphics.getHeight()/3*2, true);

        //here you are positioning the viewport on the screen
        viewport1.setScreenY(Gdx.graphics.getHeight()/3);
        viewport1.apply(true);

        stage1.act(delta); 
        stage1.draw();         
    }