Help! Screen flickering when loading passages in Twine (Harlow 3.3.8)

Twine Version: 2.8.1

Hi there, I’ve been trying to improve a text adventure game I’ve made and I’m at a loss of what could be causing the issue.

Basically, when the user clicks through the game, the screen flickers off to the left and then back to the middle again. It’s a little hard to describe so I’ve included a clip for a better visual and the code in the previewed in the clip. Does anyone know what may be causing it and how to fix it?

Sorry if the code is a mess, I’m still learning.

2024-12-1920-01-19-ezgif.com-video-to-gif-converter

Welcome page

(set: $name to (prompt: "What is your name great adventurer?", "Atlas", ))Welcome $name, to the The Digital Odyssey: A Quest for Knowledge. This is a short (text-colour:orange)[interactive] text adventure designed to promote the importance of Archives & emerging technologies.

❔ [[How to play the game]]
🎼 Mood music play: (link: "Nebula")[(open-url:'https://www.youtube.com/watch?v=VsOykR7cj_g')]

Are you ready to start your adventure into [[The Archive|Game Start]]?

(set: $HasTorch to false)(set: $HasKey to false)(set: $HasKeycard to false)(set: $ChestInfo to false)(set: $KeycardInfo to false)(set: $LegendInfo to false)(set: $ChamberInfo to false)(set: $Chest to false)(set: $Chamber to false)(set: $Keypad to false)(set: $Legend to false)(set: $Holo to false)(set: $HoloInfo to false)(set: $Trap to false)(set:$computer to false)(set: $FF1 to false)(set: $FF2 to false)(set: $FF3 to false)(set: $Q1Info to false)(set: $Q2Info to false)(set: $Q3Info to false)(set: $Q4Info to false)(set: $Q5Info to false)(set: $Q6Info to false)(set: $Q7Info to false)(set: $ChestAnswer to false)(set: $KeypadAnswer to false)(set: $LegendAnswer to false)(set: $decipher to false)(set:$path to false)(set: $ChestEncounter to false)(set:$KeypadEncounter to false)(set:$LegendEncounter to false)(set:$password1 to false)(set:$password2 to false)(set:$password3 to false)(set: $lastPassage to "")

Game Start

You find yourself in a world where the ancient and modern collide in a realm known as the Archive of Ages. Your quest is to unlock the secrets of digitisation and its importance in preserving history. 

Are you ready to embark on this mysterious journey?
[[Yes|The Archive]] (link: "No")[<script>window.close()</script>]

[[❔How to play the game|How to play the game]]

The Archive:

(if: $path is "A")[<img src= "Enterance.png" width=40% align="right" style="margin: 20px;">The lingering sense of ancient wisdom stays with you as you leave the Path of Ancient Scrolls. The dimly lit corridors lined with forgotten texts have sparked your curiosity, but as you step back into the entrance area, your gaze is drawn to the shimmering glow of the Path of Technological Marvels. You wonder what might await you in the realm of digital archives, where innovation and preservation blend in dazzling new ways. At the same time, the faded echoes of the Path of Lost Legends call to you—whispers of myth and heroism, stories lost to time, waiting to be rediscovered. The Archive of Ages offers endless mysteries, each path a new way to uncover the past.](else-if: $path is "B")[<img src= "Enterance.png" width=40% align="right" style="margin: 20px;">As you step away from the advanced technology and digitised archives of the Path of Technological Marvels, your mind is still racing with possibilities. But as you return to the entrance area, the quiet, timeless air of the Path of Ancient Scrolls feels like a different world—a place where the past is preserved in the delicate weave of ink and parchment. You also feel the pull of the Path of Lost Legends, where myths and forgotten histories beckon with the promise of uncovering stories that could reshape the known world. The choice ahead feels vast, both paths offering their own form of discovery.](else-if: $path is "C")[<img src= "Enterance.png" width=40% align="right" style="margin: 20px;">The echoes of legendary tales and forgotten kingdoms fade as you step back into the entrance area. The Path of Ancient Scrolls still calls to you, its promise of uncovering long-buried knowledge written by hand and preserved through centuries. But the glowing lights from the Path of Technological Marvels tug at your mind as well. Here, the future of history preservation waits, with its advanced holograms and digital wonders, offering a chance to glimpse how history could be protected and shared in the digital age. Both paths stand before you, holding equal weight, each filled with untold secrets.](else-if:$HasTorch is true and $HasKeycard is true and $Trap is true and $HoloInfo is true)[<img src= "Enterance.png" width=40% align="right" style="margin: 20px;">As you stand once more at the entrance, the weight of your journey is upon you. The knowledge of the past, the mysteries of lost legends, and the wonders of technological marvels have all unfolded before your eyes. Yet, there remains one final step—one final mystery to uncover. The Hidden Chamber, a place whispered about but never fully revealed, calls you back. The Path of Ancient Scrolls, with its dusty tomes and ancient wisdom, now feels like the gateway to something far greater. With the key and torch in hand, you turn away from the bright, digital allure of the other paths and venture once more into the depths of the archive. What secrets will this hidden sanctum hold? The chamber, filled with untold knowledge, awaits your discovery.](else:)[<img src= "Enterance.png" width=40% align="right" style="margin: 20px;">You stand at the entrance of the Archive of Ages, a sprawling labyrinth of corridors filled with relics of bygone eras and whispers of forgotten tales.] 

Before you stretch three paths, each leading to a different realm within the archive. These paths not only represent different epochs but also reveal how digitisation and (text-colour:orange)[knowledge sharing] play pivotal roles in preserving and disseminating historical information.

(if:$Computer is true)[Search [[computer?|Notion 95]]]
(if: $HasTorch is true and $HasKeycard is true and $Trap is true and $HoloInfo is false)[Which path will you choose? 
[[1. Path to the Hidden Chamber|Ignore chest]]
[[2. Path of Technological Marvels to speak with the holographic sage|Engage with the holographic sage for guidance.]]] (else-if: $HasTorch is true and $HasKeycard is true and $Trap is true and $HoloInfo is true)
[Which path will you choose? 
[[1. Path to the Hidden Chamber|Endgame]]]
(else:)[Which path will you choose? 
[[1. Path of Ancient Scrolls|Ancient Scrolls]] 
[[2. Path of Lost Legends|Path of Lost Legends]]
[[3. Path of Technological Marvels|Path of Technological Marvels]]]


[[🎒Inventory|Inventory]]
[[📒Notebook|Notebook]]
(set:$Q1Info to true)

Header tag:

(enchant:?page,
	(text-color:black)+
	(background:(gradient: 157, 0,#EAF0F7,0.7102,#C1D2E7,1,#F8F7FF))+
	(font:"Open Sans")
)(enchant:?passage,
	(background:(white)) +
	(corner-radius:20) +
	(border:"none", "none", "none", "solid")+
	(border-size:120) +
	(border-color:#6F95C8))
(enchant:?link,
	(background:#052650) +
	(border:'solid') +
	(color:white) +
	(corner-radius: 12) +
	(border-color:#F8F7FF) +
	(border-size:1) +
	(hover-style: (bg:#3168b0) + (border-color:white))
)(unless: (passage:)'s tags contains "menu")[(set: $lastPassage to (passage:)'s name)]

Style sheet:

tw-include[name="Game Start"] {
    display: none;
}

Hi there!

With the amount of enchanting you are doing with every page, you may want to consider transferring it to the StyleSheet, rather than having it in the Header-tagged passage. It should help with the flickering.

There are three elements you can target: body tw-story and tw-links.

(if you want to target just the passage and not the side-bar, you can use this trick:

:: Header Passage [header]
<div id="passage">

:: Footer Passage [footer]
</div>

:: Stylesheet
#passage {
      css code
}
1 Like

First a couple of suggestions / clarifications:

1: Global Variable initialisation should generally be done before the first Passage is shown.

This can be achieved by assigning Harlowe’s special startup Tag to a Passage, which will cause it to be processed before the first Passage is shown.

2: Letter casing of Variable names matter.

In your variable initialisation code you have the following assignment (set: $computer to false), but later in your The Archive you use code like this (if: $Computer is true) as a comparison.

Harlow will see $computer and $Computer as two different variables, and because your code example hasn’t assigned a value to a variable named $Computer before that comparison is performed, Harlowe will automatically assign that variable a value of numeric zero. And this will result in a data-type mismatch type error when the comparison is performed.

3: The data-type of the value being assigned to a variable can matter when comparing its value to another.

In your variable initialisation code you assign a Boolean value to a specific variable (set: $path to false), but later you compare the current value of that variable to a String value (if: $path is "A"). Doing this can result in data-type mismatch type errors.

In this specific case it would be better to initialise that variable like so (set: $path to "").

4: The is keyword comparison operator isn’t needed when evaluating Boolean values.

You have many variable like $HasTorch that you’re using to determine if a condition is true or false, and you are correctly using a Boolean value to do that.

<!-- you initialise the variable early in the play-through -->
(set: $HasTorch to false)

<!-- and likely have code that updates the variable later on -->
(link: "Pickup the Torch")[(set: $HasTorch to true)]

The correct syntax for doing something when a Boolean value is true is…

(if: $HasTorch)[You have a Torch!]

And the correct syntax for doing something when a Boolean value is false are…

(if: not $HasTorch)[You need to get a Torch!]

or

(unless: $HasTorch)[You need to get a Torch!]

5: Styling is generally better achieved using CSS, but if you do using Harlowe’s styling macros then in most use-cases the (change:) macro is a better option than the (enchant:) macro, because the later monitors the page for any structural changes and reapplies its effect each time such a change occurs.

I have applied the above, and a couple of other things, to your original example code to create the following Twee Notation base example.

:: Startup [startup]
(set: $HasTorch to false)
(set: $HasKey to false)
(set: $HasKeycard to false)
(set: $ChestInfo to false)
(set: $KeycardInfo to false)
(set: $LegendInfo to false)
(set: $ChamberInfo to false)
(set: $Chest to false)
(set: $Chamber to false)
(set: $Keypad to false)
(set: $Legend to false)
(set: $Holo to false)
(set: $HoloInfo to false)
(set: $Trap to false)
(set: $Computer to false)
(set: $FF1 to false)
(set: $FF2 to false)
(set: $FF3 to false)
(set: $Q1Info to false)
(set: $Q2Info to false)
(set: $Q3Info to false)
(set: $Q4Info to false)
(set: $Q5Info to false)
(set: $Q6Info to false)
(set: $Q7Info to false)
(set: $ChestAnswer to false)
(set: $KeypadAnswer to false)
(set: $LegendAnswer to false)
(set: $decipher to false)
(set: $path to "")
(set: $ChestEncounter to false)
(set: $KeypadEncounter to false)
(set: $LegendEncounter to false)
(set: $password1 to false)
(set: $password2 to false)
(set: $password3 to false)
(set: $lastPassage to "")

:: Track Passage [header]
(unless: (passage:)'s tags contains "menu")[(set: $lastPassage to (passage:)'s name)]

:: Welcome
(set: $name to (prompt: "What is your name great adventurer?", "Atlas", ))\
Welcome $name, to the The Digital Odyssey: A Quest for Knowledge. This is a short |info>[interactive] text adventure designed to promote the importance of Archives & emerging technologies.

❔ [[How to play the game]]
🎼 Mood music play: (link: "Nebula")[(open-url:'https://www.youtube.com/watch?v=VsOykR7cj_g')]

Are you ready to start your adventure into [[The Archive|Game Start]]?

:: Game Start
You find yourself in a world where the ancient and modern collide in a realm known as the Archive of Ages. Your quest is to unlock the secrets of digitisation and its importance in preserving history. 

Are you ready to embark on this mysterious journey?
[[Yes|The Archive]] (link: "No")[<script>window.close()</script>]

[[❔How to play the game|How to play the game]]

:: The Archive
(if: $path is "A")[<img src= "Enterance.png" width=40% align="right" style="margin: 20px;">The lingering sense of ancient wisdom stays with you as you leave the Path of Ancient Scrolls. The dimly lit corridors lined with forgotten texts have sparked your curiosity, but as you step back into the entrance area, your gaze is drawn to the shimmering glow of the Path of Technological Marvels. You wonder what might await you in the realm of digital archives, where innovation and preservation blend in dazzling new ways. At the same time, the faded echoes of the Path of Lost Legends call to you—whispers of myth and heroism, stories lost to time, waiting to be rediscovered. The Archive of Ages offers endless mysteries, each path a new way to uncover the past.]\
(else-if: $path is "B")[<img src= "Enterance.png" width=40% align="right" style="margin: 20px;">As you step away from the advanced technology and digitised archives of the Path of Technological Marvels, your mind is still racing with possibilities. But as you return to the entrance area, the quiet, timeless air of the Path of Ancient Scrolls feels like a different world—a place where the past is preserved in the delicate weave of ink and parchment. You also feel the pull of the Path of Lost Legends, where myths and forgotten histories beckon with the promise of uncovering stories that could reshape the known world. The choice ahead feels vast, both paths offering their own form of discovery.]\
(else-if: $path is "C")[<img src= "Enterance.png" width=40% align="right" style="margin: 20px;">The echoes of legendary tales and forgotten kingdoms fade as you step back into the entrance area. The Path of Ancient Scrolls still calls to you, its promise of uncovering long-buried knowledge written by hand and preserved through centuries. But the glowing lights from the Path of Technological Marvels tug at your mind as well. Here, the future of history preservation waits, with its advanced holograms and digital wonders, offering a chance to glimpse how history could be protected and shared in the digital age. Both paths stand before you, holding equal weight, each filled with untold secrets.]\
(else-if: $HasTorch and $HasKeycard and $Trap and $HoloInfo)[<img src= "Enterance.png" width=40% align="right" style="margin: 20px;">As you stand once more at the entrance, the weight of your journey is upon you. The knowledge of the past, the mysteries of lost legends, and the wonders of technological marvels have all unfolded before your eyes. Yet, there remains one final step—one final mystery to uncover. The Hidden Chamber, a place whispered about but never fully revealed, calls you back. The Path of Ancient Scrolls, with its dusty tomes and ancient wisdom, now feels like the gateway to something far greater. With the key and torch in hand, you turn away from the bright, digital allure of the other paths and venture once more into the depths of the archive. What secrets will this hidden sanctum hold? The chamber, filled with untold knowledge, awaits your discovery.]\
(else:)[<img src= "Enterance.png" width=40% align="right" style="margin: 20px;">You stand at the entrance of the Archive of Ages, a sprawling labyrinth of corridors filled with relics of bygone eras and whispers of forgotten tales.] 

Before you stretch three paths, each leading to a different realm within the archive. These paths not only represent different epochs but also reveal how digitisation and |info>[knowledge sharing] play pivotal roles in preserving and disseminating historical information.

(if: $Computer)[Search [[computer?|Notion 95]]]
Which path will you choose? 
(if: $HasTorch and $HasKeycard and $Trap and $HoloInfo)[\
[[1. Path to the Hidden Chamber|Ignore chest]]
[[2. Path of Technological Marvels to speak with the holographic sage|Engage with the holographic sage for guidance.]]]\
(else-if: $HasTorch and $HasKeycard and $Trap and $HoloInfo)[\
[[1. Path to the Hidden Chamber|Endgame]]]
(else:)[\
[[1. Path of Ancient Scrolls|Ancient Scrolls]] 
[[2. Path of Lost Legends|Path of Lost Legends]]
[[3. Path of Technological Marvels|Path of Technological Marvels]]]


[[🎒Inventory|Inventory]]
[[📒Notebook|Notebook]]
(set: $Q1Info to true)

…and used CSS like the following in my test project’s Story Stylesheet area to achieve similar styling as your example…

tw-include[type='startup'] { display: none; }

tw-story {
	color: black;
	background-image: linear-gradient(157deg, rgb(234, 240, 247) 0%, rgb(193, 210, 231) 71.02%, rgb(248, 247, 255) 100%);
	font-family: 'Open Sans';
}

tw-passage {
	display: block;
	padding: 20px;
	background-color: white;
	border-left: 120px solid #6F95C8;
	border-radius: 20px;
}
tw-link, .enchantment-link {
	display: inline-block;
	padding: 12px;
	background-color: #052650;
	color: white;
	border: 1px solid #F8F7FF;
	border-radius: 12px;
}
tw-link:hover, .enchantment-link:hover {
	background-color: #3168b0;
	color: white;
	border-color: white;
}
tw-hook[name="info"] {
	color: rgb(230, 128, 25);
}

Now to your question about the screen resizing…

If the above hasn’t resolved any of your issue, then what is the native dimensions (width & height) of the images you’re showing in the The Archive Passage?

I ask because, Harlowe uses a two phase Transition process when displaying the contents of a Passage, and the 40% width you’re assigning to the image might not taking affect until the 2nd phase. Which could potentially cause the visual effect you’re seeing.

One potential way to resolve that is to resize the image file itself, so it natively has the dimensions you want to display it as. That way you won’t need to dynamically re-scale the image on the fly when you display it.
eg. Don’t try to dynamically re-scale a 1920x1080 image so it fits in a 640x480 area, resize the image file so it is 640x480 and then display it as it is.

1 Like

Thank you so much for this!!! I’ve gone in and made the changes you suggested, and the flickering has completely stopped!!

I really appreciate your detailed response, it helped me wrap my head around the code when I was really stuck.

For some added context, the image dimensions are 1080x1080 so resizing the images is a good idea. I’ll continue to do some further testing and update the thread if the issue was a styling and image resizing issue.