aframe-ink-component

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.

##

$3

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

$3

#### Browser

Install and use by directly including the browser files:

``html










`

#### npm

Install via npm:

`bash
npm install aframe-ink-component
`

Then require and use.

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