aframe-ink-component v1.0.2
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-componentThen require and use.
require('aframe');
require('aframe-ink-component');