LibGDX中的九宫格图像覆盖在可平铺背景上

Question

我正在使用LibGDX UI组件来显示我的游戏UI。

我想在我的菜单后面展示一个带有边框的大理石背景。为此，我有一张带有边框的九宫格图像和一张大理石背景图像。

我尝试将两者都用在我的菜单中，由ScrollPane包含Table组成。

因此，我将九宫格边框定义为ScrollPane的背景：

com.badlogic.gdx.scenes.scene2d.ui.ScrollPane$ScrollPaneStyle: {
    default: { ..., background: frame }
}

将大理石背景添加到我的表格中：

table.setBackground(skin.getTiledDrawable("big-marble-texture"));

但看起来框架是在大理石背景周围，而不是其一部分：

我不能只把大理石纹理作为九宫格的一部分：我希望它可以平铺，而不是按菜单尺寸缩放（我试了，看起来很糟糕）。 我也试图直接在阶段中显示框架超过菜单，这样做虽然有效，但代码使用起来非常麻烦，特别是对于动态 UI 如工具提示或移动卡片。

在 libgdx UI 组件中，推荐的方式是什么？

- Guillaume

Answer 1

我不确定解决这个问题的推荐方法是什么，但其中一种方法是创建一个类，该类是TiledDrawable和NinePatch的组合，并让该类扩展BaseDrawable。

这样，您可以重写draw方法，首先将背景绘制为TiledDrawable（偏移量考虑NinePatch的插图），然后再将NinePatch作为边框绘制。

例如：

package com.bornander.sandbox;

import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Batch;
import com.badlogic.gdx.graphics.g2d.NinePatch;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.scenes.scene2d.utils.BaseDrawable;
import com.badlogic.gdx.scenes.scene2d.utils.TiledDrawable;
import com.badlogic.gdx.scenes.scene2d.utils.TransformDrawable;

public class BorderedTiledDrawable extends BaseDrawable implements TransformDrawable {
    private TiledDrawable region;
    private NinePatch patch;
    private int left;
    private int top;
    private int right;
    private int bottom;

    public BorderedTiledDrawable(Texture background, Texture border, int left, int top, int right, int bottom) {
        region = new TiledDrawable(new TextureRegion(background));
        this.patch = new NinePatch(border, left, top, right, bottom);
        this.left = left - 1;
        this.top = top - 1;
        this.right = right - 1;
        this.bottom = bottom - 1;
        setMinWidth(patch.getTotalWidth());
        setMinHeight(patch.getTotalHeight());
        setTopHeight(patch.getPadTop());
        setRightWidth(patch.getPadRight());
        setBottomHeight(patch.getPadBottom());
        setLeftWidth(patch.getPadLeft());
    }

    @Override
    public void draw(Batch batch, float x, float y, float originX, float originY, float width, float height, float scaleX, float scaleY, float rotation) {
        region.draw(batch, x, y, originX, originY, width, height, scaleX, scaleY, rotation);
        patch.draw(batch, x, y, originX, originY, width, height, scaleX, scaleY, rotation);
    }

    @Override
    public void draw(Batch batch, float x, float y, float width, float height) {
        region.draw(batch, x + left, y + top, width - (left + right), height - (top + bottom));
        patch.draw(batch, x, y, width, height);
    }
}

这是它的样子：

如果你的九宫格有非常圆润的角落，它可能不能完全工作，但这也很容易调整。

- bornander