title: Isometric Screen to Map
body: <p>I'm trying to figure out how I can get the correct "active" tile under the mouse when I have "ramp" and +1 height tiles (see picture below).</p>
  
  <p><br />
  <img src="https://i.stack.imgur.com/8slnE.png" alt="Example Isometric Image"></p>
  
  <p>When my world is flat, everything works no problem.  Once I add a tile with a height of say +1, along with a ramp going back to +0, my screen -> map routine is still looking as if everything is "flat".</p>
  
  <p>In the picture above, the green "ramp" is the real tile I want to render and calculate mouse -> map, however the blue tile you see "below" it is the area which gets calculated.  So if you move your mouse into any of the dark green areas, it thinks you're on another tile.</p>
  
  <p>Here is my map render (very simple)</p>
  
  <pre><code>canvas.width = canvas.width; // cheap clear in firefox 3.6, does not work in other browsers
  for(i=0;i&lt;map_y;i++){
      for(j=0;j&lt;map_x;j++){
          var xpos = (i-j)*tile_h + current_x;
          var ypos = (i+j)*tile_h/2+ current_y;
  
        context.beginPath();
        context.moveTo(xpos, ypos+(tile_h/2));
        context.lineTo(xpos+(tile_w/2), ypos);
        context.lineTo(xpos+(tile_w), ypos+(tile_h/2));
        context.lineTo(xpos+(tile_w/2), ypos+(tile_h));
        context.fill();
  
      }
  }    
  </code></pre>
  
  <p>And here is my mouse -> map routine:</p>
  
  <pre><code>ymouse=( (2*(ev.pageY-canvas.offsetTop-current_y)-ev.pageX+canvas.offsetLeft+current_x)/2 );
  xmouse=( ev.pageX+ymouse-current_x-(tile_w/2)-canvas.offsetLeft );
  ymouse=Math.round(ymouse/tile_h);
  xmouse=Math.round(xmouse/(tile_w/2));
  
  current_tile=[xmouse,ymouse];
  </code></pre>
  
  <p>I have a feeling I'll have to start over and implement a world based map system rather than a simple screen -> map routine.</p>
  
  <p>Thanks.</p>