给文字添加背景
先登记三段背景图片,再创建模板和文字 Layout
本页使用字体教程中的 tutorial_font;也可换成自己已登记的字体 ID。背景需要左端、中段和右端 PNG,下面提供下载与登记方法。
文件结构
background_left.png
background_center.png
background_right.png
config.yml
tutorial.yml
tutorial_background.yml
tutorial_background.yml
准备并登记背景图片
下载左端、中段、右端,放入上面 textures 目录。示例图片高度都是 14px,中段宽 1px。
img:
left:
path: background_left
height: 14
center:
path: background_center
height: 14
right:
path: background_right
height: 14创建背景模板
tutorial_background:
namespace: tutorial
basename: background
left: left
center: center
right: right
padding:
left: 6
right: 6模板引用的是图片 ID,不是 PNG 文件名。中段按文字宽度重复,左右端只绘制一次。
在 Layout 的文字上使用
defaults:
font: tutorial_font
tutorial_background_text:
text:
anchor:
x: 50
y: 30
align: center
y: 0
value: "&f文字左右都有留白"
background:
id: tutorial_background
y: 2文字顶部是 y: 0,背景顶部是 background.y: 2,它比文字向上 2px。背景 y 是独立坐标,不是在文字 y 上再加 2。
绑定并打包
tutorial_background_hud:
refresh: 20
layouts:
tutorial_background_text: {}执行 /xerr pack 并加载新包。
单独增加左右留白
替换这个文字的背景节点:
background:
id: tutorial_background
y: 2
padding:
left: 10
right: 14Padding 扩大背景,不移动文字。修改后按当前打包规则重新 /xerr pack。
字段和多行行为见文字背景参考。