显示对话

用 say() 显示角色对白与旁白，并用 Word、b、i、c 为文字添加样式

先创建 Character，再把它的 say() 动作放进场景

import { Character, Scene } from "narraleaf-react";

const alice = new Character("爱丽丝", { color: "#f59e0b" });
const opening = new Scene("开场").action([
    alice.say("你好。"),
    alice.say("昨晚睡得好吗？"),
]);

旁白可使用导出的 Narrator，也可以创建名字为 null 的角色

import { Narrator } from "narraleaf-react";

opening.action([
    Narrator.say("雨点敲打着窗户。"),
]);

上面的代码只用于分别说明写法。实际项目中应把所有动作放进同一次 opening.action([...]) 调用

设置局部文字样式

模板字符串可以插入 Word

import { Word } from "narraleaf-react";

alice.say`拿上${Word.bold("红色钥匙")}，不要拿${Word.color("蓝色钥匙", "#60a5fa")}。`;

也可以使用 b、i、c 快捷创建粗体、斜体和彩色文字

import { b, c, i } from "narraleaf-react";

alice.say(["这件事", b("很重要"), "。"]);
alice.say([i("她悄悄地"), "关上了门。"]);
alice.say(["警告：", c("生命值过低", "#ef4444")]);

Word.custom 更进一步，可以用你自己的组件绘制一个词，例如术语或通向百科的入口。参见自定义词

动态文字

Word 可以在对话显示时读取游戏数据。存档数据可直接使用 Persistent.get()，其他逻辑可以传入函数

import { Word } from "narraleaf-react";

const currentTime = new Word(
    () => new Date().toLocaleTimeString(),
    { color: "#f87171" },
);

alice.say`现在是 ${currentTime}。`;

单句配置

say() 的第二个参数只影响当前一句。metadata 可由自定义对话框中的 useDialog() 读取

alice.say("任务开始。", {
    metadata: { event: "quest-start", questId: "find-key" },
});

暂停、语音、元数据、颜色和字体选项见 Sentence

设置局部文字样式

动态文字

单句配置

本页目录