narraleaf-react 0.16.1 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +373 -373
- package/README.md +165 -165
- package/dist/game/player/elements/preload/preloadPlan.d.ts +34 -0
- package/dist/game/player/lib/AudioManager.d.ts +12 -0
- package/dist/game/player/lib/ImageCacheManager.d.ts +28 -1
- package/dist/main.js +36 -36
- package/dist/util/data.d.ts +4 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,165 +1,165 @@
|
|
|
1
|
-
<picture>
|
|
2
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/NarraLeaf/.github/refs/heads/master/doc/banner-md-transparent.png">
|
|
3
|
-
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/NarraLeaf/.github/refs/heads/master/doc/banner-md-light.png">
|
|
4
|
-
<img alt="NarraLeaf Logo" src="https://raw.githubusercontent.com/NarraLeaf/.github/refs/heads/master/doc/banner-md-light.png">
|
|
5
|
-
</picture>
|
|
6
|
-
|
|
7
|
-
<h1 align="center">NarraLeaf-React</h1>
|
|
8
|
-
|
|
9
|
-
<h4 align="center">A React visual novel player framework</h4>
|
|
10
|
-
|
|
11
|
-
<p align="center">English | <a href="docs/README.zh-CN.md">简体中文</a></p>
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
## What is NarraLeaf-React?
|
|
15
|
-
|
|
16
|
-
NarraLeaf-React is a lightweight front-end visual novel player.
|
|
17
|
-
NL focuses on visual novel playing, so the user interface can be customized very easily.
|
|
18
|
-
|
|
19
|
-
It doesn't use any rendering libraries and can be used on any web platform (e.g. Electron)
|
|
20
|
-
|
|
21
|
-
## Why NarraLeaf-React?
|
|
22
|
-
|
|
23
|
-
- **Lightweight**: NarraLeaf-React is a front-end framework, and it doesn't use any rendering libraries.
|
|
24
|
-
- **Customizable**: You can customize the UI as you like, even replace the whole components.
|
|
25
|
-
- **Easy to use**: It is easy to use and has a simple API that is built for developers. Based on OOP principles.
|
|
26
|
-
|
|
27
|
-
### Scripting
|
|
28
|
-
|
|
29
|
-
NarraLeaf-React uses TypeScript for all scripting, so you don't have to learn a whole new language to use it.
|
|
30
|
-
|
|
31
|
-
It also has a highly abstracted and easy-to-use API, for example:
|
|
32
|
-
|
|
33
|
-
```typescript
|
|
34
|
-
import {Character, Menu, Scene, c, b} from "narraleaf-react";
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
```typescript
|
|
38
|
-
const scene1 = new Scene("Scene1: Hello World", {
|
|
39
|
-
background: "/link/to/background.jpg",
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
const jS = new Character("John Smith");
|
|
43
|
-
const jD = new Character("John Doe");
|
|
44
|
-
|
|
45
|
-
scene1.action([
|
|
46
|
-
jS`Hello, world!`,
|
|
47
|
-
jS`This is my first ${b("NarraLeaf")} story.`,
|
|
48
|
-
jS`Start editing ${c("src/story.js", "#00f")} and enjoy the journey!`,
|
|
49
|
-
|
|
50
|
-
jD`Also, don't forget to check out the ${c("documentation", "#00f")}!`,
|
|
51
|
-
|
|
52
|
-
"By the way, the documentation is available on https://www.narraleaf.com/docs/narraleaf-react",
|
|
53
|
-
"You can also visit the website for demo and more information.",
|
|
54
|
-
|
|
55
|
-
Menu.prompt("Start the journey")
|
|
56
|
-
|
|
57
|
-
.choose("Yes I will!", [
|
|
58
|
-
jS`Great! Let's start the journey!`,
|
|
59
|
-
jS`You can open issues on GitHub if you have any questions.`
|
|
60
|
-
])
|
|
61
|
-
|
|
62
|
-
.choose("No, I'm going to check the documentation", [
|
|
63
|
-
jS`Sure! Take your time!`
|
|
64
|
-
])
|
|
65
|
-
]);
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
For more information, please visit the [NarraLeaf-React documentation](https://www.narraleaf.com/docs/narraleaf-react).
|
|
69
|
-
|
|
70
|
-
## Get Started
|
|
71
|
-
|
|
72
|
-
### Install
|
|
73
|
-
|
|
74
|
-
```bash
|
|
75
|
-
npm install narraleaf-react
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
### Documentation
|
|
79
|
-
|
|
80
|
-
- [Introduction](https://www.narraleaf.com/docs/narraleaf-react)
|
|
81
|
-
- [Quick Start](https://www.narraleaf.com/docs/narraleaf-react/quick-start)
|
|
82
|
-
- [Installation](https://www.narraleaf.com/docs/narraleaf-react/installation)
|
|
83
|
-
- [Basic](https://www.narraleaf.com/docs/narraleaf-react/basic)
|
|
84
|
-
- [Create a Scene](https://www.narraleaf.com/docs/narraleaf-react/basic/create-scene)
|
|
85
|
-
- [Add Actions](https://www.narraleaf.com/docs/narraleaf-react/basic/add-actions)
|
|
86
|
-
- [Show Dialog](https://www.narraleaf.com/docs/narraleaf-react/basic/show-dialog)
|
|
87
|
-
- [Show Image](https://www.narraleaf.com/docs/narraleaf-react/basic/show-image)
|
|
88
|
-
- [Play Story](https://www.narraleaf.com/docs/narraleaf-react/basic/play-story)
|
|
89
|
-
- [Make Choices](https://www.narraleaf.com/docs/narraleaf-react/basic/make-choices)
|
|
90
|
-
- [Play Sound](https://www.narraleaf.com/docs/narraleaf-react/basic/sound)
|
|
91
|
-
- [Store Data](https://www.narraleaf.com/docs/narraleaf-react/basic/store-data)
|
|
92
|
-
- [Conditional](https://www.narraleaf.com/docs/narraleaf-react/basic/conditional)
|
|
93
|
-
- [Voice](https://www.narraleaf.com/docs/narraleaf-react/basic/voice)
|
|
94
|
-
- [Manage Preferences](https://www.narraleaf.com/docs/narraleaf-react/basic/manage-preferences)
|
|
95
|
-
- [Solutions](https://www.narraleaf.com/docs/narraleaf-react/solutions)
|
|
96
|
-
- [Customizing the Font](https://www.narraleaf.com/docs/narraleaf-react/solutions/font)
|
|
97
|
-
- [Migration from Ren'Py](https://www.narraleaf.com/docs/narraleaf-react/solutions/from-renpy)
|
|
98
|
-
- [Quick Menu](https://www.narraleaf.com/docs/narraleaf-react/solutions/quick-menu)
|
|
99
|
-
- [Dialog Avatar](https://www.narraleaf.com/docs/narraleaf-react/solutions/dialog-avatar)
|
|
100
|
-
- [Custom Dialog](https://www.narraleaf.com/docs/narraleaf-react/solutions/custom-dialog)
|
|
101
|
-
- [Custom NVL Dialog](https://www.narraleaf.com/docs/narraleaf-react/solutions/custom-nvl-dialog)
|
|
102
|
-
- [Custom Menu](https://www.narraleaf.com/docs/narraleaf-react/solutions/custom-menu)
|
|
103
|
-
- [Page Overlay Settings](https://www.narraleaf.com/docs/narraleaf-react/solutions/page-overlay-settings)
|
|
104
|
-
- [Save System with localStorage](https://www.narraleaf.com/docs/narraleaf-react/solutions/save-system-localstorage)
|
|
105
|
-
- [Custom Notification](https://www.narraleaf.com/docs/narraleaf-react/solutions/custom-notification)
|
|
106
|
-
- [Gallery Service with localStorage](https://www.narraleaf.com/docs/narraleaf-react/solutions/gallery-service-localstorage)
|
|
107
|
-
- [Core](https://www.narraleaf.com/docs/narraleaf-react/core)
|
|
108
|
-
- [Elements](https://www.narraleaf.com/docs/narraleaf-react/core/elements)
|
|
109
|
-
- [Scene](https://www.narraleaf.com/docs/narraleaf-react/core/elements/scene)
|
|
110
|
-
- [Character](https://www.narraleaf.com/docs/narraleaf-react/core/elements/character)
|
|
111
|
-
- [Sentence](https://www.narraleaf.com/docs/narraleaf-react/core/elements/character/sentence)
|
|
112
|
-
- [Word](https://www.narraleaf.com/docs/narraleaf-react/core/elements/character/word)
|
|
113
|
-
- [Pause](https://www.narraleaf.com/docs/narraleaf-react/core/elements/character/pause)
|
|
114
|
-
- [Image](https://www.narraleaf.com/docs/narraleaf-react/core/elements/image)
|
|
115
|
-
- [Sound](https://www.narraleaf.com/docs/narraleaf-react/core/elements/sound)
|
|
116
|
-
- [Menu](https://www.narraleaf.com/docs/narraleaf-react/core/elements/menu)
|
|
117
|
-
- [Script](https://www.narraleaf.com/docs/narraleaf-react/core/elements/script)
|
|
118
|
-
- [Condition](https://www.narraleaf.com/docs/narraleaf-react/core/elements/condition)
|
|
119
|
-
- [Control](https://www.narraleaf.com/docs/narraleaf-react/core/elements/control)
|
|
120
|
-
- [Text](https://www.narraleaf.com/docs/narraleaf-react/core/elements/text)
|
|
121
|
-
- [Persistent](https://www.narraleaf.com/docs/narraleaf-react/core/elements/persistent)
|
|
122
|
-
- [Story](https://www.narraleaf.com/docs/narraleaf-react/core/elements/story)
|
|
123
|
-
- [Displayable](https://www.narraleaf.com/docs/narraleaf-react/core/elements/displayable)
|
|
124
|
-
- [Layer](https://www.narraleaf.com/docs/narraleaf-react/core/elements/layer)
|
|
125
|
-
- [Service](https://www.narraleaf.com/docs/narraleaf-react/core/elements/service)
|
|
126
|
-
- [Video](https://www.narraleaf.com/docs/narraleaf-react/core/elements/video)
|
|
127
|
-
- [Built-in Gallery](https://www.narraleaf.com/docs/narraleaf-react/core/elements/built-in/gallery)
|
|
128
|
-
- [Animation](https://www.narraleaf.com/docs/narraleaf-react/core/animation)
|
|
129
|
-
- [Transform](https://www.narraleaf.com/docs/narraleaf-react/core/animation/transform)
|
|
130
|
-
- [Transitions](https://www.narraleaf.com/docs/narraleaf-react/core/animation/transition)
|
|
131
|
-
- [Game](https://www.narraleaf.com/docs/narraleaf-react/core/game)
|
|
132
|
-
- [LiveGame](https://www.narraleaf.com/docs/narraleaf-react/core/game/live-game)
|
|
133
|
-
- [Storable](https://www.narraleaf.com/docs/narraleaf-react/core/game/storable)
|
|
134
|
-
- [Preference](https://www.narraleaf.com/docs/narraleaf-react/core/game/preference/preference)
|
|
135
|
-
- [Key Map](https://www.narraleaf.com/docs/narraleaf-react/core/game/key-map)
|
|
136
|
-
- [Hooks](https://www.narraleaf.com/docs/narraleaf-react/core/game/hooks)
|
|
137
|
-
- [Plugin](https://www.narraleaf.com/docs/narraleaf-react/core/plugin)
|
|
138
|
-
- [Utils](https://www.narraleaf.com/docs/narraleaf-react/core/utils)
|
|
139
|
-
- [Player](https://www.narraleaf.com/docs/narraleaf-react/player)
|
|
140
|
-
- [Player](https://www.narraleaf.com/docs/narraleaf-react/player/player)
|
|
141
|
-
- [FixedAspectRatioContainer](https://www.narraleaf.com/docs/narraleaf-react/player/fixed-aspect-ratio-container)
|
|
142
|
-
- [GameProviders](https://www.narraleaf.com/docs/narraleaf-react/player/game-providers)
|
|
143
|
-
- [Hooks](https://www.narraleaf.com/docs/narraleaf-react/player/hooks)
|
|
144
|
-
- [LayoutRouter](https://www.narraleaf.com/docs/narraleaf-react/player/page-router)
|
|
145
|
-
- [Dialog](https://www.narraleaf.com/docs/narraleaf-react/player/dialog)
|
|
146
|
-
- [Notification](https://www.narraleaf.com/docs/narraleaf-react/player/notification)
|
|
147
|
-
- [Menu](https://www.narraleaf.com/docs/narraleaf-react/player/menu)
|
|
148
|
-
- [NvlContainer](https://www.narraleaf.com/docs/narraleaf-react/player/nvl-container)
|
|
149
|
-
- About
|
|
150
|
-
- [License](https://www.narraleaf.com/docs/narraleaf-react/info/license)
|
|
151
|
-
- [Incompatible Changes](https://www.narraleaf.com/docs/narraleaf-react/info/incompatible-changes)
|
|
152
|
-
|
|
153
|
-
Read more in the [NarraLeaf-React documentation](https://www.narraleaf.com/docs/narraleaf-react).
|
|
154
|
-
|
|
155
|
-
## License
|
|
156
|
-
|
|
157
|
-
> NarraLeaf-React is licensed under the MPL-2.0 License.
|
|
158
|
-
>
|
|
159
|
-
> We updated the license to MPL-2.0 on 2024-9-24.
|
|
160
|
-
|
|
161
|
-
## Contributing
|
|
162
|
-
|
|
163
|
-
We welcome all contributions.
|
|
164
|
-
If you have any ideas, just open an issue or a pull request.
|
|
165
|
-
|
|
1
|
+
<picture>
|
|
2
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/NarraLeaf/.github/refs/heads/master/doc/banner-md-transparent.png">
|
|
3
|
+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/NarraLeaf/.github/refs/heads/master/doc/banner-md-light.png">
|
|
4
|
+
<img alt="NarraLeaf Logo" src="https://raw.githubusercontent.com/NarraLeaf/.github/refs/heads/master/doc/banner-md-light.png">
|
|
5
|
+
</picture>
|
|
6
|
+
|
|
7
|
+
<h1 align="center">NarraLeaf-React</h1>
|
|
8
|
+
|
|
9
|
+
<h4 align="center">A React visual novel player framework</h4>
|
|
10
|
+
|
|
11
|
+
<p align="center">English | <a href="docs/README.zh-CN.md">简体中文</a></p>
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## What is NarraLeaf-React?
|
|
15
|
+
|
|
16
|
+
NarraLeaf-React is a lightweight front-end visual novel player.
|
|
17
|
+
NL focuses on visual novel playing, so the user interface can be customized very easily.
|
|
18
|
+
|
|
19
|
+
It doesn't use any rendering libraries and can be used on any web platform (e.g. Electron)
|
|
20
|
+
|
|
21
|
+
## Why NarraLeaf-React?
|
|
22
|
+
|
|
23
|
+
- **Lightweight**: NarraLeaf-React is a front-end framework, and it doesn't use any rendering libraries.
|
|
24
|
+
- **Customizable**: You can customize the UI as you like, even replace the whole components.
|
|
25
|
+
- **Easy to use**: It is easy to use and has a simple API that is built for developers. Based on OOP principles.
|
|
26
|
+
|
|
27
|
+
### Scripting
|
|
28
|
+
|
|
29
|
+
NarraLeaf-React uses TypeScript for all scripting, so you don't have to learn a whole new language to use it.
|
|
30
|
+
|
|
31
|
+
It also has a highly abstracted and easy-to-use API, for example:
|
|
32
|
+
|
|
33
|
+
```typescript
|
|
34
|
+
import {Character, Menu, Scene, c, b} from "narraleaf-react";
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```typescript
|
|
38
|
+
const scene1 = new Scene("Scene1: Hello World", {
|
|
39
|
+
background: "/link/to/background.jpg",
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
const jS = new Character("John Smith");
|
|
43
|
+
const jD = new Character("John Doe");
|
|
44
|
+
|
|
45
|
+
scene1.action([
|
|
46
|
+
jS`Hello, world!`,
|
|
47
|
+
jS`This is my first ${b("NarraLeaf")} story.`,
|
|
48
|
+
jS`Start editing ${c("src/story.js", "#00f")} and enjoy the journey!`,
|
|
49
|
+
|
|
50
|
+
jD`Also, don't forget to check out the ${c("documentation", "#00f")}!`,
|
|
51
|
+
|
|
52
|
+
"By the way, the documentation is available on https://www.narraleaf.com/docs/narraleaf-react",
|
|
53
|
+
"You can also visit the website for demo and more information.",
|
|
54
|
+
|
|
55
|
+
Menu.prompt("Start the journey")
|
|
56
|
+
|
|
57
|
+
.choose("Yes I will!", [
|
|
58
|
+
jS`Great! Let's start the journey!`,
|
|
59
|
+
jS`You can open issues on GitHub if you have any questions.`
|
|
60
|
+
])
|
|
61
|
+
|
|
62
|
+
.choose("No, I'm going to check the documentation", [
|
|
63
|
+
jS`Sure! Take your time!`
|
|
64
|
+
])
|
|
65
|
+
]);
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
For more information, please visit the [NarraLeaf-React documentation](https://www.narraleaf.com/docs/narraleaf-react).
|
|
69
|
+
|
|
70
|
+
## Get Started
|
|
71
|
+
|
|
72
|
+
### Install
|
|
73
|
+
|
|
74
|
+
```bash
|
|
75
|
+
npm install narraleaf-react
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Documentation
|
|
79
|
+
|
|
80
|
+
- [Introduction](https://www.narraleaf.com/docs/narraleaf-react)
|
|
81
|
+
- [Quick Start](https://www.narraleaf.com/docs/narraleaf-react/quick-start)
|
|
82
|
+
- [Installation](https://www.narraleaf.com/docs/narraleaf-react/installation)
|
|
83
|
+
- [Basic](https://www.narraleaf.com/docs/narraleaf-react/basic)
|
|
84
|
+
- [Create a Scene](https://www.narraleaf.com/docs/narraleaf-react/basic/create-scene)
|
|
85
|
+
- [Add Actions](https://www.narraleaf.com/docs/narraleaf-react/basic/add-actions)
|
|
86
|
+
- [Show Dialog](https://www.narraleaf.com/docs/narraleaf-react/basic/show-dialog)
|
|
87
|
+
- [Show Image](https://www.narraleaf.com/docs/narraleaf-react/basic/show-image)
|
|
88
|
+
- [Play Story](https://www.narraleaf.com/docs/narraleaf-react/basic/play-story)
|
|
89
|
+
- [Make Choices](https://www.narraleaf.com/docs/narraleaf-react/basic/make-choices)
|
|
90
|
+
- [Play Sound](https://www.narraleaf.com/docs/narraleaf-react/basic/sound)
|
|
91
|
+
- [Store Data](https://www.narraleaf.com/docs/narraleaf-react/basic/store-data)
|
|
92
|
+
- [Conditional](https://www.narraleaf.com/docs/narraleaf-react/basic/conditional)
|
|
93
|
+
- [Voice](https://www.narraleaf.com/docs/narraleaf-react/basic/voice)
|
|
94
|
+
- [Manage Preferences](https://www.narraleaf.com/docs/narraleaf-react/basic/manage-preferences)
|
|
95
|
+
- [Solutions](https://www.narraleaf.com/docs/narraleaf-react/solutions)
|
|
96
|
+
- [Customizing the Font](https://www.narraleaf.com/docs/narraleaf-react/solutions/font)
|
|
97
|
+
- [Migration from Ren'Py](https://www.narraleaf.com/docs/narraleaf-react/solutions/from-renpy)
|
|
98
|
+
- [Quick Menu](https://www.narraleaf.com/docs/narraleaf-react/solutions/quick-menu)
|
|
99
|
+
- [Dialog Avatar](https://www.narraleaf.com/docs/narraleaf-react/solutions/dialog-avatar)
|
|
100
|
+
- [Custom Dialog](https://www.narraleaf.com/docs/narraleaf-react/solutions/custom-dialog)
|
|
101
|
+
- [Custom NVL Dialog](https://www.narraleaf.com/docs/narraleaf-react/solutions/custom-nvl-dialog)
|
|
102
|
+
- [Custom Menu](https://www.narraleaf.com/docs/narraleaf-react/solutions/custom-menu)
|
|
103
|
+
- [Page Overlay Settings](https://www.narraleaf.com/docs/narraleaf-react/solutions/page-overlay-settings)
|
|
104
|
+
- [Save System with localStorage](https://www.narraleaf.com/docs/narraleaf-react/solutions/save-system-localstorage)
|
|
105
|
+
- [Custom Notification](https://www.narraleaf.com/docs/narraleaf-react/solutions/custom-notification)
|
|
106
|
+
- [Gallery Service with localStorage](https://www.narraleaf.com/docs/narraleaf-react/solutions/gallery-service-localstorage)
|
|
107
|
+
- [Core](https://www.narraleaf.com/docs/narraleaf-react/core)
|
|
108
|
+
- [Elements](https://www.narraleaf.com/docs/narraleaf-react/core/elements)
|
|
109
|
+
- [Scene](https://www.narraleaf.com/docs/narraleaf-react/core/elements/scene)
|
|
110
|
+
- [Character](https://www.narraleaf.com/docs/narraleaf-react/core/elements/character)
|
|
111
|
+
- [Sentence](https://www.narraleaf.com/docs/narraleaf-react/core/elements/character/sentence)
|
|
112
|
+
- [Word](https://www.narraleaf.com/docs/narraleaf-react/core/elements/character/word)
|
|
113
|
+
- [Pause](https://www.narraleaf.com/docs/narraleaf-react/core/elements/character/pause)
|
|
114
|
+
- [Image](https://www.narraleaf.com/docs/narraleaf-react/core/elements/image)
|
|
115
|
+
- [Sound](https://www.narraleaf.com/docs/narraleaf-react/core/elements/sound)
|
|
116
|
+
- [Menu](https://www.narraleaf.com/docs/narraleaf-react/core/elements/menu)
|
|
117
|
+
- [Script](https://www.narraleaf.com/docs/narraleaf-react/core/elements/script)
|
|
118
|
+
- [Condition](https://www.narraleaf.com/docs/narraleaf-react/core/elements/condition)
|
|
119
|
+
- [Control](https://www.narraleaf.com/docs/narraleaf-react/core/elements/control)
|
|
120
|
+
- [Text](https://www.narraleaf.com/docs/narraleaf-react/core/elements/text)
|
|
121
|
+
- [Persistent](https://www.narraleaf.com/docs/narraleaf-react/core/elements/persistent)
|
|
122
|
+
- [Story](https://www.narraleaf.com/docs/narraleaf-react/core/elements/story)
|
|
123
|
+
- [Displayable](https://www.narraleaf.com/docs/narraleaf-react/core/elements/displayable)
|
|
124
|
+
- [Layer](https://www.narraleaf.com/docs/narraleaf-react/core/elements/layer)
|
|
125
|
+
- [Service](https://www.narraleaf.com/docs/narraleaf-react/core/elements/service)
|
|
126
|
+
- [Video](https://www.narraleaf.com/docs/narraleaf-react/core/elements/video)
|
|
127
|
+
- [Built-in Gallery](https://www.narraleaf.com/docs/narraleaf-react/core/elements/built-in/gallery)
|
|
128
|
+
- [Animation](https://www.narraleaf.com/docs/narraleaf-react/core/animation)
|
|
129
|
+
- [Transform](https://www.narraleaf.com/docs/narraleaf-react/core/animation/transform)
|
|
130
|
+
- [Transitions](https://www.narraleaf.com/docs/narraleaf-react/core/animation/transition)
|
|
131
|
+
- [Game](https://www.narraleaf.com/docs/narraleaf-react/core/game)
|
|
132
|
+
- [LiveGame](https://www.narraleaf.com/docs/narraleaf-react/core/game/live-game)
|
|
133
|
+
- [Storable](https://www.narraleaf.com/docs/narraleaf-react/core/game/storable)
|
|
134
|
+
- [Preference](https://www.narraleaf.com/docs/narraleaf-react/core/game/preference/preference)
|
|
135
|
+
- [Key Map](https://www.narraleaf.com/docs/narraleaf-react/core/game/key-map)
|
|
136
|
+
- [Hooks](https://www.narraleaf.com/docs/narraleaf-react/core/game/hooks)
|
|
137
|
+
- [Plugin](https://www.narraleaf.com/docs/narraleaf-react/core/plugin)
|
|
138
|
+
- [Utils](https://www.narraleaf.com/docs/narraleaf-react/core/utils)
|
|
139
|
+
- [Player](https://www.narraleaf.com/docs/narraleaf-react/player)
|
|
140
|
+
- [Player](https://www.narraleaf.com/docs/narraleaf-react/player/player)
|
|
141
|
+
- [FixedAspectRatioContainer](https://www.narraleaf.com/docs/narraleaf-react/player/fixed-aspect-ratio-container)
|
|
142
|
+
- [GameProviders](https://www.narraleaf.com/docs/narraleaf-react/player/game-providers)
|
|
143
|
+
- [Hooks](https://www.narraleaf.com/docs/narraleaf-react/player/hooks)
|
|
144
|
+
- [LayoutRouter](https://www.narraleaf.com/docs/narraleaf-react/player/page-router)
|
|
145
|
+
- [Dialog](https://www.narraleaf.com/docs/narraleaf-react/player/dialog)
|
|
146
|
+
- [Notification](https://www.narraleaf.com/docs/narraleaf-react/player/notification)
|
|
147
|
+
- [Menu](https://www.narraleaf.com/docs/narraleaf-react/player/menu)
|
|
148
|
+
- [NvlContainer](https://www.narraleaf.com/docs/narraleaf-react/player/nvl-container)
|
|
149
|
+
- About
|
|
150
|
+
- [License](https://www.narraleaf.com/docs/narraleaf-react/info/license)
|
|
151
|
+
- [Incompatible Changes](https://www.narraleaf.com/docs/narraleaf-react/info/incompatible-changes)
|
|
152
|
+
|
|
153
|
+
Read more in the [NarraLeaf-React documentation](https://www.narraleaf.com/docs/narraleaf-react).
|
|
154
|
+
|
|
155
|
+
## License
|
|
156
|
+
|
|
157
|
+
> NarraLeaf-React is licensed under the MPL-2.0 License.
|
|
158
|
+
>
|
|
159
|
+
> We updated the license to MPL-2.0 on 2024-9-24.
|
|
160
|
+
|
|
161
|
+
## Contributing
|
|
162
|
+
|
|
163
|
+
We welcome all contributions.
|
|
164
|
+
If you have any ideas, just open an issue or a pull request.
|
|
165
|
+
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { Scene } from "../../../nlcore/elements/scene";
|
|
2
|
+
import type { Sound } from "../../../nlcore/elements/sound";
|
|
3
|
+
export type ScenePreloadPlan = {
|
|
4
|
+
/**
|
|
5
|
+
* Image urls the scene that is about to paint registers directly: its own backgrounds and
|
|
6
|
+
* images, plus the immediate background of any scene it jumps to. This tier is on the path to
|
|
7
|
+
* the first painted frame, so it is fetched unpaced and nothing is revealed until it is warm.
|
|
8
|
+
*/
|
|
9
|
+
critical: string[];
|
|
10
|
+
/**
|
|
11
|
+
* Image urls belonging to the scenes reachable from here, minus anything already in
|
|
12
|
+
* {@link ScenePreloadPlan.critical}. Speculative: warmed after the critical tier, paced, and
|
|
13
|
+
* nothing waits for it.
|
|
14
|
+
*/
|
|
15
|
+
lookAhead: string[];
|
|
16
|
+
/** Every url in the plan, in order — the set the cache should keep for this scene. */
|
|
17
|
+
all: string[];
|
|
18
|
+
/**
|
|
19
|
+
* Sounds this scene registers. Warmed alongside the critical tier but never gated on: the
|
|
20
|
+
* audio context can be locked until the player interacts with the page (see
|
|
21
|
+
* `AudioManager.preload`), so waiting for these could wait forever.
|
|
22
|
+
*/
|
|
23
|
+
criticalAudio: Sound[];
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* Split a scene's registered image sources into what must be warm before the scene paints and what
|
|
27
|
+
* is merely likely to be needed soon.
|
|
28
|
+
*
|
|
29
|
+
* The distinction matters because a scene's `srcManager` reaches transitively: `getFutureSrc()`
|
|
30
|
+
* carries the whole asset set of every scene this one can jump to. Treating that as one preload
|
|
31
|
+
* pass meant the first frame of a large story waited on assets from scenes the player had not
|
|
32
|
+
* reached yet.
|
|
33
|
+
*/
|
|
34
|
+
export declare function planScenePreload(scene: Scene): ScenePreloadPlan;
|
|
@@ -43,6 +43,18 @@ export declare class AudioManager {
|
|
|
43
43
|
fromData(data: AudioManagerDataRaw, elementMap: Map<string, LogicAction.GameElement>): this;
|
|
44
44
|
soundFromData(sound: SoundElement, data: AudioDataRaw): void;
|
|
45
45
|
isManaged(sound: SoundElement): boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Fetch and decode a sound into the audio cache without playing it, so the first `play()` of
|
|
48
|
+
* this source starts on the same frame it is asked to instead of after a fetch and a decode.
|
|
49
|
+
*
|
|
50
|
+
* Deliberately **not** something to gate a loading screen on: the audio context only becomes
|
|
51
|
+
* ready once the browser's autoplay policy is satisfied by a user gesture, so this can sit
|
|
52
|
+
* pending indefinitely on a page nobody has interacted with yet. Start it and let it land —
|
|
53
|
+
* in practice the gesture that opens a menu unlocks the context long before the scene it
|
|
54
|
+
* belongs to is entered. Failures resolve quietly; the sound then loads on first play, exactly
|
|
55
|
+
* as it did before.
|
|
56
|
+
*/
|
|
57
|
+
preload(sound: SoundElement): Promise<void>;
|
|
46
58
|
reset(): void;
|
|
47
59
|
setGroupVolume(type: SoundType, volume: number): void;
|
|
48
60
|
setGlobalVolume(volume: number): void;
|
|
@@ -14,19 +14,46 @@ export declare class ImageCacheManager {
|
|
|
14
14
|
* the bytes are cached — the first reveal still pays the (async) decode cost and can paint
|
|
15
15
|
* a blank frame. Decode failures are ignored: the image then simply decodes lazily on
|
|
16
16
|
* first paint, exactly as before.
|
|
17
|
+
*
|
|
18
|
+
* Returns the element the decode ran on so callers can keep it alive (see
|
|
19
|
+
* {@link ImageCacheManager.preload}'s `retainDecoded`); `null` when the environment has no
|
|
20
|
+
* `Image` or no `decode()`.
|
|
17
21
|
*/
|
|
18
22
|
private static decodeImage;
|
|
19
23
|
private src;
|
|
20
24
|
private preloadTasks;
|
|
25
|
+
/**
|
|
26
|
+
* Decoded images held on purpose. A decoded bitmap only stays in the browser's cache while
|
|
27
|
+
* something still references it, so dropping the element right after `decode()` lets the
|
|
28
|
+
* bitmap be evicted and the reveal decodes all over again. Retention is opt-in per preload
|
|
29
|
+
* (`retainDecoded`) because a full-resolution bitmap costs width × height × 4 bytes — worth
|
|
30
|
+
* it for the scene that is about to paint, far too expensive for a whole reachable graph.
|
|
31
|
+
*/
|
|
32
|
+
private decoded;
|
|
21
33
|
constructor(game: Game);
|
|
22
34
|
has(name: string): boolean;
|
|
23
35
|
add(name: string, src: string): this;
|
|
24
36
|
remove(name: string): this;
|
|
25
37
|
get(name: string): string | undefined;
|
|
38
|
+
/**
|
|
39
|
+
* Whether this source has been decoded and its decoded bitmap is still held, i.e. attaching
|
|
40
|
+
* it to an `<img>` can paint without an asynchronous decode first.
|
|
41
|
+
*/
|
|
42
|
+
isDecoded(name: string): boolean;
|
|
26
43
|
clear(): this;
|
|
27
44
|
size(): number;
|
|
28
45
|
isPreloading(src: string): boolean;
|
|
29
|
-
|
|
46
|
+
/**
|
|
47
|
+
* Fetch `url`, cache it as a data URL and decode it, resolving the returned token's
|
|
48
|
+
* `onFinished` only once the decode has settled.
|
|
49
|
+
*
|
|
50
|
+
* @param options.retainDecoded keep the decoded bitmap alive until this source leaves the
|
|
51
|
+
* cache. Use it for the assets that are about to be revealed; leave it off for speculative
|
|
52
|
+
* look-ahead preloading, whose bitmaps would otherwise pile up in memory.
|
|
53
|
+
*/
|
|
54
|
+
preload(gameState: GameState, url: string, options?: {
|
|
55
|
+
retainDecoded?: boolean;
|
|
56
|
+
}): PreloadedToken;
|
|
30
57
|
abortAll(): void;
|
|
31
58
|
abort(src: string): void;
|
|
32
59
|
preloadedSrc(): string[];
|