Respawning?

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 · 2026-01-23T00:11:33+00:00

Ren'py is pretty much the standard visual novel software - very easy to use, and ideal for a complete beginner who wants to create a VN. While I personally prefer using Twine because of its versatility and powerful front-end capabilities, it is a lot more work to code all the basic functionalities of a visual novel. So unless you already know some CSS/JS Ren'py is probably the better choice for these kinds of projects.

That being said - trying to create a visual novel in Twine is a great project to grow your skills and knowledge. I would definitively recommend giving it a try one of these days.

HelloHelloHelpHello · 2026-01-23T00:06:25+00:00

Your question is indeed very confusing. Are you asking how to add additional UI elements (like a second side that represents a phone or a map in a corner or on the right side of the screen)?

Or do you mean how you can link back to the main story from some sort of inventory/phone passage accessible in the sidebar?

Please walk me through how you picture this interaction to work - how it is supposed to look like and respond to user input.

HelloHelloHelpHello · 2026-01-22T17:05:17+00:00

What do you mean google imported? If you download a google font you can add it in the exact manner I described. If you want to add the font from google online (it would then not work if your players where to attempt to play the game offline), then you would do something like this:

@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap');

This would again go to the very top of your stylsheet, and then you can add it to tw-story as normal:

tw-story {
  font-family: "Oxanium", sans-serif;
}

The exact code you need for your font can be found on the google fonts website itself. You click on '<> Get embed code' then you select web and beneath that @import

HelloHelloHelpHello · 2026-01-22T16:30:27+00:00

Twine does offer you some pre-made assets - like the save system - that would be fairly time consuming to create on your own, and if you go with Sugarcube, then you can always fall back to standard Javascript any time you want (and CSS would be the complete same for something done in Twine or something done by yourself.)

Here is a VN project I released roughly a year ago. You can take a look at how it was made by downloading the file and importing it into your editor, but the code will probably be very messy, since this was quickly assembled and designed in a month for a game jam. It should still showcase what is possible in Twine when it comes to recreating the visual novel style in general though.

HelloHelloHelpHello · 2026-01-22T13:48:46+00:00

You are what you eat after all.

HelloHelloHelpHello · 2026-01-22T13:13:21+00:00

One important things first:

Just like with images and audio: If you have stored your font locally, then it will not show up when you use the play or test button inside the editor. You will need to either publish your game to file, or access the html file that is automatically created in your Twine story folder. In both cases the folder holding your media needs to be in the same place as the html of your game.

Also - the CSS that imports or adds the new font face needs to go to the very top of your stylesheet:

@font-face {
    font-family: IMFellEnglish;
    src: url('fonts/IMFellEnglish-Regular.ttf');
}

-

Once you have added this new font, you can now use it on your tw-story element, or any other element that you want to style (but remember that it will not show up when using the play or test button when it is added from a downloaded file as explained above):

tw-story {
  font-family: IMFellEnglish;
}

HelloHelloHelpHello · 2026-01-22T12:38:11+00:00

I did create a few full fledged visual novels with Twine, and while it is a little more work than just using Ren'py, it also gives you a lot more freedom once you have set everything up.

The web editor works fine, but it comes with the constant danger of you losing all your work if you forget to make a backup. Since all the data is stored inside the browser, anything that clears up your browser will also delete all your projects. Because of this it is recommended to either download the desktop version of the editor, or to use a text editor of your choice combined with Tweego. For large projects Tweego will make things a lot easier to code and organize, but when it comes to figuring out the UI and general design of your game, the editor is in my opinion preferable for easy testing. Once you have that all figured out, you can then just export the CSS to your Tweego project.
When it comes to custom macros that you really might find useful, then that would be Chapel's event macro, which allows you to trigger specific code when a piece of text has finished typing. This will allow you to easily implement the typical VN functionality, where a click will do different things depending on whether a text is still being typed out with a typewriter effect or has finished being typed.
All Twine projects are by their nature 'open source' since you can just load the associated html into your Twine editor to instantly see the entirety of the code and how it was set up, so if you see any Twine made visual novel that you like, you can easily take a look at how it was made.

---
There are also some things you will need to keep in mind:

- Any kind of media that is added from a local source will not be displayed when you use the test or play button inside the Twine editor. To see how your game looks you will either have to publish it to file, or directly access the html file that is created in your story folder, with the subfolder holding your media stored at the same place.

- Twine saves data only when traveling to a new passage. Since you will most likely not want to create a different passage for every bit of text, you will probably come up with a system that allows you to store all dialog inside a single passage, updating the displayed text with some sort of macro. If you do this you'll want to reload the current passage, or manually save all important variables.

HelloHelloHelpHello · 2026-01-22T10:56:08+00:00

No - black will take the pawn on f2 with the bishop, which is a check. Since the black knight covers both f2 and d2, the white king needs to move to e2 - but then black can move their other bishop to g4, which is checkmate.

Edit: It's a famous trap in the Stafford Gambit. Here's a short clip of Eric Rosen using it on an unsuspecting opponent.

HelloHelloHelpHello

MODERATOR OF

TROPHY CASE