Merge pull request #3 from linyuzhe210/UIFixDoc

fix：修改界面与交互文档的代码块缩进、代码块、json格式
2025-06-09 10:22:30 +08:00
parent 2a71cfaa30 3a1bc13871
commit 53bdf2bbf4
6 changed files with 1056 additions and 946 deletions
--- a/mcguide/18-界面与交互/19-控件属性动画.md
+++ b/mcguide/18-界面与交互/19-控件属性动画.md
@@ -187,12 +187,12 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 要表现一个属性动画，需要先写一个Json数据块，透明度动画举例如下（相关参数会在下文详细描述）：

 ```json 
-  {
-      "anim_type" : "alpha",
-      "duration" : 1.0,
-      "from" : 0.0,
-      "to" : 1.0
-   }
+{
+    "anim_type" : "alpha",
+    "duration" : 1.0,
+    "from" : 0.0,
+    "to" : 1.0
+}
 ```

 这段代码块代表一个控件在1秒钟内alpha值从0线性变化到1的属性动画，为了将这个动画绑定到控件上，一共有两种写法。
@@ -200,38 +200,38 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 一种是将Json数据块直接赋给alpha属性：

 ```json 
-  {
-        "alphaImg" : {
-            "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": {
+{
+    "alphaImg" : {
+        "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",
+        "duration" : 0.30,
+        "from" : 0.0,
+        "to" : 1.0
+    }
+}
 ```

 两种写法都能达成相同的效果，不同的是第二种写法能够被复用。
@@ -259,33 +259,34 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 * 注2

 ```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,
-            "next" : "@hold_alpha_ani",
-            "to" : 1.0
-        },
-        "hold_alpha_ani" : {
-            "anim_type" : "alpha",
-            "duration" : 1,
-            "from" : 1.0,
-            "next" : "@hide_alpha_ani",
-            "to" : 1.0
-        },
-        "hide_alpha_ani" : {
-            "anim_type" : "alpha",
-            "duration" : 0.30,
-            "from" : 1.0,
-            "to" : 0.0
-        },
-
+{
+    "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,
+        "next" : "@hold_alpha_ani",
+        "to" : 1.0
+    },
+    "hold_alpha_ani" : {
+        "anim_type" : "alpha",
+        "duration" : 1,
+        "from" : 1.0,
+        "next" : "@hide_alpha_ani",
+        "to" : 1.0
+    },
+    "hide_alpha_ani" : {
+        "anim_type" : "alpha",
+        "duration" : 0.30,
+        "from" : 1.0,
+        "to" : 0.0
+    }
+}
 ```

 ### 透明度动画
@@ -301,33 +302,34 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 ![alpha动画](./picture/UIAnimation/alpha.gif)

 ```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,
-            "next" : "@hold_alpha_ani",
-            "to" : 1.0
-        },
-        "hold_alpha_ani" : {
-            "anim_type" : "alpha",
-            "duration" : 1,
-            "from" : 1.0,
-            "next" : "@hide_alpha_ani",
-            "to" : 1.0
-        },
-        "hide_alpha_ani" : {
-            "anim_type" : "alpha",
-            "duration" : 0.30,
-            "from" : 1.0,
-            "to" : 0.0
-        },
-
+{
+    "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,
+        "next" : "@hold_alpha_ani",
+        "to" : 1.0
+    },
+    "hold_alpha_ani" : {
+        "anim_type" : "alpha",
+        "duration" : 1,
+        "from" : 1.0,
+        "next" : "@hide_alpha_ani",
+        "to" : 1.0
+    },
+    "hide_alpha_ani" : {
+        "anim_type" : "alpha",
+        "duration" : 0.30,
+        "from" : 1.0,
+        "to" : 0.0
+    }
+}
 ```

 ### 裁剪动画
@@ -343,18 +345,19 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 ![clip动画](./picture/UIAnimation/clip.gif)

 ```json
-        "clipImg" : {
-            "clip_ratio" : {
-                  "anim_type" : "clip",
-                  "duration" : 1.0,
-                  "from" : 0.0,
-                  "to" : 1.0
-               },
-            "texture" : "textures/netease/common/image/default",
-            "type" : "image",
-            "visible" : true
-        },
-
+{
+    "clipImg" : {
+        "clip_ratio" : {
+              "anim_type" : "clip",
+              "duration" : 1.0,
+              "from" : 0.0,
+              "to" : 1.0
+           },
+        "texture" : "textures/netease/common/image/default",
+        "type" : "image",
+        "visible" : true
+    }
+}
 ```

 ### 颜色动画
@@ -370,19 +373,20 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 ![color动画](./picture/UIAnimation/color.gif)

 ```json
-        "colorImg" : {
-            "color": "@color_ani",
-            "texture" : "textures/netease/common/image/default",
-            "type" : "image",
-            "visible" : true
-        },
-        "color_ani": {
-            "anim_type" : "color",
-            "duration" : 1.0,
-            "from" : [1,0,0],
-            "to" : [0,0,1]
-        },
-
+{
+    "colorImg" : {
+        "color": "@color_ani",
+        "texture" : "textures/netease/common/image/default",
+        "type" : "image",
+        "visible" : true
+    },
+    "color_ani": {
+        "anim_type" : "color",
+        "duration" : 1.0,
+        "from" : [1,0,0],
+        "to" : [0,0,1]
+    }
+}
 ```

 ### 序列帧动画
@@ -402,20 +406,22 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 ![flipbook动画](./picture/UIAnimation/flipbook.gif)

 ```json
-        "flipbookImg" : {
-            "texture" : "textures/ui/my_eating_apple",
-            "type" : "image",
-            "uv" : "@flipbook_ani",
-            "uv_size" : [ 64.0, 64.0 ],
-            "visible" : true
-        },
-        "flipbook_ani": {
-            "anim_type": "flip_book",
-            "initial_frame": 10,
-            "frame_count": 36,
-            "fps": 10,
-            "reversible": false
-        },
+{
+    "flipbookImg" : {
+        "texture" : "textures/ui/my_eating_apple",
+        "type" : "image",
+        "uv" : "@flipbook_ani",
+        "uv_size" : [ 64.0, 64.0 ],
+        "visible" : true
+    },
+    "flipbook_ani": {
+        "anim_type": "flip_book",
+        "initial_frame": 10,
+        "frame_count": 36,
+        "fps": 10,
+        "reversible": false
+    }
+}
 ```

 当一个图片控件被用作序列帧的载体时，该控件的属性配置有以下规则需要遵守：
@@ -441,19 +447,20 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 ![offset动画](./picture/UIAnimation/offset.gif)

 ```json
-        "offsetImg" : {
-            "offset" : "@offset_ani",
-            "texture" : "textures/netease/common/image/default",
-            "type" : "image",
-            "visible" : true
-        },
-        "offset_ani": {
-            "anim_type" : "offset",
-            "duration" : 1.0,
-            "from" : [0, 0],
-            "to" : [0, 50]
-        },
-
+{
+    "offsetImg" : {
+        "offset" : "@offset_ani",
+        "texture" : "textures/netease/common/image/default",
+        "type" : "image",
+        "visible" : true
+    },
+    "offset_ani": {
+        "anim_type" : "offset",
+        "duration" : 1.0,
+        "from" : [0, 0],
+        "to" : [0, 50]
+    }
+}
 ```

 **注**
@@ -477,19 +484,20 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 ![size动画](./picture/UIAnimation/size.gif)

 ```json
-        "sizeImg" : {
-            "size" : "@size_ani",
-            "texture" : "textures/netease/common/image/default",
-            "type" : "image",
-            "visible" : true
-        },
-        "size_ani": {
-            "anim_type" : "size",
-            "duration" : 1.0,
-            "from" : [100, 100],
-            "to" : [150, 150]
-        },
-
+{
+    "sizeImg" : {
+        "size" : "@size_ani",
+        "texture" : "textures/netease/common/image/default",
+        "type" : "image",
+        "visible" : true
+    },
+    "size_ani": {
+        "anim_type" : "size",
+        "duration" : 1.0,
+        "from" : [100, 100],
+        "to" : [150, 150]
+    }
+}
 ```

 **注**
@@ -513,19 +521,20 @@ uv动画和序列帧动画都是uv起点属性的动画，不同于其他属性
 ![uv动画](./picture/UIAnimation/uv.gif)

 ```json
-        "sizeImg" : {
-            "uv" : "@uv_ani",
-            "texture" : "textures/netease/common/image/default",
-            "type" : "image",
-            "visible" : true
-        },
-        "uv_ani": {
-            "anim_type" : "uv",
-            "duration" : 5,
-            "from" : [0, 0],
-            "to" : [2240, 0]
-        },
-
+{
+    "sizeImg" : {
+        "uv" : "@uv_ani",
+        "texture" : "textures/netease/common/image/default",
+        "type" : "image",
+        "visible" : true
+    },
+    "uv_ani": {
+        "anim_type" : "uv",
+        "duration" : 5,
+        "from" : [0, 0],
+        "to" : [2240, 0]
+    }
+}
 ```


--- a/mcguide/18-界面与交互/2-从零开始创建UI.md
+++ b/mcguide/18-界面与交互/2-从零开始创建UI.md
@@ -248,20 +248,20 @@ shootButton的锚点，位移XY，尺寸XY的参考属性如下。按照这种
 3. 然后激活（显示）对应的界面预设

 ```python
-	def InitClient(self):
-		import mod.client.extraClientApi as clientApi
-		self.ListenForEngineEvent(UiInitFinishedEvent, self, self.OnUIInitFinished)
+def InitClient(self):
+    import mod.client.extraClientApi as clientApi
+    self.ListenForEngineEvent(UiInitFinishedEvent, self, self.OnUIInitFinished)
 ```

 ```python
-	def OnUIInitFinished(self, args):
-		import mod.client.extraClientApi as clientApi
-		if clientApi.GetPlatform() == 0:
-			uiNodePreset = self.GetParent().GetChildPresetsByName("PC版UI界面")[0]
-		else:
-			uiNodePreset = self.GetParent().GetChildPresetsByName("PE版UI界面")[0]
-		if uiNodePreset:
-			uiNodePreset.SetUiActive(True)
+def OnUIInitFinished(self, args):
+    import mod.client.extraClientApi as clientApi
+    if clientApi.GetPlatform() == 0:
+        uiNodePreset = self.GetParent().GetChildPresetsByName("PC版UI界面")[0]
+    else:
+        uiNodePreset = self.GetParent().GetChildPresetsByName("PE版UI界面")[0]
+    if uiNodePreset:
+        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)
--- a/mcguide/18-界面与交互/30-UI说明文档.md
+++ b/mcguide/18-界面与交互/30-UI说明文档.md
--- a/mcguide/18-界面与交互/40-UIAPI文档.md
+++ b/mcguide/18-界面与交互/40-UIAPI文档.md
@@ -23,8 +23,8 @@ sidebarDepth: 1
 ScreenNode的一些有用的函数，界面Node节点的获取方式在[UI使用文档](30-UI说明文档.html)中有详细说明。

 ```python
-	import mod.client.extraClientApi as clientApi
-	uiNode = clientApi.GetUI("myModName", "myUIName")
+import mod.client.extraClientApi as clientApi
+uiNode = clientApi.GetUI("myModName", "myUIName")
 ```

 假设下文中的函数，uiNode为获取到的ScreenNode继承类，调用的UI界面是按下面的节点树组织结构的
--- a/mcguide/18-界面与交互/61-原生界面修改文档.md
+++ b/mcguide/18-界面与交互/61-原生界面修改文档.md
@@ -116,8 +116,10 @@ CustomUIScreenProxy是原生界面的代理类，可通过extraClientApi.GetUISc
 - 示例

 ```python
+# coding=utf-8
 import client.extraClientApi as clientApi
 CustomUIScreenProxy = clientApi.GetUIScreenProxyCls()
+ViewBinder = clientApi.GetViewBinderCls()


 class PauseScreenProxy(CustomUIScreenProxy):
@@ -135,10 +137,10 @@ class PauseScreenProxy(CustomUIScreenProxy):

 	@ViewBinder.binding(ViewBinder.BF_ToggleChanged, "#myMod.myToggle")
 	def onToggleChanged(self, args):
-		"""
-		proxy也支持binding，这里展示的是绑定一类toggle（这类toggle甚至可以不存在），这类toggle满足"toggle_name"属性是"#myMod.myToggle"这一要求，当他们发生状态改变的时候就会调用该函数。
-		"""
-		print("myToggle onToggleChanged: {}".format(args))        
+        """
+        proxy也支持binding，这里展示的是绑定一类toggle（这类toggle甚至可以不存在），这类toggle满足"toggle_name"属性是"#myMod.myToggle"这一要求，当他们发生状态改变的时候就会调用该函数。
+        """
+        print("myToggle onToggleChanged: {}".format(args))        
 ```


--- a/mcguide/18-界面与交互/70-UI数据绑定.md
+++ b/mcguide/18-界面与交互/70-UI数据绑定.md
@@ -387,9 +387,9 @@ def OnItemToggleChecked(self, args):
    	toggleIndex = 0
    self.mCurItemIndex = toggleIndex
    itemDict = self.mItemData[self.mCurItemTab][toggleIndex]
-    self.SetSprite(self.mItemIcon, itemDict["icon"])
-    self.SetText(self.mItemName, itemDict["name"])
-    self.SetText(self.mItemDesc, itemDict["desc"])
+    self.GetBaseUIControl(self.mItemIcon).asImage().SetSprite(itemDict["icon"])
+    self.GetBaseUIControl(self.mItemName).asLabel().SetText(itemDict["name"])
+    self.GetBaseUIControl(self.mItemDesc).asLabel().SetText(itemDict["desc"])
    self.set_control_visible(self.mItemInfoWrap, True)
 ```