Giter Site home page Giter Site logo

azazil / inkjs Goto Github PK

View Code? Open in Web Editor NEW

This project forked from y-lohse/inkjs

0.0 1.0 0.0 8.99 MB

A javascript port of inkle's ink scripting language.

Home Page: http://www.inklestudios.com/ink/

License: MIT License

JavaScript 27.40% HTML 0.29% CSS 0.30% TypeScript 72.01%

inkjs's Introduction

inkjs

Travis npm codecov

This is a javascript port of inkle's ink, a scripting language for writing interactive narrative.

inkjs is fully compatible with the original version, has zero dependency and works in all browsers and node.js. Please have a look at the demo!

Table of content

Installation

Grab the ink.js file from the latest release.

For npm users, install with npm install inkjs --save. Or for bower, bower install inkjs.
There's a (lighter) ES2015 version available if you only target platforms with basic ES 2015 support.
Both ink.js and ink-es2015.js use Universal Module Definition (UMD), so you can use it with RequireJS or basically any other module loader. If you don't know what any of this means, don't worry, just include ink.js with a regular script tag and everything will work fine.

Quickstart

The simplest way to get started with inkjs is to use the serverless boilerplate in the templates folder. Replace the placeholder story in story.js with your own and open index.html!

Here's what happens behind the scenes: inkjs gives you access to a global object named inkjs which has a property called Story. This is the main class we interact with.

We simply create a new story by calling var story = new inkjs.Story(storyContent); โ€” the variable storyContent is defined in the story.js file. After that, we can use story.Continue() and story.currentChoices as described in the the official documentation.

Working with a JSON file

If you frequently need to update your story, pasting the content into story.js will probably get tedious. So another option is to dynamically load the JSON file for your story. Unfortunately, your browser won't let you do that because of CORS policy, which means you need a web server to do this. You could do this without much hassle with node.js or python for example.

Once the server is running, use the other boilerplate and place your story content inside story.json. Behind the scenes, the only difference is that we load the JSON file via ajax before creating the story:

fetch('story.json')
.then(function(response){
	return response.text();
})
.then(function(storyContent){
	story = new inkjs.Story(storyContent);
	continueStory();
});

Using node.js

You can find some boilerplate code for node.js here.

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 documentation.

Differences with the C# API

There are a few very minor API differences between ink C# and inkjs:

On platforms that do not support ES2015 Proxies (basically node.js 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);
//instead of _inkStory.variablesState["player_health"] = 100;

var health = _inkStory.variablesState.$("player_health");
//instead of var health = _inkStory.variablesState["player_health"];

Getting the output text when calling EvaluateFunction

EvaluateFunction() lets you evaluate an ink function from within your javascript. The "normal" call is the same than in C#:

var result = EvaluateFunction("my_ink_function", ["arg1", "arg2"]);
//result is the return value of my_ink_function("arg1", "arg2")

However, if you also wish to retrieve the text that my_ink_function output, you need to call itlike this:

var result = EvaluateFunction("my_ink_function", ["arg1", "arg2"], true);
//now result is an object with two properties:
// result.returned is the return value of my_ink_function("arg1", "arg2")
// result.output is the text that was written to the output while the function was evaluated

inkjs's People

Contributors

chromy avatar ephread avatar erbridge avatar hammster avatar joethephish avatar joningold avatar leereilly avatar lptech1024 avatar manuq avatar michael-badrobotgames avatar nqnstudios avatar pineapplemachine avatar renovate-bot avatar renovate[bot] avatar rokasvaitkevicius avatar russellquinn avatar y-lohse avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.