Hey,

I'm having difficulty understanding how to get the grid location of the mouse on a game map (isometric game).

I use a Canvas in html so my langauge is javascript - but i'd imagine the logic is the same in all languages.


The mouse position is a x : y pixel co ordinate within the canvas. But i need to get it the X:Y grid co ordinates .

Is there some clever mathematical way to work it out ?

Totally lost me with the left/top part.

This is how i draw my map on canvas the offset_x and offset_y is related to scrolling.
------

for (i=0;i<tiles_wide;i++){

for (j=0;j<tiles_long;j++){

var x = (i-j)*(img[0].height/2) + (ctx.canvas.width/2)-(img[0].width/2);
var y = (i+j)*(img[0].height/4);
abposx = x + offset_x;
abposy = y + offset_y;

//draw function here
}
}


This is what I use for touches or mouse click:

if(navigator.userAgent.match(/(iPhone)|(iPod)|(iPad)/i)){
document.addEventListener('touchstart', function(e) {
if(e.touches.length == 1){ // handle first touch event
var touch = e.touches[0]; // Get the information for finger #1
var x = touch.pageX - canvas.offsetLeft;
var y = touch.pageY - canvas.offsetTop;
// clickEvent( x,y);
moveEvent( x,y); //first touch moves player
}
if(e.touches.length==2){ //handles second touch event
var touch2 = e.touches[1]; // Get the information for finger #1
var x2 = touch2.pageX - canvas.offsetLeft;
var y2 = touch2.pageY - canvas.offsetTop;
clickEvent(x,y); //second touch calls function and passes coordinates
}
},false);
}
else{ //Set up a mouse listener instead
document.addEventListener('mousedown',function(e) {
var x = e.pageX - canvas.offsetLeft;
var y = e.pageY - canvas.offsetTop;

console.log(x+"mousex:mousey"+y);
clickEvent(x,y); //call your function to manage input

},false);
}

also for getting a hover inside the canvas canvas.onmousemove = function (event) { // this object refers to canvas object
Mouse = {
x: event.pageX - this.offsetLeft,
y: event.pageY - this.offsetTop
}
hoverEvent(Mouse.x,Mouse.y);
console.log('x:'+Mouse.x+' y:'+Mouse.y);
}

What is canvas.offsetLeft and canvas.offsetTop all about Ive not seen that before.

For me i got a offset for scrolling but i dont use the canvas offset - im not familiar with that. I am curious though for my grid as shown in my loops in other post they are carried in the letters i and j but my mouse doesn't get the same numbers so they don't match.



function movePos(e){// scrolling
canvas.addEventListener('mouseup',onMouseUp,false);
canvas.addEventListener('mouseout',onMouseUp,false);

if (prev_mousex === 0 && prev_mousey === 0) {
prev_mousex = e.pageX;
prev_mousey = e.pageY;
}

offset_x = offset_x + (e.pageX - prev_mousex);
offset_y = offset_y + (e.pageY - prev_mousey);

prev_mousex = e.pageX;
prev_mousey = e.pageY;
}

function gridclick(x,y){
ymouse=Math.round((y/img[0].height)/4);
xmouse=Math.round((x/img[0].width)/2);
}

function mousePos(e){
var x = e.pageX+offset_x;
var y = e.pageY+offset_y;

gridclick(x,y);

document.getElementById("offset").innerHTML = "<br/>Mouse X "+xmouse+"<br/>Mouse Y: "+ymouse;
canvas.addEventListener("mousemove", movePos, false);
}

function init(){

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
loadimg(); //call draw and other stuff
canvas.addEventListener("mousedown", mousePos, false);
}


offsetLeft and top are properties of canvas, they just exist. Better explanation than I can give https://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingMouseandTouchControlstoCanvas/AddingMouseandTouchControlstoCanvas.html 1/3 of the way down is a mouse and touch example.

It only gives you the click position within the canvas window, starting at 0,0 top left. If you need to offset from the beginning of your map, you have to maintain the offset as you move around the map and add it to the click coordinate.

In my game the map is an object, with x and y properties and as the player moves you maintain the offset.

http://www.quirksmode.org/js/events_properties.html 3/4 the way down it lists 6 click properties,

1. clientX,clientY
   
2. layerX,layerY
   
3. offsetX,offsetY
   
4. pageX,pageY
   
5. screenX,screenY
   
6. x,y