How to move an image dynamically to different locations on a map

[silkenn]

Twine Version: 2.3.16
Story Format: Sugarcube

Hi,
I have been making maps for the various locations in my game, and I’ve been trying to place a marker on the player’s current position. I store that position as two variables for x and y, and the maps are grid-based (made using Inkarnate). I am struggling to get the images overlapping properly and any attempts to change the x, y coordinates of the marker have been fruitless (it only needs to change upon refreshing the passage).

Has anyone tried to do a similar thing? I don’t really have any example code, but I believe what had the closest results to what I want was this post.

Many thanks

[Greyelf]

You haven’t included an example of the code (HTML?, CSS?) you are currently using to display the “map”, which makes it difficult to give a detailed explanation on how to alter it to display a “marker” above a specific location on that “map”.

But as shown in the example you linked to, you can use CSS to position one HTML element above another as long as the structural relationship between those two elements is known.

Method 1: (as shown in the linked example)

If both the “map” element(s) and the “marker” element have a common parent element then setting that parent’s position property to relative allows a child element to be positioned within the bounding box of that parent element.

This is done by setting the position property of the child element to absolute and then using the top / left / bottom / right properties of that child to control its location within the parent’s bounding box.

note: you may also need to assign the child element a higher z-index property value than that of the parent element.

Method 2:

If the “map” image is being displayed as the background image of an element, then you can use a technique similar to method 1 to position a “marker” element that is made a child of that “map” element.

The HTML structure would look something like…

<div id="map">
    <img id="marker" src="http://www.w3schools.com/favicon.ico"/>
</div>

…and the CSS for positioning that “marker” image would use the same technique as the linked example, with a slight change to display the background image…

#map {
    background-image: url('http://i.stack.imgur.com/Blaly.png');
    /* may need more background related property settings to control the displaying of the image */
}
#marker {
    position: absolute;
    bottom: 0;
    right: 0;
}

warning: None of the above code examples have been tested, as I didn’t know how you have implemented things in your project.

[silkenn]

Thank you - and yeah, I should’ve been more specific.

This is what I have in my passage:

<silently>\
	<<set _markerTopPos to $locationY*240/towns[$town]['map'].length>>\
	<<set _markerLeftPos to $locationX*240/towns[$town]['map'][1].length>>\
	<<set _markerWidth to 240/towns[$town]['map'][1].length>>\
	<<set _markerHeight to 240/towns[$town]['map'][1].length>>\
</silently>\
<div class="parent" height="240" width="240">
      <img class="image1" @src="setup.maps+$town+'.jpg'" alt="Map" height="240" width="240">
      <img class="image2" @src="setup.maps+'marker.jpg'" @top="_markerTopPos" @left="_markerLeftPos" @width="_markerWidth" @height="_markerHeight">
</div>

…and here is my stylesheet:

.parent {
  position: relative;
  top: 0;
  left: 0;
}

.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px solid #000000;
}

.image2 {
  position: absolute;
  border: 1px solid #000000;
}

But all this does is the following (numbers above are _markerTopPos and _markerLeftPos respectively)

Do you have any idea where I’m going wrong? I can’t see any obvious issues with what I’ve done here.

Many thanks once again.

[thornekin (Joakin Thorne)]

Top and left properties should be on the marker (together with position absolute) not on the map. But you’ll wash by to update it dynamically.