【问题标题】:LibGDX - Dialog Title Does not FitLibGDX - 对话框标题不适合
【发布时间】:2014-06-19 20:35:20
【问题描述】:

我成功地将我自己的字体添加到默认的 .json 文件中并显示出来,但是我遇到了一些奇怪的大小问题。特别是当我尝试创建一个对话框时。这就是它的样子:
忽略上面写着“和”的事实
如您所见,标题不合适,按钮似乎有点大。 .. 这就是我创建对话框的方式:

Dialog d = new Dialog("Error", RBResources.gameSkin);
        d.add(new Label("You cannot continue and empty game.", RBResources.gameSkin));
        TextButton b = new TextButton("Ok", RBResources.gameSkin);
        d.button(b);
        d.show(this);

这是皮肤的初始化方式:

gameSkin = new Skin(Gdx.files.internal("skins/uiskin.json"));

我添加字体所做的只是使用 Hiero 创建字体,使用 .json 将其添加到目录中,并将 BitmapFont 文件引用从“default.fnt”更改为“text.fnt”(文本就是我所说的字体)。

【问题讨论】:

    标签: java fonts dialog libgdx


    【解决方案1】:

    所以我一直在想的已经得到证实:对话框是用一个 NinePatch 构建的,所以你需要在 .atlas 文件和 .png 文件中手动调整标题栏的大小。

    编辑
    这基本上是一个如何在 LibGdx 中使用 JSON 文件 的小教程。

    LibGdx 有一个非常有用的类,叫做Skin。它允许您拥有一个 .json 文件以及一个 .atlas 文件和 .png 图像,以非常轻松地定义用于制作 Buttons、TextButtons、Dialogs 等的样式。

    LibgGdx 默认皮肤

    1. JSON File
    2. ATLAS File
    3. ATLAS Image Pack
    4. Font File
    5. Font Image

    JSON 文件的工作原理
    JSON 文件包含不同类类型及其参数的列表。在这个问题的案例中,我们将查看Dialog 样式。因为对话框是Window 的子类,它使用WindowStyle(并非所有其他类的子类都这样做),所以我们必须查看WindowStyle 的JSON 文件。

    com.badlogic.gdx.scenes.scene2d.ui.Window$WindowStyle: {
    default: { titleFont: default-font, background: default-window, titleFontColor: white },
    dialog: { titleFont: default-font, background: default-window, titleFontColor: white, stageBackground: dialogDim }
    },
    

    如您所见,dialog 是用于Dialogs 的样式类型,而默认用于常规Windows。大多数属性是不言自明的,但您需要知道的是,字体总是在 JSON 文件的顶部声明。您可以根据需要添加任意数量,只需确保将字体的 .fnt 文件和 .png 图像包含在与 JSON 文件相同的文件夹中,并正确引用它们。您可以使用像 Hiero 这样的 BitmapFont 生成器轻松制作字体,可以在这里找到:https://github.com/libgdx/libgdx/wiki/Hiero。颜色也在 JSON 文件的顶部创建,就在字体下方。您可以根据需要创建任意数量。 stageBackground 是显示对话框时将覆盖舞台其余部分的颜色。在这种情况下,它是 dialogDim,它在 JSON 文件中定义为 TintedDrawable。最后一个属性是对 ATLAS 图像包中图像的引用。

    ATLAS 文件的工作原理
    ATLAS 文件基本上是 ATLAS 映像包中对 TextureRegions 的引用的集合。其中许多是不言自明的,其余的可以通过一些尝试和错误来理解,但现在我们将专注于对对话框片段的引用。 default-window ATLAS 文件中对这个位的引用:

    default-window
      rotate: false
      xy: 1, 20
      size: 27, 29
      split: 4, 3, 20, 3
      orig: 27, 29
      offset: 0, 0
      index: -1
    

    这些字段可能有点令人困惑,我也无法全部理解,但您需要知道的是,rotate 应该始终保持为 false,除非您知道什么时候不应该这样做。 xy 是 ATLAS 图像包中 TextureRegion 的 x 和 y 位置,以像素为单位size 是 x 大小和 y 大小,以像素为单位splitTextureRegion 的拆分方式(不适用于所有 ATLAS 参考),您可以在此处了解有关这些数字如何工作的更多信息:https://github.com/libgdx/libgdx/wiki/Ninepatches。据我所知,orig 始终与size 相同。 offset 应始终保持为 0、0,除非您有理由使该区域从开始时的 xy 位置偏移。 index 为 -1 表示该区域与其他区域位于同一个 ATLAS 图像包中。

    如何使用它
    现在您可以轻松地进行自己的修改。只需找到您想要添加自己的样式,复制您想要更改的样式的语法(或直接更改默认值),为其添加您自己的名称,然后添加您自己的 ATLAS 参考。在 ATLAS 文件和图像包中,您还可以添加自己的区域。您可能还可以为样式以外的不同类添加自己的属性,因为 Skin 类似乎是 JSON 读取器之上的轻量级包装器,可以轻松读取样式。
    我希望这一切都可以理解:)

    【讨论】:

    • 哦不,九个补丁。感谢您的提示。
    【解决方案2】:

    正如 StrongJoshua 在他的 answer 中所说,对话框的背景是 NinePatch,因此标题栏的大小由 NinePatch 所基于的 PNG 定义。

    如果您不喜欢使用像素编辑器之类的东西,一个快速而肮脏的解决方案是更改 NinePatch 的渲染比例。这将使它更“像素化”,但也会增加标题栏的大小。

    您可以访问 NinePatch 对象并从您的对话框中调用scale(),如下所示:

    NinePatchDrawable dialogBack = (NinePatchDrawable)dialog.getBackground();
    dialogBack.getPatch().scale(2.0f,2.0f);
    

    编辑: 问题是,每次调用 scale() 都是累加的,所以每次你这样做时,它的大小都会加倍。如果您总是想要相同的尺寸,最好在加载皮肤后立即设置一次比例,如下所示:

    NinePatch dialogBack = skin.getPatch("default-window");
    dialogBack.scale(2.0f,2.0f);
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-07-30
      • 2019-03-17
      • 1970-01-01
      • 2016-02-04
      • 1970-01-01
      • 1970-01-01
      • 2013-12-25
      相关资源
      最近更新 更多