Friday, July 13, 2018

Porting Yarn to Electron and adding some cool features to it

Yarn is a tiny wonderful open source editor for non linear dialogue in games. It is written in html5 and exports the data in json file format- to be used with another library called 'Yarn spinner' in Untity3d games. Alternatively it can be used in html5 games with another dialogue file interpret library called 'bondage.js'. Yarn has had a stale development over the last two years- with a handful updates from it's community. More of the updates seem to have gone to yarn spinner. What attracted me initially to it is a kickstarter game that I backed a couple of years ago- called 'Night in the Woods'. Yarn and Yarn spinner were used to create it. Yarn itself is very sleek and user friendly- really clean interface, but it lacks some usability features that make it a little harder for new users to learn.
After looking at it's source code I decided that I want to try and incorporate it inside gdevelop - in the same way I embedded piskel earlier this year. It would really empower gdevelop 5's newIde for easy creation of story based games - rpg games, adventure games, visual novels- all that jazz. Gdevelop5 in that case would actually have an advantage over unity3d- as yarn itself and the library to parse yarn story files (bondage.js) can be integrated with the gdevelop5 and work out of the box in a very user friendly way.

In order for that to happen however, Yarn needs to be updated to use electron and get some usability improvements. This time I had to actually change the software I am embedding myself! Luckily it's source code was fairly easy to understand and nicely structured enough for me to dig in. It took me only a couple of hours to port it to electron. The main parts that needed porting were really file i/o and the way some libraries are used. The port to electron also fixed some old issues- such as the inability to have two instances of yarn open.

I really wanted the official yarn git to approve my port and make it the main development branch, so I submitted my port to them. The maintainer approved it but is for now keeping it a separate branch
and here is my Pull Request:

I also took the time to add a number of features that were requested before and I thought would really make it much more user friendly!

  • Ability to easily create links to other existing nodes via a new helper menu:(addressing #34)

  • Ability to test dialogue via e new "Run" menu (using bondage.js and with support to render bbcode)(addressing #29)

  • file drag and drop (including support for dropping multiple files)(addressing #32)

  • Automatically create New Nodes from [[new]] and [[new|choice]] - if no nodes exist for them (addressing #27)

  • Ability to run more than one instance of Yarn (addressing #59 )
  • Lots of fixes and new key bindings 
Since my pull request was approved, its electron port has seen fixes from a few other users- this makes me feel confident about the future of Yarn.
For that reason the next stage for me now is to look into integrating it into gdevelop 5. That begins with writing an extension for gdevelop that exposes the functionality on bondage.js to the event sheet. From there on putting yarn itself in gdevelop would be very easy. I already have that sorted for another personal project that is using electron.

In any case, if I succeed in getting these two to work as one and get it merged into gdevelop5, expect to see another post with a demo example game and a tutorial on how to use gdevelop to create non linear dialogue type interactions in your html5 games. :)

No comments:

Post a Comment