This is a Visual Novel / Text Adventure Player and Editor for use on the web. It is React based (hence the name), and the project is scaffolded with Create React App. As such, edits to the codebase can use a lot of the tools that the CRA team has made available.
A demo of the editor version of this (with the ability to modify/add nodes) is available at https://react-vn.netlify.com/. You can load a story.json or click "Load" on the bottom option to load the already-hosted story. Don't worry, no changes you make will affect the hosted story.
This application is split up into two parts, the Editor and the Player. You use the Editor to edit/write your story, and export a .json containing all your story's data. You can then host the .json along with the Player Bundle to share your story.
Not available yet! I'm going to host this soon! Until then, see the next section to edit your story offline:
You can host your own version of the editor (even locally) to generate your story.json
:
- Clone the repo &&
cd react-vn
yarn install
yarn build
npx serve -s build
- Go to http://localhost:5000
- Follow the prompts to edit your story, and in the editor you can click "Export" to get your story.json
- Acquire a Player Bundle
- Place your
story.json
(Ensure that it is namedstory.json
exactly) in thedata
folder - Host your Player Bundle (upload via FTP or similar)
The Player Bundle is the engine that drives your story. It is a mix of HTML, Javascript, and CSS to make the whole thing work. Basically, it's just a website!
There are two way to get it:
-
Download a release (not yet available)
- Check the releases tab for the latest .zip player bundle
-
Build your own:
- Clone the repo
yarn install
yarn playerbuild
- Your player bundle is in
/player_build
See above for how to Share your Story
This is slightly out of date as of 2018-03-19
First screen you see is the 'Player' or 'Story' screen. Here you can click the buttons to advance the (frankly amazing) 'story'. At times you may be prompted to enter some data, and other times you will add items to your inventory.
Click 'Edit' to get to the story editor. Here you can add new 'Nodes' (pages of text) and each node can have a number of 'NodeLinks'.
Node Content is plain text. You can use #{varName}
to access data stored from Input NodeLinks (see below). There is currently no way to access the inventory in Node Content
There are 3 types of NodeLinks
- Default - These just take you to a destination page
- Input - These prompt you for some data (which will be stored in the Story's state), before moving to the next node
- Inventory - These will increment (or decrement) the number of a certain item in the user's inventory. There is no bound checking, so it's possible to have -1 of something.
Click "Save & Continue" or "Save & Quit" to save the story, and click "Play" to play it immediately! You can also hit "Back to List" to return to the Node List without saving.
Click "Export" to get a .json file with your story in it.
- Finishing this README.
- Hosting on Netlify
- More here: https://trello.com/b/CZ9sbVSJ