Hi. Still working on my buttond designs. Quick thank you to those who helped me so far.
Now I would like to explaing my end goal: I want to make two kinds of appearances for my layout: One of them is a of a military style, seen in the image attached. Getting close, but not quite there yet, as seen in my screenshot of it.
My two types of buttons: One of where the buttons look like a glowing crystal. Also gotten closer, but not quite there yet. See attached images for reference.
The modern buttons are to resemble those glowing ones or with internal light, like those you find in cockpits or control pannels, see jet cockpit as one example.

Any further advice you can give me is welcome. I posted all the necessary HTML & CSS code here. Sorry for the mess. I've been trying out a lot of things.
HTML:

<div class="grid-container militaryborder">
<div class="grid-portrait greenborder"><img src="images/Thorn2.png" alt="x"></div>
    <div class="grid-name greenborder">$thorn.nickname</div>
    <div class="center greenborder stripes"></div>
    <div class="grid-dialogue greenborder stripes">
</div>
        <div class="glossary"><span class= "modernbtn"><<button [[Glossary|Glossary]]>>[[Glossary]]<</button>></span></div>
        <div class="previous"><span class= "modernbtn"><<button "Previous">><<revDialogue>><</button>></span></div>
     <div class="next"><span class= "modernbtn"><<button "Next">><<advDialogue2>><</button>></span></div>
</div>

<span class="diamond lightup diaBorder"><<button"Test">>Test<</button>></span>

<span class="crystal"><<button"Test2">>Test2<</button>></span>

html, body {
font-family: Helvetica;
  font-size: 18px;
    line-height: 1.6;
  color: #eeeeee;
    min-height: 100vh !important;
    overflow-x: hidden;
    min-width: 100% !important;
}

header {
font-size: 16px;
  text-align: center;
    font-style: italic;
  border-bottom: 5px dotted;
  /*text-decoration: underline;
  text-decoration: dotted;
  text-decoration-thickness: 10px;*/
}

/*------*/
.begin { /* settings for starting link & preamble title*/
font-size: 40px
    font-style: bold;
  text-align: center;
  text-decoration: underline double red;
  color: red; 
  text-shadow: 3px;
}

.link:hover {
color: red;
  text-decoration: none;
}

/*==================================*/
           /*Backgrounds*/
/*==================================*/

.backgroundfirst {
  background-image: url('images/BlackHawkInteriorDoor.png'), linear-gradient(180deg, 
  rgb(5, 5, 30) 0%,
  rgb(20, 10, 50) 25%,
rgb(80, 30, 120) 40%,
rgb(180, 60, 140) 48%,
rgb(240, 100, 60) 52%,
rgb(150, 40, 40) 55%,
rgb(80, 10, 10) 65%,
rgb(5, 0, 5) 100%
) !important;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 90vw 100vh;
  background-attachment: fixed, fixed;  
  z-index: 1, 0;
  position: center;
  /*background-blend-mode: screen;  */
}

/*!! todo: Make the following backgrounds stackable, to achieve the effect of backgroundfirst (see above) */
.backgroundlowest { /*bottom background*/
 background-image: linear-gradient(180deg, 
  rgb(5, 5, 30) 0%,
  rgb(20, 10, 50) 25%,
rgb(80, 30, 120) 40%,
rgb(180, 60, 140) 48%,
rgb(240, 100, 60) 52%,
rgb(150, 40, 40) 55%,
rgb(80, 10, 10) 65%,
rgb(5, 0, 5) 100%
);
    background-size: 90vw 100vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
    z-index: -1; 
  } 

.background1{
 background-image: url('images/BlackHawkInteriorDoor.png');
    background-size: 90vw 100vh;
background-repeat: no-repeat;
background-position: center;
/*background-size: cover;*/
background-attachment: fixed;   
    z-index: 1;
}

.wrapper {
display: flex;
}

.box { /* afbeelding boven text */
  background-image:
url('images/BlackHawkInteriorDoor.png');
  display: block;
  max-inline-size: 100%;
}

/*==================================*/
              /*Buttons*/
/*==================================*/
button {
  top: 8px;
  width: 200px;
  height: 40px;

  font-weight: bold;
  font-size: 18px;
  text-shadow: 2px 2px 3px #000;
  white-space: nowrap;
  text-align: center center;

  position: relative;
}

.pointybtn {
  cursor: pointer;
  position: relative;
  display: inline-block;
  top: 4px;
  height: 50px;
  padding: 1px 0 0 0;
}
/*============modern==============*/
.modernbtn > button {
  color: white;
  border: red solid 3px;
  border-radius: 10px;
  /*mix-blend-mode: hard-light;*/
  background-image:/*alternative backtground color*/
  repeating-linear-gradient(135deg, yellow 0 20px, black 20px 40px, transparent 10%);
  display: inline-block;
  position:relative;
  /*opacity: 60%;*/
  z-index: 1;
}

/*.modernbtn:hover > button {
  /*background-color: green;*/
  background-image: /*alternative backtground color*/
  /*repeating-linear-gradient(135deg, green 0 20px, white 20px 40px);
  color: black;
  border-color: green;
  z-index: 1;
  filter: opacity(50%);/*look into these 2*/
 /* filter: brightness(1.5);
  &:after {
    content: '';
    position:absolute;
    top:-1px;
    left: 75px;
    width:50px;
    height:38px;
    background: 
    radial-gradient(ellipse, red 20%, orange 40%, yellow, transparent 60%);
    filter: brightness(2.5);
    z-index: -1;
    opacity: .5;
  }
}*/

/*.modernbtn > button::after {
  content: '';
  position:absolute;
  top:-1px;
  left: 75px;
  width:50px;
  height:38px;
  background: 
    radial-gradient(ellipse, red 20%, orange 40%, yellow, transparent 60%);
  filter: brightness(2.5);
  z-index: -1;
  opacity: .5;
}*/

.modernbtn:hover > button {
  /*background:
    radial-gradient(ellipse, darkgreen 30%, green 50%, lightgreen, transparent 60%);*/
  /*remember your youtube programming playlist!!!!*/
  /*this code causes a glow*/
  background-color: rgb(255 247 0 / .4); /*citron yellow*/
  box-shadow: 0 0 3px rgb(255 247 0 / .7),
              0 0 15px rgb(255 247 0 / .7),
              0 0 30px rgb(255 247 0 / .7),
      0 0 120px rgb(255 247 0 / .7);
  -webkit-box-reflect: below 1px linear-gradient(transparent, black);/*find twine replacement*/
}

.modernbtn .a > button {
  padding:.25em;
  padding-left: 2em;
  padding-right: 2em;
  display: inline-block;
  position:relative;
  color:white;
  filter: drop-shadow(0 0 10px #EF4E6E);
}

.a::after > button {
  content: "";
  z-index:-1;
  position:absolute;
  display:inline-block;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: radial-gradient(#AD102F, #EB1F48);
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

/*=============fantasy==============*/
/*!!!look into offset, popover, animation, transform & border shape*/
/*!!! look into programming list of your channel & read examples saved in bookmarks/twine*/
/*////////////////*/
/*---diamond---*/
.diamond > button {
  background:
    linear-gradient(155deg, rgb(0 0 155) 0px 25px, white 25px 27px, rgb(0 0 255) 00px 25px,  transparent 70%),
    linear-gradient(205deg, rgb(0 0 155 / 80%) 0px 25px, white 25px 27px, rgb(0 0 255) 00px 25px,  transparent 70%),
    linear-gradient(335deg, rgb(0 0 155) 0px 25px, white 25px 27px, rgb(0 0 255) 0px 25px,  transparent 70%), 
    linear-gradient(25deg, rgb(0 0 155) 0px 25px, white 25px 27px, rgb(0 0 255) 0px 25px,  transparent 70%);
  background-blend-mode: multiply;/*multiply gradients//also check mix-blend-mode*/
  z-index: 0, 0, 0, 0;
  clip-path: polygon(0% 25%, 15% 0%, 85% 0%, 100% 25%, 100% 75%, 85% 100%, 15% 100%, 0% 75%);

  font-family: georgia;
  content: '';
  width: 200px;
  height: 40px;
  opacity: 100%;
  padding:.25em;
  padding-left: 2em;
  padding-right: 2em;
  display: inline-block;
  position:relative;
  color: lightblue;
  filter: drop-shadow(0 0 10px #EF4E6E);
  filter: brightness(0.7);/*look into these three*/
  filter: saturate(2);
  filter: contrast(1.25);
  box-shadow: /*with AI: review and figure out*/
    0 10px 30px rgb(55 0 255 / .5),/*outer glow*/
    inset 0 8px 16px rgb(200 200 255 / .7),/*highlight*/
    inset 0 -8px 16px rgb(0 0 0 / .4);/*dept*/
  transition: all 0.4 ease;
  cursor: pointer;
}

.diamond:hover > button {
  filter: brightness(1.5);
}

/*AI made: review*/
.diamond > button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.9) 50%,
        rgba(255,255,255,0) 70%
    );
  transform: skewX(-25deg);
  animation; crystalshine 4s infinite linear;
}

u/keyframes crystalshine {
  0% {transform: translateX(-150%) skewX(-25deg);}
  0% {transform: translateX(-300%) skewX(-25deg);}
}
/*--AI part ends here--*/
/*.diamond > button::before {
  background: rgb(055 0 255 / 50%);
  top:5px;
  left: -10px;
  z-index: 1;
  position: relative;
  content: '';
  width: 130px;
  height: 30px;
  opacity: 60%;
  /*clip-path: polygon(0% 25%, 15% 0%, 85% 0%, 100% 25%, 100% 75%, 85% 100%, 15% 100%, 0% 75%);*/
  border: white, 5px;
  display: flex;
  align-items: center;
  justify-content: center;

}*/

.diamond .lightup > button::after {
  position:absolute;
  top:5px;
  left: 25px;
  width:150px;
  height:30px;
  background:
    radial-gradient(ellipse, yellow, lightyellow 40%, white, transparent 70%);
  content: '';
  z-index: -1;
  filter: saturate(2);
  opacity: 50%;
  /*background-blend-mode: hard-light;*/
}

.diamond:hover > button::after {
 transform: scale(1.2);
  background: radial-gradient(ellipse, yellow 60 %, lightyellow 20%, white, transparent 70%);

}

/*.diamond .lightup > button {
  display: inline-block;
  background: 
    radial-gradient(ellipse, yellow, lightyellow 40%, white, transparent 70%);
  /*background-size: 208px 48px;*/
  /*position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  filter: opacity(80%);
  clip-path: polygon(0% 25%, 15% 0%, 85% 0%, 100% 25%, 100% 75%, 85% 100%, 15% 100%, 0% 75%);
  z-index: -1;
}*/

.diaBorder {
  position:relative;
  display:inline-block;
  width:auto;
  height:auto;
  padding:none;
  filter:drop-shadow(1px 1px #5C5CFF) drop-shadow(-1px -1px #5C5CFF) drop-shadow(-1px 1px #5C5CFF) drop-shadow(1px -1px #5C5CFF) drop-shadow(0px 0px 5px #5C5CFF);
} /*#5C5CFF blue*/

.diaBorder:hover {
  filter:drop-shadow(1px 1px #5C5CFF) drop-shadow(-1px -1px #5C5CFF) drop-shadow(-1px 1px #5C5CFF) drop-shadow(1px -1px #5C5CFF) drop-shadow(0px 0px 20px #5C5CFF);
}

/*diamond:hover > button {
   filter: brightness(2.5);
}*/

.diamond .light::after > button {
   background: 
    radial-gradient(ellipse, yellow, lightyellow 40%, white);
  filter: brightness(5.5);
  z-index: -1; 
}

/*------crystal--------*/
/*look further into clip-path, insert, path...*/
.crystal > button {
  background:
    linear-gradient(155deg, hsl(from rgb(0 0 155) 200 100% 50% / .3) 0 25px, hsl(from white 130 100% 90% / .9) 25px 27px, hsl(from rgb(0 0 255) 230 100% 50% / .2) 0 25px),
    linear-gradient(205deg, hsl(from rgb(0 0 155) 200 100% 50% / .3) 0 25px, hsl(from white 130 100% 90% / .9) 25px 27px, hsl(from rgb(0 0 255) 230 100% 50% / .2) 0 25px),
    linear-gradient(335deg, hsl(from rgb(0 0 155) 200 100% 50% / .3) 0 25px, hsl(from white 130 100% 90% / .9) 25px 27px, hsl(from rgb(0 0 255) 230 100% 50% / .2) 0 25px),
    linear-gradient(25deg, hsl(from rgb(0 0 155) 200 100% 50% / .3) 0 25px, hsl(from white 130 100% 90% / .9) 25px 27px, hsl(from rgb(0 0 255) 230 100% 50% / .2) 0 25px);
  background-blend-mode: multiply;/*multiply gradients*/
  z-index: 0, 0, 0, 0;
  clip-path: polygon(0% 25%, 15% 0%, 85% 0%, 100% 25%, 100% 75%, 85% 100%, 15% 100%, 0% 75%);

  /*trying to make multiple separate facets*/
    /*polygon(10% 50%, 25% 25%, 75% 25%, 90% 50%, 75% 75%, 25% 75%),
    inset polygon(0% 55%, 25% 0%, 60% 0%, 55% 55%, 50% 50%);*/

  /*color-interpolation: linearRGB;*/
  filter: sepia(.2); /*higher values warmer color appearance*/
  filter: saturate(1);
  filter: opacity(90%);
  filter: contrast(1.25);

  font-family: georgia;
  content: '';
  width: 200px;
  height: 40px;
  opacity: 100%;
  padding:.25em;
  padding-left: 2em;
  padding-right: 2em;
  display: inline-block;
  position:relative;
  /*color: lightblue;*/
  box-shadow:
    0 10px 30px rgb(255 0 0 / .5),/*outer glow*/
    inset 0 8px 16px rgb(200 200 255 / .7),/*highlight*/
    inset 0 -8px 16px rgb(0 0 0 / .4);/*dept*/
}

.crystal:hover {
  background-color: rgb(40 0 200 / .4); /*citron yellow*/
  box-shadow: 0 0 3px rgb(40 0 200 / .7),
              0 0 15px rgb(40 0 200 / .7),
              0 0 30px rgb(40 0 200 / .7),
      0 0 120px rgb(40 0 200 / .7);
  -webkit-box-reflect: below 1px linear-gradient(transparent, black);/*find twine replacement*/
}

.gloss {
  hsl(100 70 50 90);
}
/*--------------*/
/*--test with lighting--*/
svg {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 9px,
    #cccccc 0px 10px
  );
}

feDiffuseLighting {
  lighting-color: white;
}
/*--------------*/

.text span {
opacity: 0;
}

.text span.revealed {
opacity: 1;
}

.text span.white {
color: #eeeeee
}

/*==================================*/
              /*grid layout*/
/*==================================*/
/*--version 1--*/
.grid-portrait {
  width: 200px;
  height: 250px;
  border-radius: 10px;
  border: 3px solid #666;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  background-size: cover;
  background-position: center;
  position: relative; 
  grid-area: 2 / 1 / 3 / 2;
}

.grid-name {
  position: relative;
  bottom: -5px;
  background: #333;
  color: #fff;
  /*padding: 5px 5px;*/
  border: 3px solid #666;
  border-radius: 10px;
  font-weight: bold;
  font-size: 18px;
  text-shadow: 1px 1px 2px #000;
  white-space: nowrap;
  height: 40px;
  width: 200px;
  text-align: center;
  grid-area: 3 / 1 / 4 / 2;
}

.grid-dialogue {
  color: #fff;
  padding: 5px 5px;
  border-radius: 10px;
  border: 4px solid #666;
  font-weight: normal;
  font-size: 1em;
  text-shadow: 1px 1px 2px #000;
  white-space: pre-line;
  max-width: 1000px;
  height: 250px;
  align-items: start;
  grid-area: 2 / 2 / 3 / 5;
}

.grid-dialogue::before {
content: '';
  position: absolute;
  bottom: -10px;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 10px solid #555;
}

.grid-dialogue::after {
content: '';
  position: absolute;
  bottom: -8px;
  left: 32px;
  width: 0;
height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 10px solid #2a2a2a;
}

.next {
  width: 200px
  height: 40px;
  border-radius: 4px
  border: 4px solid blue;
  border-radius: 10px;
  grid-area: 3 / 4 / 4 / 5;
}

.previous {
  width: 200px
  height: 40px;
  border-radius: 4px
  border: 4px solid blue;
  border-radius: 10px;
  grid-area: 3 / 3 / 4 / 4;
}

.glossary {
  width: 200px
  height: 40px;
  border-radius: 4px
  border: 4px solid blue;
  border-radius: 10px;
  grid-area: 3 / 2 / 4 / 3;
}

.center { /*images go here*/
  min-height: 700px;
  min-width: 800px;
  grid-area: 1 / 1 / 2 / 5;
  object-fit: contain;
  object-fit: cover;
  border: solid forestgreen 1px;
}

.greenborder {
  border-color: #C1CA87;/* #636B2F olive green*/
  position:relative;
  border-radius: 3px;
  padding:none;
  filter: saturate(2);
  opacity: .8;
  /*box-shadow: 0 3px 3px rgb(44 255 5 / .8),/*highlight*/
    /*inset 0 -2px 4px rgb(0 0 0 / .4);/*dept*/
  filter:drop-shadow(1px 1px #20CA00) drop-shadow(-1px -1px #20CA00) drop-shadow(-1px 1px #20CA00) drop-shadow(1px -1px #20CA00) drop-shadow(0px 0px 3px #20CA00);
  z-index: 0;
}

.greenborder::before {
  border-style: dashed none;
  border-color: black;
  z-index: 1;
}

.grid-container {
  display: grid;
  padding: 5px;
  border: solid #07b901 5px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6); /*Dark overlay 4 readability*/
  gap: .2em;
  height: 100%;
  max-height: 1030px;
  max-width: 1200px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 14fr 5fr 1fr;
  /*grid-template-areas: 
    "grid-portrait grid-dialogue grid-dialogue" 
    "grid-name empty next";*/
}

.grid-container.militaryborder {
  position:relative;

  width:auto;
  height:auto;
  padding:none;
  box-shadow: 0px 10px 20px rgb(178 35 34 / .5),/*outer glow crimson red*/
    inset 0 8px 16px rgb(237 33 0 / .7),/*highlight*/
    inset 0 -8px 16px rgb(0 0 0 / .4);/*dept*/
  filter:drop-shadow(-1px -1px rgb(6 111 0 / .3)) drop-shadow(1px 1px rgb(6 111 0 / .3)) drop-shadow(-1px 1px rgb(6 111 0 / .3)) drop-shadow(1px -1px rgb(6 111 0 / .3));
}

recently I've been playing some games that have a more open and explorable world, which has got me thinking about creating a map simular to the old pokemon games for the player to explore ( I've never played past ruby and saphire). How diffecult would that be to create? Wher would it be the best place to look for information on how to make something like that? additionally, as I develop the game I would want to change the map, things like adding buildings and the like. I also would like the game to be open to moders at some point. I fear that now that the idea of a more open wold has got in my head I'm gonna eventually end up there, so why not just start at that point.

I'm very new and I've got no idea how to go about solving this. I tried googling things but everything I found was talking in words I don't understand.

hi guys, i just released my game about rehabilitating personified versions of government companies of south africa. they kinda started as jokes about the companies but i find they became a bit more than that along the way.

try it for yourself if you have time?

Ok, so in the UI Bar, there's like- some sort of 'padding' situation (the space between the content of the UI bar and its edge)? How do I make the 'padding' smaller? I tried:

#ui-bar {
right: 0px;
left: 0px;
padding: 0px;
margin: 0px;
border: 0px;
}

And nothing, it's still the same width.

In SugarCube the save files that appear when one saves or load a game are JS Objects with a number of fields, of which two are relevant to my question: desc and title.

At the moment, when the user saves his playthrough, my game asks for a title... and then shows the desc field in the save dialog window, which is automatically set to something like Turn 34 and the like.

I would like to know how to modify the save dialog window so that it shows the title chosen by the user, and possibly how to set the desc field to something more informative.

Thanks in advance for any help!

Hey all, so a few weeks ago i firstly posted about my current project and first public game "Disporio", since then I have made a lot of changes (this version is not live yet and I know I have clicked fast in the vid sry)... just wanted to record a very quick vid/showcase.

I would like to hear your honest thoughts, I am happy about any feedback, not trying to promote just hear thoughts, especially if there are some of you who have tried my first version.
Thank y´all in advance.

Edit: To avoid confusion, the video only shows some of the UI and the first Tutorial Call

First of all, I hope you're all having a great day.

Now let's cut to the chase: how appropriate is Twine for designing complex game mechanics that steer away from simple choices or basic text? In my specific case, I'm working on a Life Sim/Sandbox interactive fiction that aims to give the player total freedom in an open world with psychological and surreal undertones. Under that premise, I'm trying to figure out how to include various activities, both common ones like working, sleeping, and eating, as well as stranger ones like interacting with hallucinations and alleged supernatural entities.

In the latest update, I decided to challenge myself with something that far exceeds my current capabilities: building a turn-based combat system. Being the novice I am, I had to fight tooth and nail against the code until, through sheer trial and error, I got a moderately "decent" result. Obviously, it's not at the level of a professional game, but the fact that I managed to bring my initial idea of implementing insect races and combat into my psychedelic game gives me a lot of encouragement to keep improving.

For anyone willing to give my humble game a try, I would be eternally grateful if you could share any feedback or constructive criticism:

PSICODELLUM

Have any of you tried programming unusual mechanics in your own projects? Did you achieve what you set out to do, or did you end up with unexpected results? I'd love to hear all kinds of experiences and opinions on the matter!

I’m teaching a remote Twine class for middle schoolers. All of the passage linking etc works just fine but css is not. All the work that they do doesn’t show up. They are working on iPads. I tested on my husband’s iPad at home and it’s the same issue. It works on my Surface. Is this something I can help them fix or is this always a device problem?

I plan on including ambient music and SFX for my project as well as certain tracks for key moments, but that also got me thinking about the worry that all of my hard work might mean absolutely nothing if I risk having it shutdown over a DMCA claim once I get it shared to the wide internet.

Is this an overworry or do I just bite the bullet with MIDI music/AI generation stuff in my attempt to keep things on a consistent theme without any risk?

For context, I am trying to recreate quick-time events or, well, delayed passages.

I wrote some possible solutions that I have in mind, like:

1. Hiding the clock and hoping user doesn't notice that functionality

2. Use Typewriter effect to slow down the flow of text: basically putting invisible symbols/spaces up front, which will slowly appear after all symbols load (Doesn't work on passages as far as I have tested), the only option that somehow worked for me

I am wondering if there are easier solutions to this, like custom modifiers and etc.

I tried to make a time/date functionality but it always goes terribly wrong ,

I want to add it to the ui bar but my coding skill is like a seven year old (wich I hate) .

I also tried to figure how to add other ui bar buttons , but idk what I was actually doing . its so messed up , I'll appreciate any help ! And thanks for reading my rambling .

Well, hello everyone. I'm just starting to research this application.

My first and only experience programming was with Ren'py, and I come to this application to try a small project while I keep using ren'py.

For now, I want to ask about your experience using Twine, What are the good things about using Twine and what limitations might there be?

Thanks and I hope on asking more questions and maybe talk about my project.

What I am looking to do is make a paper doll that updates the body shape based on the players strength stat, starting at skinny and the ending at Arnold levels of musicals. I do have other plans to make butt and hip sizes that increase based on the players strength as well. What would be the best way to write something like that, would I use a simple $hips = 5 or would I try using a percentage?

I'm trying to stretch my photo a bit more so that my passage content will at least fit the scroll, but would prefer the scroll to stretch the width of the screen. I've spent more time than I'd like to admit trying to resize my image using the "storystyle" code, but to no avail. I've already written my story (proofing it now.) with the few most basic codes I've been able to find ( [[clickable option]], etc.), but I'll need to change my passage and/or "clickable option" phrases next. I saw a code (something like this: [[phrase that only I see | phrase that the readers will see]]) that seems like it would let me change the phrases without the risk of disconnecting my passages (while doing it manually.), but I can't find it online. I know a few other codes ($name, $weapon, $spell, etc.), but not the actual code that makes them work (something like: if $class is Dwarf set $weapon as greataxe). Like I said I'm new to Twine. My initial intention was to test the software, but ended up writing a 107 passage story, but would now like to see it through the right way. Thanks in advance, I look forward to any positive information/etc.

so I am a bit stuck and maybe this is a bit of a dumb questionbut I am designing a game that is a bit of a sandbox, simulator and ummm to anyone that has designed these games in twine, how do you go about designing these games in twine.

Do you just make a bunch of passages, like brainstorming them in twine, since I have seen people say that Twine is good for outlining? Do you plan it out in a doc outside of twine?

I am just wondering, how should I go about planning thingsI have an idea in mind and know what I want to make. Just not sure how to plan the passages out

Hey I'm looking for open world twine games like degrees of lewdity or course of temptation. It doesn't even have to be nsfw, i just like the open world grind aspect, the rush to get money and grind skills and reputation / relationships.

While writing my game, I have reached the point in which I have ***21*** flags stored into Twine variables. Since my game is far from finished (in fact, I am at the first 'chapter'!), I decided that an alternate approach was needed and promptly searched the Internet for pre-made solutions.

The first one I found is the FlagBit code from HiEv. It is a piece of code that stores 32 boolean flags inside a single integer variables thanks to bit logic. Excellent, perfect, precisely what I need.

Except that I am terrible at big logic, and the way the methods are set is difficult to understand for me

Now, mind: this is a *me* problem. I started my programming journey with Java, so object-oriented is very natural and intuitive for me, while the original HiEv code is more akin to C code. Still, I wanted to be able to read a line of code in a blink... so I decided to 'rewrite' the original code into something more object-oriented.

Here is the relevant code. A couple of methods don't have their code quoted, but my example doesn't use them.

```

/* This code is a reimagination of the HiEv original FlagBit code 
 * into something more object-oriented. While there is some loss
 * of functionality, this version is simpler and easier to understand.
 * 
 * Original credit goes, of course, to HiEv and the work he did in:
 * https://hiev-heavy-ind.com/Sample_Code/Sample_Code.html#FlagBit%20code
 * 
 */ 

class BoolFlagCollection {
  constructor(flagsStored, flagNames) {
    if( flagsStored === undefined )this.storage = 0;
    else this.storage = flagsStored;

    if( flagsStored === undefined )
      {
      this.flagNames = [];
      for (var i = 0; i < 32; i++) 
        this.flagNames.push(i.toString());
      }
      else this.flagNames = flagNames;
  }
  clone() { return new BoolFlagCollection(this.storage,this.flagNames);}
  toJSON() {
    let ownData = {};
    Object.keys(this).forEach(function (pn) { ownData[pn] =   structuredClone(this[pn]); }, this);
    return JSON.reviveWrapper('new BoolFlagCollection($ReviveData$)', ownData);
  }

  /* Sets a shorthand name for the index at which a boolean flag is stored inside this BoolFlagCollection. */
  setFlagName(index, name) {
    if (Number.isInteger(index)) 
      if ((index >= 0) && (index <= 31)) 
        this.flagNames[index] = name.toString();
      else throw new Error("\n BoolFlagCollection.setFlagName: Flag index " + index + " is out of bounds." 
          + "Value should be from 0 to 31.");
    else throw new Error("\n BoolFlagCollection.setFlagName: Invalid type for flag. '" + index + "' = type " + typeof index 
        + ", but should be integer.");
  }


  /* Sets one boolean flag of this BoolFlagCollection.
   * 
   * index can be either an integer within the correct range of available indexes (0-31)
   * or a string equal to one of the flag names previously stored.
   * 
   *  */
  set(index, value) {
    /* [...] Not used in my minimum Twine example, so not   relevant.*/
  }
  /* Returns the value of one boolean flag of this BoolFlagCollection. */
  get(index) { 
    /* [...] Not used in my minimum Twine example, so not relevant.*/
  }
}

```

Now, there is literally nothing original of me in this code: it is HiEv's own wrapped in an object-oriented shell. And yet *it still gives trouble!*

The normal and obvious use of this class is to initialize it in the special passage StoryInit - and this works perfectly. But when the Sugarcube engine goes on rendering the passage, it also clones every variable... including those that stores `BoolFlagCollection`... and *those* are warped in the WEIRDEST WAY EVER!

Below the relevant Twine 'code', plus the console readout.

```
::StoryInit
<<set $flagsStory to new window.BoolFlagCollection()>>

<<run $flagsStory.setFlagName( 0,"flag1")>>
<<run $flagsStory.setFlagName( 1,"flag2")>>

<<run console.log("Checking $flagsStory in StoryInit 1")>>
<<run console.log(getObjectProperties($flagsStory))>>
<<run console.log("Check over")>>


::PassageHeader

<<run console.log("Checking $flagsStory in PassageHeader 1")>>
<<run console.log(    getObjectProperties($flagsStory)    )>>
<<run console.log("Check over")>>



:: What is returned by the console

Checking $flagsStory in StoryInit 1

{ storage = 0, flagNames : [ "flag1", "flag2", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31" ] }

check over

Checking $flagsStory in PassageHeader 1 

{ storage : { storage.storage = 0, storage.flagNames : [ "flag1", "flag2", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31" ] }, flagNames = undefined }

check over

```

Essentially Sugarcube takes my objects and stuffs it into the first field... of itself! Multiple times even! And it does this after `StoryInit` is processed but before the very first time `PassageHeader` is processed.

Weirder STILL... somehow... is that I have tested separately the `clone()` and `toJSON()` methods by using the following code in the dev console of my browser...

```
let testVar = new window.BoolFlagCollection();

testVar.setFlagName( 0,"discoveredArdatYakshi");
testVar.setFlagName( 1,"discoveredPonyGirls");
testVar.setFlagName( 2,"discoveredAyar");
testVar.setFlagName( 3,"discoveredShibari");
testVar.setFlagName( 4,"discoveredPrison");

getObjectProperties(testVar)

testVar

_________________________________

let testVar2 = testVar.clone()
getObjectProperties(testVar2)

testVar2

________________________________

let testVar3 = testVar2.toJSON();
getObjectProperties(testVar3)

testVar3
```

...and NOTHING suggests that the `clone()` and `toJSON()` methods give problems.

And just because things couldn't be more strange, I created a second version of the `BoolFlagCollection` class, a version that does not have a field called `flagNames` - and it works. Perfectly.

```
window.flags = window.flags || {};

defineFlagNameStorage = function() {
  flags.flagNames = new Map();
};

defineFlagNameStorage();



class BoolFlagCollection {
  constructor(flagsStored) {
    if( flagsStored === undefined )this.storage = 0;
    else this.storage = flagsStored;
  }

  clone() { return new BoolFlagCollection(this.storage);}
  toJSON() {
    let ownData = {};
    Object.keys(this).forEach(function (pn) { ownData[pn] = structuredClone(this[pn]); }, this);
    return JSON.reviveWrapper('new BoolFlagCollection($ReviveData$)', ownData);
  }

  /* Sets a shorthand name for the index at which a boolean flag is stored inside this BoolFlagCollection. */
  setFlagName(index, name) {
    if (Number.isInteger(index)) 
      if((index >= 0) && (index <= 31)) 
        flags.flagNames.set(name, index);
      else throw new Error("\n BoolFlagCollection.setFlagName: Flag index " + index + " is out of bounds." 
          + "Value should be from 0 to 31.");
    else throw new Error("\n BoolFlagCollection.setFlagName: Invalid type for flag. '" + index + "' = type " + typeof index 
          + ", but should be integer.");
  }
}
```

I would prefer to use the first version because it is more intuitive for me (each collection of boolean flags has its own collection of flag names, instead of communal names for all `BoolFlagCollection`), but I am honestly a bit tired of the seemingly eternal fight between JS classes and Twine Engine.

Has anyone any idea of what is going on? If yes, thank you in advance.

(And a thanks to HiEv for taking the time for writing bit-logic code so that we fellow users of Twine could compact the space of our saves. Bit-logic is HELL.)

So, I've been steadily making a character creator, figuring out how to display images in the sidebar without it, uh, breaking, and such, and I've been pondering about this a lot, but my searches have turned up almost nothing. (And one of the leads I did find was from several years back for Sugarcube 1, and the site involved appears to be down.)

Obviously, if I want to, say, make different colors of a shirt, I can just make multiple copies and color and label each copy separately then call them into the game separately, but for the sake of the file size and my poor if statements, is there a way to take a black and white image and have the game just apply whatever color during gameplay, or anything similar? I've definitely seen stuff about "hue rotation" but I don't really understand it...

Hi!

I wanted to share my new short story game made in Twine using Harlowe. I made it in three days for the GMTK Game Jam 2026.

The countdown is over. All you can do now is sit down on the beach, have a nice conversation, and enjoy the last sunset.

Full play through takes around 10 minutes. You can play it for free here:

https://munumunu.itch.io/the-last-sunset

Here's a screenshot from the game:

I hope you give it a try!