Jump to content

Object position in isometric maps


Recommended Posts


In my isometric tmx file the  object positions are :"x":4097  , "y": 3300. But in melonjs  when i load the positions I am getting  entirely different x and y cordinates. How can i map these both! can someone help me here!

I am trying to save the game by editing the tmx json. so the x and y postions I am getting from the UI, when i try to save them in json . its not aligned.the postions are completely different!

Link to comment
Share on other sites


Yeah, that sounds like it fits my understanding. Tiled uses isometric coordinates for isometric maps, and melonJS uses orthographic coordinates for all maps. There are a few utility functions to convert between the coordinate spaces.

Hope that helps.

Link to comment
Share on other sites

x and y positions in my JSON(tmx) file:


                  "x": 3500,
                 "y" : 3500         



melonjs code:

    dragEnd: function (event) {

        var x, y;

        if (this.entityselected === true) {

           if (me.levelDirector.getCurrentLevelId()) {
                var layer = me.game.world.getChildByName("ground")[0];
                var tile = layer.getTile(event.gameX, event.gameY);
                if (tile) {
                    if (me.collision.check(this) === false) {

                        this._super(me.DraggableEntity, "dragEnd", [event]);
                        console.log("drag end");
                        var pos1 ={};
                      var iso = new me.Vector3d(pos1.x,pos1.y).toIso();
                        x = this.pos.x;
                        y = this.pos.y;

                       this.isHoldable = false;
                       this.hover = false;
                      this.entityselected = false; 



here the x and y positions i am getting are  : {"x" : 6600,"y" :3500}

Link to comment
Share on other sites

FWIW, you should be able to write the code like this:

console.log('pos:', this.pos.x, this.pos.y);
var iso = this.pos.clone().toIso();
console.log('iso:', iso.x, iso.y);

But anyway, it sounds like the toIso() method is returning incorrect coordinates. But you didn't say whether the first log shows <3500,3500> or something else.

The way I understand it, your data structure will have <3500,3500> which is in isometric space, and melonJS will have something else (orthographic space), and the toIso() method will correct it back to <3500,3500> in isometric space.

Link to comment
Share on other sites

Ok, I see where the maths are going wrong.

  • The TMX data uses positions in orthographic space. (!) So my understanding was completely opposite of reality.
  • melonJS transforms the TMX positions into isometric screen space with the toIso() method, and offsets the position by the map width (to prevent using negative coordinates)
  • When you want to transform the melonJS internal position back to orthographic space for TMX, you must first subtract the map width from the X coordinate, then call the to2d() method.


Link to comment
Share on other sites

i tried subtracting the mapwidth from x coordinate and then converting ! still not happening

So  from wht you said I understand melonjs is converting the map (isometric)coordinates into orthographic coordinates, using the Iso function melonjs is converting when the file loads. But viceversa, i.e converting the orthographic coordinates to isometric is not happening after trying out all these options..

toIso : function () {
            return this.rotate(Math.PI / 4).scale(Math.SQRT2, Math.SQRT1_2);

i went through the Iso ,rotate functions to do the ortho to iso convertion .. really did not understand how the calculations are happening.

I have attached an image along, to explain how wht exactly is happening! 

my mapwidth is 13200 and height 6600 

the first/blue cordinates are the map coordinates and black one's are screen/ortho coordinates!



Link to comment
Share on other sites

so the subtraction will only help in few cases. for example. if the map coordinates are (0,0), then the ortho coordinates will be (mapwidth/2,0).

so to get the map value again subtracting mapwidth/2 will help.. it wont happen for all the values!

Link to comment
Share on other sites

you should rather use the viewport localToWorld and worldToLocal when switching from world coordinates to screen or the opposite :


So to find back the original position from the TMX it should rather be something like :

console.log('pos:', this.pos.x, this.pos.y);

// switch back to world coordinates
var txm_pos = me.game.viewport.localToWorld(this.pos.x, this.pos.y);

// switch back to orthogonal coordinates

console.log('tmx_pos:', tmx_pos.x, tmx_pos.y);

(you can also chain the method to make it shorter)

Link to comment
Share on other sites



we tried all functionalites like:-

 me.game.viewport.localToWorld(this.pos.x, this.pos.y);

 me.game.viewport.worldToLocal(this.pos.x, this.pos.y); 


new me.Vector2d(857,534).to2d()

new me.Vector2d(857,534).toIso();  and some math function but still no luck ,:(

we also used the position which we got from event like event.gameX ,event.ScreenX & Y  etc

still we did't get it ..

we tried formula mentioned in this forum http://clintbellanger.net/articles/isometric_math/

by using this formula we getting screex and screenY points which is same as the points which we get by event.screenx and event.ScreenY

but how can we convert these screen x & y points to tmx X And Y ?:ph34r:



QUESTION DESCRIPTION:- I am creating an object layer in tmx map ,in that i am creating one object by using rectangle tool in the map

the x co-oridate is:-3722.00

and the co-ordinate is:-3207.00

but when we loaded into our melonjs and when i console it was giving x =7124 and Y=4422.500000000001

now i am searching where it was converting it ..


NOTE: we are doing this convertion for updating of our tmx json file or to save my game progress.:unsure:





Link to comment
Share on other sites

yes we tried to2d also but no luck,

i mention in my reply at line no 6. that is :-

new me.Vector2d(857,534).to2d();

and i tried new me.Vector2d(this.pos.x,this.pos.y).to2d(); also


coming to you code its throwing error

  console.log('pos:', this.pos.x, this.pos.y);

            // switch back to world coordinates
            var txm_pos = me.game.viewport.localToWorld(this.pos.x, this.pos.y);
             console.log(txm_pos)  //giving the pos but for tmx_pos.to2d() its throwing error
            // switch back to orthogonal coordinates
            tmx_pos.to2d();       // its throwing error like tmx_pos is not defined 

            console.log('tmx_pos:', tmx_pos.x, tmx_pos.y);  


Link to comment
Share on other sites

On 5/6/2017 at 5:54 AM, Anna said:


That's a very detailed diagram you drew! The coordinates work like this:

  • The origin is placed in the upper left corner at <0, 0>
  • The uppermost top of the map is placed at <mapWidth, 0>
  • The game world container will be sized to: w=mapWidth*2, h=mapHeight
  • mapOffset is defined as a vector: `var mapOffset = new me.Vector2d(mapWidth, 0);`
  • Transformation from TMX coordinates to melonJS coordinates is: `new me.Vector2d(mapX, mapY).toIso().add(mapOffset)`
  • Transformation from melonJS coordinates to TMX coordinates is: `new me.Vector2d(melonjsX, melonjsY).sub(mapOffset).to2d()`

The mapOffset is there to shift the coordinate space so the origin is at the upper left corner of the container (not at the upper center, as shown in your diagram). This keeps the implementation clean so we don't have to do anything with negative coordinates. It's a bit of a drawback, but I digress.

Given these functions, you should have a fairly simple way to translate between the coordinate spaces. Note that "melonJS coordinates" that I reference above are the world space coordinates. If you need screen space coordinates, you must first use the localToWorld and worldToLocal methods that obiot mentioned. These functions will convert between world space and screen space. Then the above functions will convert between world space and TMX map space coordinates.

It's a lot to digest! But hopefully that helps you. Just try to keep in mind that you are working with three different coordinate spaces. If you cleanly separate them, you shouldn't have a whole lot of trouble with it.

Link to comment
Share on other sites

i just realised we actually never translate an entity position, what i mean is that anentity.pos vector is always in world coordinates, this is all managed through the container update and draw function that translate the whole world/container and display only the visible part. So it means that it should work by only using the 2d() function on the entity pos vector, to find back the original orthogonal position from the TMX file. 

Link to comment
Share on other sites

  • 2 months later...

Thanks guys!!

I tried all mentioned things. but I still couldn't convert my coordinates . so instead of editing the tmx map and then loading the entities i stored them in db and loaded directly in game( there is a small delay though).



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...