#the 100% Good Twine SugarCube Guide

[manonamora-if]

The 100% Good Twine SugarCube Guide!

NOTE: while the Guide is in its complete form, it will be updated when SugarCube 2 updates (or if I spot a typo/error).

This SugarCube Guide was create as an alternative to the official documentation, providing a comprehensive and wide look over the use of Twine, particularly the SugarCube format.

The Guide is compartmentalised in four categories:

The Basics: or the absolute basics to start with SugarCube No need for extra knowledge. Just the base needed to make something.

The Basics+: adding interactivity, and creating a fully rounded IF game May require a bit of CSS knowledge (formatting rules)

Intermediate Use: adding more customisation and complex code Will probably require some CSS knowledge, and maybe some JavaScript

Advanced More (incomplete): the most complex macros and APIs Will surely require some JavaScript/jQuery knowledge

Each category explains a multitude of aspects of the format, tailored to a specific level of the user. More simpler explanations and examples are available in earlier chapters, compared to the later ones.

If something is unclear, you found a mistake, you would like more examples in the guide, or would like a feature covered, let me know!

The Guide currently covers all macros (as of SugarCube v.2.36.1*), all functions and methods, and APIs. It touches upon the use of HTML, CSS, JavaScript and jQuery, when relevant. It also discusses aspects of accessibility. *In case of format update, this Guide will make relevant edits.

The Guides also provides a list of further resources, for the different coding languages (SugarCube, HTML, CSS, JavaScript, jQuery).

VIEW OR DOWNLOAD THE GUIDE!!!!

#the 100% Good Twine SugarCube Guide #template #templates #guide #coding in twine #twine #coding #HTML #JavaScript #CSS #macros #interactive fiction #sugarcube #interactive games

[writing-if]

Masterlist for Coding

Don't mind me, just getting this coding master list ready ahead of time to make it easier to keep this blog organized! I've already got a few ideas on some things I want to share :) Come across something incorrect? Let me know, please!

Oh - if you got tagged in this list, just ignore me, and sorry for the bother!

Getting Started

Pros & Cons: ChoiceScript vs Twine - coming soon :)

Introduction to CScript

Introduction to ChoiceScript

Commands for ChoiceScript

Text Editor Recommendations - coming soon :)

How to Hide a Choice Based on a Variable

Variables

Setting up Variables for Character Creation (name, pronouns, hair, eyes, etc) - coming soon :)

Introduction to Twine

Twine Cookbook

Twine for Brower (Chromebook) or Desktop Download

Sugarcube Documenation

How to Approach Character Creation - coming soon :)

Templates (I believe all of these are for SugarCube)

Twine Template (mobile friendly) by Vahnya, @outoftheblue-if

Twine Template II by Vahnya, @outoftheblue-if

Sugarcube Template by @nyehilismwriting

Twine Sugarcube Template by @nyehilismwriting

A Quick Guide to Character Pages by @gamesbyalbie

Twine Sugarcube Template by @cerberus-writes

100% Good Twine Sugarcube Template @manonamora-if

Twine Sugarcube 2 Template by a.w. morgan

Variables and Choices

Setting up Variables - coming soon :)

Coding Cycling Choices (where the player clicks to change an option) - coming soon :)

UI, CSS, and Theme-Related Things

How to Add Images to Twine (local and online) - coming soon :)

CSS Chart and Keywords (great to reference when changing colors in your UI)

Google Fonts (download a free font to match your game's theme and/or for accessibility)

Canva - has free and paid assets that you can use

IF Authors / Writers / Coders (AKA Wizard Guru Extraordinaires)

Vahnya - @outoftheblue-if

Cerberus Writes - @cerberus-writes

Nyehilism- @nyehilismwriting

Albie - @gamesbyalbie

Manon - @manonamora-if

idrellegames - @idrellegames

#writing-if #masterlist #twine #cscript #twine sugarcube #choicescript #interactive fiction #if resources

[petiolata]

Ohh in regards to SugarCube, i can Recommend "The 100% Good Twine SugarCube Guide!" (Yes it's called that) which can be found on Itch.io, made by https://www.tumblr.com/manonamora-if this is a link to the Post about it on manonamora's Tumblr https://www.tumblr.com/manonamora-if/721643170523381760/the-100-85-good-twine-sugarcube-guide?source=share

Kind Regards Aurora

Thank you kindly anon!

#anon kindness #twine #twinery #gamedev resources #sugarcube #asks

[idrellegames]

Hi so im learning twine/sugarcube and ive been using your guides but i am still super confused on how to make stats. Like the two main ones im using are chaos and control but whenever i put them into the stat page and playtest it i literally just see the words no bar measuring them or anything. Sorry if this is a dymb question,

Not a silly question at all! 💕

First off, Stats (the named variable and value stored within it) is a different thing from displaying stats.

A Quick Overview of Stats in SugarCube

Let’s use your example. If Chaos and Control are two separate stats, you will need to set their variables individually. Let’s say that Chaos is stored in a variable called $chaos and Control is set in a variable called $control.

<<set $chaos to 50>>

would set the value of $chaos to 50.

<<set $control to 10>>

would set the value of $control to 10.

Whenever you type $chaos, the variable will be printed as 50. And whenever you type $control, the value will be printed as 10.

It’s always a good idea to set any numerical variables in your StoryInit passage. This defines the variable when your game initializes. Variables that store numbers cannot be added to or subtracted from if they are not defined.

Additionally, you will want to know what the minimum and maximum numbers are for each stat. How far does the range go? What do you want the lowest number to be and what do you want the highest number to be? 0 – 100 is a helpful range, but it doesn’t have to be that.

Once you figure that out, you can clamp your numerical variables whenever there’s a stat change.

For example:

Say you’re working with a scale of 0 to 100. Both $chaos and $control are initialized at 50. Define them in your StoryInit passage using the set macro:

<<set $chaos to 50>>

<<set $control to 50>>

Whenever you add or subtract from the stat, you can clamp it using Math.clamp. Math.clamp prevents stats from going lower or higher than your desired range, which can prevent a lot of funky stat stuff happening later in the game.

Let’s say the Player takes an action that increases their $chaos stat by 10.

If the change happens when a passage loads, you can use the expression:

<<set $chaos to Math.clamp($chaos + 10, 0, 100)>>

If you want the change to happen when the player clicks a link (before the next passage loads), you can use the expression inside SugarCube’s link markup:

[[1. Chaos choice.|Next Passage Name][$chaos to Math.clamp($chaos + 10, 0, 100)]]

+10 adds 10 to the $chaos stat.

0 denotes the minimum value (0).

100 denotes the maximum value (100).

So if the Player’s $chaos stat was at 95 and they clicked this link, with Math.clamp, they would max out at 100 instead of going all the way to 105.

Displaying Stats

Now, on your stats page, you could list your stats:

Chaos: $chaos Control: $control

And call it a day. But if you want to have some kind of visual indication for your stats, you will need to do some extra work.

Making a Progress Bar

There’s a lot of ways you can do this. Chapel’s Meter Macros are a good place to start; @/townofcrosshollow has an explanation of how to use the macro here.

I personally don’t use this macro and rely on the HTML progress element instead, so that’s what I’ll explain here. This isn’t necessarily the best way to do it (there are pros and cons), but it’s what I’m familiar with.

On your stats page, you can transform your $stat variable into a progress bar like so:

<progress @value="$stat" max="100"></progress>

@value="$stat" – this needs to be the targeted variable

max="100" – this needs to be an integer. It doesn’t have to be 100, it can be any number. Whatever that number is, it should be where you plan that stat to max out.

Styling the Progress Bar

Styling the progress element can be a little tricky since the progress element looks different on every browser.

You can change what it looks like with a little CSS in your Story Stylesheet.

progress[value] {

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

width: 100%;

height: 15px;

}

This will re-set the default appearance so you can actually style it. You can adjust the height and the width of your bar by changing the values of height and width.

progress[value]::-webkit-progress-bar {

background-color: #hexcode;

border-radius: 2px;

}

This styles the bar and its background colour (anything that isn’t the “fill” colour of the progress bar). Change #hexcode to whatever colour you want to use. The border-radius isn’t necessary, but you can use it to make the corners a little softer or more rounded, depending on what you set the px to.

progress[value]::-webkit-progress-value {

background: #hexcode

border-radius: 2px;

}

This styles the colour of the fill section of the progress bar. If you want it to work in Firefox, you’ll need to add this extra bit here:

progress[value]::-moz-progress-bar {

border-radius: 2px;

color: #hexcode;

}

This will create a default styling for all progress elements. If you want to have different stylings per $stat (I have separate stylings for ability bars and approval/romance bars), then you can copy what you did before, change the colours, and wrap it in a div tag.

For example:

.relationship progress[value] {

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

width: 100%;

height: 15px;

}

.relationship progress[value]::-webkit-progress-bar {

background-color: #hexcode;

border-radius: 2px;

}

.relationship progress[value]::-webkit-progress-value {

background: #hexcode

border-radius: 2px;

}

Would go in your stylesheet. And then on your stats page, you would put:

<div class="relationship"><progress @value="$relationshipStat" max="100"></progress></div>

Combining & Displaying Two Stats Together

If you want to do something where two stats share a display bar (as is common in ChoiceScript games), I would probably use Chapel’s meter macro. But if you wanted to use the progress element instead, I would only set one variable for the two stats.

Going back to Chaos/Control--instead of having separate $chaos and $control stats, I would define one variable called $chaosControl, and set it on a 0 to 100 range.

You could then style the progress element, using the fill colour to indicate the stat on the left hand side and the background colour to indicate the stat on the right hand side. Add some extra labels around the progress element to indicate the two sides.

This is a little ugly, but it would come out looking like this:

Hope that helps!

#coding in twine #twine #twine game #sugarcube #resources #answered

[manonamora-if]

On top of last Sunday's upload, where typos and bugs were fixed, I've made some extra additions to the SugarCube Guide:

Added the Event pages

Added the {Intro to Animation} page

Addition in the {Going Further with Settings} page.

Added the Engine API pages

Added the Localization pages

#sugarcube #twine #coding in twine #guide #sugarcube help #coding #help

[manonamora-if]

Retrospective 2022

Long image below, transcript in Read More. Links to published project in Read More.

Changing the format compared to last year, a lot more has happened this year than the last one. There is also much more I would want to touch upon (like STATS :D), but that'd make this post way too long (already the Post-Mortem of The Thick Table Tavern last month was a lot).

Below is the TLDR. Here is Part 2. The Stats are in Part 3. And the Future is in Part 4 (TBP).

Last September, I had made a little Schedule for the End of the Year. Obviously, I was way off. I only published/updated half of the things I said I would, and ended up putting out new smaller (more fun, less frustrating for me) projects instead.

Next year's expectations is to... finish my WIPs (starting the smallest ones to have them off my desk). I have too many projects in my hands, and it's not sustainable. I've been preaching about not having too may WIPs, but don't even follow my advice. My goal is to have by the end of the year only Crimson Rose & White Lily, SPS Iron Hammer, and The Thick Table Tavern still unfinished (TTATEH is dependent on MelS's progress more than mine). Knowing me, I'll try to squeeze a few Jams/Comps entry anyway...

Links

Assets:

Templates: 100% Good Twine SugarCube Templates (Simple Book and One Page)

Tweego: Ready-To-Use Tweego Folder

Guide: CScript to SugarCube Transition + Compiler

Tutorial/Resource: Coding Support

Games (first release date order):

Meeting the Parents (Complete - EN/FR)

Crimson Rose & White Lily (WIP - EN - @crimsonroseandwhitelily)

Exquisite Cadaver (WIP - EN)

SPS Iron Hammer (Incomplete/Hiatus - EN - @sps-iron-hammer)

The Thick Table Tavern (Incomplete - EN)

The Trials and Tribulations of Edward Harcourt (WIP - EN)

La Petite Mort (Incomplete - FR)

Goncharov Escapes! (Complete - EN)

P-Rix - Space Trucker (WIP - EN)

Le Jeu de la Dévotion Partim 500 (Temp* - FR) *will be moved to my website soon

Sites:

Personal Website

Itch Page

IFDB Profile

IF Anonymous Confession Box: @if-confessions

The SeedComp! website (@seedcomp-if on Tumblr)

Interact-IF Tumblr: @interact-if

Other Sideblogs: @manonamora-rb, @crimsonroseandwhitelily, @sps-iron-hammer

Transcript

Retrospective 2022

January: Participation in the Interact-If Jam, seeing the release of SPS Iron Hammer, a sci-fi IF project.

February: - UI Update for Meeting the Parents - Release of Scene 2 of Crimson Rose & White Lily - Ending Guide for SPS Iron Hammer

March: - Ending Guide for Meeting the Parents - Release of Scene 3 of Crimson Rose & White Lily - Starts re-writes on Exquisite Cadaver - Announcement of The Trials and Tribulations of Edward Harcourt

April: - Re-haul of previous Scenes of Crimson Rose & White Lily (grammar/style edits) - Re-writes of Exquisite Cadaver continue.

May: Beta for Crimson Rose & White Lily starts, while finishing the writing of Scene 4

June: - Published the introductory Post for The Trials and Tribulations of Edward Harcourt - V1 of Personal Website. - Release of Scene 4 of Crimson Rose & White Lily

July: - Re-writes for Exquisite Cadaver continue - Start of the ground work on The Thick Table Tavern - Release of the first SugarCube Template: the Simple Book template

August: - Bonus content for Crimson Rose & White Lily (Summer prompts) - Exquisite Cadaver V2 is released (Story Mode until Round 9) - Release of the Ready-to-Use Tweego Folder - Start of the #coding support - The Thick Table Tavern build continues

September: - Release of the ChoiceScript to SugarCube Guide - Focus on The Thick Table Tavern

October: - The Thick Table Tavern is released for the IF Comp - Release of the One Page SugarCube Template - Demo Release of The Trials and Tribulations of Edward Harcourt - Release of La Petite Mort - Re-writes for Meeting the Parents starts

November: - The Thick Table Tavern is available on Itch - Ranked 37 on the IFComp, 1st in the French EctoComp, and 3rd in the English EctoComp - Release Goncharov Escapes! - Completed Translation of Meeting the Parents

December: - Meeting the Parents is updated for the final time. - Organised the SeedComp!, a 2-Round creative IF Jam - Released P-Rix - Space Trucker - Participation in the Partim 500

2023 Expectations

Completion of Projects: - P-Rix Space Trucker: missing content, mobile accessibility - La Petite Mort: missing rooms, English translation - Goncharov Escapes! : text edits, French translation - Exquisite Cadaver: missing rounds

Updates of Projects: - The Trials and Tribulations of Edward Harcourt: dependent on MelS - The Thick Table Tavern: if time

Hopes: - Update of Crimson Rose & White Lily - New SugarCube Templates - Start re-writes of SPS Iron Hammer - Entry to Jam/Competitions

#manonamora #retrospective #2022 #year in review #games #indie dev #assets #twine #sugarcube #itch #mtp #tttt #ttateh #crwl #sps ih #p-st #goncharov escapes! #lpm #ec