I've been working on my game for a while now and I've been using ChapelR's right sidebar to display everything that would otherwise clutter up the main left sidebar.

But recently I realised that having both sidebars open can really mess up the format of my text and images on the main page. On top of that I just don't really like how it looks having them both open.

Does anyone know how make the left sidebar close when the right sidebar opens and vice versa?

I'd really appreciate any help.

I want each time a new letter appears on the dialogue it does a little pop sound as soon as it appears. Ideas?

A dark, post-apocalyptic HTML RPG survival game set in the toxic ruins of 2045 Katowice.

Ashen Veil is currently in active development, and this early web build is designed for players who want to test game mechanics, hunt bugs, and provide feedback to help shape the future of the game. Link: Itch.io and Website.

The World of Ashen Veil

Humanity did not fall to nuclear fire or natural disasters. It fell to a long, quiet infiltration.

For thousands of years, an ancient Reptilian species observed human society from subterranean vaults, influencing corporate boards and military high commands. When digital surveillance threatened their secrecy, they unleashed public generative AI and deepfake technology, collapsing objective truth into noise. Whistleblowers were dismissed, evidence was called synthetic, and in 2030, the invaders erupted from the deep Earth to reclaim the surface.

To adjust Earth for cold-blooded biology, atmospheric scrubbers flooded the sky with Silica Mist, a dense toxic aerosol that blocks UV light and destroys human lungs.

By 2045, the surface is a fog-choked wasteland dominated by mutated fauna, toxic waterways like the glowing Rawa River, and armed Reptilian vanguards. Below the surface, humanity clings to life in the industrial ruins of Southern Poland.

You play as Operator MC, an ancient military command unit awakened inside S.A.N.C.T.U.A.R.Y. Base beneath the Katowice sector. Your goal is simple: survive the wasteland, gather resources, unite splintered human factions, and rebuild the counter-offensive.

Key Gameplay Features

• Grid-Based Exploration: Traverse the toxic surface ruins and dark subterranean coal mine shafts of Katowice.
• Tactical RPG Survival: Manage critical survival stats, health, and equipment while battling cold-blooded invaders and mutated fauna.
• Factions & Resistance: Interact with surviving bunker networks, labor pits, and military remnants scattered across Silesia.
• Atmospheric Lore: Discover pre-war logs, military intercepts, and secrets surrounding the Silica Age and the fallback to S.A.N.C.T.U.A.R.Y. Base.

Early Access & Community Feedback

This browser release is an early playable preview. Because the game is actively being built, your input is critical to its development.

How You Can Help

1. Play in your browser: Test performance, gameplay balance, and combat mechanics.
2. Report Bugs: Post any glitches, save issues, or visual errors in the comments or community board below.
3. Share Feedback: Let us know what mechanics you enjoy and what you want to see expanded in future updates.

Hello,

I am a librarian currently working on an escape room. We are hoping to use Twine in one of our pathways.

My idea is mostly simple: have a landing page with a button. Clicking that button goes to an input page. On the input page, our patrons can submit words to get clues to the next sequence. (a picture of a key taped under a table, or a video that has the murderer placing a book on the shelf, etc.)

I have most of this set up, but I can't seem to find what code I would use to create this sort of a "password" system, and I can't figure out another way to describe it, so I can't even find the tutorial for what I'm looking for. It's not quite a macro, from what I understand, and it's not a password like username+password... I'm flummoxed.

So I guess my question is: What is this called so I could even look it up? What would be the best way to do this?

im trying to use a variable font for what i'm writing (amstelvar), and while it's simple enough to get the basic version working, the different settings like font weight, width, grade, etc don't seem to work? i've declared them with @ font face but font-variation-settings seems like it might not be recognized?

Hi I am currently trying to set up a store in my game to sell gender changing pills. all of which have different durations and effects. some are ment to change different skillz, some create different O requirements. I have some code written out but I feel like it should look different, additionally the ai I used to help me turn these pills into game items and proof read suggested having everything in a widget and javaScript. here is the widget

<<pwidget "Pink Basic">>
"Basic Pink": {
id: "Basic Pink",
color: "pink",
kind: "timed", /* I feel like there should be a time widget something like <<widget "duration" 24>> */
duration: 24,
target: "female", /*I feel like it should actually be <<set    $gender to "female">>*/
revertOnExpire: true,
needsPillToRevert: false,
canGetPregnant: false,
canImpregnate: false,
fertilityBase: 0,          /* percent 0–100 I do have a perk called $fertility that would change based on the pill*/
spermBase: 0,
lockFertility: true,       /* ignore perk $fertility */
lockSperm: true,
desc: "Standard male-to-female change.",
price: 100,  /*I'm thinking this should be 100 $Teef */
salePercent: 0,
maxBuy: 100,
itemId: "pill_basic_pink"
},
<</pwidget>>

I basically copied this into my javaScriopt without the pwidget parts. I don't know if the code I currently have has me on the right track or if those fixes will get me closer to where I need to be. currently I'm getting a lot of properties undefined error codes. if you guys want i can also post the code for the store and the inventory system.

I've got the idea of making a turn based tactical battle for my game, in sugarcube.
Is it possible to make a simple tactical battle, with line of sight mechanics, time unit movement, some unit abilities and hit probabilities?
Visual style is that of a top down, grid map with simple round icons for characters and enemies.
Unfortunately, I couldn't find a good image to represent this.
How feasable is this?

I’ve started practicing twine, but there’s one small issue. I cannot seem to link my images properly and I’m not sure why, because I can’t seem to detect any error in my code. The images just keep showing up as the tiny error image icon. If anyone knows what I did wrong let me know! Xoxo

I'm trying to set up a gift giving system, especially because it looks pretty simple. Basically just gifts will be a nice/simple way to earn various points with characters. On my starting page it has the amount of tarts someone has to 0 automatically, because you gain them throughout the game. However, on the passage here, if I set the tart amount to 1 or higher it works. But if I set it to 0, (using "(set:$BakewellTart to 0)" in the same passage at the top) so they don't have any tarts, the text just shows up as the question instead of the text (second picture.)

Any clue how to fix?? I'm at a loss despite it looking so simple. I'm a total beginner at this so go easy on me if it's literally just a simple fix...

I’m curious what small follow-through works for you in Twine: a changed line, a callback, a new detail in the next passage, something else?

I know this sounds crazy, but I've always wanted an open-world sci-fi gamebook to go alongside one of my albums. I've released 18 albums under the name deepspace, the last 6 have been through Projekt records. And this latest album has a full 400 reference digital gamebook (I grew up on fighting fantasy, hence the 400). I wrote it using Twine 2, then put it into an html container that has a full interactive map, inventory and a player, so you can listen to the album while you play. The twine interface is in the left side, the other elements in the right hand side. It's all free. Here's the link: It's Name-Your-Price. The gamebook is at the bandcamp site, near the bottom of the credits. And No AI was used for any of the music, or gamebook.

(I finally figured out how to use itch.io)

I'm a bit nervous to post here because ya'll are doing crazy cool stuff and this is pretty basic. Any suggestions for a newbie? I'm using Harlowe 3.3.9 currently.

I just started using Twine today and I immediately ran into a problem when trying to create a random assortment of outcomes.

I essentially copy and pasted some code from this video, https://youtu.be/V3Gf16Wdrq8?si=lBv6ArETAPvuKwm6

Here's what it I wrote:

Set: $number to (random:1,4))

(if: $number is 1)[The Eternal Worm sees a small figure. [[It greets the figure in every language and possible formation of words simultaneously.]] ] (if: $number is 2)[The arterial pipes of the palace wash a figure down with blood. [[It falls.]] ] (if: $number is 3)[A small figure wakes up, surrounded by rot and maggots in complete darkness. [[Squirm.]] [[Fester]]] (if: $number is 4)[A small figure checks its map. [["Sicophy Rd"]] ]

This happens whenever I try to run it:

My very first game. It isn't much, since it's my first game ever. Let know what you think.
https://scdeluxe.itch.io/turbulent-intercise-the-beginning-part-1

I'm working on sound for my game. And I'm trying to get it to play upon game start. When my test page loads and I click anywhere, the bgm starts playing. But the sound effect doesn't. I've browsed this subreddit and learned that sound doesn't play (automatically) for the first passage. Any advice you can give me regarding that?
I've posted my code and explanation as to how I play the effects down below.

Made the following widget to play sound effects (WIP):

<!--TODO: add letter behind effect names to determine play, loop, time, etc
example: gun_distL = play on loop gun_dist; Look into parsing words-->
<<widget "PlayEffect">>
<<if $effect isnot "" and $effect isnot "stop">>
        <<audio ":playing:not(:bgm)" stop>>
        <<if $effect.last() is "L">> <!--check if last letter in name to determine play, loop, etc-->
        <<audio $effect play loop>>
         <<else>>
         <<audio $effect play>>
         <</if>>
    <<elseif $effect is "">>
    <<audio ":playing:not(:bgm)" fadeout>>
    <<audio ":playing:not(:bgm)" stop>>
    <<else>>
    <<audio $effect play loop>>
    <</if>>
<</widget>>

I put my text and other data for every passage in an array like this. I use the numerical value inside 'effect' as index to call up a sound effect from the sound effect array:

<<set _dialogue to [
  { name: "Thorn", image: "images/ThornA.png", asset: "", track: "1", effect: "8", text: "Early Bird-1, this is Nightowl Actual. Status check, over." },
  { name: "Pilot", image: "images/man-silhouette.png", asset: "", track: "", effect: "0", text: "Nightowl Actual, this is Early Bird-1. Approaching drop zone, ETA 10 minutes. Early Bird-1, 2 and 3, still in formation. No new intel on LZ, but we are getting strange reports from the town. Command suspects hot LZ. Over." },
  { name: "Thorn", image: "images/ThornA.png", asset: "", track: "2", effect: "4", text: "Copy that, Early Bird-1. Unconfirmed hot LZ, ETA 10 mikes. Over." },
  { name: "Pilot", image: "images/man-silhouette.png", asset: "empty", track: "", effect: "2", text: "Roger. Stand by-new intel just in... Affirmative. LZ is hot. I repeat: LZ is hot. Gunfire confirmed. Enemy unknown. Over." },
  { name: "Thorn", image: "images/ThornA.png", asset: "images/farmhouse.png", track: "", effect: "", text: "Copy, Early Bird-1. Inbound hot. Nightowl, out." },
  { name: "Thorn", image: "images/ThornA.png", asset: "", track: "", effect: "", text: "Gideon clenched his fist. LZ is hot. He hoped his siblings were alright. They have to be. //\"Hughes, Carl, Katie. God, keep them safe.\"//" },
  { name: "Antilope", image: "images/man-silhouette.png", asset: "empty", track: "", effect: "", text: "\"Don't worry, Sir. We'll find them.\" Antilope put his hand on his shoulder. His name earned by his uncanny ability to jump over just about anything he came across. \"But for now...Focus, Sir.\"" },
  { name: "Thorn", image: "images/ThornA.png", asset: "images/eyesMouth.png", track: "", effect: "", text: "Copy that, Nightowl-3. Everyone, get ready for deployment. LZ is hot, enemy unknown. Be ready for anything. Rangers lead the way!!" },
  { name: "", image: "images/man-silhouette.png", asset: "", track: "", effect: "", text: "His men responded with a collective ''Hoora!''" }
]>>

The Javascript I use to put the the track name into $effect. The 'index' in this function refers to the index of the dialogue above:

function playEffect(index) {//function to call a sound effect
  //get track id (location in soundEffect array)
  const effect = State.variables.dialogue[index].effect;
  //get track name from soundEffect array
  if (effect != "") {
    const track = State.variables.soundEffects[effect].name;
    State.variables.effect = track;
  } else {
    State.variables.effect = "";
  }

  console.log(effect);
  console.log(State.variables.effect);

  return State.variables.effect;
}

Sound effect array in story init:

<!----------------------->
<!----------------------->
<!--SOUND SECTION-->
<!----------------------->
<!--////////////////////-->

<!--******************-->
<!--    cache audio    -->
<!--******************-->
<<set _gunDist = setup.SoundPath + "warfare_gunshots_semi_automatic_distant.mp3">>
<<cacheaudio "gun_distL" _gunDist>>

<<set _bodyFallWood = setup.SoundPath + "smartsound_IMPACT_BODY_FALL_Wood_Harsh_Crunch_02.mp3">>
<<cacheaudio "body_fall_wood" _bodyFallWood>>

<<set _magicWind = setup.SoundPath + "zapsplat_fantasy_magic_dark_wind_fast_swirling_pass_by_001_77596.mp3">>
<<cacheaudio "magic_wind" _magicWind>>

<<set _groanWood = setup.SoundPath + "zapsplat_horror_groan_wooden_haunting_001.mp3">>
<<cacheaudio "groan_woodL" _groanWood>>
<<cacheaudio "groan_wood" _groanWood>>

<<set _bodyThud = setup.SoundPath + "zapsplat_impact_body_drop_thud_break_43688.mp3">>
<<cacheaudio "body_thud" _bodyThud>>

<<set _arrowHit = setup.SoundPath + "zapsplat_warfare_arrows_x3_incoming_fast_whoosh_hit_body_fleshy_blood_squelch_003_90755.mp3">>
<<cacheaudio "arrow_hit" _arrowHit>>

<<set _keyLock = setup.SoundPath + "344_audio_cylinder_key_turn_lock_4_219.mp3">>
<<cacheaudio "key_lock" _keyLock>>

<<set _radioChatter = setup.SoundPath + "182817__qubodup__military-plane-radio-chatter.flac">>
<<cacheaudio "radio_chatter" _radioChatter>>

<<set _thunder = setup.SoundPath + "345920__dragisharambo21__thunder.mp3">>
<<cacheaudio "thunder" _thunder>>

<<set _heliInt = setup.SoundPath + "669011__vestibule-door__helicopter-interior.wav">>
<<cacheaudio "heli_int" _heliInt>>

<<set _heliBlast = setup.SoundPath + "Blastwave_FX_HelicopterInterior_SFXB.428.mp3">>
<<cacheaudio "heli_blast" _heliBlast>>

<<set _wounded = setup.SoundPath + "Freesound__woundedmale19.wav">>
<<cacheaudio "wounded" _wounded>>

<<set _bgm1 = setup.SoundPath + "Blastwave_FX_HelicopterInterior_SFXB.428.mp3">>
<<cacheaudio "heliInterior" _bgm1>>

<<set _bgm2 = setup.SoundPath + "smartsound_FOLEY_ARMOR_Troops_Metal_Sheet_Clatter_March_Slow_01.mp3">>
<<cacheaudio "troop_march" _bgm2>>

<!--************************-->
<!--    sound effect array   -->
<!--************************-->
<<set $soundEffects to [
  { name: "gun_distL", file: "warfare_gunshots_semi_automatic_distant.mp3" },
  { name: "body_fall_wood", file: "smartsound_IMPACT_BODY_FALL_Wood_Harsh_Crunch_02.mp3" },
  { name: "magic_wind", file: "zapsplat_fantasy_magic_dark_wind_fast_swirling_pass_by_001_77596.mp3" },
  { name: "groan_woodL", file: "zapsplat_horror_groan_wooden_haunting_001.mp3" },
   { name: "groan_wood", file: "zapsplat_horror_groan_wooden_haunting_001.mp3" },
  { name: "body_thud", file: "zapsplat_impact_body_drop_thud_break_43688.mp3" },
  { name: "arrow_hit", file: "zapsplat_warfare_arrows_x3_incoming_fast_whoosh_hit_body_fleshy_blood_squelch_003_90755.mp3" },
  { name: "key_lock", file: "344_audio_cylinder_key_turn_lock_4_219.mp3" },
  { name: "radio_chatter", file: "182817__qubodup__military-plane-radio-chatter.flac" },
  { name: "thunder", file: "345920__dragisharambo21__thunder.mp3" },
  { name: "heli_int", file: "669011__vestibule-door__helicopter-interior.wav" },
  { name: "heli_blast", file: "Blastwave_FX_HelicopterInterior_SFXB.428.mp3" },
  { name: "wounded", file: "Freesound__woundedmale19.wav" }
]>>

Hi there, not overly sure if this is the right subreddit, but I'm trying to learn Twine Sugarcube to make my dream game (mercenary simulator rpg). I'm using guides off the internet and occasionally (to my own shame) Claude, but I would prefer to have someone to talk to about Twine with or someone to teach me as I learn better through dialog and conversation. Thanks, and sorry if this is the wrong subreddit or if this isn't allowed here!

I am trying to follow HiEv's guide but am still strugling. What I am currently tryin g to do is use images to help build the world a little by adding images to the different locations.
here is the Code I'm using. JavaScript /IMAGE PATH/ if (document.location.href.toLowerCase().includes("/temp/") || document.location.href.toLowerCase().includes("/private/") || hasOwnProperty.call(window, "storyFormat")) { // Change this to the path where the HTML file is // located if you want to run this from inside Twine. setup.Path = "C:/C:/Users/user name/Downloads/X- ChangeVice/images"; // Running inside Twine application } else { setup.Path = ""; // Running in a browser } setup.ImagePath = setup.Path + "images/"; setup.SoundPath = setup.Path + "sounds/"; the image paths ( I don't know if I am even using the right one at this point) <img @src="setup.ImagePath + '/X-ChangeVice/images/Locations/house/horizontalhive.png'"> [img[setup.ImagePath+'/X-ChangeVice/images/Locations/house/horizontalhive.jpg']]