接下来,让我们更深入一些吧!
什么是按钮?
它能让你打开其他的界面,还会根据四种状态默认,悬停,按下,锁定来改变按钮本身的纹理
建议你在控件引用@common.button定义按钮,因为这样做能更方便一些。
按钮属性
提示
默认、悬停、按下属性可以不用写,因为@commom.button时就已经默认了
按钮映射
直接添加按钮只会改变自身材质,如果需要按钮有实际作用,
需要使用 button_mappings 把键盘/手柄/其他操作方式的输入操作(如button.menu_select、button.menu_cancel)映射转换为游戏内的操作(如button.menu_settings)或用于改变动画状态(详见动画控件)
详见 输入属性 >
如果仅需按下按钮触发映射事件或者不想写按钮映射数组,可以先引用@commom.button并使用$pressed_button_name变量。
提示
$pressed_button_name变量等于按钮映射数组中的to_button_id。
超链接按钮
"feedback_button@common.button": {
"property_bag": {
"#hyperlink": "https://aka.ms/minecraftfb"
}
}
这样就可以按下按钮后打开网站了。
不过,只能打开一些网站(可用的链接在主页 > 统计 > 链接中查找,其他网站会没效果)
更改按钮外观
接下来,我们将外观分成几部分讲解
文字按钮
类似于start界面中间的三个按钮,这种按钮通常叫做文字按钮
首先举个例子:
"play_button@common_button.light_text_button": {
"size": ["100%","100%"],
"$pressed_button_name": "$play_button_target",
"$button_text": "menu.play"
}
提示
@common_button.light_text_button改为@common_button.dark_text_button以黑暗外观呈现(没改$button_image情况下)
图片按钮
类似于start界面左下角的按钮,这种按钮通常叫做图片按钮
首先举个例子:
"icon": {
"type": "image",
"texture": "textures/ui/achievements",
"layer": 3,
"size": [16,16]
},
"button@common_button.light_content_button": {
"size": ["100%","100%"],
"$button_content": "start.icon",
"$pressed_button_name": "button.menu_achievements"
}
提示
1. $button_content的值为命名空间.控件名,用于引用控件在按钮内部显示
2. @common_button.light_content_button改为@common_button.dark_content_button以黑暗外观呈现(没改$button_image情况下)
无背景内容按钮
上方演示的按钮都是有背景的,那么如何仅显示内容呢?
首先举个例子:
"icon": {
"type": "image",
"texture": "textures/ui/achievements",
"layer": 3,
"size": [16,16]
},
"button@common_button.no_background_content_button": {
"size": ["100%","100%"],
"$button_content": "start.icon",
"$pressed_button_name": "button.menu_achievements"
}
自定义外观按钮
这种按钮通常用于定义新的外观
首先举个例子:
"icon": {
"type": "image",
"texture": "textures/ui/achievements",
"layer": 3,
"size": [16,16],
"alpha": "$icon_alpha",
"$icon_alpha|default": 1
},
"test_button@common.button": {
"size": ["100%","100%"],
"$pressed_button_name": "button.menu_achievements",
"controls": [
// 当前显示的内容取决于按钮状态
{
// 默认状态
"default@icon": {}
},
{
// 悬停状态
"hover@icon": {"$icon_alpha": 0.8}// 当按钮为悬停状态时,内容透明度为0.8
},
{
// 按下状态
"pressed@icon": {}
},
{
// 锁定状态
"locked@icon": {}
}
]
}
提示
1. controls的子控件名取决于
default_control,hover_control,pressed_control,
locked_control定义的控件名,locked_control状态需要自行定义为locked。
2. 注意:按钮无锁定状态可以不用locked子控件
关闭按钮
这种按钮通常用于关闭当前屏幕
"close_button@common.close_button": {
"size": ["100%","100%"],
"$close_button_to_button_id": "button.menu_exit"
}
修改外观与个性化按钮类似,这里不多一一介绍
返回按钮
这种按钮通常用于返回上个屏幕
"back_button@common.back_button": {
"size": ["100%","100%"],
"$back_button_pressed_button_name": "button.menu_exit"
}
修改外观与个性化按钮类似,这里不多一一介绍
代码示例
是不是觉得上面的文档太乱?
没事,我来教你写一个简单的按钮
跟着下面的注释改就行了
"content": {
// 这是按钮样式的按钮
"type": "image",
"texture": "$image"
},
"button@common.button": {
//这个就是按钮控件
"size": [100,20],// 这行是按钮的大小
// 下面是按下后的事件
"$pressed_button_name": "button.menu_settings",
// 定义按钮外观
"controls": [
{
// 此处的content_hover请换成你需要引用的控件
// 引用的控件将作为默认状态显示
"default@content": {"$image": "textures/items/apple"}
},
{
// 此处的content_hover请换成你需要引用的控件
// 引用的控件将作为悬停状态显示
"hover@content": {"$image": "textures/items/diamond"}
},
{
// 此处的content_hover请换成你需要引用的控件
// 引用的控件将作为按下状态显示
"pressed@content": {"$image": "textures/items/bamboo"}
}
]
}
好了~以上就是按钮控件的内容了(๑❛ᴗ❛๑)
如果不懂建议反复观看哦!