第一个场景

本章你将创建一个完整的标题画面场景，包含文字和按钮。只需 5 分钟，你就能看到画面。

理解场景

在灵泛引擎中，**场景（scene）**是画面的基本单位。一个场景包含若干 UI 元素（文字、按钮、图片等），以及可选的入口脚本。

scene "title_main" type=menu
  // 缩进的行都是这个场景的 UI 元素
  text "标题文字" x=50% y=20% size=48
  button "按钮" x=50% y=50% width=200 height=44

type 参数

type=menu 表示这是菜单场景（有按钮交互）。其他类型：game（游戏场景）、ui（UI 面板）。

坐标系统

引擎使用百分比坐标，相对于设计分辨率（默认 1920×1080）：

坐标	范围	说明
x=50%	0%~100%	水平位置，50% = 屏幕中央
y=50%	0%~100%	垂直位置，50% = 屏幕中央
width=200	像素值	元素宽度
height=44	像素值	元素高度

halign 对齐

halign=center 让元素的中心对齐到 x 位置。不加 halign 则元素左上角对齐到 x 位置。

文字元素

text "显示内容" x=50% y=20% size=48 color="#FFD700" halign=center font="Microsoft YaHei"

参数	说明	示例
size	字号	48
color	颜色（十六进制）	#FFD700（金色）
halign	水平对齐	center / left / right
font	字体	Microsoft YaHei

文字内容支持变量插值，用 {} 包裹变量名：

text "金币: {player.gold}" x=50% y=20% size=24

按钮元素

button "开始游戏" x=50% y=55% width=200 height=44 color="#88CCFF" nav="chapter1" halign=center

按钮最重要的参数是导航目标：

参数	说明
nav="场景名"	点击后跳转到指定场景或标签
cmd="命令名"	点击后触发 C# 命令（如打开设置面板）
color	按钮文字颜色

图片元素

image "Images/bg_title.png" x=0 y=0 width=100% height=100% opacity=0.5

图片路径相对于 Media/ 目录。opacity 控制透明度（0~1）。

动手：写一个标题画面

打开 Stories/title/title_main.story，替换为以下内容：

scene "title_main" type=menu
  // 背景
  image "Images/door_zoom.jpg" x=0 y=0 width=100% height=100% opacity=0.3
  // 标题
  text "我的第一个游戏" x=50% y=15% size=56 color="#FFD700" halign=center font="Microsoft YaHei"
  // 按钮
  button "开始故事" x=50% y=45% width=240 height=48 color="#88CCFF" nav="intro" halign=center
  button "退出游戏" x=50% y=60% width=200 height=40 color="#FF8888" cmd="do_exit" halign=center

保存并运行——你会看到一个带背景图、标题和两个按钮的画面。

nav 目标

nav="intro" 指向一个名为 intro 的场景或标签。现在还没创建它，点击会报错。下一章我们会加上对话，届时补上这个目标。

布局容器

当元素较多时，可以用 vbox / hbox 做垂直 / 水平排列，省去逐个设置 y 坐标：

scene "menu" type=menu
  vbox x=50% y=40% spacing=12 halign=center
    button "选项一" width=200 height=40 color="#88CCFF"
    button "选项二" width=200 height=40 color="#88CCFF"
    button "选项三" width=200 height=40 color="#88CCFF"

spacing=12 表示元素间距 12 像素。

下一步

画面有了！接下来让角色说话，给你的游戏加上对话。