Discoteque
Text-based interactive ficiton with RPG elements
Allows you to create simple RPG-esque text stories that follow basic principles.
- You can read text that is spoken by characters or just presented as is ("narration").
- You can navigate branching dialogue.
- You can distribute and use skills to pass dialogue checks and gain them.
- State can be used to track progress / remember decisions / set "VN-like" flags.
- Time passes with each line
Full Demo (Source Code for Demo)
Usage
With seed
Just clone example seed project, then edit game.ts
, skills.ts
and store.ts
to develop your game.
git clone https://code.gensokyo.social/Gensokyo.social/discoteque-seed.git my-gamecd my-gameyarnyarn start
With create-react-app as template
(Optional, but provides for stable webpack set up that we're not covering here)
Start with https://create-react-app.dev/docs/adding-typescript/
npx create-react-app my-app --template typescript
Remove all contents from src/
Install following pre-requisits
yarn add discoteque react-toastify redux emotion @emotion/coreyarn add -D @types/react-redux
Follow these steps
Create game store & reducer
Create a store and reducer to process in-game actions and change state
// store.ts;; ; ; ; ;
Create skills
Create default skills
// skills.ts; ; ; ;
Create script
// game.ts;;;; // Create Nodes; // Create actors; // Create locations;
Create game config
// config.ts;;;; ; ;
Use config in your app
Replace default project's index.tsx with this
// index.tsx;;; ; // Set up default font;injectGlobal` @font-face { font-family: 'Antic Slab Regular'; src: url() format('woff2'); } body { font-family: 'Antic Slab Regular'; }`; // Import your config file // Make an app. Mounting onto DOM is already handled by App.makeAppconfig;
Development
Run build
yarn build
Link
yarn link
Use link in live project
yarn link discoteque