xiaokun/netease-bedrock-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #3 from linyuzhe210/UIFixDoc

Browse Source 
fix：修改界面与交互文档的代码块缩进、代码块、json格式
This commit is contained in:
MCNeteaseDevs
2025-06-09 10:22:30 +08:00
committed by GitHub
parent 2a71cfaa30 3a1bc13871
commit 53bdf2bbf4
6 changed files with 1056 additions and 946 deletions
Download Patch File Download Diff File Expand all files Collapse all files

339
mcguide/18-界面与交互/19-控件属性动画.md
View File

@@ -187,12 +187,12 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
要表现一个属性动画，需要先写一个Json数据块，透明度动画举例如下（相关参数会在下文详细描述）： 要表现一个属性动画，需要先写一个Json数据块，透明度动画举例如下（相关参数会在下文详细描述）：
```json ```json
{ {
"anim_type" : "alpha", "anim_type" : "alpha",
"duration" : 1.0, "duration" : 1.0,
"from" : 0.0, "from" : 0.0,
"to" : 1.0 "to" : 1.0
} }
``` ```
这段代码块代表一个控件在1秒钟内alpha值从0线性变化到1的属性动画，为了将这个动画绑定到控件上，一共有两种写法。 这段代码块代表一个控件在1秒钟内alpha值从0线性变化到1的属性动画，为了将这个动画绑定到控件上，一共有两种写法。
@@ -200,38 +200,38 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
一种是将Json数据块直接赋给alpha属性： 一种是将Json数据块直接赋给alpha属性：
```json ```json
{ {
"alphaImg" : { "alphaImg" : {
"alpha" : { "alpha" : {
"anim_type" : "alpha",
"duration" : 0.30,
"from" : 0.0,
"to" : 1.0
},
"texture" : "textures/netease/common/image/default",
"type" : "image",
"visible" : true
}
}
```
另一种则是将属性动画写成自定义控件的形式写在UIjson文件的最外层，在alpha属性值以 “@”+动画名 的形式进行赋值：
```json
{
"alphaImg" : {
"alpha" : "@show_alpha_ani",
"texture" : "textures/netease/common/image/default",
"type" : "image",
"visible" : true
},
"show_alpha_ani": {
"anim_type" : "alpha", "anim_type" : "alpha",
"duration" : 0.30, "duration" : 0.30,
"from" : 0.0, "from" : 0.0,
"to" : 1.0 "to" : 1.0
}, },
} "texture" : "textures/netease/common/image/default",
"type" : "image",
"visible" : true
}
}
```
另一种则是将属性动画写成自定义控件的形式写在UIjson文件的最外层，在alpha属性值以 “@”+动画名 的形式进行赋值：
```json
{
"alphaImg" : {
"alpha" : "@show_alpha_ani",
"texture" : "textures/netease/common/image/default",
"type" : "image",
"visible" : true
},
"show_alpha_ani": {
"anim_type" : "alpha",
"duration" : 0.30,
"from" : 0.0,
"to" : 1.0
}
}
``` ```
两种写法都能达成相同的效果，不同的是第二种写法能够被复用。 两种写法都能达成相同的效果，不同的是第二种写法能够被复用。
@@ -259,33 +259,34 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
* 注2 * 注2
```json ```json
"alphaImg" : { {
"alpha" : "@show_alpha_ani", "alphaImg" : {
"texture" : "textures/netease/common/image/default", "alpha" : "@show_alpha_ani",
"type" : "image", "texture" : "textures/netease/common/image/default",
"visible" : true "type" : "image",
}, "visible" : true
"show_alpha_ani": { },
"anim_type" : "alpha", "show_alpha_ani": {
"duration" : 0.30, "anim_type" : "alpha",
"from" : 0.0, "duration" : 0.30,
"next" : "@hold_alpha_ani", "from" : 0.0,
"to" : 1.0 "next" : "@hold_alpha_ani",
}, "to" : 1.0
"hold_alpha_ani" : { },
"anim_type" : "alpha", "hold_alpha_ani" : {
"duration" : 1, "anim_type" : "alpha",
"from" : 1.0, "duration" : 1,
"next" : "@hide_alpha_ani", "from" : 1.0,
"to" : 1.0 "next" : "@hide_alpha_ani",
}, "to" : 1.0
"hide_alpha_ani" : { },
"anim_type" : "alpha", "hide_alpha_ani" : {
"duration" : 0.30, "anim_type" : "alpha",
"from" : 1.0, "duration" : 0.30,
"to" : 0.0 "from" : 1.0,
}, "to" : 0.0
}
}
``` ```
### 透明度动画 ### 透明度动画
@@ -301,33 +302,34 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
![alpha动画](./picture/UIAnimation/alpha.gif) ![alpha动画](./picture/UIAnimation/alpha.gif)
```json ```json
"alphaImg" : { {
"alpha" : "@show_alpha_ani", "alphaImg" : {
"texture" : "textures/netease/common/image/default", "alpha" : "@show_alpha_ani",
"type" : "image", "texture" : "textures/netease/common/image/default",
"visible" : true "type" : "image",
}, "visible" : true
"show_alpha_ani": { },
"anim_type" : "alpha", "show_alpha_ani": {
"duration" : 0.30, "anim_type" : "alpha",
"from" : 0.0, "duration" : 0.30,
"next" : "@hold_alpha_ani", "from" : 0.0,
"to" : 1.0 "next" : "@hold_alpha_ani",
}, "to" : 1.0
"hold_alpha_ani" : { },
"anim_type" : "alpha", "hold_alpha_ani" : {
"duration" : 1, "anim_type" : "alpha",
"from" : 1.0, "duration" : 1,
"next" : "@hide_alpha_ani", "from" : 1.0,
"to" : 1.0 "next" : "@hide_alpha_ani",
}, "to" : 1.0
"hide_alpha_ani" : { },
"anim_type" : "alpha", "hide_alpha_ani" : {
"duration" : 0.30, "anim_type" : "alpha",
"from" : 1.0, "duration" : 0.30,
"to" : 0.0 "from" : 1.0,
}, "to" : 0.0
}
}
``` ```
### 裁剪动画 ### 裁剪动画
@@ -343,18 +345,19 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
![clip动画](./picture/UIAnimation/clip.gif) ![clip动画](./picture/UIAnimation/clip.gif)
```json ```json
"clipImg" : { {
"clip_ratio" : { "clipImg" : {
"anim_type" : "clip", "clip_ratio" : {
"duration" : 1.0, "anim_type" : "clip",
"from" : 0.0, "duration" : 1.0,
"to" : 1.0 "from" : 0.0,
}, "to" : 1.0
"texture" : "textures/netease/common/image/default", },
"type" : "image", "texture" : "textures/netease/common/image/default",
"visible" : true "type" : "image",
}, "visible" : true
}
}
``` ```
### 颜色动画 ### 颜色动画
@@ -370,19 +373,20 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
![color动画](./picture/UIAnimation/color.gif) ![color动画](./picture/UIAnimation/color.gif)
```json ```json
"colorImg" : { {
"color": "@color_ani", "colorImg" : {
"texture" : "textures/netease/common/image/default", "color": "@color_ani",
"type" : "image", "texture" : "textures/netease/common/image/default",
"visible" : true "type" : "image",
}, "visible" : true
"color_ani": { },
"anim_type" : "color", "color_ani": {
"duration" : 1.0, "anim_type" : "color",
"from" : [1,0,0], "duration" : 1.0,
"to" : [0,0,1] "from" : [1,0,0],
}, "to" : [0,0,1]
}
}
``` ```
### 序列帧动画 ### 序列帧动画
@@ -402,20 +406,22 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
![flipbook动画](./picture/UIAnimation/flipbook.gif) ![flipbook动画](./picture/UIAnimation/flipbook.gif)
```json ```json
"flipbookImg" : { {
"texture" : "textures/ui/my_eating_apple", "flipbookImg" : {
"type" : "image", "texture" : "textures/ui/my_eating_apple",
"uv" : "@flipbook_ani", "type" : "image",
"uv_size" : [ 64.0, 64.0 ], "uv" : "@flipbook_ani",
"visible" : true "uv_size" : [ 64.0, 64.0 ],
}, "visible" : true
"flipbook_ani": { },
"anim_type": "flip_book", "flipbook_ani": {
"initial_frame": 10, "anim_type": "flip_book",
"frame_count": 36, "initial_frame": 10,
"fps": 10, "frame_count": 36,
"reversible": false "fps": 10,
}, "reversible": false
}
}
``` ```
当一个图片控件被用作序列帧的载体时，该控件的属性配置有以下规则需要遵守： 当一个图片控件被用作序列帧的载体时，该控件的属性配置有以下规则需要遵守：
@@ -441,19 +447,20 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
![offset动画](./picture/UIAnimation/offset.gif) ![offset动画](./picture/UIAnimation/offset.gif)
```json ```json
"offsetImg" : { {
"offset" : "@offset_ani", "offsetImg" : {
"texture" : "textures/netease/common/image/default", "offset" : "@offset_ani",
"type" : "image", "texture" : "textures/netease/common/image/default",
"visible" : true "type" : "image",
}, "visible" : true
"offset_ani": { },
"anim_type" : "offset", "offset_ani": {
"duration" : 1.0, "anim_type" : "offset",
"from" : [0, 0], "duration" : 1.0,
"to" : [0, 50] "from" : [0, 0],
}, "to" : [0, 50]
}
}
``` ```
**注** **注**
@@ -477,19 +484,20 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
![size动画](./picture/UIAnimation/size.gif) ![size动画](./picture/UIAnimation/size.gif)
```json ```json
"sizeImg" : { {
"size" : "@size_ani", "sizeImg" : {
"texture" : "textures/netease/common/image/default", "size" : "@size_ani",
"type" : "image", "texture" : "textures/netease/common/image/default",
"visible" : true "type" : "image",
}, "visible" : true
"size_ani": { },
"anim_type" : "size", "size_ani": {
"duration" : 1.0, "anim_type" : "size",
"from" : [100, 100], "duration" : 1.0,
"to" : [150, 150] "from" : [100, 100],
}, "to" : [150, 150]
}
}
``` ```
**注** **注**
@@ -513,19 +521,20 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
![uv动画](./picture/UIAnimation/uv.gif) ![uv动画](./picture/UIAnimation/uv.gif)
```json ```json
"sizeImg" : { {
"uv" : "@uv_ani", "sizeImg" : {
"texture" : "textures/netease/common/image/default", "uv" : "@uv_ani",
"type" : "image", "texture" : "textures/netease/common/image/default",
"visible" : true "type" : "image",
}, "visible" : true
"uv_ani": { },
"anim_type" : "uv", "uv_ani": {
"duration" : 5, "anim_type" : "uv",
"from" : [0, 0], "duration" : 5,
"to" : [2240, 0] "from" : [0, 0],
}, "to" : [2240, 0]
}
}
``` ```

22
mcguide/18-界面与交互/2-从零开始创建UI.md
View File

@@ -248,20 +248,20 @@ shootButton的锚点，位移XY，尺寸XY的参考属性如下。按照这种
3. 然后激活（显示）对应的界面预设 3. 然后激活（显示）对应的界面预设
```python ```python
def InitClient(self): def InitClient(self):
import mod.client.extraClientApi as clientApi import mod.client.extraClientApi as clientApi
self.ListenForEngineEvent(UiInitFinishedEvent, self, self.OnUIInitFinished) self.ListenForEngineEvent(UiInitFinishedEvent, self, self.OnUIInitFinished)
``` ```
```python ```python
def OnUIInitFinished(self, args): def OnUIInitFinished(self, args):
import mod.client.extraClientApi as clientApi import mod.client.extraClientApi as clientApi
if clientApi.GetPlatform() == 0: if clientApi.GetPlatform() == 0:
uiNodePreset = self.GetParent().GetChildPresetsByName("PC版UI界面")[0] uiNodePreset = self.GetParent().GetChildPresetsByName("PC版UI界面")[0]
else: else:
uiNodePreset = self.GetParent().GetChildPresetsByName("PE版UI界面")[0] uiNodePreset = self.GetParent().GetChildPresetsByName("PE版UI界面")[0]
if uiNodePreset: if uiNodePreset:
uiNodePreset.SetUiActive(True) uiNodePreset.SetUiActive(True)
``` ```
我们利用[UI API文档](40-UIAPI文档.html)中对各个控件的接口和游戏原生支持的格式化，可以在python代码中动态的改变界面的表现，具体可以参考[样式代码](https://minecraft-zh.gamepedia.com/index.php?title=%E6%A0%B7%E5%BC%8F%E4%BB%A3%E7%A0%81&variant=zh) 我们利用[UI API文档](40-UIAPI文档.html)中对各个控件的接口和游戏原生支持的格式化，可以在python代码中动态的改变界面的表现，具体可以参考[样式代码](https://minecraft-zh.gamepedia.com/index.php?title=%E6%A0%B7%E5%BC%8F%E4%BB%A3%E7%A0%81&variant=zh)

1621
mcguide/18-界面与交互/30-UI说明文档.md
View File

File diff suppressed because it is too large Load Diff

4
mcguide/18-界面与交互/40-UIAPI文档.md
View File

@@ -23,8 +23,8 @@ sidebarDepth: 1
ScreenNode的一些有用的函数，界面Node节点的获取方式在[UI使用文档](30-UI说明文档.html)中有详细说明。 ScreenNode的一些有用的函数，界面Node节点的获取方式在[UI使用文档](30-UI说明文档.html)中有详细说明。
```python ```python
import mod.client.extraClientApi as clientApi import mod.client.extraClientApi as clientApi
uiNode = clientApi.GetUI("myModName", "myUIName") uiNode = clientApi.GetUI("myModName", "myUIName")
``` ```
假设下文中的函数，uiNode为获取到的ScreenNode继承类，调用的UI界面是按下面的节点树组织结构的 假设下文中的函数，uiNode为获取到的ScreenNode继承类，调用的UI界面是按下面的节点树组织结构的

10
mcguide/18-界面与交互/61-原生界面修改文档.md
View File

@@ -116,8 +116,10 @@ CustomUIScreenProxy是原生界面的代理类，可通过extraClientApi.GetUISc
- 示例 - 示例
```python ```python
# coding=utf-8
import client.extraClientApi as clientApi import client.extraClientApi as clientApi
CustomUIScreenProxy = clientApi.GetUIScreenProxyCls() CustomUIScreenProxy = clientApi.GetUIScreenProxyCls()
ViewBinder = clientApi.GetViewBinderCls()
class PauseScreenProxy(CustomUIScreenProxy): class PauseScreenProxy(CustomUIScreenProxy):
@@ -135,10 +137,10 @@ class PauseScreenProxy(CustomUIScreenProxy):
@ViewBinder.binding(ViewBinder.BF_ToggleChanged, "#myMod.myToggle") @ViewBinder.binding(ViewBinder.BF_ToggleChanged, "#myMod.myToggle")
def onToggleChanged(self, args): def onToggleChanged(self, args):
""" """
proxy也支持binding，这里展示的是绑定一类toggle（这类toggle甚至可以不存在），这类toggle满足"toggle_name"属性是"#myMod.myToggle"这一要求，当他们发生状态改变的时候就会调用该函数。 proxy也支持binding，这里展示的是绑定一类toggle（这类toggle甚至可以不存在），这类toggle满足"toggle_name"属性是"#myMod.myToggle"这一要求，当他们发生状态改变的时候就会调用该函数。
""" """
print("myToggle onToggleChanged: {}".format(args)) print("myToggle onToggleChanged: {}".format(args))
``` ```

6
mcguide/18-界面与交互/70-UI数据绑定.md
View File

@@ -387,9 +387,9 @@ def OnItemToggleChecked(self, args):
toggleIndex = 0 toggleIndex = 0
self.mCurItemIndex = toggleIndex self.mCurItemIndex = toggleIndex
itemDict = self.mItemData[self.mCurItemTab][toggleIndex] itemDict = self.mItemData[self.mCurItemTab][toggleIndex]
self.SetSprite(self.mItemIcon, itemDict["icon"]) self.GetBaseUIControl(self.mItemIcon).asImage().SetSprite(itemDict["icon"])
self.SetText(self.mItemName, itemDict["name"]) self.GetBaseUIControl(self.mItemName).asLabel().SetText(itemDict["name"])
self.SetText(self.mItemDesc, itemDict["desc"]) self.GetBaseUIControl(self.mItemDesc).asLabel().SetText(itemDict["desc"])
self.set_control_visible(self.mItemInfoWrap, True) self.set_control_visible(self.mItemInfoWrap, True)
``` ```