3. 创建 Layout
使用刚才的字体和图片组成一块完整画面
本页需要前两页的字体 tutorial_font 和图片 tutorial / ui / gem。如果尚未登记资产,请先完成添加字体和添加图片。
本页新增文件
tutorial.yml
写入完整 Layout
新建文件:
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,然后统一打包。