well im trying to make an isometric tile based game using mostly javascript, and i got the map painted and a functional array that stores tile positions, but im having trouble capturing mouse events.
so the real problem is, i can't figure out a way to manipulate the x and y coordinates where i click, and turn them into a number that fits any posible map size, for example
i have a map of 'a' rows and 'b' columns, and i get the tiles stored in a 2 dimensional array, so lets say each tile is 64x32 pixels and i got a 10x10 map, which would use 640x320 pixels.
then there is the problem, when i click anywhere on the map, im capturing the xycoordinates and i can't figure out a way to turn those coordinates, into numbers from 0-9 (for this example), to use them to know which tile im click in on.
i have read a lot of guides on the subject, and i haven't been able to find one that actually works, or that i can understand.
also im not planing to have plain maps, they are going to have like levels or floors and some tiles are going to be placed over other tiles, and so on, so if there is anything i should take into consideration when clicking on that kind of map with floors, it would be welcome as well, even tho i can't really advance on it until i get it to click on plain maps.
thank you in advance and i'd like to point out that i've found some guides on the subject, but i find them really hard to understand, so any help would be appreciated.
isometric maps question
The mathematical way is to use a transformation, at least a projection on the new axis.
For this you need the two edges of a iso tile and the origin in screenspace (could be negative).
Edge for the x axis would be [(0,0) ,(32,-32)], edge for the y axis would be [(0,0),(32,32)], this are two axis vectors x_axis=(32,-32) and y_axis=(32,32).
Now you need to project your mouse position on the normalized axis, this can be done by using the dot product and you need to finally scale it down by the edge length to get the correct tile:
To get the correct coords, you need to offest the mouse by the screen offset, the final formular would look like:
Optimized:
For this you need the two edges of a iso tile and the origin in screenspace (could be negative).
Edge for the x axis would be [(0,0) ,(32,-32)], edge for the y axis would be [(0,0),(32,32)], this are two axis vectors x_axis=(32,-32) and y_axis=(32,32).
Now you need to project your mouse position on the normalized axis, this can be done by using the dot product and you need to finally scale it down by the edge length to get the correct tile:
x_tile = dot(norm(x_axis), mouse_position) * (1/length(32,-32))
y_tile = dot(norm(y_axis), mouse_position) * (1/length(32,32))
<=>
x_tile = dot( norm(32,-32), (mx,my)) * (1/length(32,-32))
y_tile = dot( norm(32,32), (mx,my)) * (1/length(32,32))
<=>
x_tile = dot( (32,-32), (mx,my)) * (1/length(32,-32)) * (1/length(32,-32))
y_tile = dot( (32,32), (mx,my)) * (1/length(32,32)) * (1/length(32,32))
<=>
x_tile = (32*mx+(-32*my)) * (1/length(32,-32)) * (1/length(32,-32))
y_tile = (32*mx+32*my) * (1/length(32,32)) * (1/length(32,32))
<=>
x_tile = (32*mx+(-32*my)) * (1/dot(32,-32))
y_tile = (32*mx+32*my) * (1/dot(32,32))
<=>
x_tile = (32*mx+(-32*my)) * (1/(32*32+(-32)*(-32)))
y_tile = (32*mx+32*my) * (1/(32*32+32*32))
<=>
x_tile = (32*mx+(-32*my)) * (1/2048)
y_tile = (32*mx+32*my) * (1/2048)
To get the correct coords, you need to offest the mouse by the screen offset, the final formular would look like:
new_mx = mx + screen_offset_x
new_my = my + screen_offsety_y
x_tile = (32*new_mx+(-32*new_my)) /2048
y_tile = (32*new_mx+32*new_my) /2048
Optimized:
new_mx = mx + screen_offset_x
new_my = my + screen_offsety_y
x_tile = (new_mx-new_my)) /64
y_tile = (new_mx+new_my) /64
Author
im going to try it out and post here the results, but i have a question, what is the mouse offset? im working on a set 800x600 canvas and i can't click anywhere else, so i dont understand how would that mouse offset work, im actually working with a tile offset which is completely different because well, if tiles are out of the screen then i need to scroll and then i get it repainted but not starting on 0,0 so thats my offset.
You most likely display only a section of the whole world on the screen. Therefore you need the coordinates on your world map which is screen offset + mouse position.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
