Replace images and variables through clicking on image itself. How to stylize the image in <<link>> macro?

Authoring Twine
, ,
1

Twine v2.6.1
Sugarcube v2.36.1

For my dungeon crawler I need to make a clickable image. On click I need to change the image and also change some variables. And I also want to do that without refreshing the same passage over and over again, bacause the player need to click a lot, so I don’t want him to get crazy from flashing screen.
Here what I’ve got so far:

/*test set passage*/
<<set $temp to 0>>
<<set $testimg to "img/map/images/"+$temp+".png">>
<<goto "test link 3">>

/*test link 3 passage*/
<span id="testreplace">
<<include "test link">>
</span>

/*test link passage*/
<<link "">>
<img @src='"img/map/images/"+$temp+".png"' style="position:absolute; left:0; top:0 ; width: 100%; height: `100%">
<<replace "#testreplace">>
<<set $temp to $temp+1>>
<<include "test link 3">>
<</replace>>
<</link>>

It actually works, but there is a problem. I need to find a way to stylize the clickable image. Because I want to change its position to absolute and also the size.
And I really want to find a way to get the same results with combined images like that:

<span class="cards1">
<img @src='"img/map/frame.svg"' style="position:relative; left:0; top:0 ; width: 100%; height: `100%">
<img @src='"img/map/images/"+State.variables["x"+_x+"y"+_y].type+".png"' style="position:absolute; left:0; top:0 ; width: 100%; height: `100%">
</span>

In this case the second image overlaps the first one, and thats great. But I haven’t found a way to make it clickable and use replace on click. Maybe there is a way to use <a> with <<replace>> macro. Because atm I can use <a> only to refresh the whole page or to move to another passage, but the flashing screen and slow game flow just kills me. And as I said I haven’t found a way to use <<replace>> with it yet.

I would like to hear any suggestions or anwer more questions :slight_smile:

1 Like
2

image
image1090×545 42.4 KB

That’s what I’m trying to make atm. For now I’m using <a> like this (just an example):

<a data-passage='"mapunlock"+$args[0]' data-setter="$cx to $args[1], $cy to $args[2]">
		<img @src='"img/map/locked.svg"' style="position:absolute; left:0; top:0 ; width: 100%; height: `100%">
</a>

But again, the screen is flashing a lot… like a LOT! Even when I turned off the transitions it still needs some time to generate the page. So I rly need to find a way to use combined images with <<link>> and <<replace>>, or how to use <<replace>> with <a> right. Because it won’t take too much time to make, just easier to work.

1 Like
3

Speaking from a strictly web development perspective, I would hesitate to redraw the whole map with each change. I’d simply update what needs to update and figure out a way to keep it from disappearing with each passage visit. Meaning each square (10 x 5 = 150) is it’s own image and the grid of images remains on the web page separate from the passage content.

Greyelf tackled this question a year ago on Reddit… Trying To Keep Visual Assets From Reloading

Hopefully this helps.