beedesigns - Tumblr blog

[beedesigns]

Interactive Fiction - Twine Resource Megalist

This Resource Megalist is intended to centralise the resources for the IF Tumblr community to create Interactive Fiction with Twine. While most will focus on the Twine formats, other useful resources will be included.

You can also find a backup of this list on the IntFiction Forum. That list may have more links listed (though I’ll try to update both versions as best as I can).

I’m currently working with other peeps to make this list as comprehensive as possible (since there are //a lot// of information out there. And having dabbled with other programs, I’ve been looking into findind and gathering other Resource lists. TBA on all of that.

Forenote: this list includes more sources for SugarCube, as it is the program I’ve used the most. If you have resources for any/other formats, please let me know so I can edit it!

Official Twine Links

Official Website : Twinery (you can download Twine or use it online) Official Discord: Twine Games, the creators of Twine and most formats, as well as Twine wizard hang out there to help. Official Reddit: Twine Games, answers Twine related questions too.

Twine Formats

Harlowe: Current version: 3.3.8 Repository, Documentation. Creator: Leon Arnott

SugarCube: Current version 2.36.1 Repository, Documentation. Creator: Thomas M. Edwards/TheMadExile/TME (Patreon - KoFi) also created the Tweego Compiler (all format).

Chapbook: Current version 2.0.0 Repository, Documentation. Creator: Chris Klimas (Patreon), who also created Twine!

Snowman: Current version 2.0.2 Repository, Documentation. Creator: Chris Klimas, but currently maintained by Dan Cox.

Many other formats have been created for Twine, and a non-exhaustive list can be found on this page, or this page. Please note that some formats may not be complete or available anymore.

Aside from Tweego, there are also other compilers. A non exhaustive list can be found here.

Forums and Guides

The Twine website has a guide to help with the Twine interface here, as well as Cookbook to help you choose the format you may want to use. The Cookbook includes explanation and tutorials on the ways the different formats operate. There is also the old Twinery Forum where many questions were solved before it closed in 2017 and the Twine Q&A (similar fate). Please note: Due to the Forum closure and the lack of update for the Cookbook, some examples/code may be out of date (though the logic may still be good).

If you are looking for a Forum style-community for help (or discuss Twine), you should go instead to the IntFiction Forum!

Other Guides, Tutorials and Communities

The documentation for each formats may still not be quite easy to get, as it often use very technical description. Below are some guides and tutorials with maybe easier explanations. There might be more (please let me know!).

Guides and Tutorials non-official

YouTube Channels:

Dan Cox

Adam Hammond

Yi Weng

Note: The Twine interface changed in 2022, some aspects of these tutorial may be outdated.

Written Guides:

The 100% Good Twine SugarCube Guide by @manonamora-if (me), includes all SugarCube macros and more (update incoming!).

The Twine Grimoires (Harlowe and SugarCube - focus on visual) by @gcbaccaris (Patreon)

Introduction to Twine (Harlowe 2.1)

Interactive, Nonlinear Stories and Guided Interviews with Twine by the UVic Libraries

Narroscope Chapbook Talk

Kira’s SugarCube Guide (code)

@townofcrosshollow SugarCube Beginner Tutorial & Tutorial 1.02

Guide for ChoiceScript to Sugarcube/Twee Transition by @manonamora-if

Tumblr coders

Below is a list of IF creators using Twine and having created tutorials/answered asks. Please check the creator’s FAQ before sending an ask/contacting them. There might be coders for other formats making tutorials, but I do not know of them.

SugarCube

@manonamora-if : I have #coding support masterlist

@idrellegames also answered a lot of Twine questions over the years (coding asks) (Patreon - Ko-Fi) Note: she does not currently take new coding asks.

@cerberus-writes answered asks here. (Ko-Fi)

@nyehilismwriting has a coding tag. (Patreon - Ko-Fi)

@townofcrosshollow made some tutorials too.

@ramonag-if Tutorials (Patreon - Ko-Fi)

@outoftheblue-if coding/tutorials posts (Ko-Fi)

@larkin-if​ has started making tutorials (Ko-Fi - Patreon)

Harlowe:

@heart-forge used to answer asks. (Ko-Fi)

Coding Communities

Below you will find Discord servers focused on coding with Twine or Interactive Fiction where you can ask question. I am sure there are others Discords or Forums out there (especially with other languages) !

Decoding Twine Discord - run by multiple IF Creators on Tumblr.

Interact-If Discord - mainly an IF discord, but coding questions can be asked there too.

Fiction Interactive - similarly to the one above, this one is mainly an IF community but Francophone.

CAAD - Spanish IF Forum

Other Twine Resources

Custom Macro (GitHub + Patreon/Kofi links)

There are A LOT of people who created custom macros for Twine (SugarCube especially).

SugarCube:

Official Add-ons

Akjosch (GitHub) : Modules

Chapel (Website - GitHub - Ko-Fi): Macros.

Cycy (GitHub) Macros. Also created the T3LT extension for VSCode (syntax highlighter and macro checker-ish)

Greyelf (Forum + Forum) : Harlowe style animations + Right-Sidebar

Gwen (GitHub) Macros.

HiEv (Patreon): Macros, Inventory System

Hituro (GitHub - Website): Macros (+ Gordian/Paloma Format)

Hogart (GitHub) Macros.

Maliface (GitHub - Ko-Fi) Macros

Mike Westhad (GitHub) Macros and some StyleSheets

@uroboros-if​ / Mystirious (Itch Collection - Itch) Macros.

SleepyFool (GitHub) Macros

SjoerdHekking (GitHub - Patreon) Macros.

TME (GitHub) : Language Setting

Harlowe:

Chapel: Audio Library, Macro API

Inventory System

Greyelf (Forum + Forum): CSS styles

Chapbook

Sargeant Chapbook’s Extensions

Templates (Visual or Code)

Note: I have not tested all of these below.

SugarCube

100% Good Twine Sugarcube Templates by @manonamora-if (3 Visual, 1 Setting Code, 1 Character Creator)

Sugarcube Template & Twine - Sugarcube Template by @nyehilismwriting (Visual)

twine sugarcube template by @cerberus-writes (Visual)

ChoiceScript-like SugarCube template (code for copy-pasting) by brushmen (Visual & Code)

Twine/Sugarcube 2 Template by @innerdemons-if (Visual)

Fallen London Twine Template by thesharkwrites (Visual)

Tutorial: Coding Pronouns and Verbs in Twine SugarCube by Sylveranty (Code)

Twine Template and Twine Template II by @outoftheblue-if (Visual)

Simple Visual Novel Template for Twine by Sun Labyrinth (Visual)

PC98 Layout for Twine by fia glas (Visual)

A Quick Guide to Character Pages by @gamesbyalbie (Code)

Coding Pronouns and Verbs by @sylveranty (Code)

30x30’s twine template by @if-30x30 (Visual, not fit for Mobile)

Pellicule: a sugarcube template by @lapinlunaire-games

A SugarCube template by @losergames

Harlowe:

Twine 2 (Harlowe) CSS Pack #1 by Candy✩Giants (Visual)

Custom Pronouns - Twine Tutorial by chewiethedoggo (Code)

Gender Inclusive Twine 2 Harlowe Code Tutorial by autistmouse (Code)

Harlowe Stylesheet (Github, Visual)

Harlowe Menu Template by alyshkalia (Visual & Code)

Twine 1:

Twine Texting Project by shindigs (Visual & Code)

Other Twine Resources

Tweego

Tweego Installer from Chapel

Ready-To-Use Tweego Folder + Guide by @manonamora-if

Other

Turning a Twine Game into a Google App

Interact-If Twine Resources Tag (you may find some of the resources above there) : #twine #twine resources #twine templates

Other Coding/IF Resources

Knowing a bit about other coding languages can help you with customising the visual or the gameplay of the project. CSS/HTML are most helpful when understanding templates or how to build/edit the visual size; JavaScript for the gameplay/animation.

W3Schools is more accessible to new users and the explications tend to be easier to understand overall. However, MDN is thought to have the superior code and will let you know more easily if a code/rule is compatible between browsers. Both websites will include explanation for JavaScript, HTML and CSS.

If you want to learn JavaScript, you may want to start on this website.

Accessibility Resources

An important point that should be included is how to make your project accessible (for screen-readers, colour-blind, visual sensitive, etc…). While the way Twine/Tweego compiles the project into an HTML file already takes some of these into account (especially for screen-reader use), but the way one codes may hinder this accessibility.

Colour Contrast Check

ARIA-rules (used by Twine)

Firefox Accessibility Inspector

Game Accessibility Guidelines

Misc Stuff

Codepen is useful to test HTML/CSS/JavaScript. There are also some cool code out there (but edits are required to work on Twine).

Pattern of CYOA Games is more of an IF Planning resource than a coding one, but is always useful to have.

Interact-If has also reblogged some resources (see the Platform Ref Tag Subsection).

Again, this list is non-exhaustive. I've only added what I know/have seen around the internet. If you have Twine resources not included in this post, please let me know so I can add it. If I have forgotten Patreon/Ko-Fi links for any of the people mentioned above, please let me know ask well!

[beedesigns]

A structured way to learn JavaScript.

I came across a post on Twitter that I thought would be helpful to share with those who are struggling to find a structured way to learn Javascript on their own. Personally, I wish I had access to this information when I first started learning in January. However, I am grateful for my learning journey so far, as I have covered most topics, albeit in a less structured manner.

N/B: Not everyone learns in the same way; it's important to find what works for you. This is a guide, not a rulebook.

EASY

What is JavaScript and its role in web development?

Brief history and evolution of JavaScript.

Basic syntax and structure of JavaScript code.

Understanding variables, constants, and their declaration.

Data types: numbers, strings, boolean, and null/undefined.

Arithmetic, assignment, comparison, and logical operators.

Combining operators to create expressions.

Conditional statements (if, else if, else) for decision making.

Loops (for, while) for repetitive tasks. - Switch statements for multiple conditional cases.

MEDIUM

Defining functions, including parameters and return values.

Function scope, closures, and their practical applications.

Creating and manipulating arrays.

Working with objects, properties, and methods.

Iterating through arrays and objects.Understanding the Document Object Model (DOM).

Selecting and modifying HTML elements with JavaScript.Handling events (click, submit, etc.) with event listeners.

Using try-catch blocks to handle exceptions.

Common error types and debugging techniques.

HARD

Callback functions and their limitations.

Dealing with asynchronous operations, such as AJAX requests.

Promises for handling asynchronous operations.

Async/await for cleaner asynchronous code.

Arrow functions for concise function syntax.

Template literals for flexible string interpolation.

Destructuring for unpacking values from arrays and objects.

Spread/rest operators.

Design Patterns.

Writing unit tests with testing frameworks.

Code optimization techniques.

That's it I guess!

[beedesigns]

disguise / headache / </c0de> / thoughts & prayers / legacy / tale of the midnight ride / holding on to smoke / another life / death incorporated / brand new numb / catharsis

i do not take ownership of any of these fonts, so there’s no need to credit me — but please reblog this post if you found it helpful at all! :)

[beedesigns]

inspired by boop day, reblog this post if its ok for people to send you random asks and interact on your posts with no judgement. i want to talk to people.

[beedesigns]

Ahora que la pseudoclase :has() cuenta con un soporte casi global, y aunque sus usos son increíblemente amplios, quería traer un uso bastante concreto y que ayudará a muchos, pues es una de las preguntas más comunes en mi askbox a lo largo de los años: el diseño de categorías y foros 'especiales', es decir, que no son iguales que las por defecto ya sea en tamaño, colores, posiciones.

Con :has(), no necesitarás añadir clases con JS: puedes conseguir el mismo resultado poniendo un elemento en tu título de categoría o en tu título/descripción de foro.

Antes que nada, me estaré refiriendo al codepen que podéis ver aquí, por lo que el code que incluiré en este tutorial es limitado.

El uso de :has(), como digo, es amplio. Pero para el caso que nos atañe, es limpio y sencillo:

Coloca un elemento con la clase que quieras en el título de tu categoría o subforo. Dependerá del diseño que quieras hacer: si quieres que afecte a toda la categoría ponlo en esta, si es personal del subforo ponlo en el mismo. Ten en cuenta que esto aparecerá en más de un sitio (tu navegación, subforos interiores, etc) por lo que intenta usarla tal y como ejemplifico en el codepen.

Teniendo esa clase presente, puedes referirte a ella con la gramática siguiente: .claseDeCajita:has(.claseIdentificativa). Con eso puedes hacer lo que te plazca. Si te cuesta verlo, piensa en cómo lo harías con JS. Con JS, tendrías una clase asignada a .claseDeCajita, que habrás dispuesto de manera similar en un u otro elemento en el título de la categoría. O, en su defecto, usarías las ids de categorías y foros. Piensa que :has() reemplazaría en este caso ese id o clase. Es un scope más limitado, no te hace falta saber el id del subforo (lo que facilita porteos de skin, o para my fellow creators, la creación de subforos especiales sin necesidad de mucha dificultad para la instalación.

Go nuts. Puedes modificar virtualmente cualquier cosa con esto.

Recomiendo, por supuesto, leer la documentación de :has() y ya de paso, recomiendo :not(), pues se pueden usar en conjunto y son todavía más poderosos.

Si tienen preguntas, pueden hacérmelas llegar a mi askbox; y si les ha servido este mini-tutorial, denle un rebloguito para que llegue a más gente 💕

[beedesigns]

the lazy coders guide...

okay, so from my various trolls through mammoth google searches to learn bits about coding, i’ve discovered a few wonderful resources out there which actually do some of ( and in some cases, a lot of ) the hard work for you… 

these are otherwise known as code generators… here are a few of my faves;;

( NB/ all of the generators are pure CSS - no javascript is needed… )

CSS3 generator - includes generators for; border radius, box shadow, text shadow, rgba, font face, multiple columns, box resize, box sizing, outline, transition, transform, flexbox and gradient

EnjoyCSS - is another multi option generator and will give great live previews with a ton of options - includes; blocks, buttons, text, gradients, backgrounds, shadows, border radius, transition, transformation

CSS3maker - is again, another multi option generator - includes; border radius, gradient, transform, animation, transition, rgba, text shadow, box shadow, text rotation, fontface

Layerstyles - for those of you who use photoshop, this is the editor for you!  it will generate CSS code from a PS like editor that should be very familiar - includes; drop shadow, inner shadow, background, border, border radius

Westciv - includes options to generate; gradients, text properties, box properties, transformations

here are some individual generators which give a little more detail and flexibility with the options;

scrollbar generator border radius generator gradient generator  gradient generator box shadow button generator button generator menu generator menu generator ( includes bootstrap option ) menu generator tooltip generator tooltip generator ribbon generator table generator table generator typeset generator ease animations full box styling full box styling pattern generator

enjoy :3 love from, octomoosey <3

[beedesigns]

Hellohello :D

✮✮✮ this is a sparkly one ✮✮✮

it's rather simple but i like it nontheless - hope you too!

i didn't have the time and motivation yet to replace all the lost discord-images on the other codes, but i will do that as soon as possible.

✦ Have a nice day!! ✦

Code : https://codepen.io/Plutoplanet/pen/ExJmvbE

[beedesigns]

Things that will make your computer meaningfully faster:

Replacing a HDD with an SSD

Adding RAM

Graphics cards if you're nasty

Uninstalling resource hogs like Norton or McAfee (if you're using Windows then the built-in Windows Security is perfectly fine; if you're using a mac consider bitdefender as a free antivirus or eset as a less resource intensive paid option)

Customizing what runs on startup for your computer

Things that are likely to make internet browsing specifically meaningfully faster:

Installing firefox and setting it up with ublock origin

adding the Auto Tab Discard extension to firefox to sleep unused tabs so that they aren't constantly reloading

Closing some fucking tabs bud I'm sorry I know it hurts I'm guilty of this too

Things that will make your computer faster if you are actually having a problem:

Running malwarebytes and shutting down any malicious programs it finds.

Correcting disk utilization errors

Things that will make your computer superficially faster and may slightly improve your user experience temporarily:

Clearing cache and cookies on your browser

Restarting the computer

Changing your screen resolution

Uninstalling unused browser extensions

Things that do not actually make your computer faster:

Deleting files

Registry cleaners

Defragging your drive

Passively wishing that your computer was faster instead of actually just adding more fucking RAM.

This post is brought to you by the lady with the 7-year-old laptop that she refuses to leave overnight for us to run scans on or take apart so that we can put RAM in it and who insists on coming by for 30-minute visits hoping we can make her computer faster.

[beedesigns]

chris motionless / justin morrow / ricky olson / ryan sitkowski / vinny mauro

i do not take ownership of any of these fonts, so there’s no need to credit me — but please reblog this post if you found it helpful at all! :)

[beedesigns]

[beedesigns]

Okay so here we have the quickest of quick run throughs on how to utilize variables. Here's the basics:

Whatever --variable: ###; says, you can pull it with var(--variable) and it will keep you from having to repeat color codes, as well as make things easier to switch based on light and dark mode, text size changers, member groups, any and everything.

Feel free to check out the example I was playing with here but this comes with the same contingencies as the grid tutorial base I created which is: the template i’m using as an example is free to use as a base, without credit, same with all the others in my tutorials so far, so long as you are using it to actually make your own. With this one, please don’t use it with no significant changes and try to claim it as your own, that would be pretty dishonest. It's also really quickly and shoddily made so again, not something you want to use without changes anyway which is why I made it [Needs Permission] to denote this stipulation. If you do that, throw some credit in your guidebook or something, i don’t mind, just throw a bone on that one because at that point it is solely my template and not the tutorial itself you are using. But even then, you’re free to use it with credit.

Anyway! If I didn't explain anything well (I probably didn't, this is very quick, I recognize I could definitely be more thorough here but this was created as the most basic of basic overviews of variables and so you could see it in action) let me know your questions and I will answer them as best I can.

And, for anyone who cannot listen to the tutorial, here's a quick overview of what I was basically saying:

Basically, variables are shorthand. instead of ###, ###, ### for the accent color, you just put var(--accent1RGB) or instead of #hexcode you'd put var(--accent1) or however you name them, but the --accent1: #hexcode means that anywhere you are trying to pull that hexcode you'd put var(--accent1).

So for any color you're using, versus repeating it, you can just do something like --bg1: #dedede; and then you don't have to type #dedede ever again, it automatically pulls it in with var(--bg1).

Once you understand it, it's super simple, but again if you need anything further explained or you're more of a hands on learner and wanna walk through it with me, feel free to just reach out, I really don't mind.

Hope this helps! Have a great day, y'all.

[beedesigns]

[beedesigns]

Commissioned Template

Here's a nice little board stats template that I did for the lovely people over at Fractured Crossover. They wanted to update their current skin a little, adding the most recent posts to the board stat section. I also, added an automated census of their various member groups underneath. It's always nice to alleviate some of the admin work of running a game!

Working on an existing skin is always a fun little puzzle, trying to figure out how to update it while sticking to the same design elements. This has been a fun one to work on, and I'm always thrilled when people come back for future things.

[beedesigns]

Some people have asked me if I can publish my mapmaking tools. So I developed a software. 🙂

Here is the result:

[beedesigns]

i know this means absolutely nothing to most people but basically all of the little web game things I've made recently (angels in automata, hex plant growing game, d.a.n.m.a.k.u., life music, sudoku land, the metroidvania style map editor, etc etc etc) are all entirely self-contained individual client-side html files that can be downloaded and run offline and have literally no libraries or frameworks or dependencies, because i'm an insane woman who enjoys hand coding my input handling and display code from scratch in vanilla js and having it all live in one single html file with the game logic and the page structure and the page style all just living and loving together side by side in a universal format that can be run by any web browser on any devixe. i'll even include image files as base64 data-uri strings just to keep every single asset inside the one file.

[beedesigns]

black damask / devils night / america / burned at both ends / the divine infection / the rain / sinematic / if it’s dead, we’ll kill it / synthetic love / hatefuck / underdog / infamous

i do not take ownership of any of these fonts, so there’s no need to credit me — but please reblog this postif you found it helpful at all! :)

[beedesigns]

The last version of my guide is 2 years old, and doesn't account for some new features, new competition, and some rebrands, so once again;

Here's a purchase guide for when RPG Maker is on sale, as well as the Visual Novel makers available.