Standbild is an open-source tool for making story-driven mystery games.
- Install Node.
- Clone the repository.
git clone https://github.com/beekley/standbild.git cd standbild
- Install the dependencies.
npm install
- Build and run the dev server.
npm run dev
- Open the URL provided by the dev server.
The project is split into two main components: The data that make up chapters and scenes, and the that generates the game from that data.
Chapters represent a single, complete story and consist of one or more scenes. Scenes are each a single view into a part of a chapter, consisting of an image and a set of clickable areas in an imagemap. They have the following folder structure:
└─public
└─chapters
├─chapter1 -- A directory for a given chapter, which can be named anything.
│ ├─story.txt -- The story for the entire shapter.
│ ├─main.jpeg -- The image for the first scene in the chapter.
│ ├─main.html -- The HTML imagemap for the first scene in the chapter.
│ ├─scene2.jpeg -- Subseqent scenes can have arbitrary names...
│ ├─scene2.html -- ...as long as they have both jpeg image and html files.
│ └─...
└─...
To create a new chapter:
- Create a folder within
public/scenes
with the name of the chapter. - Create a
story.txt
within this folder.- Write a brief story in this file.
- Wrap key words in curly braces to mark them as
answers
in the game, which the player must find and fill in (e.g.the {king} opened the {door}
).
- For each scene in the chapter:
- Add an image, named
${scene name}.jpeg
. - Create an imagemap using a tool like image-map.net and paste the
<map>
element into${scene name}.jpeg
.
- Add an image, named
- Run the dev server and you should see your scenes at
http://${hostname}/scene/${chaptername}/${scenename}
To deploy changes to the default domain, run:
npm run build
npm run deploy
To deploy chanes to another domain, you must set up github pages to point to that domain
and update the deploy
command to use that domain.