idea: ability to parse ink files

blurymind commented 2 months ago

inkle's ink story syntax is a popular and battle tested programming language for crafting stories. https://github.com/inkle/ink

They have their own official editor, but also unofficially you can edit ink stories in yarnclassic https://www.inklestudios.com/ink/ https://github.com/blurymind/YarnClassic

for js, there is a library that provides both a parser and an interpreter https://github.com/y-lohse/inkjs

my angle here is to potentially write an addon for yarn classic that fires up the ink story you are editing in it inside pixi-vn.

I would need to fork pixi-vn and use it for the rendering side of things, while using inkjs for the story parsing in the runtime.

One idea is to be able to have that directly in pixi-vn and not make any forks. Just add the ability to load an ink file into it to declare the story - instead of using js.

Just an idea. If too big of a leap, maybe should be its own engine

blurymind commented 1 month ago

ink could be pixi-vn's equivalent to rpy files?

BlackRam-oss commented 1 month ago

hello, sorry for the delay. yes it is absolutely a very interesting solution. I didn't know inkle, I would have liked to discover it before.

I have to study it for a moment to understand how it works. do you already have an idea on how it could be done? do you want to help?

BlackRam-oss commented 1 month ago

Basically the goal would be to be able to write the narration with ink files. correct?

I have the following doubts:

Besides the narration ink can manage something else? like the interaction with the canvas
Is it possible to say on ink that a certain character is speaking? If so you should find a way to connect that character with a character created with pixi-vn
On ink is there a way to manage the narration with "label" and start them via "Jump" and "call" like in renpy?
is there a way to convert the single sentences written with ink into Markdown

blurymind commented 1 month ago

Hi thank you for the interest in exploring this idea :)

Basically the way I am thinking this could work - you set up characters in pixi-vn style - with js. Pixi-vn handles save state, menus, rendering, resources, etc. All story variables can live in inkjs' runtime as it parses the story, but pixi-vn can handle their persistence (load/save game mechanism). That way you can set and read variables directly using the ink syntax and ink files. You dont even need to leave them.

When you write an ink file you use this syntax

amy: Hi my name is Amy
tom happy: And I am Tom
and so the story begun
// goto scene2

Inkjs parses the story, then sends it to pixi-vn to render.

When rendering it, pixivn checks if the character amy or tom exists (were they set up) and if so, it strips their label from the text, it styles the text in their color and shows their avatar if one is available

Hi my name is Amy // shows with amy's avatar and color
And I am Tom // shows with tom's avatar and color
and so the story begun

when it reaches the commented line, ink basically sends a command with a parameter to pixi-vn to tell it to change the scene. A bridge layer must be established for built in commands such as goto. But the user should also be allowed to register custom commands..

From there on you can have a template of sorts that allows people who dont even know alot of js to very quickly setup a visual novel and do the majority of interactive story writing in ink syntax. Ink was designed from the ground up for interactive storytelling and has been used in a lot of successful games published on steam. Having it could help get more users to pixi-vn imo..

see more on its syntax https://github.com/inkle/ink/blob/master/Documentation/WritingWithInk.md

BlackRam-oss commented 1 month ago

Yes, use ink, is a great idea.

By doing some tests I confirm that it is possible to implement it.

My implementation idea is to create a new library "pixi-vn-ink" that allows you to use .ink files using the "inkjs" library.

inkjs has a function inside it to be able to convert a .ink file into a json element. From this json file it is possible to export all the information we need.

"pixi-vn-ink" will take care of reading that json file and converting it into a model readable by pixi vn.

I have already created a repo and a branch to implement this library: https://github.com/DRincs-Productions/pixi-vn-ink/issues/1

what is missing is the function "getJsonLabels" that converts the json created by inkjs of the model readable by pixi-vn.

Would you like to help implement this function? in the read me there is all the information to download and run the project

blurymind commented 1 month ago

Thanks for looking into realising this. Your understanding of pixi-vn's codebase is much greater than anyone's so I am very happy to see you give it a go. I will give it a spin after work :D

Yes inkjs has a way of parsing ink files into json. My interest is in having inkjs handle the runtime part as well, so it doesnt have to be re-implemented by pixi-vn. The runtime has things such as inline variables being used to display conditional text, conditional branch jumping, user choices, randomisation, etc. There is a lot of functionality which would be better off handled by inkjs than converted to pixivn imo.

there is a demo here https://yannick-lohse.fr/inkjs/

you can also see more elaborate ink files https://github.com/inkle/the-intercept/blob/master/Assets/Ink/TheIntercept.ink

BlackRam-oss commented 1 month ago

I understand, the only thing is that I don't want inkjs to replace the current pixi vn functions. I would like to be able to use both pixi vn functions, but also .ink files in the same project, sharing the canvas and variables. I don't know if with the implementation you are thinking of it can be achieved.

blurymind commented 1 month ago

it would be nice if there is some sort of a two way bridge between them, where ink files can trigger pixivn commands and vise-versa - pxivn can jump to different dialog branches, change variables ink uses and so on.

It will need to somehow save and load ink state.

I think that since you understand the engine much better than me, you are in a much better position to make decisions as to how it would be implemented :)

BlackRam-oss commented 1 month ago

Exactly that's the goal I'd like to achieve. Let me know if you need changes on pixi-nv.

I don't know how inkjs works well and apart from converting the inkjs json into a model understandable to pixi-vn I don't know what else to do. So on this part I think I'll rely on you.

BlackRam-oss commented 1 month ago

@blurymind Hi, I have completed a first implementation. Not all "ink elements" have been implemented

You can find all the information here: https://github.com/DRincs-Productions/pixi-vn/wiki/ink (You have edit access if you want to improve the wiki)

I also created a template where you can test the library: https://github.com/DRincs-Productions/pixi-vn-react-ink-template Edit the start.ink file to try

Could you also tell me which missing points in pixi-vn + ink are more priority in your opinion?

blurymind commented 1 month ago

Hi, thank you for working on this! I am in the process of implementing a sort of a playgorund feature for YarnEditor, which would in theory allow it to load pixi-vn and receive ink authored data from yarn itself. You will then be able to author the game and playtest it without leaving the editor. You can even share your game demo via a simple link. Yarn can already playtest ink stories btw, but it is very primitive - text only.

Here you can see it loading a pixijs demo https://blurymind.github.io/YarnClassic/?gistPlugins=2ff124dc94f936e8f7d96632f559aecb&pluginFile=yarn-output-pixi-bunnies.js&mode=test

still very much WIP and buggy, but that is the idea anyways. Ability to hook up pixi-vn with yarn editor and directly author and playtest visual novels in yarn editor. The user will be able to write the story in yarn and set up pixi-vn also directly in yarn - using its built in javascript ace-editor. It should make it easy to create quick demos that people can interact with

I still need to figure out resource management, but it is getting there.

Btw is pixi-vn hosted on some url I can directly import it from? You can see in the edit tab of the demo i linked to how I import pixijs via a modules parameter

BlackRam-oss commented 1 month ago

that's awesome.

(I'm sure I understand the question) Then find the "labels" of the example that is executed by pixi-vn here: https://github.com/DRincs-Productions/pixi-vn/tree/main/src/labels Corresponds to: https://drincs-productions.itch.io/pixi-vn

But consider that I was going to create another example of narration to try and add to the templates as an example. So, if you want, if you create a small example narration I could reuse it and save some time.

Also keep in mind that you can't use PixiJS "natively" you should use PixiVN methods, can this cause problems?

One more thing. keep in mind that to use Ink, I transformed the ink file into a PixiVNJson Element, which will be introduced in pixi-vn.

Soon I also wanted a function to convert a PixiVNJson element to an ink file. Same thing goes for renpy. (I don't know how the editor works) So you could use PixiVNJson in the editor.

DRincs-Productions / pixi-vn

idea: ability to parse ink files #161