可平铺背景上的 LibGDX 9 补丁图像答案

【问题标题】：LibGDX 9 patch image over a tilable background可平铺背景上的 LibGDX 9 补丁图像
【发布时间】：2021-02-07 19:25:09
【问题描述】：

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

我想在我的菜单后面显示一个带框的大理石背景。为此，我有一个nine-patch image with the frame 和一个marble background image。

它试图在我的菜单中同时使用两者，由一个包含表格的 ScrollPane 组成。

所以我将9个patch frame定义为ScrollPane背景：

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

并将（大）大理石背景添加到我的桌子上：

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

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

我不能只让大理石纹理成为 9 补丁的一部分：我希望它是平铺的，而不是缩放到菜单维度（我试过了，它看起来很糟糕）。我还尝试直接在菜单顶部的舞台中显示框架，它可以工作，但是代码使用起来真的很痛苦，尤其是在工具提示或移动卡片之类的动态 UI 中。

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

【问题讨论】：

标签： java libgdx

【解决方案1】：

我不确定解决此问题的推荐方法是什么，但一种方法是创建一个由TiledDrawable 和NinePatch 组合而成的类，并让该类扩展@ 987654325@.

这样您可以覆盖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);
    }
}

看起来像这样：

如果你的九个补丁有非常圆的角但它也很容易调整。

【讨论】：