跳转到正文
iPlugin

3. 创建 Layout

使用刚才的字体和图片组成一块完整画面

本页需要前两页的字体 tutorial_font 和图片 tutorial / ui / gem。如果尚未登记资产,请先完成添加字体和添加图片。

本页新增文件

tutorial.yml

写入完整 Layout

新建文件:

plugins/Xerr/core/layout/tutorial.yml
defaults:
  font: tutorial_font
  image:
    namespace: tutorial
    basename: ui

tutorial_welcome:
  icon:
    anchor:
      x: 50
      y: 50
    x: -70
    y: 0
    image:
      id: gem

  text:
    anchor:
      x: 50
      y: 50
    x: -52
    y: 0
    value: "&f欢迎来到服务器"

看懂两条资产引用

defaults.font: tutorial_font 引用第一页登记的字体,不是字体文件名。

defaults.image 选中第二页登记的 tutorial / ui 图片组,因此元素只需填写 image.id: gem。

看懂 Layout 和元素 ID

  • tutorial_welcome 是 Layout ID,下一页 HUD 用这个名字引用整块画面。
  • icon 和 text 是内部元素 ID,用于区分图片和文字。
  • defaults 只设置当前文件中的默认字体与图片组,不是 Layout。

为什么这样定位

anchor: 50,50 表示屏幕中心。x 是向右的像素偏移,负数向左;y 正数向上、负数向下。

图片和文字都写 y: 0,表示同一个顶部基准。Xerr 会自动换算 TTF 基线,不需要给文字固定补偿 6 像素。

详细规则见坐标与锚点。

此时没有常驻显示

Layout 只定义画面内容,还没有决定持续显示。不要为了看不到 HUD 而重复移动坐标;下一页要把它交给 HUD。

下一步: 显示 HUD

绑定 tutorial_welcome,然后统一打包。