图片

提示：以下属性仅适用于 image 控件类型。

属性

属性	属性名	值	默认值	描述
texture	纹理路径	字符串：路径		图片所在的路径 ^[1]。例如：textures/ui/anvil_icon
color	颜色	字符串：列举或数组：RGB数组	white	改变该控件颜色。颜色不会传递到子控件。值作为字符串时，可能为：白色 white、淡灰色 silver、灰色 gray grey、黑色 black、红色 red、绿色 green、黄色 yellow、棕色 brown、青色 cyan、蓝色 blue、橙色 orange、紫色 purple、无色 nil 值作为“[R,G,B,A]”数组时，可能为： R通道，浮点数，取值范围在 0~1 之间，默认为 1； G通道，浮点数，取值范围在 0~1 之间，默认为 1； B通道，浮点数，取值范围在 0~1 之间，默认为 1； A通道，浮点数，取值范围在 0~1 之间，默认为 1。 RGB转为RGB数组可以使用本站的颜色转换工具，或将RGB各值除于255并保留3位小数。
fill	填充	布尔值	false	图片是否填满至控件大小。
tiled	平铺	布尔值或字符串：列举	false	图片是否平铺或者图片平铺的方向 ^[2]。作为布尔值并且为 true 时图片将从控件左上角向右下方平铺。（超出部分会被忽略隐藏）作为布尔值并且为 false 时图片不会平铺。作为字符串时详见平铺方向 >
tiled_scale	平铺缩放	数组：矢量[x,y]		图片的平铺的缩放大小 ^[3]。
nineslice_size	九宫格切片纹理	浮点数、数组：矢量[x,y]、数组：矢量[x1,y1,x2,y2]	0	详见九宫格切片纹理 >
uv	UV	数组：矢量[x,y]	[0,0]	图片映射的初始位置，改变基于左上角的映射位置。 uv偏移方向如下：
uv_size	UV大小	数组：矢量[x,y]	[0,0]	图片映射的大小。
bilinear	双线性	布尔值	false	是否使图片以双线性滤波形式显示。双线性是一种非线性滤波器，它可以达到保持边缘、降噪平滑的效果。
color_corrected	颜色校准	布尔值	false	图片的颜色是否校准。仅 1.21.40 以上版本可用。
grayscale	灰白滤镜	布尔值	false	图片是否使用灰白滤镜显示。
clip_ratio	剪辑比例	浮点数	1	图片的剪辑比例。
clip_direction	剪辑方向	字符串：列举		图片开始剪辑的方向。列举的值有： center 中心 up 上 down 下 left 左 right 右
clip_pixelperfect	剪辑精准到像素	布尔值	true	图片剪辑是否精准到像素。
keep_ratio	保持比例	布尔值	true	图片是否保持比例。
allow_debug_missing_texture	允许调试丢失材质	布尔值	true	图片是否允许调试丢失材质。当显示的图片不存在时，是否使用textures/misc/missing_texture.png作为显示。
force_texture_reload	强制重新重载纹理	布尔值	false	是否强制重载纹理。
zip_folder	压缩包路径	字符串：路径		图片在压缩包中的路径。例如：xxx/textures/ui/anvil_icon
texture_file_system	文件系统	字符串：列举	InUserPackage	定义该资源文件处于哪个文件系统。列举的值有： InUserPackage 用户资源包 RawPath 原生路径 InAppPackage 应用程序根目录 RawPersistent 原生持久 InSettingDir 设置目录（minecraftpe 文件夹） InExternalDir 外部目录 InServerPackage 服务器目录 InDataDir 数据目录 InUserDir 用户目录 InWorldDir 世界目录 StoreCache 缓存目录

路径不存在或无法解析图片时会显示为紫黑材质。
图片使用平铺时，fill属性没有作用。
"tiled_scale": [32,32]，如果图片像素大小为 16 x 16 ，那么在图片平铺的情况下，图片像素缩放到 32 x 32。

平铺方向

当tiled属性作为字符串时，因使用以下所列举的字符串改变平铺方向：

字符串	描述
x	图片将从控件正左方向 X轴右方平铺。（如果图片在Y轴有剩余部分，会把图片高度拉伸至控件高度）
y	图片将从控件正上方向 Y轴下方平铺。（如果图片在X轴有剩余部分，会把图片宽度拉伸至控件宽度）
xy	图片将从控件左上方向控件右下方平铺。
yx	图片将从控件左上方向控件右下方平铺。

九宫格切片纹理

九宫格切片纹理即图片的九宫格切片，一种将图片分成 9 块的方法，因此称为九宫格切片纹理。
使用九宫格切片纹理调整图片大小后，图片角落将保持同等大小，内部部分将用于拉伸。提示
九宫格切片纹理的值不能为负数。其中，九宫格切片有四种类型：无九宫格切片纹理、九宫格切片纹理、矢量[x,y]九宫格切片纹理、矢量[x1,y1,x2,y2]九宫格切片纹理
接下来，我们仔细讲解九宫格切片的每种类型

无九宫格切片纹理

在没有"nineslice_size"属性的情况下，没有无九宫格切片。

九宫格切片纹理

格式："nineslice_size": int
示例："nineslice_size": 1
设图像X轴和Z轴九宫格切片的角落大小。【X轴 = Y轴】

矢量[x,y]九宫格切片纹理

格式："nineslice_size": [ x, y ]
示例："nineslice_size": [ 2, 2 ]
设图像X轴和Z轴九宫格切片的角落大小。【 X轴和 Y轴不关联（影响）】

矢量[x1,y1,x2,y2]九宫格切片纹理

格式："nineslice_size": [ x1, y1, x2, y2 ]
示例："nineslice_size": [ 2, 2, 2, 2 ]
设图像两角的X轴和Z轴九宫格切片的角落大小
【左上角：X1 和 Y1；右下角：X2 和 Y2 】

制作动图

那么如何制作动图？

1. 首先，图片如果是Gif图片需要折分并转换为其它图片格式

2. 然后再将每张图片合并为一张图片（水平拼接），例如下方图片

将图片存储到资源包内的一个位置

3. 在控件内部添加属性提示
1. 不要照抄，这里仅做示范，可能会与你的代码不同
2. texture中填你刚存放图片的资源包路径

RP/ui/start_screen.json

"auto_save": {
  "type": "image",
  "texture": "textures/ui/auto_save",
  "size": [ 16, 16 ],
  "uv_size": [ 18, 30 ],
  "disable_anim_fast_forward": true
}

并没有这么简单，上面只是一个静态图片控件

4. 写个动画控件

在动画控件填入

RP/ui/start_screen.json

"image_anim": {
  "anim_type": "flip_book",
  "easing": "linear"
}

注意
动画控件无需使用"type"，并且动画控件最好与图片控件在同一文件中 5. 完善动画控件

我们逐次填入下列属性：
initial_uv：直接填 "initial_uv": [0,0]，可以忽略。
easing：直接填 "easing": "linear"，可以忽略。
frame_count：拼接的图片有多少张就填多少，例如frame_count。
fps：数字越大，播放越快，例如"fps": 60。
frame_step：拼接的每张图片有多长，就填多少，例如"frame_step": 18。

填完的效果可能这样的。

RP/ui/start_screen.json

"image_anim": {
  "anim_type": "flip_book",
  "initial_uv": [ 0, 0 ],
  "frame_count": 9,
  "frame_step": 18,
  "fps": 10,
  "reversible": true,
  "easing": "linear"
}

6. 回到图片控件添加uv属性

例如：

RP/ui/start_screen.json

"auto_save": {
  "type": "image",
  "texture": "textures/ui/auto_save",
  "size": [ 16, 16 ],
  "uv_size": [ 18, 30 ],
  "uv": "@image_anim",
  "disable_anim_fast_forward": true
}

在这里，uv的值是字符串
并且值必须是"@动画控件名称"

7. 检查代码格式是否正确

好了，动图控件已经完成，记得引用控件才能显示在屏幕上哦
下面是完整的示例代码

RP/ui/start_screen.json

"image_anim": {
  "anim_type": "flip_book",
  "initial_uv": [ 0, 0 ],
  "frame_count": 9,
  "frame_step": 18,
  "fps": 10,
  "reversible": true,
  "easing": "linear"
},
"test_image": {
  "type": "image",
  "texture": "textures/ui/auto_save",
  "size": [ 18, 30 ],
  "uv_size": [ 18, 30 ],
  "uv": "@image_anim",
  "disable_anim_fast_forward": true
}

外部 JSON 文件属性

在 textures/ui/ 文件夹中，有些图片旁边有同名的文件。
这些文件打开一看，却装着 JSON UI 的属性，到底是怎么回事呢？我们来研究下吧！

在外部 JSON 文件声明属性能直接定义图片的属性，无需多次在 JSON UI 文件中声明属性！
打开文件，内部代码格式为

代码

{"base_size":[8,8],"nineslice_size":[2,2]}

里面那些属性通常为 base_size nineslice_size，属性如下表所示。

属性	属性名	值	默认值	描述
nineslice_size	九宫格切片纹理	浮点数、数组：矢量[x,y]、数组：矢量[x1,y1,x2,y2]	0	详见九宫格切片纹理 >
base_size	基本大小	数组：矢量[x,y]		图片在显示时的基本大小。

那要如何创建一个图像文件呢？
只需创建一个与图像同名的 .json 文件，
例如：test.png -> test.json

代码示例

普通的图像控件

"image": {
  "type": "image",
  "textures": "textures/items/apple"
}

动图

"image_anim": {
  "anim_type": "flip_book",
  "initial_uv": [ 0, 0 ],
  "frame_count": 9,
  "frame_step": 18,
  "fps": 10,
  "easing": "linear"
},
"test_image": {
  "type": "image",
  "texture": "textures/ui/auto_save",
  "size": [ 18, 30 ],
  "uv_size": [ 18, 30 ],
  "uv": "@image_anim",
  "disable_anim_fast_forward": true
}

版权声明- 除非另有说明，否则文档内容均采用CC BY-NC-SA 4.0许可协议
- 此网站与 Mojang Studios 以及微软无任何从属关系
- 转载需要作者同意，并且标明内容来自于本网站