NarraLeaf-React 核心

核心是 NarraLeaf-React 的主要功能。它为使用 React 创建视觉小说提供了基本构建块。

如果您还没有阅读快速开始，我们建议您先阅读它。它将帮助您了解 NarraLeaf-React 的基本概念。

If you are looking for some components such as Player, GameProviders, or Stage, you can find them in the Player section.

Core

Core is the main functionality of NarraLeaf-React. You can use its abstract classes to create a story. It has three parts:

Elements are the basic building blocks of NarraLeaf-React. They are used to create actions in the story.
Animation is used to create complex animations for the elements.
Game is the main class that represents the game's current state. For example, you can use LiveGame to save and load the game.

核心概念

在我们开始之前，让我们了解 NarraLeaf-React 的一些核心概念。

NarraLeaf 基于场景、元素和动作的概念。

Scenes contain actions, and actions are generated by elements.

For example:

import {Scene, Character} from "narraleaf-react";
 
const scene1 = new Scene("scene-1-wake-up");
const character1 = new Character("John Smith");
const character2 = new Character("Alice");
 
scene1.action([
    character1
        .say("Hello, World!")
        .say("Good morning!"),
    character2
        .say("Hi, John!")
        .say("How are you?")
]);

In this example, we have a scene with two characters. The first character says "Hello, World!" and "Good morning!", and the second character says "Hi, John!" and "How are you?"

These two characters are elements, the scene is a scene, and the actions are the dialogues.

The code preceding will output actions like this:

1. Initialize the scene scene-1-wake-up.
2. Character John Smith says "Hello, World!"
3. Character John Smith says "Good morning!"
4. Character Alice says "Hi, John!"
5. Character Alice says "How are you?"

场景

一个场景是按顺序执行的动作的集合。您可以使用场景来创建对话、选择或过场动画。

例如，您可以使用场景来表示按背景、时间或过程组织的对话。

一个基础的故事可能包含这些场景：

1. scene-1-wake-up：主角早上醒来。
2. scene-2-go-to-school：主角去上学。
3. scene-3-meet-friend：主角遇见朋友。

场景也可以使用多个背景。

元素

元素是故事的基本单元。它可以是一个角色、一个图像或一个声音。

例如，您可以使用 角色 来表示故事中的角色。它可以显示对话。
此外，您可以使用 图片 来表示故事中的图像。它可以显示角色。

注意角色 图片 只显示图像。它们是分开的。

这里是一个树，展示了 NarraLeaf-React 中的基本元素。

正如您所看到的，这里有一些 NarraLeaf-React 中的基本元素。 我们将在下一节中使用这些元素来创建一个故事。

动作

动作是 NarraLeaf-React 中最重要的概念。

任何您在元素上调用的方法都是一个动作。动作可以做一些事情，比如显示对话、播放声音或更改背景。
NarraLeaf-React 只能理解动作。

例如，您可以使用 character.say 来显示对话。

import {Character} from "narraleaf-react";
 
const character1 = new Character("约翰-史密斯");
character1.say("你好，世界！"); // 这是一个动作

有一些元素可以接收动作，例如 Scene 场景将按顺序执行动作。

import {Scene, Character} from "narraleaf-react";
 
const scene1 = new Scene("scene-1-wake-up");
const character1 = new Character("约翰-史密斯");
const character2 = new Character("爱丽丝");
 
scene1.action([
    character1
        .say("你好，世界！")
        .say("早上好！"),
    character2
        .say("嗨，约翰！")
        .say("你过得怎么样？")
]);

最后，您可以使用一个故事来包装场景。

import {Story} from "narraleaf-react";
 
/*
...你的场景
*/
 
const story = new Story();
story.entry(scene1);
 
export default story;

当您在 React 应用中放置 Player 组件时，您可以导入故事并将其传递给 Player 组件。我们稍后会讨论这一点。

创建故事

构建一个故事

故事是 NarraLeaf-React 中最重要的概念。您可以在一个 TypeScript 文件中定义一个故事并导出它。

import {Story,Scene} from "narraleaf-react";
 
const story = new Story("我的第一个NarraLeaf故事"); // 人类可读的名称

然后，您可以为故事添加一个入口点。

const scene1 = new Scene("scene1", {});
 
story.entry(scene1);

最后，您可以导出故事并在 React 应用中使用它。

"use client";
 
import { GameProviders, Player } from "narraleaf-react";
import { story } from "./scene1"; // 你的故事
 
export default function App() {
    return (
        <GameProviders>
 
            <Player 
                story={story} // 你的故事
            />
 
        </GameProviders>
    );
}

添加动作

要在屏幕上显示内容，您需要向故事添加动作。

基本的动作容器是 场景。您可以像这样创建一个场景。

const scene1 = new Scene("Scene 1");

然后，您可以向场景添加动作。

const character1 = new Character("Character 1");
 
scene1.action([
    character1
        .say("你好，世界！")
        .say("早上好！"),
]);

您的故事将按顺序执行动作。它将在屏幕上显示对话框 "你好，世界！" 和 "早上好！"。

在元素部分了解更多关于 元素 的信息。

例子

这里是一个完整故事的例子。

import {
    Story,
    Scene,
    Character,
} from "narraleaf-react";
 
// 创建一个故事
const story = new Story("My Story");
const scene1 = new Scene("Scene 1", {
    background: {
        url: "https://via.placeholder.com/1920x1080"
    },
});
 
// 定义你的角色
const character1 = new Character("Character 1");
const character2 = new Character("Character 2");
 
// 为场景添加动作
scene1.action([
    character1
        .say("你好，世界！")
        .say("欢迎来到 NarraLeaf!")
        .say("这是一个为了React开发者而设计的视觉小说框架。")
        .say("我希望你喜欢它。"),
 
    character2
        .say("编辑这个文件以开始你的视觉小说之旅")
        .say("我们为你准备了很多功能"),
]);
 
// 将场景添加到故事中
story.entry(scene1);
 
export { story };

下一步

让我们开始使用 NarraLeaf-React 创建复杂的故事。阅读有关元素的更多信息，了解如何创建更复杂的动作。