Bitsy and Tracery sitting in a tree...

B. O. D. G. I. N. G.

A few people have asked how I integrated Tracery with Bitsy for Silence would be Better - but honestly 'integrated' is overstating it; 'badly wedged together' would be more like it.

There are several reasons for this:

• I don't actually know Javascript.
• I'm lazy.
• I had a deadline both in terms of the game jam, and also because it was my anniversary weekend and "yeah love, just let me learn Javascript first" wasn't going to cut it.
• Again, the lazy thing.

However, in case it of any use, here's what I did:

1) Finish the Bitsy bit first

Since we're going to be messing around with the file that Bitsy produces, it's going to be much easier if that's completed first - changing it later will be a bit of a pain.

At this stage, all you need to do differently to a regular Bitsy game is set your sprite dialogs to a Tracery token instead - so rather than your sprite having the dialog "I'm a cat", you could put "I'm a #animal#". The #...# tells Tracery that this needs to be swapped out with one of a list of animals that we'll define later. (Pro Tracery tip: the proper way to do that string is actually "I'm #animal.a#" - that lets Tracery put the correct a/an on the front).

When you're done with Bitsy, download the game file to a new folder somewhere. I rename it to index.html at this point.

2) Start on your Tracery Grammar

The grammar is a JSON dataset that defines expansions for your tokens, e.g.

"animal":["dog", "cat", "republican"]

There are online editors for Tracery grammars which let you test as you go (see http://tracery.io/).

You don't need to finish it now - but it help if you've got a starting point so that you can test the integration.

3) Do the Actual Bodging

a) Libraries

Grab the Tracery library and the jQuery library (Tracery seems to need jQuery) and plonk them in your game's folder.

Open your Bitsy HTML and source the libraries at the start of the Scripts, like so:

<!-- SCRIPTS -->
<!-- Extra includes for Tracery -->
<script defer src="./jquery_lib/jquery-3.2.1.min.js"></script>
<script defer src="./tracery_lib/tracery.js"></script>

(Should be around line 35). Note there's also a minified tracery library available, which a better person would have used instead.

b) Set up startDialog to Tracery Flatten your Dialog

Update: Maxime Monast points out that this section no longer works with Bitsy 4.0+ (the downside of hacking code that's still being actively developed). Happily, he also provided this solution:

Since version 4.0:

Stick this at the top of the this.AddText = function(textStr,onFinishHandler) function:

    //tracery expand the text
    textStr = grammar.flatten(textStr).replace(/\s+/g, ' ');

Of course, there's a chance that version 5.0 (or whatever) will break this as well; the upshot is - look for a place where the dialog text has been retrieved, but not yet displayed, and flatten it.

The flatten turns "#animal#" into "cat" - at least it will when we've included the grammar. The replace just gets rid of superfluous spaces - you don't need it unless you need it (my dubstep generating grammar churned out extra spaces).

c) Include the Grammar

Copy your JSON structure from the Tracery editor - we need to include this in the game code so that it's available to startDialog. The proper way to do this would be to have it read in from an external file, or at least in a properly scoped variable.

But as I say, this is a bodge job, so I chucked it directly into load_game as a (hiss) global variable.

function load_game(game_data) { 
    curGameData = game_data; //remember the current game (used to reset the game)
    parseWorld(game_data);
    renderImages();
  
    //tracery grammar - yes, global, because I'm trash
    grammar = tracery.createGrammar({ 
              "animal":["dog", "cat", "republican"]
              });

You should now be able to run your game file and see Tracery working. Then just keep copy and pasting in the JSON structure as you improve it (add more animals, etc).

When you come to upload to itch.io you need to zip up your game file and the libraries (note that your html game file should be named index.html not mygame.html).

OK, hope that was useful, Remember, everything is easy if you don't mind doing it badly!

Ben.