Chapter

章节标题组件，用于显示游戏章节过渡画面，支持标题、副标题和逐行显示的描述文字。

导入


import Chapter from "@plugins/default/components/chapter";

基础用法


await Game.use(
  "chapter",
  <Chapter
    title="「序章」"
    content="故事从这里开始..."
  />
);

带副标题


await Game.use(
  "chapter",
  <Chapter
    subtitle="01"
    title="「晴空回波」"
    content="那是一个阳光明媚的早晨..."
  />
);

多行内容

使用数组传入多行内容，每行会依次动画显示：


await Game.use(
  "chapter",
  <Chapter
    subtitle="02"
    title="「命运交汇」"
    content={[
      "时间悄然流逝，",
      "命运的齿轮开始转动，",
      "一切都将改变。"
    ]}
  />
);

背景图片


await Game.use(
  "chapter",
  <Chapter
    subtitle="03"
    title="「落幕」"
    content="这是最后的篇章..."
    backgroundImg="/backgrounds/sunset.jpg"
  />
);

自定义动画时间


await Game.use(
  "chapter",
  <Chapter
    title="「尾声」"
    content={["第一行", "第二行", "第三行"]}
    contentDuration={1.5}  // 每行动画持续1.5秒
    contentDelay={2}       // 首行延迟2秒后开始
  />
);

Props

属性	类型	必填	默认值	描述
title	string	是	-	章节标题
subtitle	string	否	-	章节序号/副标题
content	string \| string[]	是	-	章节描述内容
backgroundImg	string	否	-	背景图片路径
contentDuration	number	否	1	每行内容动画持续时间（秒）
contentDelay	number	否	1	首行内容开始前的延迟（秒）

交互行为

内容按顺序逐行动画显示
点击屏幕可跳过动画，立即显示所有内容
动画完成后，再次点击继续游戏
支持自动播放模式

视觉效果

组件包含以下视觉元素：

左侧半透明渐变遮罩
装饰性边框和菱形标记
标题区域（左侧）
内容区域（右侧，斜体显示）
背景自动添加暗化滤镜

完整示例


import { createScene } from "@core/scene";
import { Game } from "@core/game";
import Chapter from "@plugins/default/components/chapter";
 
const chapter1 = createScene("chapter1", async () => {
  // 显示章节标题
  await Game.use(
    "chapter",
    <Chapter
      subtitle="第一章"
      title="「相遇」"
      content={[
        "樱花飘落的季节，",
        "两个陌生的灵魂，",
        "在命运的十字路口相遇。"
      ]}
      backgroundImg="/backgrounds/sakura.jpg"
      contentDuration={1.2}
      contentDelay={0.8}
    />
  );
 
  // 章节开始
  Game.narrate`四月，春风正暖...`;
});