inkjs
This is a javascript port of inkle's ink, a scripting language for writing interactive narrative. Please have a look at the demo!
inkjs should support pretty much everything the original version does. If you find any bugs, please report them here! The code has zero dependencies and it should work in node and all evergreen browsers.
Getting started browser version
Installation
Grab the most convenient format for you from the release page. If in doubt, use the iife version.
It's also available on bower: bower install inkjs
Loading inkjs
If you're using the IIFE version, add the script to your page and it will create aglobal object called inkjs
. If you're using the AMD/UMD version, you need to require the package using your prefered mechanism.
The inkjs
has a property called Story
. This is the main class we will interact with.
Loading a json file
First you need to turn your ink file into a json file as described here. You can then load the json file using an ajax request. You can use jquery or a simple fetch:
fetch('path/to/ink_file.json')
.then(function(response){
return response.text();
})
.then(function(ink){
//ink now contains your ink_file.json
});
Please note that if you are viewing your html page using the file://
protocol (ie. you just double clicked the html file), you may run into CORS problems. In that case, you may want to load it using an html file input or directly embed the json into your page.
Starting a story
Bringing it all together, we get something like this:
fetch('path/to/ink_file.json')
.then(function(response){
return response.text();
})
.then(function(ink){
//create a story
var inkStory = new inkjs.Story(ink);
//run it
var content = inkStory.ContinueMaximally();
//add the content on the page
document.querySelector('#display').html = content;
//etc
});
From there on, you can follow the official guide. All functions are named exactly the same.
For an example implementation, you can refer to the source code of the demo page here.
Getting started node version
Installation
Install using npm: npm install inkjs
.
Loading inkjs
Require the module: var Story = require('inkjs').Story;
.
Loading a json file
You can load the json file using a simple call to require
:
var json = require('./ink_file.json');
You can also load it using fs
. In that case, please note that inklecate outputs a json file encoded with BOM, and node isn't very good at handling that.
var fs = require('fs');
var json = fs.readFileSync('./ink_file.json', 'UTF-8').replace(/^\uFEFF/, '');//strips the BOM
Starting a story
Now that you have a Story
object and a json file, it's time to bring it all together:
var inkStory = new Story(json);
console.log(inkStory.ContinueMaximally());
//etc
From there on, you can follow the official guide. All functions are named exactly the same.
For an example implementation, you can refer to the source code of the test file here.
Compatibility with older node and browser versions
Generally speaking, everything should work just fine on any modern-ish browser and in node v4 or above. The only thing you should be careful about is if you're getting and setting ink variables. In anything that does not support Proxies (basically node v5, IE 11, Safari 9 and everything below), you can't directly read and write variables to the story state. Instead you will have to use the $
function:
_inkStory.variablesState.$("player_health", 100);
var health = _inkStory.variablesState.$("player_health");