UNPKG

easyvn

Version:

Modular visual novel engine for the web

github.com/Eshan276/easyvn

Eshan276/easyvn

112 lines (75 loc) • 3.14 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
# EasyVN - Visual Novel Engine A lightweight, modular TypeScript-based visual novel engine for creating interactive stories in the browser. --- ## Overview EasyVN provides a simple yet powerful framework for building visual novels with features like character dialogue, sprite management, branching narratives, and interactive choices. Built with TypeScript for type safety and modern web standards. --- ## Key Features ### 🎭 Character System - Create characters with multiple sprites and expressions. - Smooth character positioning and movement. - Chainable method calls for fluid scene composition. ### 🎬 Scene Management - Organize stories into discrete scenes with backgrounds. - Smooth transitions between scenes. - Scene registration with metadata support. ### 🔀 Branching Narratives - Advanced routing system for complex story paths. - Label-based navigation with `goto`/`jump` mechanics. - Conditional story branching. ### 💬 Interactive Dialogue - Click-to-continue dialogue system. - Multiple choice decision points. - Asynchronous choice handling. ### 🎨 Visual Elements - Background management with automatic switching. - Character sprite positioning (left, center, right). - Smooth animations and transitions. --- ## Architecture The engine is built with a modular architecture: - **Character**: Manages character sprites, dialogue, and positioning. - **Engine**: Core scene management and background handling. - **Router**: Advanced navigation and branching logic. - **Choices**: Interactive decision point system. - **VN**: Utility class for simple scene playback. --- ## Getting Started ### Installation Follow the installation instructions to set up EasyVN. ### Basic Usage Import the components you need and start building your story. --- ### HTML Requirements Your HTML needs these key elements: - `#background` - Background image element. - `#character` - Character sprite element. - `#textbox` - Dialogue container. - `#speaker` - Character name display. - `#dialogue` - Dialogue text display. - `#choices` - Choice buttons container. --- ### Asset Structure Organize assets in the following directories: - `./assets/characters/` - Character sprites. - `./assets/backgrounds/` - Background images. --- ## Core Concepts ### Scenes The fundamental unit of your story. Each scene is an async function that can contain dialogue, choices, and navigation. ### Characters Entities with names, sprites, and the ability to speak and move around the scene. ### Routing A powerful system for creating branching narratives with labels and conditional jumps. ### Choices Interactive decision points that can trigger different story paths or character reactions. --- ## API Summary ### Exports - **Character**: Character class for managing sprites and dialogue. - **VN**: Utility class for simple scene playback. - **waitClick**: Promise-based click waiting. - **showChoice**: Interactive choice system. - **startScene**, **registerScene**, **setBackground**, **gotoScene**, **jumpToScene**: Scene management. - **runNextRouteIfAny**, **route**, **goto**: Advanced routing system. ---