java - 可平铺背景上的 LibGDX 9 补丁图像

Question

我正在使用 LibGDX UI 组件来显示我的游戏的 UI。
我想在我的菜单后面显示一个带框的大理石背景。为此，我有一个 nine-patch image with the frame和一个 marble background image .
它试图在我的菜单中同时使用这两个选项，该菜单由一个包含表格的 ScrollPane 组成。
所以我定义了 9 个补丁框作为 ScrollPane 背景:

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

并将(大)大理石背景添加到我的 table 上:

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

但是看起来框架是围绕大理石背景的，而不是它的一部分:

我不能只制作 9 补丁的大理石纹理部分:我希望它被平铺，而不是缩放到菜单维度(我试过，它看起来很可怕)。
我还尝试在菜单顶部的舞台中直接显示框架，它可以工作，但是代码使用起来真的很痛苦，尤其是使用工具提示或移动卡片等动态 UI。
在 libgdx UI 组件中执行此操作的推荐方法是什么？

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

看起来像这样:

如果你的 9-patch 有非常圆的角，它就不能完全工作，但这也很容易调整。