isometric map and x/y->tile conversion

[martin.mi...@gmail.com]

Hi,

I need some help figuring out how to calculate tile row/col from mouse position.

I noticed that loading a tmx into the root node modifies its position, so that mouse events are filtered out for parts of the screen.
Because of that i added a container and loaded the level into it:

game.MAP.Container = me.Container.extend({
this._super(me.Container, 'init');
this.floating = false;
me.levelDirector.loadLevel("prototype1", {container: this});
me.input.registerPointerEvent("pointermove", me.game.viewport, function (event) {
var floorLayer = me.game.world.getChildByName("Floor");
var x=~~floorLayer[0].renderer.pixelToTileX(event.gameWorldX, event.gameWorldY);
var y=~~floorLayer[0].renderer.pixelToTileY(event.gameWorldX, event.gameWorldY);
console.log(x+" "+y);}

Resulting rows and cols are completely off, also tried screenX, localX, etc.
Is this supposed to work that way?

Kind regards,
false

[melonJS]

weird, that should work... I'll try tomorrow on my side.

else you can also try the following :

var tile = layer.getTile(event.gameWorldX, event.gameWorldY);

and then use tile.col and tile.row

we use the similar technique to display the tile position in the hexagonal map :

https://github.com/melonjs/melonJS/blob/master/examples/hexagonal/js/entities/entities.js#L23

http://melonjs.github.io/melonJS/examples/hexagonal/

[martin.mi...@gmail.com]

Thx for your suggestions; getTile gives the same result.

I modfied the hexagonal example to work with isometric data and it doesn't work correctly (rows and cols are shifted to lower right, maybe also stretched)
https://github.com/faljse/melonJS/tree/master/examples/hexagonal

[melonJS]

when we add the entities from Tiled to an isometric map, we "transform" them to fit into an isometric world by doing "rotate(Math.PI / 4).scale(Math.SQRT2, Math.SQRT1_2);"

https://github.com/melonjs/melonJS/blob/master/src/level/TMXObjectGroup.js#L390

I wonder if this is not what is missing here, as the pointer coord would be orthogonal, versus the layer isometric coordinates. and the shift to lower right + stretch match with this).

can you try to apply the same transform (or the invert one) to your coordinates before calling the pixelToTileX/Y function ?

both rotate and scale are implemented for me.Vector2d object, so you might want to use one to make it easier.

[melonJS]

Did manage to you solve your issue?

[martin.mi...@gmail.com]

Am Freitag, 2. Dezember 2016 12:35:35 UTC+1 schrieb melonJS:
> Did manage to you solve your issue?

Yes, i just did - thx to your support!
Will send pr soon :)

[melonJS]

Hi, 

Since you mentioned a PR, and since I did not see anything coming, i wanted to give it a try myself, by adding a (simple) tile selector to the current isometric example (i figured this would be enough to test all the conversions function).

At the end, it appears, that everything is working just fine, as I did not encounter any bugs with any conversion between orthogonal and isometric coordinates, see my commit here :

https://github.com/melonjs/melonJS/commit/4788caf1edaa6848b244f61fd8639733e56b6d40

it's however based on the 4.1.0 API, that has the following new addition :

- me.Polygon.toIso(), to add an isometric projection to any polygon shape (i just use it to draw a diamond shape at the current pointer position)

- me.Layer.getRenderer(), returns the layer current renderer (it's easier now to get access to it)

last but not least, as I guess you saw it, we moved the forum, and except for me, posting is not disabled here, so if you have any comments on this, make sure to post it here :

http://www.html5gamedevs.com/forum/32-melonjs/

cheers!
Oliver.