Jump to content
  • Advertisement
Sign in to follow this  
CelticSir

Logic to getting the mouse position on game map

This topic is 2485 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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 ?

Share this post


Link to post
Share on other sites
Advertisement
to get the grid X/Y you simply take:

gridX = gridXOffset+Math.floor(mousex / tile_width);
gridY = gridYOffset+Math.floor(mousey / tile_height);

The offsets are the distance from the left/top of the canvas your grid starts from. (If you have a scrolling map then you need to add the amount scrolled to the offsets aswell)

Share this post


Link to post
Share on other sites
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
}
}

Share this post


Link to post
Share on other sites
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);
}

Share this post


Link to post
Share on other sites
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);
}

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!