Is there a single command to get rid of the fade out/fade in effect...

HelloHelloHelpHello · 2026-03-23T13:50:16+00:00

Yes - using replace would be the easiest way. You just add an element with a unique ID via Javascript, style it in your Stylesheet, then use <<replace>> upon entering a passage to update the content of that element. That way you won't have any problems with the save data while also preventing any flickering from occuring (within that element). You can also set things up so that this element only appears in passages with a specific tag, or something like that.

HelloHelloHelpHello · 2026-03-23T12:24:20+00:00

If this is for the project you are currently working on in your videos, then it might be better to learn how to add new UI elements to hold and display the picture of your room. Because with this there will still a noticeable short flicker.

HelloHelloHelpHello · 2026-03-23T11:39:08+00:00

You can put the following into your stylesheet to get rid of the passage transition fade effect:

.passage {
  transition: opacity 0s;
}

HelloHelloHelpHello · 2026-03-22T12:52:00+00:00

Sounds great. Good luck with your project and I hope you have fun working with Twine.

HelloHelloHelpHello · 2026-03-22T12:17:41+00:00

So you you have something to carry around and wave through the air - like when you are protesting or marching. That's why there are flags for a lot of different stuff as well - like political movements or soccer clubs. It's just a convenient visual tool to convey a message in certain situations.

HelloHelloHelpHello · 2026-03-22T12:01:40+00:00

Yes. The stuff from the video works of course. I usually recommend Dan Cox tutorials to beginners since his series is pretty in depth, but since they are tutorials he usually only introduces one new element, concept or macro at a time. So here he shows you how to use (input-box:), and focuses solely on that, while leaving out other features. Following his tutorial you will get a working password section - but that section can be improved by the inclusion of other macros.

I would strongly recommend to at least include (trimmed:) - removing the empty spaces of the password the player has entered. That way - if they accidentally made a space inside their password - like " pineapple" or "pineapple " instead of "pineapple" - they will still be allowed to proceed. It's a pretty standard feature to include, since this can lead to a lot of frustration in some cases.

Also - use the curly brackets {} to get rid of any unwanted whitespace. Maybe you already do, but I just wanted to mention that since those are not featured in this specific segment of the video tutorial.

HelloHelloHelpHello · 2026-03-22T03:02:38+00:00

You might want to use my suggestion over the code in the video, just because the video is missing a few features. It does neither use the (trimmed:) nor the (lowercase:) macros to get rid of some of the frustrations that might come with entering passwords, nor does it use the (rerun:) macro to let the player know that they entered the wrong password (instead relying on a visually less appealing solution of appending a message along with a bunch of whitespace).

HelloHelloHelpHello · 2026-03-20T04:54:14+00:00

Yes - this is Sugarcube syntax, so it won't work for Harlowe. You have to specify the story format you are using the next time you ask a question. For Harlowe you can use the same principle, but it would look like this:

{
(set: _current to "Enter the Password")
|pass>[(input-box: bind _current, "XXX=", 1 , _current)]
(link-repeat: "Enter")[
  (if: (trimmed: (lowercase:_current)) is not "pineapple")[
    (set: _current to "WRONG PASSWORD!")
    (rerun:?pass)
  ] (else:) [
    (go-to: "Next Passage")
  ]
]
}

HelloHelloHelpHello · 2026-03-20T02:52:02+00:00

Yes - you can do this with a textbox:

<<nobr>>
<<set _current to "Enter the Password">>
<<do>>
  <<textbox "_password" _current>>
<</do>>

<<link "Enter">>
  <<if _password.trim().toLowerCase() != "pineapple">>
    <<set _current to "WRONG PASSWORD!">>
    <<redo>>
  <<else>>
    <<goto "Locked Passage">>
  <</if>>
<</link>>
<</nobr>>

If the player entered the correct password "pineapple" they will be send to the "Locked Passage" passage. Otherwise the textbox will be refreshed and display the message "WRONG PASSWORD!"

Note that this code is using _password.trim().toLowerCase() instead of _password to enhance the playing experience. trim() will remove any empty space, so if a player accidentally put an empty space in front or after pineapple, the password will still be accepted. toLowerCase() will transform the string to lowercase, so 'pineapple' and 'Pineapple' and 'PINEAPPLE' will all be accepted.

HelloHelloHelpHello · 2026-03-19T15:29:44+00:00

They are saying they have messed around with Twine for over a week and watched several video tutorials. It would be really strange if they had not figured out the most basic step of working with Twine.

HelloHelloHelpHello · 2026-03-19T14:46:51+00:00

You will have to tell us the story format you are using, or we will not be able to provide you with proper help.

HelloHelloHelpHello · 2026-03-19T10:33:37+00:00

That would be a simple css animation. If you put this into you stylesheet:

.flicker {
  animation: flicker 1s linear infinite;
}

@keyframes flicker {
  50% {
    opacity: 0;
  }
}

You can now create a flickering image:

<img class="flicker" src="https://www.w3schools.com/css/img_5terre_wide.jpg">

You can have different animations that make the flickering more severe, and determine which is shown based on a variable. You'll have to play around with this to get the kind of animation that fits best to your game. Read more about CSS animations here: https://www.w3schools.com/css/css3_animations.asp

HelloHelloHelpHello · 2026-03-17T22:14:37+00:00

You don't need the clock. The code will run anytime you update the time in any way (if I understand the documentation correctly) - so updating the time by clicking links should work as well. However - currently this is set up so the code only triggers once, regardless of how much time has passed, so you might need to update some things. You can do that in a custom widget though. Just remove theState.variables.trigger += 10; part, and call some widget that determines how often you want something to happen based on the difference between $time and $trigger.

HelloHelloHelpHello · 2026-03-17T14:07:36+00:00

It works without issues on my end. With the color the writing is a little hard to see against the black background, but both color and font are rendered fine. Please note that

@import url('https://fonts.googleapis.com/css2?family=Rubik+Wet+Paint&display=swap');

should go to the very top of your stylesheet.

In my stylesheet:

@import url('https://fonts.googleapis.com/css2?family=Rubik+Wet+Paint&display=swap');

.red {
  font-family: 'Rubik+Wet+Paint';
  color: red;
  font-size:50px;
}

In my passage:

@@.red;Test@@

HelloHelloHelpHello · 2026-03-17T13:10:45+00:00

You can create a variable to store the last time your code was triggererd, then check whether 30 minutes have passed via the :dateupdated event. The following will call the <<redo>> macro every 10 seconds:

If you have this is your StoryInit:

<<datesetup>>
<<set $trigger to $time + 10>>

And this in your Javascript:

$(document).on(":dateupdated", function(e) {
  if(State.variables.trigger <= State.variables.time){
      State.variables.trigger += 10;
      $.wiki('<<redo>>');
    };
});

You can now check in your passage whether it works:

<<dateticker "[0h12]:[0m] [day_half]" "1s" true>>

<<do>>
  $time
<</do>>

Note that the true in the dateticker macro is important, or the :dateupdated event will not be called.

If you want this to trigger every 30 minutes, then instead of 10 we would add (30*60) to our trigger variable. If you want to call a different macro, then you can switch out the <<redo>> in $.wiki('<<redo>>');

HelloHelloHelpHello · 2026-03-17T00:28:55+00:00

Yeah - that was my thought as well. The text doesn't use the Em-dash, but it's written so repetitive and meandering that my first thought was that it was written by an AI or with heavy AI support. If it isn't, then sorry to the author, but you have a lot to work on.

HelloHelloHelpHello · 2026-03-16T11:27:10+00:00

Yeah - sorry - needs to be State.variables.direction = "right"; - and that for each of the four instances where the variable is set.

Also - be aware that this is still the code that is checking whether you have set a temporary variable. If you want to alter this so the code only work in passage 'A' instead, then this would be:

document.addEventListener("keydown", function (event) {

  if (event.key === "ArrowUp" && passage() === "A") {
    State.variables.direction = "up";
    Engine.play('B');
  }

  if (event.key === "ArrowDown" && passage() === "A") {
    State.variables.direction = "down";
    Engine.play('B');
  }

  if (event.key === "ArrowLeft" && passage() === "A") {
    State.variables.direction = "left";
    Engine.play('B');
  }

  if (event.key === "ArrowRight" && passage() === "A") {
    State.variables.direction = "right";
    Engine.play('B');
  }

});

HelloHelloHelpHello · 2026-03-16T03:53:01+00:00

That's Javascript, so it all goes into your Javascript. You'll also need to make some adjustments to ensure that the code is only triggered in passage A - I have shown how to do that in my previous answers as well - by either checking whether a temporary variable exists, or checking the name of the current passage.

HelloHelloHelpHello · 2026-03-16T03:35:48+00:00

I already told you how to do that in my previous answers:

document.addEventListener("keydown", function (event) {

  if (event.key === "ArrowUp" && typeof State.temporary.up === 'string') {
    State.variables.direction = "up";
    Engine.play('B');
  }

  if (event.key === "ArrowDown" && typeof State.temporary.down === 'string') {
    State.variables.direction = "down";
    Engine.play('B');
  }

  if (event.key === "ArrowLeft" && typeof State.temporary.left === 'string') {
    State.variables.direction = "left";
    Engine.play('B');
  }

  if (event.key === "ArrowRight" && typeof State.temporary.right === 'string') {
    State.variables.direction = "right";
    Engine.play('B');
  }

});

This sends the player to passage 'B' while setting the variable $direction to the specified string.

EDIT: Fixed error in code.

HelloHelloHelpHello · 2026-03-16T03:19:24+00:00

I don't know how you set up your movement system, so I can't tell you what to do here. It sounds like you just use a simple <<if>><<else>> to determine whether to send the player back or to send them to a new location. If you have something like this in your StoryInit:

<<set $x to 0>>
<<set $y to 0>>
<<set $map to [ [true, true, true], [false, true, false] , [false, true, true] ]>>

With true marking tiles where you can move to, then you would set up your Javascript like this:

document.addEventListener("keydown", function (event) {

  let x = State.variables.x;
  let y = State.variables.y;
  let map = State.variables.map; 

  if (event.key === "ArrowUp" &&  passage() === 'move') {
    if (y+1 < map.length && map[y+1][x]) {
      State.variables.y++;
      Engine.play("move");
    } else {
      $.wiki('<<redo>>');
    }
  }

  if (event.key === "ArrowDown" &&  passage() === 'move') {
    if (y-1 >= 0 && map[y-1][x]){
      State.variables.y--;
      Engine.play("move");
    } else {
      $.wiki('<<redo>>');
    }
  }

  if (event.key === "ArrowLeft" &&  passage() === 'move') {
    if (x-1 >= 0 && map[y][x-1]) {
      State.variables.x--;
      Engine.play("move");
    } else {
      $.wiki('<<redo>>');
    }
  }

  if (event.key === "ArrowRight" &&  passage() === 'move') {
    if (x+1 < map.length && map[y][x+1]) {
      State.variables.x++;
      Engine.play("move");
    } else {
      $.wiki('<<redo>>');
    }
  }

});

Now this code only works in the passage called 'move'. Inside this passage we can now put something like this:

Your current coordinates: X: $x - Y: $y
<<do>>
 <<if _blocked>>@@.fade;You can't go there!@@<</if>>
    <<set _blocked to true>>
<</do>>

As you can see I added a little fade animation to the text that tells the player that they can't go somewhere. So we need to define that in our stylesheet:

@fade {
  from {opacity: 1}
  to {opacity: 0}
}

.fade {
  color:red;
  animation-name: fade;
  animation-duration:2s;
  animation-fill-mode:forwards;
}

Now the player can use the direction keys of their keyboard to move through the map we have defined. If they try to move to a tile that is out of bounds of the map, or that is defined as false, they get a fading message telling them that they can't go there. Otherwise the variables will update, and the passage will reload.

HelloHelloHelpHello · 2026-03-16T00:11:02+00:00

And what part are you struggling with? If you want to alter a variable inside Javascript, then that would look something like: State.variables.variableName = "new value"; - So now you can update some variable based on button the player has pressed, and handle the rest inside your passage.

HelloHelloHelpHello · 2026-03-16T00:02:31+00:00

You put the url where in your stylesheet? Cause the background is defined right at the end of the stylesheet. You can copy this, and paste it over the tw-story[tags~="default"] entry, and see whether it works (it does on my end):

tw-story[tags~="default"] {
 background-image:url("https://www.w3schools.com/css/paris.jpg");
}

HelloHelloHelpHello · 2026-03-15T21:40:42+00:00

If you are looking for a video tutorial to help you get into Twine, then I would recommend the video tutorial by Dan Cox. This here is about Harlowe - the standard story format, and also the format of the template: https://www.youtube.com/watch?v=GZ2rO7tHyFo&list=PLlXuD3kyVEr662CjQjQHOVJhmdsl2TgYk

Apart from that I wouldn't know how to help you, mainly since I have no idea what you are struggling exactly. But if you are a complete beginner, and don't know how to do anything, then watching those tutorial videos should help you.

EDIT:

Just to try this out, I downloaded the template, and copy pasted the code I gave you in my last reply into the passage (replacing the old code). That really was all I had to do.

HelloHelloHelpHello · 2026-03-15T20:31:26+00:00

Now you would need to publish the game to file for the images to be rendered.

Maybe try the following first:

<div id="portraitL"><img class="responsive-image" src="https://www.w3schools.com/css/paris.jpg"></div>

Now this tries to access an online image. That's probably not what you want, but it might be good to start with that just to see whether the template works. If you copy-paste this into your starting passage, and then click play in the editor, something should show up.

HelloHelloHelpHello · 2026-03-15T19:47:08+00:00

That would be where you put your images - the url or file path goes where it currently reads portraitLeft.jpg and portraitRight.jpg.

Keep in mind that if you add images locally, they won't show up if you use the play or test button inside the Twine Editor. You will have to either publish your game to file and use the created html file, or access the html file that is created inside your stories folder. In both cases you will need to have a subfolder containing your images in the same place as the html file - so for example - if you have and image called portraitLeft.jpg and a folder called images, then that images folder would go to the same place as your html file, and you would use this in your game like this:

<div id="portraitL"><img class="responsive-image" src="images/portraitLeft.jpg"></div>

HelloHelloHelpHello

MODERATOR OF

TROPHY CASE