创建场景

场景背景支持 URL、导入图片或颜色，用 setBackground 更换背景，并用 scene.local 存放场景内临时数据

Scene 表示故事中的一段内容。它包含背景、动作列表和场景内临时数据

import { Scene } from "narraleaf-react";

const room = new Scene("清晨的房间", {
    background: "/backgrounds/room-morning.webp",
});

第一个参数是场景名称。名称应保持唯一，NarraLeaf 在构建故事和恢复存档时会使用它。第二个参数是可选的 ISceneUserConfig

背景

背景可以使用 URL、导入的图片或 CSS 颜色

const blackScreen = new Scene("黑屏", {
    background: "#000",
});

// Next.js、Vite 等构建工具可以解析导入的图片数据。
import roomBackground from "./room.webp";

const importedRoom = new Scene("导入背景的房间", {
    background: roomBackground,
});

使用 setBackground() 在剧情中更换背景。传入 Transition 后会播放过渡动画

import { Dissolve } from "narraleaf-react";

room.action([
    room.setBackground("/backgrounds/room-night.webp", new Dissolve({ duration: 600 })),
]);

场景内数据

scene.local 用于保存临时值。离开场景后数据会被清除，也不需要注册到 Story

room.action([
    room.local.set("visitedWindow", true),
    "你拉开了窗帘。",
]);

需要跨场景保留的数据请使用 Persistent

背景

场景内数据

本页目录