Object position in isometric maps

[Anna]

Hi,

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!

[Parasyte]

Hi!

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.

• me.Vector3d.toIso() - Convert a 3D vector from orthographic to isometric coordinate space
• me.Vector3d.to2d() - Convert a 3D vector from isometric to orthographic coordinate space
  • Same methods exist on the me.Vector2d class

Hope that helps.

[Anna]

I tried all those, still the coordinates are different .

[Parasyte]

Can you provide examples? It's possible there is a bug, or you might just need to add a translation step after the conversion.

[Anna]

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

 

"objects":[{
                 "height":179,
                 "id":52,
                 "name":"building",
                 
                 "properties":
                    {
                     "frameheight":166,
                     "framewidth":85,
                     "image":"factory1_sprite",
                     "application_name":"abc"
                    },
                 "propertytypes":
                    {
                     "frameheight":"int",
                     "framewidth":"int",
                     "image":"string"
                    },
                 "rotation":0,
                 "type":"",
                 "visible":true,
                 "width":189,
                  "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");
                        console.log(tile);
                        var pos1 ={};
          
                       pos1.x=this.pos.x;
                       pos1.y=this.pos.y;
                       console.log(pos1);
          
                      var iso = new me.Vector3d(pos1.x,pos1.y).toIso();
                       console.log(iso);
                        
                        x = this.pos.x;
                        y = this.pos.y;
                       this.isHoldable = false;
                       this.hover = false;
                      this.entityselected = false; 
                       

                    }
                }
            }
        }
        me.collision.check(this);
    }

 

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

[Parasyte]

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.

[Parasyte]

https://github.com/melonjs/melonJS/blob/a3ce0fb994da2bd41d357e1dd2c240fe45a2c34c/tests/spec/vect2d-spec.js#L160-L168 These expectations are definitely not right. On second look, they are definitely right. It follows the logic described here: http://clintbellanger.net/articles/isometric_math/

[Parasyte]

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.

 

[Anna]

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!

 

[Anna]

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!

[obiot]

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

https://github.com/melonjs/melonJS/blob/master/src/renderable/viewport.js#L467-L497

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
tmx_pos.to2d();

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

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

[Hashasm]

HI ALL,

 

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); 

this.clone().toPolygon().toIso();

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 ?

 

QUESTION:-HOW DOES TMX X  AND Y POINTS CONVERTING WHILE IT RENDERING OR LOADING INTO OUR MELONJS ?

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.

 

 

 

 

[obiot]

Did u tried the to2d() function (and not toIso() since their position on screen used the isometric coordinates) to convert back to orthogonal coordinates? (See my previous reply)

[Hashasm]

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);  

 

[obiot]

Yeah there is a typo in my code : txm_pos instead of tmx_pos

[Hashasm]

hahahaa  i didt notice that .. but still no luck  txm_pos.to2d();  its not converting properly.

[Parasyte]

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.

[obiot]

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. 

[Anna]

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).