@@ -12,13 +12,12 @@ time: 分钟
* 示例中为"myUIName"
```json
myUIName.json
```html
myUIName.json
"namespace" : "myUIName"
myUIName.py
"namespace": "myUIName"
myUIName.py
```
## JSON编写说明
@@ -32,7 +31,9 @@ Json是UI界面的显示内容和绑定的集合, UI是一种树状的组织结
命名空间是这个界面的名称, 我们规定json文件名和namespace一致。
```json
{
"namespace" : "myUIName"
}
```
### Main Screen
@@ -42,10 +43,12 @@ main是这个界面名称, 我们规定使用main, 即一个json文件是一
controls中的内容是该界面下的树状节点, 即子节点。
```json
{
"main@common.base_screen" : {
"controls" : [
]
}
}
```
| 变量 | 解释 |
@@ -87,6 +90,7 @@ path = "/panel0/text0"
为了适配异形屏, 我们可以展示screen中的内容通过引用的形式写在screen的$screen_content属性中。
```json
{
"main@common.base_screen" : {
"$screen_content" : "myUIName.panel0"
},
@@ -103,6 +107,7 @@ path = "/panel0/text0"
"type" : "label" ,
"visible" : true
}
}
```
被$screen_content引用的内容, 其显示内容的范围不会被异形屏遮挡。此时text0的路径为
@@ -121,7 +126,8 @@ path = base_path + "/text0"
screen, 即画布控件, 是游戏中一个UI界面的根节点, 所有其他控件只有挂在画布下才能被正确显示出来。
```json
"main1" : {
{
"main1" : {
"absorbs_input" : true ,
"always_accepts_input" : false ,
"controls" : [
@@ -160,6 +166,7 @@ screen, 即画布控件, 是游戏中一个UI界面的根节点, 所有其他
"type" : "panel" ,
"visible" : true
}
}
```
| < div style = "width:100px" > 变量</ div > | 解释 |
@@ -251,6 +258,7 @@ absorbs_input暂时无法生效, 等待后续修复。
Label 是文本框控件, 用来显示文本信息, 默认的字体是MC字体, 如果有中文会变成中文字体格式, 暂时不支持换字体, 可以通过接口统一设置字体, 如果需要设置后续有介绍。
```json
{
"label0" : {
"anchor_from" : "center" ,
"anchor_to" : "center" ,
@@ -267,7 +275,8 @@ Label 是文本框控件, 用来显示文本信息, 默认的字体是MC字体
"line_padding" : 0.0 ,
"type" : "label" ,
"visible" : true
},
}
}
```
| < div style = "width:150px" > 变量</ div > | 解释 |
| :------------: | ----------------------------------------------------------- |
@@ -315,6 +324,7 @@ Label 是文本框控件, 用来显示文本信息, 默认的字体是MC字体
Image是指图片控件, 具有图片裁剪, 图片九宫格, 颜色叠加, uv偏移, 旋转显示的额外属性。
```json
{
"image0" : {
"anchor_from" : "center" ,
"anchor_to" : "center" ,
@@ -338,7 +348,8 @@ Image是指图片控件, 具有图片裁剪, 图片九宫格, 颜色叠加,
"rotate_pivot" : [ 0.5 , 0.5 ],
"rotate_angle" : 0 ,
"visible" : true
},
}
}
```
| < div style = "width:150px" > 变量</ div > | 解释 |
@@ -456,6 +467,7 @@ Button 是按钮控件, 同时含有Image和Label。按钮有三种状态, 分
* controls表示控制的子节点,
```json
{
"button0@common.button" : {
"$default_texture" : "textures/netease/common/button/default" ,
"$hover_texture" : "textures/netease/common/button/hover" ,
@@ -550,7 +562,8 @@ Button 是按钮控件, 同时含有Image和Label。按钮有三种状态, 分
"nine_slice_top" : "$nine_slice_top" ,
"texture" : "$pressed_texture" ,
"type" : "image"
},
}
}
```
| < div style = "width:200px" > 变量</ div > | 解释 |
@@ -587,6 +600,7 @@ Button 是按钮控件, 同时含有Image和Label。按钮有三种状态, 分
panel为面板控件, 主要是用来将控件进行分类和管理, 类似文件夹。
```json
{
"panel" : {
"anchor_from" : "center" ,
"anchor_to" : "center" ,
@@ -596,6 +610,7 @@ panel为面板控件, 主要是用来将控件进行分类和管理, 类似文
"type" : "panel" ,
"visible" : true
}
}
```
| 变量 | 解释 |
@@ -609,7 +624,8 @@ panel为面板控件, 主要是用来将控件进行分类和管理, 类似文
input_panel与panel类似, 可以用来放置其他控件, 但除此之外还可以用来拖动, 或实现“模态框”功能。
```json
"InputPanel" : {
{
"InputPanel" : {
"anchor_from" : "top_left" ,
"anchor_to" : "top_left" ,
"button_mappings" : [
@@ -628,6 +644,7 @@ input_panel与panel类似, 可以用来放置其他控件, 但除此之外还
"size" : [ 198.0 , 137.0 ],
"type" : "input_panel" ,
"visible" : true
}
}
```
@@ -681,23 +698,28 @@ InputPanel维护着一个拖拽偏移量, 它代表着在整个拖拽过程中
布局面板,用于自动布局该控件的子控件
```json
"stack_panel0": {
{
"stack_panel0" : {
"layer" : 1 ,
"orientation" : "horizontal" ,
"size" : [ 100 , 100 ],
"type" : "stack_panel" ,
"controls": [{
"controls": [
{
"panel_0" : {
"type" : "panel" ,
"size" : [ 2 , 2 ]
}
}, {
},
{
"fill_0" : {
"type" : "panel" ,
"size" : [ "fill" , 1 ]
}
}]
},
}
]
}
}
```
| 变量 | 解释 |
@@ -725,6 +747,7 @@ InputPanel维护着一个拖拽偏移量, 它代表着在整个拖拽过程中
TextEditBox是输入框控件, 用来输入文字信息, 可以获取输入内容, 设置输入框内容, 触发输入中和输入完成事件, 设置最大输入值等。下面的示例展示了一个搜索框的信息。
```json
{
"text_edit_box0@common.text_edit_box" : {
"$edit_box_default_texture" : "textures/ui/edit_box_indent" ,
"$edit_box_hover_texture" : "textures/ui/edit_box_indent_hover" ,
@@ -769,7 +792,8 @@ TextEditBox是输入框控件, 用来输入文字信息, 可以获取输入内
"nine_slice_top" : "$nine_slice_top" ,
"texture" : "$edit_box_hover_texture" ,
"type" : "image"
},
}
}
```
| < div style = "width:150px" > 变量</ div > | 解释 |
@@ -788,6 +812,11 @@ TextEditBox是输入框控件, 用来输入文字信息, 可以获取输入内
* 注1
```python
import mod.client.extraClientApi as clientApi
ViewBinder = clientApi . GetViewBinderCls ()
ViewRequest = clientApi . GetViewViewRequestCls ()
ScreenNode = clientApi . GetScreenNodeCls ()
class TestScreen ( ScreenNode ):
def __init__ ( self , namespace , name , param ):
ScreenNode . __init__ ( self , namespace , name , param )
@@ -803,7 +832,6 @@ class TestScreen(ScreenNode):
@ViewBinder.binding ( ViewBinder . BF_BindString )
def ReturnTextString ( self ):
return self . text
```
* 注2
@@ -843,7 +871,8 @@ PC和IOS平台没有这个问题
该控件可以用于在ui上显示骨骼模型
```json
"paper_doll0" : {
{
"paper_doll0" : {
"anchor_from" : "center" ,
"anchor_to" : "center" ,
"animation" : "" ,
@@ -857,7 +886,8 @@ PC和IOS平台没有这个问题
"type" : "custom" ,
"visible" : true ,
"enable_scissor_test" : false ,
},
}
}
```
| < div style = "width:100px" > 变量</ div > | 解释 |
| :----------: | ----------------------------------------------------------- |
@@ -891,7 +921,8 @@ PC和IOS平台没有这个问题
3) 生物类型原版模型展示。
```json
"paper_doll0" : {
{
"paper_doll0" : {
"anchor_from" : "center" ,
"anchor_to" : "center" ,
"layer" : 22 ,
@@ -903,7 +934,8 @@ PC和IOS平台没有这个问题
"size" : [ 100 , 100 ],
"type" : "custom" ,
"visible" : true ,
"enable_scissor_test" : false,
"enable_scissor_test" : false
}
}
```
@@ -934,7 +966,7 @@ param = {
"init_rot_y" : 60 , # 初始朝向
"molang_dict" : { "variable.liedownamount" : 1 } # molang变量dict, 其中key为字符串, value为float类型
}
uiNode.RenderPaperDoll(path, param)
self . GetBaseUIControl ( path ) . asNeteasePaperDoll () . RenderEntity ( param)
```
2) 渲染骨骼模型
@@ -947,7 +979,7 @@ param = {
"animation" : "fengxi" , # 动画名称
"animation_looped" : False , # 是否循环播放
}
uiNode.RenderPaperDoll(path, param)
self . GetBaseUIControl ( path ) . asNeteasePaperDoll () . RenderSkeletonModel ( param)
```
3) 渲染原版生物模型( 不需要生物实例)
@@ -960,7 +992,7 @@ param = {
"init_rot_y" : 60 ,
"molang_dict" : { "variable.state" : 2 , "variable.liedownamount" : 1 } # 通过molang变量来调整渲染效果( 坐下的猫)
}
uiNode.RenderPaperDoll(path, param)
self . GetBaseUIControl ( path ) . asNeteasePaperDoll () . RenderEntity ( param)
```
使用注意事项:
@@ -981,7 +1013,8 @@ uiNode.RenderPaperDoll(path, param)
该控件可以用于在ui上显示物品
```json
"item_renderer0" : {
{
"item_renderer0" : {
"anchor_from" : "center" ,
"anchor_to" : "center" ,
"layer" : 1 ,
@@ -993,7 +1026,8 @@ uiNode.RenderPaperDoll(path, param)
"size" : [ 100 , 100 ],
"type" : "custom" ,
"visible" : true
},
}
}
```
| < div style = "width:100px" > 变量</ div > | 解释 |
| :----------: | ----------------------------------------------------------- |
@@ -1026,6 +1060,7 @@ uiNode.RenderPaperDoll(path, param)
该控件是可以滑动的窗口,需要有其他控件附属。
```json
{
"scroll_view0@common.scrolling_panel" : {
"$background_nine_slice_buttom" : 0 ,
"$background_nine_slice_left" : 0 ,
@@ -1061,7 +1096,8 @@ uiNode.RenderPaperDoll(path, param)
"size" : [ 100 , 80 ],
"type" : "scroll_view" ,
"visible" : true
},
}
}
```
|< div style = "width:100px" > 变量</ div > | 解释 |
@@ -1126,6 +1162,7 @@ mouse_path = scroll_view_path + "/scroll_mouse/scroll_view/stack_panel/backgroun
Grid组件属于网格型的排列, 可以依附在滚动条中, 用来实现背包等功能。
```json
{
"grid0" : {
"anchor_from" : "center" ,
"anchor_to" : "center" ,
@@ -1151,7 +1188,8 @@ Grid组件属于网格型的排列, 可以依附在滚动条中, 用来实现
"uv" : [ 0 , 0 ],
"uv_size" : [ 107 , 107 ],
"visible" : true
},
}
}
```
| < div style = "width:100px" > 变量</ div > | 解释 |
@@ -1186,6 +1224,7 @@ Grid组件属于网格型的排列, 可以依附在滚动条中, 用来实现
3. grid控件不建议使用其子控件路径对其动态生成的格子控件直接进行SetVisible等操作, 因为在每次界面刷新时grid控件会对所有的格子做一次数据更新, 更新的过程中会强制将格子可见性置True。如果有需要对格子进行操作, 可以使用数据绑定的方式, 如下代码和json。需要注意的是在数据绑定的回调函数中需要明确grid本身是否可见, 否则会造成grid子节点控件的可见性数据异常, 从而影响界面操作逻辑。
```json
{
"grid1" : {
"anchor_from" : "center" ,
"anchor_to" : "center" ,
@@ -1209,18 +1248,23 @@ Grid组件属于网格型的排列, 可以依附在滚动条中, 用来实现
}
],
"visible" : "#UIDemo.visible"
},
}
}
```
```python
import mod.client.extraClientApi as clientApi
ViewBinder = clientApi . GetViewBinderCls ()
ViewRequest = clientApi . GetViewViewRequestCls ()
ScreenNode = clientApi . GetScreenNodeCls ()
class UIDemoScreen ( ScreenNode ):
def __init__ ( self , namespace , name , param ):
ScreenNode . __init__ ( self , namespace , name , param )
self . demoGridControl = None
......
def Create ( self ):
self . demoGridControl = self . GetBaseUIControl ( "/grid1" )
......
@ViewBinder.binding_collection ( ViewBinder . BF_BindBool , "gridDemo" , "#UIDemo.visible" )
def GridItemVisible ( self , index ):
@@ -1233,6 +1277,7 @@ class UIDemoScreen(ScreenNode):
ProgressBar进度条控件, 用于百分比显示进度
```json
{
"progress_bar0" : {
"$clip_direction" : "left" ,
"$clip_ratio" : 0.0 ,
@@ -1281,7 +1326,8 @@ ProgressBar进度条控件, 用于百分比显示进度
"nine_slice_top" : "$nine_slice_top" ,
"texture" : "$progress_bar_filled_texture" ,
"type" : "image"
},
}
}
```
| < div style = "width:200px" > 变量</ div > | 解释 |
@@ -1312,7 +1358,8 @@ ProgressBar进度条控件, 用于百分比显示进度
开关控件,用于两个状态之间的切换
```json
"switch_toggle0@common_toggles.switch_toggle_collection" : {
{
"switch_toggle0@common_toggles.switch_toggle_collection" : {
"$default_texture" : "textures/ui/toggle_off" ,
"$hover_texture" : "textures/ui/toggle_on" ,
"$pressed_no_hover_texture" : "textures/ui/toggle_on_hover" ,
@@ -1333,7 +1380,8 @@ ProgressBar进度条控件, 用于百分比显示进度
"size" : [ 100 , 100 ],
"type" : "panel" ,
"visible" : true
},
}
}
```
| < div style = "width:200px" > 变量</ div > | 解释 |
@@ -1348,6 +1396,11 @@ ProgressBar进度条控件, 用于百分比显示进度
* 注1
```python
import mod.client.extraClientApi as clientApi
ViewBinder = clientApi . GetViewBinderCls ()
ViewRequest = clientApi . GetViewViewRequestCls ()
ScreenNode = clientApi . GetScreenNodeCls ()
class TestScreen ( ScreenNode ):
def __init__ ( self , namespace , name , param ):
ScreenNode . __init__ ( self , namespace , name , param )
@@ -1381,10 +1434,11 @@ class TestScreen(ScreenNode):
滑动条控件,用于拖动设置进度或百分比。
```json
"slider0@common.slider": {
{
"slider0@common.slider" : {
"$slider_tts_text_value" : "#netease_tts_text_value" ,
"$slider_name" : "#UIDemoScreen.OnDemoSliderChange" ,
"$slider_value_binding_name": "#UIDemoScreen.ReturnSliderValue",
"$slider_value_binding_name": "#UIDemoScreen.ReturnSliderValue",
"$slider_steps_binding_name" : "#UIDemoScreen.ReturnSliderStep" ,
"$background_default_control" : "common.slider_background" ,
"$progress_default_control" : "common.slider_progress" ,
@@ -1397,16 +1451,17 @@ class TestScreen(ScreenNode):
"$slider_box_hover_layout" : "common.slider_button_hover_layout" ,
"$slider_box_locked_layout" : "common.slider_button_locked_layout" ,
"$slider_box_indent_layout" : "common.slider_button_indent_layout" ,
"$slider_box_size": [ 10, 16 ],
"size": [ 100, 10 ],
"offset": [ 0, 0 ],
"$slider_box_size": [ 10 , 16 ],
"size": [ 100 , 10 ],
"offset": [ 0 , 0 ],
"$slider_step_factory_control_ids" : {
"slider_step" : "@common.slider_step" ,
"slider_step_hover" : "@common.slider_step_hover" ,
"slider_step_progress" : "@common.slider_step_progress" ,
"slider_step_progress_hover" : "@common.slider_step_progress_hover"
},
}
}
}
```
| < div style = "width:200px" > 变量</ div > | 解释 |
@@ -1436,6 +1491,11 @@ class TestScreen(ScreenNode):
* 注1
```python
import mod.client.extraClientApi as clientApi
ViewBinder = clientApi . GetViewBinderCls ()
ViewRequest = clientApi . GetViewViewRequestCls ()
ScreenNode = clientApi . GetScreenNodeCls ()
class UIDemoScreen ( ScreenNode ):
def __init__ ( self , namespace , name , param ):
ScreenNode . __init__ ( self , namespace , name , param )
@@ -1630,11 +1690,13 @@ hover事件的触发本质上是与鼠标悬浮相关, 在PC模式中, 当鼠
```json
{
"main" : {
"controls" : [],
"type" : "screen" ,
"gamepad_cursor_deflection_mode" : true
},
}
}
```
@@ -1644,7 +1706,8 @@ hover事件的触发本质上是与鼠标悬浮相关, 在PC模式中, 当鼠
网易版单选下拉框,可以在给定的选项中进行选择。
```json
"comboBoxPanel@combo_box.comboBoxPanel" : {
{
"comboBoxPanel@combo_box.comboBoxPanel" : {
"$content_size" :[ "100.0%+0.0px" , 100 ],
"$item_size" :[ "100.0%+0.0px" , "10.0%x+0.0px" ],
"$title_label" : "combo_box.titleLabel" ,
@@ -1676,6 +1739,7 @@ hover事件的触发本质上是与鼠标悬浮相关, 在PC模式中, 当鼠
"type" : "panel" ,
"visible" : true
}
}
```
@@ -1712,7 +1776,8 @@ UI编辑器暂时不支持编辑
其中官方封装了地图界面基类< a href = "../../mcdocs/1-ModAPI/接口/自定义UI/UI界面.html #minimapbasescreen " rel = "noopenner" > MiniMapBaseScreen </ a > 供开发者扩展。
```json
"mainPanel@mini_map.mini_map_wrapper" : {
{
"mainPanel@mini_map.mini_map_wrapper" : {
"anchor_from" : "top_right" ,
"anchor_to" : "top_right" ,
"layer" : 1 ,
@@ -1722,7 +1787,7 @@ UI编辑器暂时不支持编辑
"$use_default_face_icon" : true ,
"$face_icon_size" : [ 4 , 4 ],
"$face_icon_bg_color" : "white" ,
"$highest_y": 0
"$highest_y": 0 ,
// 如果希望小地图能够被裁剪, 请继承后修改controls如下:
"controls" :[
{
@@ -1744,6 +1809,7 @@ UI编辑器暂时不支持编辑
"text_lbl@mini_map.text_label" : {}
}
]
}
}
```
@@ -1764,12 +1830,14 @@ UI编辑器暂时不支持编辑
该控件可以用于在ui上绘制渐变颜色
```json
"gradient": {
{
"gradient" : {
"color1" : [ 1 , 0 , 1 , 1 ],
"color2" : [ 0 , 0 , 1 , 1 ],
"gradient_direction" : "vertical" ,
"renderer" : "gradient_renderer" ,
"type" : "custom"
}
}
```
@@ -1874,6 +1942,10 @@ ScreenNode = clientApi.GetScreenNodeCls()
### UI界面初始化
```python
import mod.client.extraClientApi as clientApi
ScreenNode = clientApi . GetScreenNodeCls ()
class TestScreen ( ScreenNode ):
def __init__ ( self , namespace , name , param ):
ScreenNode . __init__ ( self , namespace , name , param )
@@ -1888,7 +1960,7 @@ class ViewBinder(object):
BF_ButtonClickUp = 0 | ButtonFilter
BF_ButtonClickDown = 1 | ButtonFilter
BF_ButtonClick = 2 | ButtonFilter
BF_ButtonClickCancel= 3
BF_ButtonClickCancel = 3
BF_InteractButtonClick = 4
BindFilter = 0x01000000
BF_BindBool = 5 | BindFilter
@@ -1902,6 +1974,7 @@ class ViewBinder(object):
BF_EditFinished = 12 | EditFilter
ToggleFilter = 0x00010000
BF_ToggleChanged = 13 | ToggleFilter
# Return Type
class ViewRequest ( object ):
Nothing = 0
@@ -1909,7 +1982,6 @@ class ViewRequest(object):
PointerHeldEventsRequest = 1 << 1
PointerHeldEventsCancel = 1 << 2
Exit = 1 << 3
```
### UI绑定和返回
@@ -1940,18 +2012,24 @@ bind_flag为上文中绑定类型, binding_name为绑定名称。
binding_name为脚本绑定变量, binding_name_override为引擎变量, json格式如下
```json
"bindings" : [
{
"bindings" : [
{
"binding_condition" : "always" ,
"binding_name" : "#scoreboard_grid.item_count" ,
"binding_name_override" : "#StackGridItemsCount"
}
]
}
```
对应的Python代码如下
```python
@ViewBinder.binding(ViewBinder.BF_BindInt, "#scoreboard_grid.item_count")
def OnStarkGridResize(self):
import mod.client.extraClientApi as clientApi
ViewBinder = clientApi . GetViewBinderCls ()
@ViewBinder.binding ( ViewBinder . BF_BindInt , "#scoreboard_grid.item_count" )
def OnStarkGridResize ( self ):
return len ( self . scoreBoardList )
```
@@ -1962,12 +2040,15 @@ bind_flag为上文中的绑定类型, collection_name为集合名称, binding_
集合的json如下:
```json
"collection_name" : "scoreboard_stackgrid"
{
"collection_name" : "scoreboard_stackgrid"
}
```
在集合的子控件中, binding_collection_name为集合名, binding_condition为绑定条件, binding_name为绑定名称, binding_type为collection绑定, property_bag设置他的初始值, text为它的绑定值。
```json
{
"label_score_board" : {
"bindings" : [
{
@@ -1985,14 +2066,19 @@ bind_flag为上文中的绑定类型, collection_name为集合名称, binding_
"text_alignment" : "left" ,
"type" : "label" ,
"visible" : true
},
}
}
```
对应的Python代码如下, 其中index表示在集合中的哪一元素。
```python
@ViewBinder.binding_collection(ViewBinder.BF_BindString, "scoreboard_stackgrid", "#label_score_board.text")
def OnRefreshScoreBoardLabel(self, index):
import mod.client.extraClientApi as clientApi
ViewBinder = clientApi . GetViewBinderCls ()
@ViewBinder.binding_collection ( ViewBinder . BF_BindString , "scoreboard_stackgrid" , "#label_score_board.text" )
def OnRefreshScoreBoardLabel ( self , index ):
return self . scoreBoardList [ index ] if len ( self . scoreBoardList ) > index else ""
```
@@ -2009,8 +2095,9 @@ bind_flag为上文中的绑定类型, collection_name为集合名称, binding_
假设设置Mod名称为"myModName",示例:
```python
@Mod.Binding(name = "myModName", version = "0.1")
class MyModClass(object):
from mod.common.mod import Mod
@Mod.Binding ( name = "myModName" , version = "0.1" )
class MyModClass ( object ):
def __init__ ( self ):
pass
```
@@ -2089,7 +2176,7 @@ bind_flag为上文中的绑定类型, collection_name为集合名称, binding_
使用方法如下所示
` ``json
```html
// 定制化文本控件
< label >
{"text" : "玩< br > 家一",
@@ -2099,12 +2186,12 @@ bind_flag为上文中的绑定类型, collection_name为集合名称, binding_
</ label >
```
` ``json
```html
// 在非标签的内容
Dear player, < br > welcome to Minecraft, < br > where you can build your own world
```
` ``json
```html
// 按钮控件
// 注意:如果按钮控件空间不足以显示该字符串,多余部分将以"..."显示
< button >
@@ -2117,7 +2204,7 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
例子及效果:
` ``json
```html
< label > {"text" : "玩< br > 家一", "font" : "smooth", "scale": 3, "color": [1,0,0,1]}</ label >< br >< button > {"button_label": "1< br > 2< br > 3", "press_texture" : "textures/ui/btn_pressed","hover_texture" : "textures/ui/btn_hover","default_texture" : "textures/ui/btn_light_default","x":50, "y":100}</ button > :恭喜!< br > 击杀了< link > {"text" : "末影人", "format_code":"§2"}</ link >
```
@@ -2125,35 +2212,40 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
#### 定制化文本控件
在字符串中嵌入` < label> label_data </ label> ` 样式文本会被解析成定制文本, 与常规文本不同的是定制化文本可以独立设置文字的字体、大小、颜色等, 丰富富文本的文本样式。label_data为特殊化数据, 以下所列属性为必须属性, text为文本, font为字体, 默认值为unicode, scale为字体缩放倍率, 默认值为1.0, color为字体颜色, 默认值为[1,1,1,1]。需要注意的是如果文本中存在中文字符则字体会被强制设置为unicode, 此外如果字体缩放倍率过大该段文本将不会被显示。
在字符串中嵌入`< label>" label_data" </label>` 样式文本会被解析成定制文本, 与常规文本不同的是定制化文本可以独立设置文字的字体、大小、颜色等, 丰富富文本的文本样式。label_data为特殊化数据, 以下所列属性为必须属性, text为文本, font为字体, 默认值为unicode, scale为字体缩放倍率, 默认值为1.0, color为字体颜色, 默认值为[1,1,1,1]。需要注意的是如果文本中存在中文字符则字体会被强制设置为unicode, 此外如果字体缩放倍率过大该段文本将不会被显示。
```json
label_data: {
{
"label_data" : {
"text" : "玩家一" ,
"font" : "smooth" ,
"scale" : 3 ,
"color" : [ 1 , 0 , 0 , 1 ]
}
}
```
#### 图片控件
在字符串中嵌入` < image> image_data </ image> ` 样式文本会被解析成图片, image_data为特殊化数据, 以下所列属性为必须属性, texture为资源路径, x为图片宽度, y为图片高度
在字符串中嵌入`< image>" image_data" </image>` 样式文本会被解析成图片, image_data为特殊化数据, 以下所列属性为必须属性, texture为资源路径, x为图片宽度, y为图片高度
```json
image_data: {
{
"image_data" : {
"texture" : "texture/ui/laugh" ,
"x" : 30 ,
"y" : 30
}
}
```
#### 按钮
在字符串中嵌入` < button> button_data </ button> ` 样式会被解析成按钮, button_data为特殊化数据, 开发者可以在其中添加符合json格式的自定义数据, 在点击富文本中对应按钮时会将button_data通过回调函数整个返回, 以下属性为必须属性, press_texture为按钮按下贴图, hover_texture为按钮鼠标悬浮贴图, default_texture为默认状态下按钮贴图, button_label为按钮上的问题, x为按钮宽度, y为按钮高度
在字符串中嵌入`< button>" button_data" </button>` 样式会被解析成按钮, button_data为特殊化数据, 开发者可以在其中添加符合json格式的自定义数据, 在点击富文本中对应按钮时会将button_data通过回调函数整个返回, 以下属性为必须属性, press_texture为按钮按下贴图, hover_texture为按钮鼠标悬浮贴图, default_texture为默认状态下按钮贴图, button_label为按钮上的问题, x为按钮宽度, y为按钮高度
```json
button_data:{
{
"button_data" :{
"press_texture" : "" ,
"hover_texture" : "" ,
"default_texture" : "" ,
@@ -2161,25 +2253,29 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
"x" : 20 ,
"y" : 20
}
}
```
#### 超链接
在字符串中嵌入` < link > link_data </ link> ` 样式会被解析成超链接, 外观和普通文本无异但可以被点击, link_data为特殊化数据, 开发者可以在其中添加符合json格式的自定义数据, 在点击富文本中对应超链接时会将link_data通过回调函数整个返回, 以下属性为必须属性, text表示显示文本, format_code表示该段显示文本的样式代码, 注意, 基岩版的文本控件不支持下划线和删除线。
在字符串中嵌入`<link>" link_data" </link>` 样式会被解析成超链接, 外观和普通文本无异但可以被点击, link_data为特殊化数据, 开发者可以在其中添加符合json格式的自定义数据, 在点击富文本中对应超链接时会将link_data通过回调函数整个返回, 以下属性为必须属性, text表示显示文本, format_code表示该段显示文本的样式代码, 注意, 基岩版的文本控件不支持下划线和删除线。
```json
link_data:{
{
"link_data" :{
"text" : "末影人" ,
"format_code" : "§2"
}
}
```
#### 序列帧动画
在字符串中嵌入` < sfx > sfx_data </ sfx> ` 样式文本会被解析成图片, sfx_data为特殊化数据, 以下所列属性为必须属性, texture为资源路径, x为显示图片宽度, y为显示图片高度, uv_x为截取图片宽度, uv_y为截取图片高度, frame_count表示该序列帧的总帧数, fps为每秒执行帧数。
在字符串中嵌入`<sfx>" sfx_data" </sfx>` 样式文本会被解析成图片, sfx_data为特殊化数据, 以下所列属性为必须属性, texture为资源路径, x为显示图片宽度, y为显示图片高度, uv_x为截取图片宽度, uv_y为截取图片高度, frame_count表示该序列帧的总帧数, fps为每秒执行帧数。
```json
sfx_data:{
{
"sfx_data" :{
"texture" : "textures/ui/eating_apple" ,
"x" : 30 ,
"y" : 30 ,
@@ -2188,6 +2284,7 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
"frame_count" : 36 ,
"fps" : 10
}
}
```
### 富文本成品范例
@@ -2229,6 +2326,7 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
开发者可以设置富文本的文本字体颜色,默认值为[1,1,1],白色
```json
{
"main" : {
"absorbs_input" : true ,
"always_accepts_input" : false ,
@@ -2250,7 +2348,8 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
"$rich_panel_font_size" : "large" ,
"$rich_panel_font_scale_factor" : 2.0 ,
"$rich_panel_color" : [ 1 , 1 , 1 ]
},
}
}
```
#### python脚本编写
@@ -2278,7 +2377,7 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
以下是示例
```python
def CreateRichText( self):
def CreateRichText( self ):
self . richTextPath = "/RichTextPanel"
self . richTextItem = self . GetRichTextItem ( self . richTextPath )
self . richTextItem . registerLinkItemClickCallback ( self . OnLinkItemClickCallback )
@@ -2286,13 +2385,13 @@ Dear player, <br>welcome to Minecraft, <br>where you can build your own world
self . richTextItem . registerRichTextFinishCallback ( self . OnRichTextCreateFinishCallback )
self . richTextItem . readRichText ( '[玩家]<label>{"text" : "玩家一", "font" : "smooth", "scale": 3, "color": [1,0,0,1]}</label><button>{"press_texture" : "textures/ui/btn_pressed","hover_texture" : "textures/ui/btn_hover","default_texture" : "textures/ui/btn_light_default","x":20, "y":20}</button>:恭喜!<image>{"texture":"textures/ui/skin/ty_yuanshenghuli_0_0", "x":30, "y":30}</image>击杀了<link>{"text" : "末影人", "format_code":"§2"}</link><sfx>{"texture": "textures/ui/eating_apple","x":30, "y":30,"uv_x": 64,"uv_y": 64,"frame_count": 36,"fps": 10}</sfx>' )
def OnButtonItemClickCallback(self, data, touchX, touchY):
def OnButtonItemClickCallback( self , data , touchX , touchY ):
print ( "---OnButtonItemClickCallback---" , data , touchX , touchY )
def OnLinkItemClickCallback(self, data, touchX, touchY):
def OnLinkItemClickCallback( self , data , touchX , touchY ):
print ( "---OnLinkItemClickCallback---" , data , touchX , touchY )
def OnRichTextCreateFinishCallback( self):
def OnRichTextCreateFinishCallback( self ):
print ( "---OnRichTextCreateFinishCallback---" )
```