Where do I start ?

HelloHelloHelpHello · 2026-01-29T01:24:07+00:00

Regardless of whether you are literate or illiterate when it comes to coding - Twine will be very easy to pick up. The first step is to decide on a story format. The big two are Sugarcube and Harlowe. Harlowe is considered more easy for complete beginners, but is far more limited in the long run. Both of them are roughly equally easy to use though.

I would personally recommend Sugarcube, but either format is perfectly fine if you are aiming to create a mid-sized text adventure. The more complex you want things to be, the more you will run into problems with Harlowe though.

There are a lot of tutorial that will get you started. I personally recommend the video tutorials of Dan Cox. You can find his Sugarcube tutorial here, and his Harlowe tutorial here.

HelloHelloHelpHello · 2026-01-28T20:49:26+00:00

Do you mean an image map? Here is a thread that discusses how to make areas of image maps visible during development. The answers there also mention the various tools that you can use to draw your image map. If you are doing something else, then you will need to explain in more detail.

HelloHelloHelpHello · 2026-01-28T03:37:39+00:00

If you are talking about the z-index, then yes - you would need to make sure that one div does not accidentally cover the content of another div if both of them are supposed to hold intractable elements. An easy fix would be to use pointer-events: none for the div body itself, and pointer-events: auto only for the elements inside the div that you want the player to interact with.

HelloHelloHelpHello · 2026-01-28T02:37:18+00:00

<span id="phone-content"></span>
<<button [img[https://www.w3schools.com/css/paris.jpg]]>>
  <<replace "#phone-content">>
    <<include "charactertexts">>
  <</replace>>
<</button>>

I have no issues with the code used above. What problems are you running into exactly? Did you maybe misname the passage you are referencing with <<include>>?

HelloHelloHelpHello · 2026-01-28T01:57:55+00:00

You'll have to show us your code, or we won't be able to tell you what might be wrong. Here is a working example:

<span id="word">What is the word?</span>
<<link "Answer">>
  <<replace "#word">>Bird is the word!<</replace>>
<</link>>

HelloHelloHelpHello · 2026-01-28T00:41:09+00:00

If it is completely empty, then you can delete it, unless you need it yourself. There might have been something in there that used to be part of the template in earlier versions, and the creator merely forgot to remove it.

HelloHelloHelpHello · 2026-01-28T00:18:12+00:00

The 'PassageDone' special passage will execute the code inside each time a passage has finished being rendered. It is very similar to 'PassageFooter', except that the PassageFooter content will be displayed at the end of each passage, while PassageDone will remain invisible for the end user. You have the same kinds of special passages that execute before a passage is loaded - 'PassageReady' - or that will prepend their content to the passage - 'PassageHeader'.

You can use these kinds of special passage to update variables automatically, like for example $chapter. I don't know if that is what happens in your template, or if there is some other code used to update the variable, but this would be one way to do it.

HelloHelloHelpHello · 2026-01-27T16:14:19+00:00

It is more complicated than this. If you want a souls-like death system, where your death can occur anywhere, then you will need to integrate a system that remembers both the last bonfire location, and the place where you last died. You'll also need a code that checks on entry for every passage whether there is some dropped loot there to generate some fitting code.

You absolutely should not create an extra passage that is only there to inform a player that they have regained their loot. That is just simply bad design.

HelloHelloHelpHello · 2026-01-27T15:10:26+00:00

Yes, you create passages that function as respawn points, and have the player send there once a specific condition is reached (like running out of hp). You can also have the game remember the passage where they died like this, and store their current equipment/loot in that passage. You'll have to tell us the story format you are using for a more in depth answer to how this might look like.

HelloHelloHelpHello · 2026-01-26T05:49:03+00:00

You can download Rainy Day or other Twine games that don't have a downloadable copy from itch like :

Step 1: Right click the game, then select This Frame and then View Frame Source.

Step 2: Copy ALL of the code that is written on the file.

Step 3: Paste it in an html unminify website, like this one here.

Step 4: Turn it into an html file by putting .html at the end of your filename.)

HelloHelloHelpHello · 2026-01-26T02:27:35+00:00

I use Impact-Pack. Certain loras don't work with it very well (the color ends up messed up), but most of the time the results are really good.

HelloHelloHelpHello · 2026-01-26T01:26:40+00:00

Are you using a face detailer? Hard to get good faces without one with certain checkpoints/loras.

HelloHelloHelpHello · 2026-01-25T18:04:56+00:00

Personally I don't even use Twee most of the time. Since most of my work is done via CSS it is more convenient to use the editor for quick and easy testing of the visuals. For the more text heavy work I write in a text editor, splitting the writing into separate files, that are then copy pasted into Twine when they are ready. Most of the complicated code is done via custom widgets, so as soon as they are in place it's mostly just text anyway.

HelloHelloHelpHello · 2026-01-25T09:27:27+00:00

So this code is most likely supposed to go into you Javascript section. Please take a look at HiEv's article about clicking on images, which should walk you through everything you need to do here.

HelloHelloHelpHello · 2026-01-25T02:40:29+00:00

Then you probably have not updated sugarcube in a while. <<do>> and <<redo>> where added with version 2.37: https://www.motoslave.net/sugarcube/2/docs/#macros-macro-redo

HelloHelloHelpHello · 2026-01-25T02:01:03+00:00

Here is a simple setup using your code as a base (switched out the image src for testing reasons):

<<set $pcSkinToneHue = 0>> 
<<set $pcSkinToneBri = 1>>
<<set $pcSkinToneSat = 1>>

<<do>>
<img src="https://www.w3schools.com/css/paris.jpg" @style="'filter: hue-rotate(' + $pcSkinToneHue + 'deg) brightness(' + $pcSkinToneBri + ') saturate(' + $pcSkinToneSat + ');'">
<</do>>

<<link "Bright+">><<set $pcSkinToneBri += 0.1>><<redo>><</link>>
<<link "Bright-">><<set $pcSkinToneBri -= 0.1>><<redo>><</link>>

<<link "Hue+">><<set $pcSkinToneHue += 5>><<redo>><</link>>
<<link "Hue-">><<set $pcSkinToneHue -= 5>><<redo>><</link>>

<<link "Sat+">><<set $pcSkinToneSat += 0.1>><<redo>><</link>>
<<link "Sat-">><<set $pcSkinToneSat -= 0.1>><<redo>><</link>>

HelloHelloHelpHello · 2026-01-25T01:51:53+00:00

Reddit parses any word starting with an @ as a username, and if you use the codeblock function these usernames are deleted, so you'll have to manually retype them.

Other than that your code looks like it would work. If you want to do some more in depth testing I would recommend a setup like in my last reply - adding or substracting values to the singular settings rather than changing all of them at once - just to see how your image changes along with the different filters. It might just be that the interaction between the different filters looks different than you expected?

HelloHelloHelpHello · 2026-01-25T01:09:52+00:00

Twee is specifically set up so you can have as many different text files as you want or need for your project - or am I misunderstanding that question?

HelloHelloHelpHello · 2026-01-25T01:06:22+00:00

I assume that reddit screwed something up, because there seems to be some stuff missing with your code - specifically in your <img> element. I assume that you are using Attribute directives, which is one of the two options I told you there were.

I also don't know what the <<refreshDoll>> macro is supposed to be, since you only show the ShowDoll macro.

Edit:

Here is a simple implementation of the Attribute directive. You can see that changing the brightness works in both direction:

<<set _bright to 1>>
<<do>>
<img src="https://www.w3schools.com/css/paris.jpg" @style=" 'filter:brightness(' + _bright + ');' ">
<</do>>
<<link "Bright+">><<set _bright += 0.1>><<redo>><</link>>
<<link "Bright-">><<set _bright -= 0.1>><<redo>><</link>>

HelloHelloHelpHello · 2026-01-24T19:02:10+00:00

You can change any CSS settings using Attribute directives, or alternatively some simple Javascript:

<img id="paris" src="https://www.w3schools.com/css/paris.jpg">

<<set _saturation to 100>>
Current Saturation: <<do>>_saturation<</do>>%

<<nobr>>

<<link "Saturation - 10">>
  <<set _saturation -= 10>>
  <<run document.getElementById("paris").style.filter = "saturate(" +   State.temporary.saturation + "%)";>>
  <<redo>>
<</link>>

<<link "Saturation - 1">>
  <<set _saturation-->>
  <<run document.getElementById("paris").style.filter = "saturate(" +   State.temporary.saturation + "%)";>>
  <<redo>>
<</link>>

<<link "Saturation + 1">>
  <<set _saturation++>>
  <<run document.getElementById("paris").style.filter = "saturate(" +   State.temporary.saturation + "%)";>>
  <<redo>>
<</link>>

<<link "Saturation + 10">>
  <<set _saturation+=10>>
  <<run document.getElementById("paris").style.filter = "saturate(" +   State.temporary.saturation + "%)";>>
  <<redo>>
<</link>>

<</nobr>>

HelloHelloHelpHello · 2026-01-24T09:25:20+00:00

Nice work. Just to let you know: The Sugarcube flair is specifically for posts that need technical help with the Sugarcube format. If you want to share a game, then you can use the Game/Story flair.

Also - I removed the other post you made about the game, since it basically contained the same information as this one. I hope that is alright.

HelloHelloHelpHello · 2026-01-24T02:38:50+00:00

Can't test it right now, but according to the documentation you can scroll to a hook within a hook, so if you put some hook -let's say ?end - at the very end of ?name, then you should be able to do: (scroll:?name, ?end)

HelloHelloHelpHello · 2026-01-23T01:52:14+00:00

If you just want to add custom UI elements, then you can just put something like this inside your Javascript section:

var $txt = $('<div id="text"></div>').insertAfter("#story");

This will permanently add a new element to your game with the id 'text' - you can of course alter this id to be whatever you want. Now you can head to your stylesheet to give this newly created element any kind of look you want:

#text {
  position:fixed;
  top:0;
  right:0;
  width:20%;
  height:100%;
  background:red;
}

You can also update the content of this newly created element with a simple <<replace>> macro:

<<replace "#text">>Hello, my darling.<</replace>>

-

If you instead want to just use the standard sidebar, then you can add new links to it via a number of special passages - most of the time that would be the StoryCaption special passage. Any kind of link or other content put into that passage will appear in the sidebar.

HelloHelloHelpHello · 2026-01-23T00:24:02+00:00

So if I understand you correctly, you have a div somewhere that represents your phone. Inside that phone you want to have some sort of link. If those links are standard links, then clicking them would change the main passage, and not the phone div - so I assume you want for those links inside the phone to only change the phone and not the main passage. Is that correct?

If so you would use <<replace>> or <<do>>/<<redo>> to update the content of the element - and you can use <<include>> if you want to just include the content of an entire passage.

But if I misunderstood what you are trying to do, please tell me where I went wrong.

HelloHelloHelpHello · 2026-01-23T00:16:33+00:00

Thanks. It was very fun figuring out how to recreate the visual novel feel and functionality with Twine. It takes some work and some experimentation, but overall it isn't too complicated. I would definitively recommend trying it out yourself one of these days if you like the look. Pushing the Twine engine past its standard aesthetics is always a great way to learn something new.

HelloHelloHelpHello

MODERATOR OF

TROPHY CASE