#coding support

The 100% Good ChoiceScript to Sugarcube Guide!

The 100% Good ChoiceScript to Sugarcube Guide is a coding guide meant for ChoiceScript creators looking to use the SugarCube format of Twine. It is meant as a quick start-up and comparison of the different commands and structures between the two formats, including explanations with examples.

The Guide is based on the ChoiceScript Wiki and covers all the necessary commands and informations required to make a ChoiceScript game, and how it translated in SugarCube in terms of formatting, plain code, and macro equivalence. It also includes resources to go further into the formats.

READ & DOWNLOAD THE GUIDE!

The Guide is sectioned into multiple sections:

The Differences between Twine/SugarCube and ChoiceScript

The Command Equivalences (or close substitutes)

The Creation of a New Project, and QoL functionalities (Stats, Saves, Achievements, Settings)

For further details on how the macros/markups/APIs should be used, check out my SugarCube Guide (as it goes into a lot more details). If you are looking for the Tweego Compiler Folder, see this post.

GITHUB REPO | RAISE AN ISSUE | TWINE RESOURCES TWEEGO | TEMPLATES | SUGARCUBE GUIDE

Twine® is an “an open-source tool for telling interactive, non-linear stories” originally created by Chris Klimas maintained in severaldifferentrepositories (Twinery.org). Twine is also a registered trademark of the Interactive Fiction Technology Foundation.

SugarCube is a free (gratis and libre) coding format for Twine/Twee created and maintained by TME.

This was the last step on the Update everything because SugarCube broke everything with the last update tour: the templates. As of today, all the templates are now compatible with SugarCube 2.37.3 (passage code + APIs!).

The changes also include some fixes in the explanations, as well as reformatting the interface (a bit). The whole log of all the edits can be found by clicking on the link below:

The older versions of these templates (2.36 compatible) have been archived on my GitHub. And as of today, any new template created for SugarCube will only be available for 2.37 (too many changes).

If you liked a/some template/s, consider sharing the following posts:

User Interface Template:

Simple Book

One Page (à-la-Chapbook)

Space/Tech Double Whammy

VN-lite RPG

Title Page

Code Template:

Settings

Character creator (+ Guide/Tips)

Hello person of the internet,

It is me again, your totally legit supplier of very good assets {100% GOOD!!! NO BUGS!!!}. I am back with a pretty useful file for you! This whole affair is still scam free and no bug included! Download another funky file to dive deeper into spaghetti SugarCube Code! Still in exchange for nothing {YES, THIS IS STILL 100% FREE!!!} but your love and adoration for my help. What a steal! 

Been wanting to include a Character Creator in your project but don't know where to start?

I PRESENT TO YOU THE...

The Character Creator Template!

50+ different traits, all the interactive basic SugarCube macros, extra QoL functionalities (random/pre-set) and many many annotated passages, with tips and advice. The template is purposefully too extensive for its own good.

A starting point for inspiration!

Itch.io Announcement - GitHub Repo - Rate on Itch.io - Neocities This template is free-to-use under the CC-BY license.

Hiya Anon,

Of course! Happy to help.

Yes, I'm familiar with the template, thought I hadn't noticed the update... It is now meant for more intermediate users, it seems.

The source code does provide what is needed to make it happen (which is essentially a custom macro in JavaScript, with some extra CSS to make it pretty). You will need to download the projectfiles.zip from the page, extract it, find the choices.js and choices.css files inside the src folder, and add the code to your project. You can also find examples of how the "<< choice_shown >>" macro is used in the story folder.

However, if you just want to make it look more like ChoiceScript as in rather than

you want

You will need to choose another SugarCube macro: << radiobutton >>. Essentially, code your radiobuttons for the choices (and wrap each of them in a < label> for accessibility), and wrap the whole in a < div> for the styling. Don't forget the button for confirmation!

< div class="choices"> < label><< radiobutton "$choice" "value" autocheck>> Value 1< /label> < label><< radiobutton "$choice" "value2" autocheck>> Value 2< /label> < label><< radiobutton "$choice" "value3" autocheck>> Value 3< /label> < /div> << button [[Next]]>> /* More code if necessary */ << /button>>

You will need to remove the spaces... Tumblr otherwise eats the code...

Then we move on to the StyleSheet:

.choices label { padding: 11px 8px 12px; display: block; border-color: #a9acaf; border-style: solid; border-width: 1px 1px 0px 1px; } .choices label:first-child { border-top-width: 1px; border-top-right-radius: 8px; border-top-left-radius: 8px; } .choices label:last-child { border-bottom-width: 1px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; }

That's for the radio button. We target the label, because it's the easiest and it takes into account the whole option block (radiobutton and text). The second and third code is to round the borders.

And if you want the button:

.macro-button { clear: both; display: block; width: 100%; font-size: 1.5em; font-weight: bolder; font-family: -apple-system, sans-serif; margin: 1em auto; color: #f7f4f1; background-color: #626160; border: none; border-radius: 0.5em; padding: 6px; }

And so you get:

As promised, here it is!

Hello person of the internet,

It is me again, your totally legit supplier of very good assets {100% GOOD!!! NO BUGS!!!}. I am back with another template for you! This whole affair is still scam free and no bug included! Download another funky folder to make your projects even more greater! A simple template, still in exchange for nothing {YES, THIS IS STILL 100% FREE!!!} but your love and adoration for my help. What a steal! 

I PRESENT TO YOU THE...

Settings Template!

This template encompasses all kinds of settings, from your basic font change (type, size, alignment, line height), to save settings (autosave, autoname), and even some accessibility settings (theme toggle, volume slider, animation toggle, notification toggle).

Comes with annotations/explanations for both the JavaScript, StyleSheet and passages.

Itch.io Announcement - GitHub Repo - Rate on Itch.io This template is free-to-use under the CC-BY license.

Template info drop:

HOW TO CHANGE THE IFID OF A TEMPLATE

and why it's important to do so when you are using templates (mine or others).

Hi Anon!

The bar on the template is static (because the width of the inner bar is set in the CSS with a set number (70% witdh).

There are multiple options here (you can see them in this other post), but the quickest way would be to add an attribute directive to link the relevant element to a specific variable (i.e. a special formatting to override the CSS).

For the template it would be this, where $var is the relevant tracked stat:

< div class="stat-bar" @style="'width: ' + $var + '%;'">

Some important stuff:

remove the space between < and div, it's just that Tumblr would eat the code otherwise

the single and double quotes are SUPER important in the order they are! (also make sure to change them to straight quote, I know Tumblr forces the curly version here...)

also change $var for whatever variable you want, as long as it never goes over 100 or below 0 in value!

And... that's it :P

Hope it helps!