LogoPixi’VN

Ink Language Integration

pixi-vn-cover-ink

Pixi’VN gives you the ability to write your own narrative using ink, a scripting language for writing interactive narrative.

The ink + Pixi’VN integration, exploits the inkjs and PixiVNJson libraries, to parse ink code and generate a Json that can be interpreted by Pixi’VN. So Javascript/Typescript and ink share the same storage and canvas, and it is also possible to launch ink labels (or knots) from Javascript/Typescript and vice versa. This allows you to use the best of both languages. You can use ink to write the narration, while using Javascript/Typescript to create minigames or complex animations.

What is ink?

ink is a scripting language for writing interactive narrative. It is used in games like 80 Days, Heaven's Vault, and Sorcery! to create branching stories.

This language is very simple to learn. Go on ink website to learn more about it.

Why use ink integration?

Programming a game narrative in Javascript/Typescript has the advantage of having total development freedom, but the disadvantage is that it slows down the writing of a narrative (it makes you write a lot of code).

Installation

To install the package, run the following command in your project:

npm install @drincs/pixi-vn-ink

Start using ink in Pixi’VN

If you have not created a project yet then it is recommended to use the template to start your project with ink.

After installing the package you need to use the importInkText() function to import the ink script into your project.

main.ts
import { narration } from "@drincs/pixi-vn";
import { importInkText } from '@drincs/pixi-vn-ink'

importInkText([inkText, ...])
narration.callLabel(`start`, {});
file_type_ink
ink/story.ink
=== start ===
Hello, world!
-> END
declare module "*.ink" {
  const value: string;
  export default value;
}

Agent Skills

This package ships a set of Agent Skills that teach AI coding assistants (like Claude Code) the full ink language plus every Pixi'VN-specific integration detail (hashtag commands, importInkText, storage mapping, and every deliberate difference from native ink). Unlike @drincs/pixi-vn's skill set, where each skill can be installed independently, these are meant to travel together — install all of them at once with:

npx skills add DRincs-Productions/pixi-vn-ink --all

This installs every skill below:

  • getting-started — installation, the Vite plugin, dev-server debugging, translation files, and core ink syntax as used in Pixi'VN
  • characters — dialogue attribution, name substitution, emotions
  • input# request input prompts
  • pause-continue# pause and <># continue
  • markup — Markdown/HTML/CSS in dialogue text
  • canvas — every canvas hashtag command
  • sound — every sound hashtag command
  • assets# load/# lazyload
  • text-replacement[key] substitution
  • hashtag-commands — writing a custom hashtag command instead of an ink function
  • migration — upgrading an existing project to the current version

On this page