添加了部分来自于BedrockWiki的文章！
This commit is contained in:
boybook
89
docs/wiki/4-Json-UI/2-巧思案例/add-hud-elements.md
Normal file
89
docs/wiki/4-Json-UI/2-巧思案例/add-hud-elements.md
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
title: 添加HUD元素
|
||||
category: 教程
|
||||
tags:
|
||||
- 初学者
|
||||
mentions:
|
||||
- shanewolf38
|
||||
- SmokeyStack
|
||||
---
|
||||
|
||||
# 添加HUD元素
|
||||
|
||||
<!--@include: @/wiki/bedrock-wiki-mirror.md-->
|
||||
|
||||
在本教程中，你将学习如何向HUD界面添加元素。
|
||||
|
||||
## 概述
|
||||
|
||||
HUD界面在游戏中大部分时间都会显示，为玩家提供关键信息。很多时候你需要在界面上添加元素，比如在完成特定事件后弹出文字、显示玩家体力的耐力条、显示玩家速度的时速表等等！
|
||||
|
||||
要将创建的元素添加到HUD界面，需要使用`modification`参数在`root_panel`中添加新的`control`（界面元素）。Root_panel是一个面板类型的元素，包含了HUD界面上几乎所有显示的元素。
|
||||
|
||||
## 单个元素添加
|
||||
|
||||
下面这段代码会在屏幕顶部创建一个显示黑色方块的图像元素，在屏幕右上角创建显示文字"HUD文本"的标签元素，并通过修改`root_panel`将它们添加到HUD界面。
|
||||
|
||||
::: code-group
|
||||
```json [RP/ui/hud_screen.json]
|
||||
"hud_square": {
|
||||
"type": "image",
|
||||
"texture": "textures/ui/Black", // 原版纹理
|
||||
"anchor_from": "top_middle",
|
||||
"anchor_to": "top_middle",
|
||||
"size": [ 64, 64 ],
|
||||
"offset": [ 0, 4 ]
|
||||
},
|
||||
|
||||
"hud_text": {
|
||||
"type": "label",
|
||||
"text": "HUD文本",
|
||||
"anchor_from": "top_right",
|
||||
"anchor_to": "top_right",
|
||||
"offset": [ -4, 4 ]
|
||||
},
|
||||
|
||||
"root_panel": {
|
||||
"modifications": [
|
||||
{
|
||||
"array_name": "controls",
|
||||
"operation": "insert_front",
|
||||
"value": [
|
||||
{ "hud_square@hud.hud_square": {} },
|
||||
{ "hud_text@hud.hud_text": {} }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
```
|
||||
|
||||
需要添加到HUD界面上的所有元素都列举在root_panel的`modifications`->`value`部分。在添加元素时使用的命名空间标识（例如`@hud.hud_square`）可以根据实际模块进行调整。比如当`hud_square`元素是创建在`scoreboard`命名空间的scoreboards.json界面文件中时，添加时应使用`@scoreboard.hud_square`。
|
||||
|
||||
## 组合元素添加
|
||||
|
||||
出于组织结构考虑，通常不建议将大量元素直接逐个添加到根面板中。以下代码将之前定义的`hud_square`和`hud_text`元素（示例中未展示）包裹在名为`hud_elements_panel`的面板元素中，然后将该面板整体添加到HUD的根面板。最终效果与单个元素添加方式相同。
|
||||
|
||||
::: code-group
|
||||
```json [RP/ui/hud_screen.json]
|
||||
"hud_elements_panel": {
|
||||
"type": "panel",
|
||||
"controls": [
|
||||
{ "hud_square@hud_square": {} },
|
||||
{ "hud_text@hud_text": {} }
|
||||
]
|
||||
},
|
||||
|
||||
"root_panel": {
|
||||
"modifications": [
|
||||
{
|
||||
"array_name": "controls",
|
||||
"operation": "insert_front",
|
||||
"value": [
|
||||
{ "hud_elements_panel@hud.hud_elements_panel": {} }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
```
|
||||
|
||||
此处`hud_elements_panel`没有直接定义尺寸参数，因此将继承其父元素（`root_panel`）的尺寸。这使得子元素的锚点定位、百分比尺寸等效果能相对于HUD屏幕进行适配。
|
||||
64
docs/wiki/4-Json-UI/2-巧思案例/aseprite-animations.md
Normal file
64
docs/wiki/4-Json-UI/2-巧思案例/aseprite-animations.md
Normal file
@@ -0,0 +1,64 @@
|
||||
---
|
||||
title: Aseprite动画
|
||||
category: 教程
|
||||
mentions:
|
||||
- TheDataLioness
|
||||
- shanewolf38
|
||||
- TheItsNameless
|
||||
- LeGend077
|
||||
- stirante
|
||||
---
|
||||
|
||||
# Aseprite动画
|
||||
|
||||
<!--@include: @/wiki/bedrock-wiki-mirror.md-->
|
||||
|
||||
## Aseprite简介
|
||||
|
||||
[Aseprite](https://www.aseprite.org/) 是一款付费像素艺术软件，专门用于轻松创建皮肤和资源包。它提供丰富的工具、详尽的文档和教程，适合不同水平的艺术家使用。
|
||||
|
||||
[LibreSprite](https://libresprite.github.io/) 是Aseprite的免费开源替代品。它基于Aseprite最后一个开源许可版本进行分支开发，本教程中的操作同样适用于LibreSprite。
|
||||
|
||||
## 在Aseprite中创建动画
|
||||
|
||||
假设你有一组按数字1到5顺序命名的"frameimage"系列帧图像。导入第一张图像后，Aseprite会自动识别同名但编号不同的其他图片，将它们按正确顺序排列并创建动画。
|
||||
|
||||
<FolderView
|
||||
:paths="[
|
||||
'frameimage1.png',
|
||||
'frameimage2.png',
|
||||
'frameimage3.png',
|
||||
'frameimage4.png',
|
||||
'frameimage5.png'
|
||||
]"
|
||||
></FolderView>
|
||||
|
||||
使用`箭头键`在帧间导航，`Enter键`控制动画的播放/暂停。按下`Tab键`可打开时间轴选择单帧，右键点击时间轴上的帧可设置各种参数。
|
||||
|
||||
通过快捷键`Ctrl + E`或菜单`文件 -> 导出到精灵表`进行导出操作。在输出设置中选择输出文件和JSON数据格式，出现包含哈希（Hash）和数组（Array）两种选项的下拉菜单时，请确保选择数组（Array）模式，否则会导致异常。
|
||||
|
||||
最终将生成两个文件：SpriteSheet图像和JSON文件。请确保这两个文件主文件名相同且扩展名不同。
|
||||
|
||||
## 在JSON-UI中使用Aseprite动画
|
||||
|
||||
`aseprite_flip_book`动画类型专用于`image`类型元素的`uv`属性配置。
|
||||
|
||||
::: code-group
|
||||
```json [RP/ui/example_file.json]
|
||||
{
|
||||
"image_element": { // 此处为动画元素
|
||||
"type": "image",
|
||||
"texture": "textures/ui/my_sprite_file",
|
||||
"uv_size": [32, 32],
|
||||
"uv": "@example_namespace.image_uv_animation"
|
||||
},
|
||||
|
||||
"image_uv_animation": { // 此处为动画控制参数
|
||||
"anim_type": "aseprite_flip_book",
|
||||
"initial_uv": [0, 0]
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
将`texture`字段设置为导出文件的路径（不包含扩展名）。`uv_size`字段应设置为单帧的宽高尺寸。
|
||||
78
docs/wiki/4-Json-UI/2-巧思案例/preserve-title-texts.md
Normal file
78
docs/wiki/4-Json-UI/2-巧思案例/preserve-title-texts.md
Normal file
@@ -0,0 +1,78 @@
|
||||
---
|
||||
title: 保留标题文本
|
||||
category: 教程分类
|
||||
tags:
|
||||
- 中级
|
||||
mentions:
|
||||
- shanewolf38
|
||||
- SmokeyStack
|
||||
---
|
||||
|
||||
# 保留标题文本
|
||||
|
||||
<!--@include: @/wiki/bedrock-wiki-mirror.md-->
|
||||
|
||||
在本教程中，您将学习如何保存绑定数据并根据含有特定字符串的标题更新界面元素。
|
||||
|
||||
## 概述
|
||||
|
||||
标题是向UI系统传递数据的常用方法。当标题包含特定字符串时才更新相关数据元素，而忽略所有不含该字符串的标题数据非常有用。尽管本教程以标题为例，但该方法适用于所有通过绑定传递的数据（如副标题、玩家记分板名称等）。
|
||||
|
||||
要保存特定字符串，我们需要组合使用 `visibility_changed` 绑定更新条件和 `source_control_name`，从而仅在包含特定字符串时更新绑定，并将该绑定传递给另一个元素。
|
||||
|
||||
## 标题指令
|
||||
|
||||
以下代码创建了一个标签元素，当将其添加到根面板时，可以在屏幕显示包含字符串"update"的标题（显示文本中会移除"update"部分）。后续传入的标题信息只有包含"update"时才会更新显示文本。
|
||||
|
||||
::: code-group
|
||||
```json [RP/ui/hud_screen.json]
|
||||
"preserved_title_display": {
|
||||
"$update_string": "update", // 标题必须包含此字符串才触发元素更新
|
||||
"type": "label",
|
||||
"text": "#text",
|
||||
"controls": [
|
||||
{
|
||||
"data_control": {
|
||||
"type": "panel",
|
||||
"size": [ 0, 0 ],
|
||||
"bindings": [
|
||||
{
|
||||
"binding_name": "#hud_title_text_string" // 读取当前标题字符串
|
||||
},
|
||||
{
|
||||
"binding_name": "#hud_title_text_string",
|
||||
"binding_name_override": "#preserved_text", // 元素可见性变化时更新#preserved_text
|
||||
"binding_condition": "visibility_changed"
|
||||
},
|
||||
// 当包含更新字符的标题传入后，元素会短暂可见后立即隐藏
|
||||
{
|
||||
"binding_type": "view",
|
||||
"source_property_name": "(not (#hud_title_text_string = #preserved_text) and not ((#hud_title_text_string - $update_string) = #hud_title_text_string))",
|
||||
"target_property_name": "#visible"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"bindings": [
|
||||
{
|
||||
"binding_type": "view",
|
||||
"source_control_name": "data_control", // 从"data_control"子元素读取绑定
|
||||
//"resolve_sibling_scope": true, // 当"data_control"与绑定调用元素为同级时需启用
|
||||
"source_property_name": "(#preserved_text - $update_string)", // 从显示文本中移除更新字符串
|
||||
"target_property_name": "#text"
|
||||
}
|
||||
]
|
||||
},
|
||||
```
|
||||
|
||||
变量 `$update_string` 定义了触发元素更新的标题必须包含的特定字符串。子元素 `data_control` 用于在标题包含更新字符串时存储标题文本。`data_control` 必须是要传递保留文本元素的子级或同级元素，因为其可见性变化会触发文本保存。该元素的三个绑定分别实现：
|
||||
1. 首绑定：持续追踪当前标题文本
|
||||
2. 次绑定：在元素可见性变化时将当前标题保存至 `#preserved_text`
|
||||
3. 末绑定：当传入含更新字符串的标题时短暂显示元素后立即隐藏
|
||||
|
||||
在 `data_control` 元素的第三个绑定中，需同时满足两个条件才可见：
|
||||
1. `not (#hud_title_text_string = #preserved_text)` - 当前标题与保存标题不一致时成立
|
||||
2. `not ((#hud_title_text_string - $update_string)` - 当前标题含有更新字符串时成立
|
||||
|
||||
当含有更新字符串且与已存文本不同的标题传入时，两条件同时触发，元素更新数据后立即重新隐藏自身。
|
||||
80
docs/wiki/4-Json-UI/2-巧思案例/string-to-number.md
Normal file
80
docs/wiki/4-Json-UI/2-巧思案例/string-to-number.md
Normal file
@@ -0,0 +1,80 @@
|
||||
---
|
||||
title: 字符串转数值
|
||||
category: 教程
|
||||
tags:
|
||||
- 中级
|
||||
mentions:
|
||||
- shanewolf38
|
||||
- SmokeyStack
|
||||
- ThomasOrs
|
||||
---
|
||||
|
||||
# 字符串转数值
|
||||
|
||||
<!--@include: @/wiki/bedrock-wiki-mirror.md-->
|
||||
|
||||
在本教程中，您将学习如何将数字字符串转换为数值，以及如何将数值转换为文本字符串。
|
||||
|
||||
## 概述
|
||||
|
||||
在许多情况下会有文本字符串通过标题、操作栏、记分板或其他来源传递到用户界面中。当我们希望根据输入的字符串动态调整UI元素时，能够进行数字比较就显得非常重要。但类似于"34"或"89"这样的数值型字符串通常会被视为普通文本，既无法与数值进行比较，也难以直接作为运算数据使用。此时我们需要将这类字符串转换为数值。
|
||||
|
||||
要实现字符串到数值的转换，我们可以利用乘法运算特性。任何包含数字的字符串与数值相乘，或者通过去除字符串中的非数字部分，都能使游戏引擎将该值作为数值而非字符串处理。
|
||||
|
||||
## 字符串转数值
|
||||
|
||||
以下代码创建了一个标签元素，当添加到主面板时，可在记分板侧栏的最高分值处于100-999范围内时显示该数值。
|
||||
|
||||
::: code-group
|
||||
```json [RP/ui/hud_screen.json]
|
||||
"string_to_number": {
|
||||
"type": "label",
|
||||
"text": "#player_score_sidebar",
|
||||
"bindings": [
|
||||
{
|
||||
"binding_name": "#player_score_sidebar",
|
||||
"binding_type": "collection",
|
||||
"binding_collection_name": "scoreboard_scores"
|
||||
},
|
||||
{
|
||||
"binding_type": "view",
|
||||
"source_property_name": "(#player_score_sidebar * 1)", // 将分数从字符串转换为数值
|
||||
"target_property_name": "#score"
|
||||
},
|
||||
{
|
||||
"binding_type": "view",
|
||||
"source_property_name": "((#score > 99) and (#score < 1000))", // 仅在100-999范围内可见
|
||||
"target_property_name": "#visible"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
第一个绑定从记分板侧栏读取最大数值（该绑定值以字符串形式固定传输），第二个绑定通过将分数乘以1将其转换为数值（也可以通过减法操作去除字符串中的文本），第三个绑定设置元素仅在分数大于99且小于1000时可见。
|
||||
|
||||
**注意：** 如果需要将数值识别为浮点类型而非整数，可在等式运算中引入浮点变量或绑定，例如除以1.0（必须通过变量或绑定实现——直接插入浮点数无法生效）。这在处理`#clip-ratio`绑定时尤为实用。
|
||||
|
||||
## 数值转字符串
|
||||
|
||||
以下代码创建了一个标签元素，当添加到主面板时，可将"Strength: #"格式标题中的数字部分单独显示。
|
||||
|
||||
::: code-group
|
||||
```json [RP/ui/hud_screen.json]
|
||||
"number_to_string": {
|
||||
"type": "label",
|
||||
"text": "#text",
|
||||
"bindings": [
|
||||
{
|
||||
"binding_type": "global",
|
||||
"binding_name": "#hud_title_text_string"
|
||||
},
|
||||
{
|
||||
"binding_type": "view",
|
||||
"source_property_name": "('§z' + (#hud_title_text_string - 'strength: '))",
|
||||
"target_property_name": "#text"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
当使用标题、副标题等方式传递包含数字的文本时，此方法可单独显示数值。通过减法运算去除多余文本后，需在数值前添加文本使其转换为字符串类型（`text`参数无法直接读取纯数值型绑定）。此例中的括号并非必需，主要用于区分数值转换操作。添加的`§z`字符是无效的Minecraft格式代码，既不显示也不影响标签颜色参数。若需要去除显示中无法通过减法处理的文本，推荐将元素嵌套在设置`"clips_children": true`和适当尺寸的容器面板中实现遮挡效果。
|
||||
Reference in New Issue
Block a user