Word\<T extends string | DynamicWord | Pausing | TextEvent = string | DynamicWord | Pausing | TextEvent\>

WordはSentenceの一部です。テキストにスタイルを付けるために使用します。

赤い単語を構築する：

import { Word } from 'narraleaf-react';

const word = new Word("Hello", {color: "#f00"});

ルビ付きの単語を構築する：

const word = new Word("你好", {ruby: "nǐ hǎo"});

動的な単語を構築する：

// This word will be executed when it is displayed
const word = new Word((ctx) => 
    `Now it is ${new Date().toLocaleTimeString()}`
, {color: "#f00"});

静的メソッド

isWord

color

bold

italic

custom

パブリックメソッド

constructor

toString

カスタムレンダリング

カスタム単語は、コンポーネントをまとった普通のテキスト単語です。他の単語と同じように1文字ずつタイプされ、バックログ、既読テキストの記録、ボイスパイプラインにはプレーンテキストとして届き、決してシリアライズされません。行が再評価されるたびにコンポーネントが再アタッチされるため、セーブデータにはその痕跡が一切残りません。

import { Word, WordRenderProps } from "narraleaf-react";

function GlossaryTerm({children, revealed, data}: WordRenderProps<{entry: string}>) {
    return (
        <span className="underline decoration-dotted"
              onClick={() => revealed && openGlossary(data.entry)}>
            {children}
        </span>
    );
}

character.say([
    "今日は",
    Word.custom("エーテル濃度", GlossaryTerm, {data: {entry: "aether"}}),
    "が異常に高い。",
]);

コンポーネントはWordRenderPropsを受け取ります。これを土台にした完全なポップアップについては、Custom Wordを参照してください。

レイアウト済みのテキスト

childrenは、エンジンがすでにレイアウトを終えた単語のテキストで、ルビ、縦書きモード、縦中横が適用済みです。レンダリングするのはchildrenにしてください。代わりにtextをレンダリングすると、同じ文字は得られますが、この3つはいずれも適用されません。

スタイルの適用順序

コンポーネントは、エンジンがスタイルを設定する要素の内側でレンダリングされるため、解決済みのスタイルはすでに効いています。エンジンのデフォルト、ダイアログのテキストprops、Sentence、Wordの順に適用されます。コンポーネントは最も内側にあるため、そこで設定した内容が最後に適用されます。

Word.customは他のファクトリーとどちらの順序でも組み合わせられます。Word.bold(Word.custom(text, Term))とWord.custom(Word.color(text, "#f00"), Term)は、どちらもスタイルとコンポーネントの両方を保ちます。

クリック

単語がまだタイプ中の間は、それをクリックすると他の場所と同じように行が進みます。単語が完全に表示されると、その単語自身がクリックを受け取るようになり、行はその裏で進まなくなります。

改行

改行を含むカスタム単語は、行ごとに1つのラッパーとして描画されます。改行は両者の間にあり、どちらにも属さないためです。そのうちrevealedを報告するのは最後のラッパーだけです。改行はカスタム単語の内部ではなく、その前後の単語の中に置いてください。

NVLモード

カスタム単語はNVLモードでも同じようにレンダリングされ、同じように振る舞いますが、そこではuseDialogOverlayにホストがなく、コンテナも報告されません。NVLモードで動作する必要があるポップアップは、インラインでレンダリングしてください。

レンダラーレジストリ

コード内で構築された単語は、コンポーネントを直接保持します。ストーリーファイルからコンパイルされたり、プラグインから提供されたりする、データとして届く単語はidを保持し、そのidは単語が描画される際に解決されます。以下の3つの関数はすべて0.27.0以降で使用できます。

import { registerWordRenderer, Word } from "narraleaf-react";

registerWordRenderer("glossary", GlossaryTerm);

new Word("エーテル濃度", {render: "glossary", data: {entry: "aether"}});

何も登録されていないidは、プレーンテキストとしてレンダリングされ、コンソールにidごとに1回報告されます。例外は投げられないため、プラグインが見つからない行でも読むことはできます。

registerWordRenderer

unregisterWordRenderer

getWordRenderer