aframe-ink-component
Advanced tools
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.
ink componentThis 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.
| 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 |
| 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 |
| Name | Data | Description |
|---|---|---|
| continue | choiceIndex | Continues the story with the optional choice index. |
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>
Install via npm:
npm install aframe-ink-component
Then require and use.
require('aframe');
require('aframe-ink-component');
FAQs
A-Frame component for Inkle's Ink game scripting language
We found that aframe-ink-component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.