Interactive Backgrounds? Sugarcube 2.31.1

So I kinda want a couple scenes in my game where the point is to search a room for clues, and I was planning on line drawing a room, and making certain areas clickable as links that would take you to a passage about what you clicked on. Like a newspaper for instance, or a fingerprint.

So kind of like SUPER primitive point and click.

Is this possible?

When I looked on line I gotta whole lotta maybes and a whole lotta “wElL iF yOu WaNnA MaKe A pOiNt AnD cLiCk GaMe DoNt UsE tWine”
But I dont wanna make a point and click game… just a game with a couple point and click scenes.


This might be useful:

SugarCube supports the use of image maps that can be used to to create a simple point & click. The main problem with that, I think, is that images had to be of a fixed size. This code lets you resize the image without losing the clickable areas of the image map.

1 Like

I did a “deep dive” on the “Image Map Resizer” code today to make it Twine/SugarCube friendly, so you might want to update to this version: Responsive Image Map

Enjoy! :grinning:


Thats funny cuz I was just looking at this! I appreciate the source code, but Im not quite sure how to implement it. Like say I wanted to made a data map, that looks like an old timey town map. Like ariel view, little squares that represent buildings, and I want to make it so
When you click the square on the drawn map that says ‘The hardware store’, that specific square links you to the hardware store passage.

That example code shows you exactly how to implement that.

First, make the picture of the map. Then generate an image map, with areas for each location on the picture. You can use one of the various online “image map generators” to simplify generating the image map and areas (example 1, example 2, example 3).

Also, if you import the Responsive Image Map example’s HTML file into Twine, then you can take a look at the source. If you do, you’ll see something like this in the passages:

<img @src="setup.ImagePath+'MarioScreen.png'" usemap="#image-map" width="80%">\
<map name="image-map">
	<area alt="It's a me! Mario!" title="It's a me! Mario!" data-passage="Next"
	coords="383,527,341,536,330,511,345,492,357,483,380,482,387,500" shape="poly">

Note that the “usemap” attribute on the <img> element should match the “name” attribute on the <map> element, but with a “#” added to the front, as shown above.

The “title” attribute on any <area> elements will show as a tooltip if you hover your mouse over that area. And the “data-passage” attribute tells it what passage to go to when you click on that area.

If, rather than simply going to another passage, you wanted to trigger code when the user clicks on an area, then you can leave out the “data-passage” attribute, and add an “onclick” attribute which contains the relevant JavaScript. For example, this:

	<area alt="It's a me! Mario!" title="It's a me! Mario!" onclick="alert($(this).attr('title'))"
	coords="383,527,341,536,330,511,345,492,357,483,380,482,387,500" shape="poly">

would make it display the value of the “title” attribute when you clicked on it.

And this:

	<area alt="It's a me! Mario!" title="It's a me! Mario!" onclick="$.wiki('<<goto [[Next]]>>')"
	coords="383,527,341,536,330,511,345,492,357,483,380,482,387,500" shape="poly">

would be an alternate way to make it so that if you clicked on that area, that it would send you to the “Next” passage.

Hope that helps! :grinning:

1 Like

Thank you so much for taking the time! Its definitely much more clear. Thank you so much.

As always you are amazingly helpful, thanks HiEv. Will you add this to your collection of useful codes?

Yeah, I plan to. I have a bit of a backlog of stuff to add to the code collection at this point, but I really need to revamp how it’s set up, since there’s so much stuff in it now.

1 Like