LibGDX图形模块之Ninepatches

本文介绍了NinePatch图像，如何创建它们以及如何在Libgdx上下文中使用它们。

在你开始之前

本指南适用于旧的scene2d和skinpacker（0.9.6之前的版本）。 如果您正在运行最新版本，按照本指南可能会出现一些错误提示，但不会像分步指南那样工作。 主要的区别是，skinpacker和texturepacker已经在texturepacker2中统一了，皮肤以不同的方式加载。

Introduction

NinePatch图像是具有定义的“可拉伸”区域的图像。 有了这个属性，可以使用非常小的区域缩放到非常大的区域中。 由于这些区域是预先定义的，所以图像看起来不会拉伸（考虑到它已经被缩放了）。 libgdx中的相应NinePatch类位于here (code).
NinePatch用于Libgdx的各种Scene2d组件，包括：
Buttons
ScrollPanes
Textfields

这是在代码中手动实例化NinePatch图像的简短介绍。 它基本上是创建一个图像，找出哪些区域伸展和记下这些区域的像素。

创建可扩展的图像

请记住，您的图像的某些区域需要保存内容（文本，其他图像等），因此不能包含任何“特殊功能”（因为此区域将被缩放）。 在这种情况下，我将创建一个“按钮”。

button.png

可以注意到，这个“按钮”是圆的。 NinePatch的奇迹之一是它会包围我们给予的内容，因此当我们给它一些文本时，在水平方向扩展。 此按钮的角是纯平的半透明像素。 请注意，我们不会在图像上定义可伸缩区域，因为我们将在代码中执行此操作。

实例化NinePatch

实例化一个新的NinePatch的最简单的形式：

NinePatch patch = new NinePatch(new Texture(Gdx.files.internal("knob.png")), 
12, 12, 12, 12);

四个整数参数指定我们将允许图像伸展的区域（以像素为单位）。当应用于Scene2D元素时，NinePatch的真实力量就会显示出来。 下面是一个例子，一个按钮，我们新创建的图像。

// Create a new TextButtonStyle
TextButtonStyle style = new TextButtonStyle(patch, patch, patch, 0, 0, 0, 0, new BitmapFont(), new Color(0.3f, 0.2f, 0.8f, 1f), new Color(0, 0, 0, 1f), new Color(0, 0, 0, 1f));
// Instantiate the Button itself.
TextButton button = new TextButton("hello world", style);

将此TextButton添加到舞台的结果如下所示：

TextButton.png

我们的圆形图像现在已经缩放了内容长度（文本）。 该按钮使用标准BitmapFont和一些显眼的颜色。

在代码中实例化时的限制

直接（使用Libgdx）实例化NinePatch的限制是，您的固定区域将是一个Square。 下面我附上了一张图，说明了在NinePatch中实际定义的四个整数参数。 青色不重叠的灰色区域是可扩展区域。

Paste_Image.png

使用SkinPacker创建和实例化一个NinePatch

注意：要使SkinPacker正确识别/解析NinePatch图像，该图像需要用.9.png后缀。

NinePatch图像需要在图像本身中具有一些特殊属性，才能作为NinePatch。 通过用1像素边框填充图像来添加这些属性。 创建NinePatch的步骤如下所述。

定义伸缩区域

现在我们需要改变图像，并添加黑色边框，我们想让图像拉伸。 这可以在任何图像编辑器中完成。

github AndroidAssetStudio generator
这是我个人的最爱。 不需要任何东西，只需去网站，选择您指定的图像，然后它会自动生成.9.png，点击下载按钮，它甚至会贴心的为你的android放在一个zip中（如果 你不是在android上开发你的应用，你可以忽略它，取最小的，因为它是一个ninepatch可扩展图片).

https://romannurik.github.io/AndroidAssetStudio/nine-patches.html

weblaf ninepatch-editor

实际上是Android SDK的draw9patch工具的升级版本，可以在weblaf project中找到。 向下滚动并找到可供下载的ninepatch-editor工具独立jar版本。

Android SDK draw9patch

Android SDK包含了一个非常好的工具，它位于android-sdk / tools / draw9patch中。 此工具提供缩放图像的预览。 下面只是加载到draw9patch工具中的图像。 请注意左侧的“预览”，以及图像的大小.

Paste_Image.png

在下面的图片中，我已经定义了什么区域的内容将被放置（换句话说，什么将被缩放），以及我不想缩放的区域

Paste_Image.png

现在将图像保存为image.9.png。 由于libgdx不能将该文件识别为NinePatch，所以不能加下划线。 以下是所有NinePatch的完整图像，并准备在代码中使用。

Paste_Image.png

以编程方式定义NinePatch

看到this NinePatch构造函数。

Paste_Image.png

使用SkinPacker打包图像

这个步骤应该在这个维基的其他领域（最好是一个关于SkinPacker的节点）。 由于图像后缀为.9.png，它的区域将通过查看1像素填充的外部区域进行分析（如上一步所定义）。

当这是SkinPacker中运行的导出文件夹中唯一的图片时，结果将是：

"resources": {
        "com.badlogic.gdx.graphics.g2d.NinePatch": {
                "knob": [
                        { "x": 2, "y": 2, "width": 13, "height": 11 },
                        { "x": 15, "y": 2, "width": 7, "height": 11 },
                        { "x": 22, "y": 2, "width": 12, "height": 11 },
                        { "x": 2, "y": 13, "width": 13, "height": 9 },
                        { "x": 15, "y": 13, "width": 7, "height": 9 },
                        { "x": 22, "y": 13, "width": 12, "height": 9 },
                        { "x": 2, "y": 22, "width": 13, "height": 12 },
                        { "x": 15, "y": 22, "width": 7, "height": 12 },
                        { "x": 22, "y": 22, "width": 12, "height": 12 }
                ]
        }
}

我们看到packer实际上定义了9个补丁（现在有人应该知道了！）