java - Libgdx 中将屏幕分成 3 个

Question

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

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

由于默认舞台视口(viewport)(ScalingViewport 类型)的特性，您观察到的效果是关于拉伸(stretch)图形的。您必须创建自己的 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实例

    InputMultiplexer inputMultiplexer = new InputMultiplexer();

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

    Gdx.input.setInputProcessor(inputMultiplexer);

----------

更新

您缺少的两件事是

• 居中相机位置 - 这就是为什么舞台位于中心但某些地方位于右侧的原因
• 设置视口(viewport)位置 - 相机居中后，您会发现其中一个舞台与第二个舞台重叠，因此您需要将第一个舞台移到第二个舞台上，这实际上会进行分割

实现此目的的示例代码:

    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();         
    }