将 scene2d.ui 与 libgdx 一起使用:皮肤从何而来?

2022-01-12 00:00:00 android java libgdx scene2d

我已了解 libgdx 的 scene2d 功能，包括 UI 元素，但我不能让他们工作.他们似乎都使用了一个皮肤对象，我该如何创建一个?

I've read about libgdx's scene2d features, including the UI elements, but I can't get them to work. They all seem to use a skin object, how do I create one?

我已经完成了创建简单 libgdx 的 不错的教程在桶中捕捉雨滴的游戏，我通过加载带有纹理图集的图像创建了一个简单的棋盘游戏应用程序.但是，scene2d 听起来是一种更好的方式来控制棋盘游戏应用程序中的移动棋子以及任何按钮和菜单.

I've gone through the nice tutorial that creates a simple libgdx game catching raindrops in a bucket, and I've created a simple board game app by loading images with a texture atlas. However, scene2d sounds like a better way to control the moving pieces in a board game app, as well as any buttons and menus.

推荐答案

要加载皮肤，您可以从 libgdx 测试项目中使用的示例皮肤文件开始.

To load a skin, you can start with the sample skin files used in the libgdx test project.

  1. Atlaspack 文件
  2. Json 文件
  3. Atlaspack 图片
  4. 字体文件

this question 中有更多细节，我发现我必须将文件移动到资产以避免 HTML 版本中的错误.(如果我将文件留在 assets 文件夹中，我会看到一条错误消息，例如GwtApplication: exception: Error reading file data/uiskin.json.")

There's a bit more detail in this question, and I found that I had to move the files into a subdirectory of assets to avoid a bug in the HTML version. (If I leave files in the assets folder, I see an error message like, "GwtApplication: exception: Error reading file data/uiskin.json.")

我发布了一个显示单个按钮的完整示例，并且有趣的代码都在 游戏类.该示例非常简单，您只需要两个成员变量来保存场景和按钮.

I posted a complete example that displays a single button, and the interesting code is all in the game class. The example is so simple that you only need two member variables to hold the scene and the button.

private Stage stage;
private TextButton button;

要创建皮肤，您只需加载数据文件.

To create the skin, you just load the data file.

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

将按钮连接到舞台.

stage = new Stage();
button = new TextButton("Click Me!", skin);
stage.addActor(button);

将监听器连接到按钮，并注册舞台以接收事件.

Wire a listener into the button, and register the stage to receive events.

button.addListener(new ClickListener() {
    @Override
    public void clicked(InputEvent event, float x, float y) {
        button.setText("Clicked!");
    }
});
Gdx.input.setInputProcessor(stage);

render() 方法基本上是对 stage.draw() 的调用.

The render() method is basically a call to stage.draw().

Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

stage.act(Math.min(Gdx.graphics.getDeltaTime(), 1 / 30f));
stage.draw();

那么你只需要在调整屏幕大小时对屏幕进行布局.

Then you just need to layout the screen when it resizes.

button.setPosition(
        (width-button.getWidth())/2, 
        (height-button.getHeight())/2);

如果您的屏幕更复杂，请考虑使用 Table.

If your screen is more complicated, consider using a Table.

如果您想使用不同的字体，可以使用 生成字体文件和图像文件希罗.完成后，您必须获取新字体图像并使用 TexturePacker 将其与其他 皮肤资源.

If you want to use a different font, you can generate the font file and image file using Hiero. After you've done that, you'll have to take the new font image and use the TexturePacker to repack it with the other skin assets.

相关文章