Блог

Я использую компоненты пользовательского интерфейса LibGDX для отображения пользовательского интерфейса моей игры.

Я хочу показать мраморный фон в рамке за моими меню. Для этого у меня есть изображение с девятью участками с рамкой и фоновым изображением из мрамора.

Он пытался использовать оба в моем меню, состоящем из области прокрутки, содержащей таблицу.

Итак, я определил рамку исправления 9 в качестве фона области прокрутки:

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

И добавьте (большой) мраморный фон в мою таблицу:

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

Однако похоже, что рамка находится вокруг мраморного фона, а не его части:

Я не могу просто сделать текстуру мрамора частью исправления 9: я хочу, чтобы она была выложена плиткой, а не масштабировалась до размера меню (я пробовал, это выглядит ужасно). Я также попытался отобразить фрейм непосредственно на сцене в верхней части меню, это работает, но тогда код действительно неудобен в использовании, особенно с динамическим интерфейсом, таким как всплывающие подсказки или движущиеся карточки.

Каков рекомендуемый способ сделать это в компонентах пользовательского интерфейса libgdx?

Я не уверен, каков рекомендуемый способ решения этой проблемы, но один из способов — создать класс, состоящий из a TiledDrawable и a NinePatch , и позволить этому классу расширяться BaseDrawable .

Таким образом, вы можете переопределить draw метод, чтобы сначала нарисовать фон как a 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);
    }
}
  

Который выглядит так:

Это не будет работать полностью, если ваш nine-patch имеет очень закругленные углы, но это также легко настроить.