Sugarcube 2: where to keep all my widgets?

[Aramos]

Hi there, I’m a programmer but I’m a beginner at Twine, writing my first story. I wanted to keep “variables” for styles of text. For instance: my character’s dialogue (only this character’s dialogue) should be colored red and the text would be cursive. I found I could achieve this by using a widget:

<<widget “MainChar”>>//$args[0]//<>

I would then use the widget like this:

<<MainChar “Uhm… hello?”>>

I figured storing this widget in my Starting Passage would make the most sense and it gets the job done: I can use this widget from any passage… but I can’t test single passages as the widget’s would send an error (because I didn’t “run” the Starting Passage).

Is there a place where I can keep all my text styles so that I can test any passage without running into the mentioned problem?

Also: is there a better way to achieve these styles, without widgets?

Thanks a lot.

[HiEv]

Widgets have to be in a non-story non-special passage with a “widget” tag. I usually just make a passage called “Global Widgets”, give it “widget” and “nobr” tags, and put all of my widgets there.

However, if you want to style a chunk of text, then creating a macro is usually better, since you can put the contents within the macro, rather than passing it as a parameter. To do that you’d put something like this in your JavaScript section:

Macro.add('i', {
	skipArgs : true,
	tags     : null,
	handler  : function () {
		$(this.output).wiki("//<span class='" + this.payload[0].args.full + "'>" + this.payload[0].contents + "</span>//");
	}
});

And we make a “red” class in your Stylesheet section:

.red {
	color: red;
}

And now you can just do something like this in your story:

<<i red>>Testing<</i>>

That will write the word “Testing” in italics using the “red” class styling you set in your Stylesheet section. With that you can just make a class in your Stylesheet section for each character, and then you’d just do:

<<i MC>>Main character text<</i>>

for the main character, etc…

The above should give you the basics of how to use a macro so you can build your own if you want yours to work differently.

Hope that helps!

[Aramos]

Thanks HiEv! I’m looking into Macro documentation and they seem like the way to go.

Using que “nobr” tag on widgets in a non-special passage would be the equivalent of keeping all my widgets in the StoryInit passage? I read about that “special” passage last night, tried it and it seems to do the trick (I can test single passages and they can all access the widgets defined in StoryInit).

As a beginner I’m not sure where to go and learn basics like this. I’ve been digging in the SugarCube 2.0 documentation but it seems more like a reference kind of document. Do you know of any place where I can learn about Twine basics (text rather than video, if possible)?
I’m especially confused as to the relationship between the Javascript code, the CSS file and the Stylesheet file. What should all those files contain and is there a relation between them?

Thanks a lot again.

[HiEv]

The “nobr” tag just prevents line breaks in the passage it’s put on, unless you force a line break using something like the HTML <br> element or the like. In order to keep your widget code clean and readable, it’s usually easier to just use the “nobr” tag so that you don’t have to worry about tons of line breaks when you call the widget.

Widgets should not be put in any special passages, as noted in the <<widget>> macro documentation. So you should not put widgets in your StoryInit special passage.

For learning Twine/SugarCube, generally speaking, I’d recommend starting by skimming through all of the SugarCube documentation, just so you have an idea of what all it can do, and keep it bookmarked. You don’t need to memorize or understand all of it immediately, you just need to remember enough that you can recognize things in the documentation which might be useful later on.

Next, if there are any Twine games that you like or have effects, features, or UI elements that you like, you can import them into Twine to take a look at them to see how they work, and then adapt that code to your own project. (Note: If it’s a Twine 1 game then you’ll need to convert it to a Twine 2 game in order to open it in Twine 2. Use the “Twine 1 compiled HTML to Twine 2 archive converter” for that.)

For other resources, Chapel has collected a ton of Twine Resources here. There’s also the r/twinegames subreddit (where I’m one of the moderators). If you use Discord, there’s also the Twine Discord server, if you want to talk with people live. And finally, Google is your friend , you can find lots of helpful info just by searching around the net (especially at the Stack Overflow site).

Regarding the JavaScript section, it’s for putting any JavaScript code that you want to have executed when the game first starts, or to put any functions that you want to be able to use during your game. SugarCube and JavaScript code are able to be combined within passages, so don’t think that the stuff you can do is limited to only what’s in the SugarCube documentation. For example, you can use the JavaScript alert() method to display an alert in a passage like this:

<<run alert("Some alert message text.")>>

The “Stylesheet” section, on the other hand, is where you put your CSS code, so they’re not like two separate files or anything. You just put any CSS styling you want to use in the Stylesheet section.

As for the relationship between them, CSS affects the appearance of the game’s UI (User Interface), the story passages generally determine what HTML and other content is displayed, and the JavaScript is generally for manipulating data behind the scenes. That said, you can use JavaScript to manipulate both the HTML and CSS styling on the screen if you want to. Often that’s most easily accomplished using jQuery, which is included with SugarCube.

Any code you see which uses $(something) or jQuery(something) that code is usually using jQuery to examine or modify elements on the screen. SugarCube extends jQuery a bit with its own jQuery methods.

Hope that helps!

[Aramos]

Thank you so much for the in-depth explanation, I’ll make sure to check out all those places. I also understand the overall Twine ecosystem a bit more. Thanks again and have a nice day!