Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danielstern/cyo
Simple HTML Storytelling Engine
https://github.com/danielstern/cyo
Last synced: 14 days ago
JSON representation
Simple HTML Storytelling Engine
- Host: GitHub
- URL: https://github.com/danielstern/cyo
- Owner: danielstern
- Created: 2013-10-11T07:34:41.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2019-12-10T17:30:29.000Z (almost 5 years ago)
- Last Synced: 2024-05-11T18:02:27.572Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 3.92 MB
- Stars: 182
- Watchers: 17
- Forks: 23
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CYO (Choose Your Own) is an extremely simple, but powerful, storytelling engine built JavaScript.
## Introduction
CYO lets you create exciting adventures using nothing but HTML code!
See how it works at the project page.
## Patch Notes v3.1
- Version 3.1 is a huge update that completely revises CYO - now way easier and simpler to use!
- CYO 3.1 is no longer dependent on angular.js - just copy the script tag [(see Getting Started)](https://github.com/danielstern/cyo/tree/master/example) and you're good to go
- Improved performance all around
## Getting Started
### Setting Up a Project
Getting started couldn't be easier! Just copy this script tag onto your document.
```html
```
Now you're ready to add ``, `` and `` tags to your web page!
[Follow the tutorial to get started with your project](https://github.com/danielstern/cyo/tree/master/example)
## The Characters
*Also known as "The Directives", wherein an interactive adventure is created, and Javascript (and Angular) fume about not being needed.*
You can use these tools freely in your project to create your own interactive story adventure.
### Story
The story tag initializes your story by pointing to your first chapter.
You initialize your CYO with a simple `story` tag.
```html
And a splendid story it will be.
```
This element has to contain all the other elements. You can have multiple stories on a single page.
### Page
Pages are hidden automatically and appear when choices are pressed.
```html
You see a grizzled old man tending a hearth.
Something doesn't feel right here.
```
### Choice
Choices are what make the storytelling process interactive. Clicking a choice will reveal the corresponding page.
```html
You see a fork in the path.
*Hmm... should I go left or right?*
Guess I'll go left.
Right, definitely right.
```
### Event
Events allow you to remember something special happening, for use later in your story.
```html
You find a flashlight.
```
`event` tags are powerful tools that are automatically remembered for the whole story. They can change what the user sees and what choices they have when used in conjunction with the equally simple `condition` tag.
### Condition
Condition tags will show or hide content conditionally, perfect for use in combination with the `event` tag.
`condition` tags will show or hide the content inside them based on `event` tags that the storygoer has previously encountered in their adventure.
```html
Suddenly, you hear a terrifying noise.
Don't be afraid, for the night is dark and full of terrors.
Turn on your flashlight
Run for it!
```
In this example, if the storygoer had previously found the flashlight, they would see another paragraph and have the option to use their flashlight, going to the `use-flashlight` page.
You can reverse a condition to its negative by adding the word `not`
```html
The tall gate is locked and made of heavy iron bars.
These guys are closed.
"Don't worry... we can use my trusty pocket knife!"
"Don't you mean your *rusty* pocket knife?"
Looks like they're not closed after all.
```
## Example
The markup of your typical page looks like this.
```html
The floor creaks as you step into the house's massive foyer. Grimy paintings
of gaunt and ghastly figures line the walls, and go all the way up to the
ceiling. There is table in the middle of the room.
"Looks like Sal already got this room pretty good," says Brad nervously.
"Looks like it."
The figures in the wall all seem old and tired. Rarely are they smiling.
Many of the men have long mustaches. You notice someone familiar in one of
the paintings.
That's impossible. Suddenly, you reach for the necklace in your
pocket and pop it open. Sure enough. The woman is clearer in the picture.
She is has blonde hair and a striking face. She is not smiling in the
picture on the wall either. Below the picture you see the words Eliza
Bedford.
"What are you looking at?" asks Brad.
"Nothing."
The room has a dreary air of sadness about it. The wallpaper, purpled with
time, peels from the walls. Engraved candlesticks stand guard in neatly
ordered rows all around upper wall of the massive room. Those look
valuable. A wonder someone hasn't taken them yet.
"Well, boys," says crazy Jake, rubbing his hands together. "Let's not get too
comfortable."
"I'm going to look upstairs," says Brad. "Get a handful of jewels and get out
of here."
You get a weird feeling in your stomach. You can't figure out what it is.
Go with Brad
Go with Jake
```
Once you click a choice, all the other choices on the page disappear.
## Making Your Own
Please use this tool to make your own adventures and share them. If you have any questions, or need a new feature to complete your latest epic, post it up here. Better yet, add the feature yourself and make a pull request.
### Made a Game with CYO?
I'd be happy to link to it on the project page! Get in touch with me @danieljackstern or [email protected]
Happy adventuring!
Check Out the Project Page for More Examples
-----------
*CYO was created by Daniel Stern*
## Configuration
Limited configuration objects can be set per story by using an HTML tag.
### Example
```javascript
...
```
### Supported Configuration Settings
| Name | Effect | Default | Example |
| ------------- | --------------- | ----- |
| `pageDirectory` | Specifies where to look for external pages | `""` |
## Troubleshooting
No one gets it perfect the first time!
### Help! My story just won't work!
Follow the Creating a Story Tutorial (click here).
### Some page I made isn't appearing or isn't loading correctly
Open the Developer Console in Chrome by pressing F12. Helpful messages will appear in yellow indicating common mistakes like mismatched file names.