# Ink Language Integration (/jsdoc/pixi-vn-ink)



<img alt="pixi-vn-cover-ink" src="https://github.com/user-attachments/assets/cc96d260-d909-4fa4-834e-85e4405b6dd1" width="1600" height="400" />

<p align="center">
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn-ink" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/v/@drincs/pixi-vn-ink?label=version" alt="npm version" /></a>
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn-ink" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/dm/@drincs/pixi-vn-ink" alt="npm downloads per month" /></a>
  <a target="_blank" href="https://www.jsdelivr.com/package/npm/@drincs/pixi-vn-ink" rel="noopener noreferrer nofollow"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/@drincs/pixi-vn-ink?logo=jsdeliver" /></a>
  <a href="https://www.npmjs.com/package/@drincs/pixi-vn-ink" rel="noopener noreferrer nofollow"><img alt="NPM License" src="https://img.shields.io/npm/l/@drincs/pixi-vn-ink" /></a>
  <a target="_blank" href="https://discord.gg/E95FZWakzp" rel="noopener noreferrer nofollow"><img alt="Discord" src="https://img.shields.io/discord/1263071210011496501?color=7289da&label=discord" /></a>
</p>

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

The ***ink* + Pixi’VN integration**, exploits the [inkjs](https://github.com/inkle/inkjs) and [PixiVNJson](https://github.com/DRincs-Productions/pixi-vn-json&#x29; libraries, to parse ***ink* code*&#x2A; and generate a Json that can be interpreted by Pixi’VN. So Javascript/Typescript and &#x2A;**ink**&#x2A; share the same storage and canvas, and it is also possible to launch &#x2A;**ink**&#x2A; labels (or knots) from Javascript/Typescript and vice versa. This allows you to use the best of both languages. You can use &#x2A;**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](https://www.inklestudios.com/ink/) to learn more about it.

Why use *ink* integration? [#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 [#installation]

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

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @drincs/pixi-vn-ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @drincs/pixi-vn-ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @drincs/pixi-vn-ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @drincs/pixi-vn-ink
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Start using *ink* in Pixi’VN [#start-using-ink-in-pixivn]

If you have not created a project yet then it is recommended to use the [template](https://pixi-vn.web.app/start/getting-started.html#project-initialization&#x29; to start your project with &#x2A;**ink***.

After installing the package you need to use the `importInkText()&#x60; function to import the ***ink* script** into your project.

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

importInkText([inkText, ...])
narration.callLabel(`start`, {});
```

```ink title="ink/story.ink"
=== start ===
Hello, world!
-> END
```

```ts tab="ink.d.ts"
declare module "*.ink" {
  const value: string;
  export default value;
}
```
