Change font face and size in Twine with Sugarcue

- Posted in Coding by

Thanks to Josh Grams, I now understand how to set up players/readers of my twines with the ability to change font face and font size. Below I link to the scripts you need to drop, respectively, into the javascript and stylesheet special passages in the desktop Twine 2.10.0 app. Here is the zip containing the needed JS and CSS. I host a demo of this here and here, and mention it in my Twine Tidbits on the local copy of my blog.

A sugarcube widget just saved me 12 Kb

- Posted in Coding by

I'm proud of a programming accomplishment I've made: I've been developing an introductory tutorial series covering Twine 2.10.0 and Sugarcube 2.37.3 — for an interested coworker.

I've been naming the tutorial passages after this convention:

TwineLesson001Passage001
TwineLesson001Passage002
etc.

Well, I had been using a block of Twinescript like the following in order to implement some cute back/forward navigation icons (shown below):

But I got to thinking to myself, "Self, there has to be a way to use a widget or function so that I'm not pasting the equivalent of a small paragraph in every single tutorial passage, just to implement this."

It took me awhile to incrementally write code, test, repeat to get the above. Just three lessons into a tutorial series (weighing in at 51 passages), my Twee3 file was 39 Kb. Using the above widget allowed me to trim that down to 27 Kb.

Implementation of menu system in SugarCube 2

- Posted in Coding by

The preferred way to implement menus in SugarCube 2 is to add the following code to your javascript section:

/* Trigger the following code at the start of navigation to a new passage. */
$(document).on(":passagestart", function (event) {
    /* Make sure the current passage doesn't have a "noreturn" tag. */
    if (!tags().includes("noreturn")) {
        /* If it doesn't, then set $return to the current passage name. */
        State.variables.return = passage();
    }
});

And then, tag any menu passages (however deeply nested they may be) with 'noreturn', adding the following link to those menu passages:

<<link "Return" $return>><</link>>