aframe-ink-component

This component eases the integration of Inkle's Ink game scripting language in A-Frame. Note that you still have to learn the Ink scripting language in order to make serious use of this component.

Supports A-Frame 0.9.2.

API

`ink` component

This component wraps the InkJS library, for running Ink JSON files in the browser, in a few lines of code.

It goes very well with the aframe-state-component to synchronise the state of the InkJS runtime and the state in the A-Frame application, because there should be only one single source of truth in your application. That means when you keep variables in Ink they are automatically propagated to the registered application's state and vice versa. The mapping of the state variables is done by their exact name. So be careful to name variables accordingly in the Ink script and in your initialState object!

The component must be attached to the a-scene entity.

Schema

Property	Description	Default Value
src	Asset link to the story JSON file produced by the Inky editor.	`undefined`
choice	The Ink choice object to continue the storyline. Must be updated on each continuation of the story. Otherwise use the `continue` API.	`undefined`
sync	Whether to sync state variables to Ink's own state machine using the stateupdate event.	`false`

Events

Name	Data	Description
ink-loaded	`{ story }`	Fired when the Ink story has been loaded. The InkJS instance to programmatically work with the story is passed as the event data.
ink-continue	`{text, tags, choices }`	Fired when the Ink story has continued. The event data contains the current text and tags list (may be empty) and the available choices object list (may be empty). The selected choice object must be either passed to the `continue` API method or set on the choice attribute of the component to continue the storyline.
ink-state-variable	`{ variable: value }`	Fired when the Ink story state variable has changed

API

Name	Data	Description
continue	choiceIndex	Continues the story with the optional choice index.

Installation

Browser

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> 
  <script src="https://unpkg.com/aframe-ink-component/dist/aframe-ink-component.min.js"></script> 
</head>
 
<body>
  <a-scene ink="src: url('assets/story.json')">
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-ink-component

Then require and use.

require('aframe');
require('aframe-ink-component');

aframe-ink-component