如何在Libgdx中处理html（GwtApplication）上的调整大小

Question

我在使用 libgdx on html 时遇到了问题。我已经花了两天时间也没有解决这个问题。当我调整浏览器大小时，我的应用程序中的 Gdx.graphics 没有改变。我查看了 GwtApplication 的源代码，但是对我来说很难理解，我知道 Gdx.graphics 应该会自动变化，但实际上并没有。非常抱歉我的英语不好。

- Alexey Nikitin

Answer 1

首先看一下如何根据用户输入调整大小。在您的共享项目代码中，您可以这样做：

    if(Gdx.app.getType() == ApplicationType.WebGL) {
        InputAdapter webGlfullscreen = new InputAdapter() {
            @Override
            public boolean keyUp (int keycode) {
                if (keycode == Keys.ENTER) {
                    if (!Gdx.graphics.isFullscreen()) Gdx.graphics.setDisplayMode(Gdx.graphics.getDisplayModes()[0]);
                } else if(keycode == Keys.UP || keycode == Keys.W) {
                    Gdx.graphics.setDisplayMode(Gdx.graphics.getWidth()+100, Gdx.graphics.getHeight()+100, false);
                } else if(keycode == Keys.DOWN  || keycode == Keys.S) {
                    Gdx.graphics.setDisplayMode(Gdx.graphics.getWidth()-100, Gdx.graphics.getHeight()-100, false);
                }
                return true;
            }
        };
        Gdx.input.setInputProcessor(webGlfullscreen);
    }

增加100到每个维度只有在您拥有一个正方形视口时才是正确的。根据您所需的比例进行调整。

LibGDX不处理GWT窗口调整大小，因为LibGDX不会监听浏览器调整大小，所以您必须向-html项目添加一些代码。在您的GwtApplication子类中执行以下操作：

public class GwtLauncher extends GwtApplication {

    @Override
    public void onModuleLoad () {
        super.onModuleLoad();
        com.google.gwt.user.client.Window.addResizeHandler(new ResizeHandler() {
              public void onResize(ResizeEvent ev) {
                  Gdx.graphics.setDisplayMode(ev.getWidth(),ev.getHeight(), false);
              }
            });
    }

    @Override
    public GwtApplicationConfiguration getConfig () {
        int height = com.google.gwt.user.client.Window.getClientHeight();
        int width = com.google.gwt.user.client.Window.getClientWidth();
        GwtApplicationConfiguration cfg = new GwtApplicationConfiguration(width, height);
        return cfg;
    }

    @Override
    public ApplicationListener getApplicationListener () {
        return new GdxDemoGame();
    }
}

当然，现在你将不得不处理与桌面端类似的宽高比问题。

p.s.我不得不查看GWT后端，以确定是否已经存在任何调整大小的行为。这就是我发现调用setDisplayMode会调整分辨率，但也是我发现没有调整大小侦听器的方式。您可以自己查看https://github.com/libgdx/libgdx/blob/master/backends/gdx-backends-gwt/src/com/badlogic/gdx/backends/gwt/GwtApplication.java

- Chase

---

是的，我犯了一个错误，我认为GwtApplication.mainLoop()可以改变Gdx.graphics默认的大小，但实际上不行。谢谢你的回答！明天我会修改我的代码。 - Alexey Nikitin

Answer 2

private WebSolve appResizeListner;
private GwtApplicationConfiguration cfg;

class ResizeListner implements ResizeHandler{
    @Override
    public void onResize(ResizeEvent event) {
        int width = event.getWidth();
        int height = event.getHeight();
        appResizeListner.resize(width, height);
        Gdx.graphics.setDisplayMode(width, height, false);
        Gdx.gl.glViewport(0, 0, width, height);


        Window.scrollTo((cfg.width - width)/2,(cfg.height - height)/2);

    }
}

@Override
public GwtApplicationConfiguration getConfig () {
    int w = Window.getClientWidth();
    int h = Window.getClientHeight();
    cfg = new GwtApplicationConfiguration(w, h);
    Window.enableScrolling(false);
    Window.setMargin("0");
    Window.addResizeHandler(new ResizeListner());
    return cfg;
}

@Override
public ApplicationListener getApplicationListener () {
    appResizeListner = new WebSolve();
    return appResizeListner;
}

-这应该被编写以正确显示和调整大小

- Alexey Nikitin