关于技能窗口块元素
相关插件
插件本体:
◆Drill_WindowSkillElement 控件 - 技能窗口块元素
插件可被扩展:
◆Drill_X_ElementSkillImage 控件 - 技能块元素的背景图片[扩展]
插件可以单独使用,它针对技能窗口 内部元素 进行美化。
(该插件不能控制技能窗口大小、位置,如果需要,去看看 战斗-角色窗口 插件)
块元素
定义
块元素: 即选项窗口中的选项贴图。
块元素能够移动、缩放。选项窗口中 每个选项对应一个块元素。
块元素 与 按钮组的矩阵排列 相似。
但不同的是块元素是嵌套在窗口里,严格排列,与窗口是一体的。
而按钮组为自由排列,可以随时修改排列方式。
块元素内部
结构
块元素由 背景块、图标块、技能名块、消耗值块 四个部分组成。
并且所有贴图都以左上角为锚点。
技能名块 和 消耗值块 需要指定宽度,那个与文本对齐方式相互调节。由于所有块默认左上角控制,如果你要调整块的坐标,一定要把对齐方式设为左对齐。
另外,背景块的资源的高宽最好小于等于元素的高宽,否则会出现被剪去的情况。
背景扩展
你还可以使用扩展插件:
◆Drill_X_ElementSkillImage 控件 - 技能块元素的背景图片[扩展]
通过扩展插件,你可以设置:
1.每一个技能的背景,是一个类型的卡片背景。(背景配置几个类型就可以了)
技能图标仍然是主体显示,卡片只是个统一的背景。
2.每一个技能,就是一张高清卡片。(每个技能都要自己配一个背景)
把技能图标隐藏,关闭严格控制元素块设置。
块元素外部
结构
选项窗口中,选项与块元素是这样分布的:
(白色为窗口的实际矩形范围,而蓝色的为一个个块元素的分布)
白色多出的边部分为 内边距(默认为18像素)。
比如,战斗界面中,下图的紫红色宽度部分。
再比如,插件单独使用时,菜单界面的效果:(默认的技能界面的效果)
![C:\Users\lenovo\AppData\Roaming\Tencent\Users\1355126171\QQ\WinTemp\RichOle\BBF7NO9OZAFP0~%RCLV$3E.png
块元素与选项
1)块元素的高宽
由于排布方式是固定的。
因此 块元素的大小 受 窗口大小 限制。
在 宽度-内边距x2 与 高度-内边距x2 的范围内。
比如,宽高为 816 x 400 的窗口。
则 块元素区域 实际大小为 780 x 364 。
2)块元素的高宽计算
如下图,外层紫红的矩形是窗口,内层的紫红是 块元素区域。
光标白色闪烁的矩形,就是元素的高度宽度的区域。
块元素的高度可以自定义,元素之间不存在高度边距。
假设,块元素设定为高度100。
而块区域高度大于400,小于500,则表示可以放4个100高度的选项块元素。
下面多出的高度部分,不会被利用到,这里需要你根据高度的比例来填满未利用的区域。
块元素的宽度被硬性取决于 窗口宽度与列数 控制,并且受宽度边距影响,如图中的黄色线。
元素宽度完全根据窗口自适应,你无法指定窗口的宽度。
公式: 元素宽度 = (窗口宽度- 边距*(列数-1) ) / 列数
严格控制下,你需要保证窗口大小不会太小使得背景被切割。
你也可以直接关闭严格控制,背景不会被宽度切割,只是太多的列挤在一起,看起来会像一列扑克牌。
块元素与菜单指针
1)菜单指针、选项边框、滚动条
你可以在插件中,自定义指针与边框的配置。需要下列插件的支持:
◆Drill_MenuCursor 主菜单 - 多样式菜单指针
◆Drill_MenuCursorBorder 主菜单 - 多样式菜单选项边框
◆Drill_MenuScrollBar 主菜单 - 多样式菜单滚动条
注意你需要先“统一并覆盖配置”设为true后,才能生效,否则会使用默认的设置。
修改后,菜单界面、战斗界面的技能窗口配置会应用对应的样式。
2)菜单小箭头
注意,你需要留意这个窗口下拉按钮不被遮挡或者隐藏。
对于鼠标或者手机控制的用户,需要此按钮来进行翻页。
从零开始设计(DIY)
示例中的配置表
块元素主要与技能窗口的大小配置相关,你需要对应到面板插件中,设置技能窗口的宽高。
技能界面中,技能窗口的配置如下:
图像效果 | ![]() |
主菜单 - 全自定义技能界面 | 技能窗口:宽420,高400(比默认的加宽了一点)技能窗口布局:置空 |
主菜单 - 技能窗口块元素 | 元素列数-菜单界面:2元素高度:90元素横向间距:12 |
战斗界面中,技能窗口的配置如下:
图像效果 | ![]() |
战斗 - 角色窗口 | 技能选择窗口:X 0 Y 394(比默认的上移了一段距离)技能选择窗口:宽816,高250技能选择窗口布局:X 0 Y -17 |
主菜单 - 技能窗口块元素 | 元素列数-战斗界面:4元素高度:90元素横向间距:12 |