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.
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.
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%">\
<area alt="It's a me! Mario!" title="It's a me! Mario!" data-passage="Next"
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.
<area alt="It's a me! Mario!" title="It's a me! Mario!" onclick="alert($(this).attr('title'))"
would make it display the value of the “title” attribute when you clicked on it.
<area alt="It's a me! Mario!" title="It's a me! Mario!" onclick="$.wiki('<<goto [[Next]]>>')"
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.