Easy to use starter kit for creating stories with Tweego, Twine and SugarCube.
The easiest starter kit for building SugarCube stories with Twine / Tweego.
Built in to this template are a number of frameworks to get you going.
npx degit nijikokun/sugarcube-starter <project-name>
npm install
npm start
New to SugarCube?
npm start
- Alias for npm run dev
npm run dev
- Starts development server and watches src
directory.npm run dev:prod
- Starts development server and watches src
directory in production mode (NODE_ENV=production
).npm run build
- Compiles and bundles the story in the dist
directory.npm run build:prod
- Compiles and bundles the story in the dist
directory for production..build
— Webpack configuration and Build scriptssrc
— Story and Story Assets directorysrc/assets
— Story Assets (Scripts, Styles, Media, Fonts)src/assets/app
— Story JavaScripts and Stylesheetssrc/assets/app/styles
— Story Stylesheets (SASS)src/assets/fonts
— Static Fonts to be hosted / distributedsrc/assets/media
— Images and Videossrc/assets/vendor
— Third-Party Scripts and Modulessrc/story
— SugarCube / Twine .twee
filesconfig.json
— Webpack, Tweego, Babel and Build Configuration..tweego
— Tweego installation and story formats are installed here.prebuilt
— Staging directory, files are processed and moved to dist
dist
— Compiled output directoryBefore continuing make sure you back up your existing code!
package.json
, config.json
, tsconfig.json
files and the .build
directory.npm start
And that's it!
Note You might want to use something like jsondiff for the config.json
if you have made changes.
Debug View looks like this:
Option One (Production Mode)
Run development in production
mode:
npm run dev:prod
Option Two
Create src/story/PassageReady.twee
and put the following code inside:
:: PassageReady
<<run DebugView.disable()>>
Option Three
Open src/story/Start.twee
and add the following code:
::StoryJavaScript[script];
predisplay["debug-disable"] = function (taskName) {
DebugView.disable();
};
Option Four
Open src/story/Start.twee
and add the following code:
::StoryJavaScript[script](function () {
Setting.addHeader("Debug Settings");
function initSettingDebug() {
Config.debug = settings.debug;
}
Setting.addToggle("debug", {
label: "Enable test/debug mode?",
default: false,
onInit: initSettingDebug,
onChange: function () {
initSettingDebug();
window.location.reload();
},
});
})();
You should initialize your story variables using the StoryInit
passage.
A good place to start is in src/story/Start.twee
:
:: StoryInit
<<set $health = 100>>
<<set $maxHealth = 100>>
:: Start
HP: <<= $health>> / <<= $maxHealth>>
Macros scripts and styles go into src/assets/vendor
To reference images and media at src/assets/media/<asset_path>
you'll use media/<asset_path>
. For eample:
src/assets/media/favicon.png
→ media/favicon.png
Here is an example in html (example
):
<link rel="icon" type="image/png" href="media/favicon.png" />
Paste the following snippet into src/head-content.html
:
<script
async
src="https://www.googletagmanager.com/gtag/js?id=YOUR_TAG_HERE"
></script>
and replace YOUR_TAG_HERE
with your Google Analytics ID (UA-########
).
I don't suggest doing this, but if you really want to... You need to modify all instances of src/assets/app
in two locations:
config.json
tsconfig.json
Good luck!
dist
directory.Starter Kit Resources
Official Resources
Third-Party Resources
We are grateful to these individuals for their ideas and contributions.
Licensed under the MIT License.