2.6

docs/mconline/90-知识库获奖教程/2-界面与交互/0-自定义一个UI控件（调色盘）.md

@@ -0,0 +1,172 @@
+# 自定义一个UI控件（调色盘）
+
+> 本篇教程获得第一期知识库必看教程奖。
+>
+> 获奖作者：红石公司。
+
+先来看看代码部分和具体效果：
+
+![img](./images/0_1.png)
+
+![img](./images/0_2.png)
+
+
+
+上图展示了简单的一行json配置，即可实现一个自由调节的调色板控件，其中包含滑动条、输入框、颜色选择器（按钮）等组合控件。
+
+这是笔者做过最复杂的一个自定义控件，其他的还有： 数字输入框、虚拟摇杆、可拖动面板等。
+
+任何你觉得以后可以用到的组合控件，都可以打包为自定义控件。
+
+![img](./images/0_3.png)
+
+![img](./images/0_4.png)
+
+
+
+下面简单讲解一下实现方法。
+
+
+
+## json部分
+
+先建立一个控件库json文件，方便以后直从库中继承。
+
+1. 调色板左侧色盘部分采用了三张图片叠加，第一层纯白、第二层是一个从左到右从透明到纯白的渐变图片，第三层是一个从上到下从透明到纯黑的渐变图片。这里第三层的渐变使用gradient_renderer渲染器实现。我们调整第二层的颜色，整个色盘就会按预想的变色。
+
+   ![img](./images/0_5.png)
+
+   ![img](./images/0_6.png)
+
+   ![img](./images/0_7.png)
+
+2. 颜色选择器，就是图中色盘上的圆圈。这里整个色盘的父控件是一个input_button，和button一样但是没有“default”、"pressed"等状态，是一个空白的按钮。
+
+   ![img](./images/0_8.png)
+
+   选用按钮控件的目的是在脚本中监听move事件，然后通过事件中的坐标，改变选择器圆圈的位置，调整颜色等。
+
+3. 色相滑动条。
+
+   ![img](./images/0_9.png)
+
+   就是这个东西，简单继承了一个滑动条控件，将背景和box改变一下样式。背景依旧采用gradient_renderer渲染器，但是是一个stack_panel下排列的6个渐变色。其中最底层选用一个空图片控件，原因是滑动条背景必须是一个图片，否则游戏报错。
+
+   ![img](./images/0_10.png)
+
+4. 颜色数字输入框。
+
+   ![img](./images/0_11.png)
+
+   简单堆叠三个输入框即可。
+
+5. 颜色展示器。
+
+   ![img](./images/0_12.png)
+
+   简单的一个图片控件。以上部分组合起来就是一个完整的调色板控件了，
+
+   ![img](./images/0_13.png)
+
+
+
+   我们在自己的json文件中继承调色板控件。
+
+   ![img](./images/0_14.png)
+
+
+
+## 脚本部分
+
+1. 即装即用。
+
+   1. json部分：为了实现继承调色板控件后，无需多余配置，无需使用路径注册，我们要实现一个“自动扫描整个界面中的调色板控件”的功能。且需要兼容同时存在多个调色板。 但是我们无法真正的添加一个控件属性。
+
+      我的解决方案是，在调色板控件下增加一个子控件，控件名字是一个标签。我们在脚本中遍历路径，找到标签后往上退一个路径，就是调色板的路径。
+
+      ![img](./images/0_15.png)
+
+
+
+      如图所示，控件名=标签+自定义名，脚本中依靠“标签名“确认是否为调色板控件，使用“自定义名”区分同时存在的多个色板。
+
+      ![img](./images/0_16.png)
+
+
+
+      如图所示，在实际使用过程中，配置custom_ui_name变量即可。
+
+   2. 脚本部分：使用GetChildrenName获取子控件名字，并一层层递归下去，知道找到标签为止。这部分不过多赘述，各位多多实践，自己做出来才是最好的。不是特别大规模的UI界面，整个扫描过程不会超过20ms，基本无法察觉。但是界面中如果存在grid，最好需要过滤下。当然，标签的使用可以做到即装即用，但是也会造成额外的性能消耗，如果可以接受手动输入路径注册，那么就不需要使用标签来获取路径了。
+
+2. 前置。
+   我们要将逻辑代码封装在前置中，我们的UI类需要继承这个前置。如果你已经有其他的前置，多继承可能造成冲突，可以再加一层继承来写你的逻辑代码。如果追求代码纯净，不想用前置（像我一样），可以使用如下方式
+
+   ![img](./images/0_17.png)
+
+
+   新建一个控件类，传入UI实例，控件路径等。在这个类中编写你的逻辑代码。
+
+3. 装饰生命周期函数。如果你的控件需要用到生命周期函数，如Create，Update等，你需要在自己的UI类中主动调用。
+
+   即装即用又不想主动调用，那怎么办呢？
+   答案是装饰器，将UI的生命周期函数装饰一下，那么如何在自定义类中装饰UI的函数呢，毕竟我不想动UI的任何代码，也不想写@符号。
+   可以采用如下方式：
+
+   ![img](./images/0_18.png)
+
+
+
+   这样，在调用a_name方法时，就会自动调用下b_name方法。
+
+   在自定义类`__init__`时，使用此方法装饰一下必要的生命周期函数。
+
+4. 动态创建绑定。调色板需要用到 **Slider** 和 **TextEditBox** 控件，这两个控件是需要进行绑定的。当然，可以使用Update来实时检测，但我并不想耗费这个性能。
+
+   动态创建绑定的应用范围非常广，之前没有人公布过方法，在此我公布一下。
+
+   ![img](./images/0_19.png)
+
+
+
+   如图，self.ui是一个UI实例，将两个函数绑定到了实例上。和在UI类中进行绑定效果相同，但是这个代码实际写在自定义类中，在`__init__`时调用。 **#RCM_SDK_PALETTE_EDIT_BOX** 和 **#RCM_SDK_PALETTE_SLIDER** 分别是UI中的文本框和滑动条绑定的变量。如果不懂绑定，可以去观察下官方demo。
+
+5. 现在我们已经集齐所有前置条件，是时候编写逻辑代码了。
+
+   1. 基础知识。整个调色板是HSB结构，如图所示。
+
+      ![img](./images/0_20.png)
+
+
+
+      H代表色相，S代表饱和度，B代表亮度。颜色输出、文本框显示，都是用RGB标准，那就需要堆HSB和RGB进行转换。这个大家可自行百度。
+
+   2. 色相滑动条。当色相滑动条滑动时，滑块位置对应hsb中的H，因此，调整H后，并转换为RGB，更新色盘颜色、展示器颜色、文本框文字即可。
+
+   3. 颜色选择器。即左边的圈圈。由于色盘底是一个按钮，我们注册按钮move事件，在事件中根据手指坐标和相对位置，计算出x轴和y轴的比例，将比例限制在0-1内，再设置圆圈位置，更新展示器颜色和文本框文字。
+
+   4. 文本框调色。文本框输入数字时，将数字限制在0-255内，int格式。然后转为hsb，设置滑动条位置、选择器位置，再更新色盘颜色、展示器颜色即可。
+
+   5. 颜色改变监听。自定义类中加入一个self.back变量，传入你的回调函数。在上述进行任何改变颜色的操作后，将颜色结果通知到回调函数即可。
+
+   6. 接口拓展。GetColor、SetColor、GetVisible、SetVisible等。
+
+
+
+## 示例结果
+
+按I键打开和关闭界面。展示了两个互相独立的调色板，并监听了颜色变化事件。
+
+![img](./images/0_21.png)
+
+
+
+**demo只简单展示了自定义控件的实现思路，仅作为功能预览，不具备实用性。还需要各位开发者根据自己的实际情况，以及编程习惯，开发自己的自定义控件。**
+
+本人是编程新手，也是开发新手，教程如有什么纰漏，表述不当，还请大家指出改进。
+
+若有哪里不明白的地方，可以在评论区提问，我会及时解答的。
+
+
+
+
+

docs/mconline/90-知识库获奖教程/2-界面与交互/1-可拖拽按钮.md

@@ -0,0 +1,48 @@
+# 可拖曳按钮
+
+> 本篇教程获得第一期知识库必看教程奖。
+>
+> 获奖作者：日月潭。
+
+我制作了一个可移动按钮的模块，已经封装好了，开发者们自行继承并调用接口即可。
+
+[下载地址](https://mc.netease.com/thread-911048-1-1.html)
+
+1. 下载附件（解压后得到两个文件）。
+2. 按照readme.html的说明做出可移动按钮。
+
+
+
+**文档截图：**
+
+- 网易同款风格文档，清晰易懂，排版美观流畅。
+
+![img](./images/1_0.png)
+
+
+
+单文件71行代码，去繁从简，保证最佳性能 。
+
+![img](./images/1_1.png)
+
+
+
+**使用本模块的前置要求：**
+
+- 了解json格式。
+- 了解UI的创建方法并创建过UI。
+- 能够制作包含一个功能的小mod。
+
+
+
+**本模块适合以下开发者：**
+
+- 想让技能、菜单等按钮能够被玩家拖动的。
+- 不太清楚按钮拖动如何实现的。
+- 觉得有点麻烦，想直接使用模块的。
+- 想实现更好的拖动效果，研究学习他人代码的。
+
+
+
+无论如何，只要你需要，我的可移动按钮的模块就可以帮到你，喜欢的同学不要忘记点赞和评论哦。
+

docs/mconline/90-知识库获奖教程/2-界面与交互/2-界面按钮注册.md

@@ -0,0 +1,68 @@
+# 界面按钮注册
+
+> 本篇教程获得第一期知识库优秀教程奖。
+>
+> 获奖作者：归零者。
+
+直接看图
+
+![img](./images/2_0.png)
+
+
+
+![img](./images/2_1.png)
+
+
+
+![img](./images/2_2.png)
+
+
+
+![img](./images/2_3.png)
+
+
+
+![img](./images/2_4.png)
+
+
+
+![img](./images/2_5.png)
+
+
+
+![img](./images/2_6.png)
+
+
+
+![img](./images/2_7.png)
+
+
+
+![img](./images/2_8.png)
+
+
+
+![img](./images/2_9.png)
+
+
+
+![img](./images/2_10.png)
+
+
+
+![img](./images/2_11.png)
+
+
+
+![img](./images/2_12.png)
+
+
+
+![img](./images/2_13.png)
+
+
+
+![img](./images/2_14.png)
+
+
+

docs/mconline/90-知识库获奖教程/2-界面与交互/3-定义按钮并执行代码.md

@@ -0,0 +1,128 @@
+# 定义按钮并执行代码
+
+> 本篇教程获得第一期知识库优秀教程奖。
+>
+> 获奖作者：幻尘Team-幻尘。
+
+## 前言
+
+本教程针对懂得客户端服务端事件等的Python脚本开发的萌新，以及本教程内的执行方式可能有些繁琐(大概是，大佬不喜勿喷，谢谢！)。
+
+
+
+**学习前提：**
+
+1. 熟悉基础的`modMain`注册、客户端`ListenForEvent`、`UnListenForEvent`的操作。
+2. 掌握一点点Python语法基础。
+3. 有心学习！！！还要有电脑。
+
+
+
+## 教程开始
+
+### 制作UI
+
+1. 首先我们需要打开 **MCstudio编辑器** ，创建一个附加包，然后点击编辑，进入 **界面编辑器** 。
+
+2. 如下图，我们的包体当中还不具备 **UI文件** ，因此，我们需要点击左边的按钮 **新建一个UI文件** 。
+
+   ![./images/](./images/3_0.png)
+
+   ![./images/](./images/3_1.png)
+
+
+
+3. 接下来输入你要创建的UI文件的名称，点击创建即可。
+
+   ![./images/](./images/3_2.png)
+
+
+
+4. 这时候我们可以看到左边的界面出现了 名称为 **main 的 画布** 。接下来，我们就可以在main画布的中开始创造自己的UI了！**PS：必须先选中这个main画布，在它的目录下开始创建你的UI。**
+
+5. 选中画布之后呢，我们就可以点击顶栏的创建自己的按钮啦。
+
+   ![./images/](./images/3_3.png)
+
+
+
+   之后，我们就可以看见这个令人喜悦的按钮啦。
+
+   ![./images/](./images/3_4.png)
+
+   **PS：如果你需要修改按钮的位置、大小、字体、内容，均可以在右边的面板中设置（这里不过多介绍，可以自行研究）如图↓**
+
+   ![./images/](./images/3_5.png)
+
+
+
+6. 那我们就拥有了一个按钮了好吧，此时我们需要创建出几个 **脚本文件：如图，关于客户端服务端的注册以及配置，我就不过多赘述，大家应该都会** 。
+
+   ![./images/](./images/3_6.png)
+
+
+
+### 注册UI并且为按钮添加回调事件
+
+1. 重点讲讲，如何注册UI。
+
+   首先，我们创造完了UI脚本文件，注册配置好了客户端等。我们选择先打开客户端脚本文件，在`ListenForEvent`以及`UnListenEvent`中分别监听和反监听 **`UnInitFinished` 事件，用于接下来的创建、注册UI**  。
+
+   ![./images/](./images/3_7.png)
+
+
+
+   ![./images/](./images/3_8.png)
+
+
+
+2. 这时候监听完毕之后呢，我们就可以使用这个`UnInitFinished`事件来注创建UI了。
+
+   首先输入如图所示中的第一行代码。
+
+   ```python
+   clientApi.RegisterUI("Script_HuanChen6", "HuanChenUi", "Script_HuanChen6.uiScript.HuanChenScreenNode6.HuanChenScreenNode6",
+   "HuanChenUi.main")
+   ```
+
+   我们来解释一下，第一个参数指的是，你的MOD的名称。第二个参数呢是UI的名称，第三个参数呢是UI文件的路径。第四个参数呢是ui名.画布。
+
+   ![./images/](./images/3_9.png)
+
+
+   注册完毕之后呢，我们可以开始 注册按钮并且为按钮添加回调了。
+
+3. 打开ui文件，进入之后，我们在Init中声明两个变量，一个是用来代表按钮的变量，一个是表示按钮路径位置的变量。PS：按钮的路径只需要在界面编辑器中选中按钮，然后右键，你就会看见一个复制路径的选项，点击即可复制路径。
+
+   ![./images/](./images/3_10.png)
+
+
+
+   ![./images/](./images/3_11.png)
+
+
+
+4. 接下来，我们在UI文件中的`Create`中。输入这些代码：
+
+   ```python
+   self.button = self.GetBaseUIControl(self.where_button).asButton()
+   self.button.AddTouchEventParams({'isSwallow': True})
+   self.button.SetButtonTouchDownCallback(self.button)
+   ```
+
+   也是无脑照抄就行趴，`self.button`就是我们之前声明的一个用来表示按钮的变量。
+
+   ![./images/](./images/3_12.png)
+
+
+
+5. 输入好之后，我们在下面直接def一个函数。为按钮的回调事件添加逻辑代码吧！
+
+   ![./images/](./images/3_13.png)
+
+
+
+PS：可能讲的有些急促，有些许纰漏，大佬们不喜勿喷吧嘤嘤嘤。
+
+大功告成啦！！！
+

docs/mconline/90-知识库获奖教程/2-界面与交互/4-UI按钮的注册与创建.md

@@ -0,0 +1,118 @@
+# UI按钮的注册与创建
+
+> 本篇教程获得第二期知识库必看教程奖。
+>
+> 获奖作者：大肥免。
+
+本教程将默认您已经学会了python的基础语法和ModAPI接口的使用，教程实现的功能为点击按钮实现更换昼夜。
+
+
+
+1. 我们首先在界面编辑器中创建一个ui文件，取名由你们自己命名，我这里就叫`uiCourse`了。此时，UI的命名空间就为你所输入的文件名称了，我的就是`uiCourse`，一定要记住，下面会用到。
+
+   ![img](./images/4_0.png)
+
+
+
+2. 再创建一个如图所示的控件结构，按钮控件的文本内容为 **切换昼夜** ，此时，我们的界面布局也就好了，这时你打开游戏测试会发现，我们创建的按钮不会显示？这是因为你的UI还没有注册和创建。
+
+   ![img](./images/4_1.png)
+
+
+
+3. 在行为包(behavior_pack)中创建一个名为"uiCourseScripts"的文件夹，命名可以随便修改，但是文件末尾的Scripts必须有。
+
+   ![img](./images/4_2.png)
+
+
+
+4. 然后，我们再创建一个名为 **uiScript** 的文件夹，用来存放我们的ui脚本，ui脚本里的py文件可随便命名，但必须有一个`__init__`文件，它用于标识当前文件夹是一个包。
+
+   ![img](./images/4_3.png)
+
+
+
+   打开我们创建的ui脚本文件，新定义一个uiCourse类，并继承ScreenNode后留在这备用。
+
+   ![img](./images/4_4.png)
+
+
+
+5. 打开我们的客户端py文件，监听"UiInitFinished"事件，它会在UI初始化框架完成时调用，这时我们就可以注册和创建UI了。
+
+   ![img](./images/4_5.png)
+
+
+
+6. 使用我们的"RegisterUI"接口，来注册我们的UI。
+
+   ![img](./images/4_6.png)
+
+   其中，这四个参数分别对应的是：
+
+   1. py脚本的命名空间。
+   2. UI的唯一标识符，也就是UI的命名空间。
+   3. UI脚本中类的路径。
+   4. UI中画布的路径。
+
+   首先，py脚本的命名空间在`modMain`文件里写了，如图所示：
+
+   ![img](./images/4_7.png)
+
+
+
+   UI的唯一标识符就是我们上面设置的ui文件名，填在这里就可以了，UI脚本中类的路径也就是 py脚本文件夹-ui脚本文件夹-ui文件-ui类 最终指向它的。
+
+   ![img](./images/4_8.png)
+
+   UI中画布的路径为UI唯一标识符.想打开的画布名称，即为这两个值。
+
+![img](./images/4_9.png)
+
+
+
+
+   此时我们的UI注册接口就写好了。
+
+7. 接下来写UI创建接口，我们使用`CreateUI`接口来创建。
+
+   ![img](./images/4_10.png)
+
+
+
+   其中，这四个参数分别对应的是：
+
+   1. py脚本的命名空间。
+   2. UI的唯一标识符，也就是UI的命名空间。
+   3. 创建UI的参数，isHud即为是否为HUD界面的UI，设置为1时，不会屏蔽原生的操作界面，设置为0时，将会屏蔽除了本UI外的所有操作界面 。
+
+   设置完成后，我们的创建UI接口也就编写完成了，打开游戏看看吧。这时你就会发现按钮显示出来了。
+
+   ![img](./images/4_11.png)
+
+
+
+
+   但是为什么点击没有反应？这是因为你还没有写按钮的回调。在我们之前创建的UI脚本文件里，创建`Create`函数，它会在UI创建成功时调用，使用`GetBaseUIControl`接口根据路径获取UI实例，再使用`AddTouchEventParams`控件开启按钮回调功能来添加按钮的回调。再使用`SetButtonTouchDownCallback`控件设置按钮按下时触发的回调函数。
+
+   ![img](./images/4_12.png)
+
+
+
+8. 使用按钮按下时触发的回调函数，来通信服务端，修改昼夜时间NotifyToServer接口的用法具体见官方文档。
+
+   ![img](./images/4_13.png)
+
+   服务端再监听UI脚本的回调即可，再使用更改当前世界时间的接口来实现昼夜更替。
+
+   ![img](./images/4_14.png)
+
+
+
+此时，我们的点击按钮实现更换昼夜的功能就实现了。
+
+<iframe frameborder="0" height="600" width="800" allowfullscreen="allowfullscreen" src="http://cc.163.com/v/core/externplayer/63e373b4308c57165bcfd298"/>
+
+
+
+如果觉得本教程对你有用的话，可以帮忙点个赞吗？谢谢。