A technical demonstration of creating a Wanderlust inspired game using Ink as the narative engine, powering a React application. The ink web-player keeps the stories state which we mirror into a Redux store to organize displaying of content.
We use geist-ui as a component library. The Redux store is setup using Redux Toolkit.
Within the ink file we use a SCENE tag that can specify a scene. Scenes can change the background, update the music and set styles. They are stored in a configuration file at src/scenes.ts.
These tags are supported within the ink file. Use them as TAG: value fo tag.
- SCENE Identifying a scene to be used.
- CHAPTER Name of chapter. Will use name as heading and clear all text.
- CLEAR Clears all text.
Any choice that is a simple "continue" will be rendered not as text but a "continue button" (Chevron down inside a button).
Run game locally.
npm run dev
Compile ink file to TypeScript. (current win and mac supported)
npm run ink:compile
https://www.janvas.com/create-draw-edit/en/svg-online-editor.html https://editor.method.ac/
- Focussing a button scrolls the content to that button. Thus we do not need to implement scrolling logic. We simply focus the first choice button.
Stories state in ReduxCompile ink to TSBackgorund imagesClear paragraphsHandle tagsThemable UIScenesSupport for background musicDisplay image creditChapter titleNicer reading flow with text appearingSettings screenProtagonists moodFade storyLines after a whileAsset credit screenOpening screen for gameAuto scroll to bottomRender "continue"-choice specialSave and load- Finish example story
- Achievement system
- Win / Mac / Linux build using Tauri https://tauri.studio/
- Arrow key navigation
- Gamepad navigation
- Choices in Image
- Do Tunnels work?
- More Scene types than just images
- Crossfade audio
- Is the start screen good or should it start off as a story format?
- Pennyless
- Defeat the bandits
- Have a boring trip
- Buy Lisa a house
- Die
- Saw the mountains
- Saw the forrest