跳转到正文
iPlugin

给文字添加背景

先登记三段背景图片,再创建模板和文字 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。

plugins/Xerr/core/assets/image/tutorial/background/config.yml
img:
  left:
    path: background_left
    height: 14
  center:
    path: background_center
    height: 14
  right:
    path: background_right
    height: 14

创建背景模板

plugins/Xerr/core/background/tutorial.yml
tutorial_background:
  namespace: tutorial
  basename: background
  left: left
  center: center
  right: right
  padding:
    left: 6
    right: 6

模板引用的是图片 ID,不是 PNG 文件名。中段按文字宽度重复,左右端只绘制一次。

在 Layout 的文字上使用

plugins/Xerr/core/layout/tutorial_background.yml
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。

绑定并打包

plugins/Xerr/core/display/huds/tutorial_background.yml
tutorial_background_hud:
  refresh: 20
  layouts:
    tutorial_background_text: {}

执行 /xerr pack 并加载新包。

单独增加左右留白

替换这个文字的背景节点:

替换 text.background 片段
background:
  id: tutorial_background
  y: 2
  padding:
    left: 10
    right: 14

Padding 扩大背景,不移动文字。修改后按当前打包规则重新 /xerr pack。

字段和多行行为见文字背景参考。