本文介绍了NinePatch图像,如何创建它们以及如何在Libgdx上下文中使用它们。
在你开始之前
本指南适用于旧的scene2d和skinpacker(0.9.6之前的版本)。 如果您正在运行最新版本,按照本指南可能会出现一些错误提示,但不会像分步指南那样工作。 主要的区别是,skinpacker和texturepacker已经在texturepacker2中统一了,皮肤以不同的方式加载。
Introduction
NinePatch图像是具有定义的“可拉伸”区域的图像。 有了这个属性,可以使用非常小的区域缩放到非常大的区域中。 由于这些区域是预先定义的,所以图像看起来不会拉伸(考虑到它已经被缩放了)。 libgdx中的相应NinePatch类位于here (code).
NinePatch用于Libgdx的各种Scene2d组件,包括:
Buttons
ScrollPanes
Textfields
这是在代码中手动实例化NinePatch图像的简短介绍。 它基本上是创建一个图像,找出哪些区域伸展和记下这些区域的像素。
创建可扩展的图像
请记住,您的图像的某些区域需要保存内容(文本,其他图像等),因此不能包含任何“特殊功能”(因为此区域将被缩放)。 在这种情况下,我将创建一个“按钮”。
可以注意到,这个“按钮”是圆的。 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添加到舞台的结果如下所示:
我们的圆形图像现在已经缩放了内容长度(文本)。 该按钮使用标准BitmapFont和一些显眼的颜色。
在代码中实例化时的限制
直接(使用Libgdx)实例化NinePatch的限制是,您的固定区域将是一个Square。 下面我附上了一张图,说明了在NinePatch中实际定义的四个整数参数。 青色不重叠的灰色区域是可扩展区域。
使用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工具中的图像。 请注意左侧的“预览”,以及图像的大小.
在下面的图片中,我已经定义了什么区域的内容将被放置(换句话说,什么将被缩放),以及我不想缩放的区域
现在将图像保存为image.9.png。 由于libgdx不能将该文件识别为NinePatch,所以不能加下划线。 以下是所有NinePatch的完整图像,并准备在代码中使用。
以编程方式定义NinePatch
看到this NinePatch构造函数。
使用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个补丁(现在有人应该知道了!)