Pixel art sprite positioning headache! Looks fine in Tiled but bad in Phaser

[Krautman]

Hello everbody

I'm not sure if this is a rounding-issue or related to the 2D/3D projection of the isometric plugin. I had a look into this class but couldn't find anything related so far. 

If you look at the screenshot you'll notice tiny but really ugly misalignment.

I got a couple of cubes (46x46 px). In Tiled I use 46x23 px tiles in isometric mode. The alignment of the cubes is fine. Here and there it skips a px but for a level designing tool it's good enough. 

I use the isometric plugin for phaser and use a kind of self made "2D"-array to store the json-file information from tiled.

I create isoSprites with iso-positions. Since I used 46x46 px as tile size I went for 23 px as "gridsize" of my world. I've tried already other values from 20 to 26 but nothing seems to align the cubes exactly. 

Any ideas what could cause this?

Thank you for ANY ideas

  

[Krautman]

well, I found a dirty way of dealing with it: 

the problem is the projection from 3D->2D screen coordinates. The isometric.plugin uses a projection "ratio" of Math.atan(0.5); This produces always floats. Rounding floats into integers to place sprites pixel-perfect isn't working 100%.

IMHO the only 100%-way of dealing with this is not to use radial functions at all and to stay with px-values and integers when translating iso-positions into screen-positions. Right now, implemting this is too much work for me. 

the dirty solution is:
edit phaser-plugin-isometric.js and change: 

Phaser.Plugin.Isometric.CLASSIC = Math.atan(0.5);

to:

Phaser.Plugin.Isometric.CLASSIC = Math.atan(0.5215);

this gives much cleaner results. 

Be also sure to set:
myIsoSprite.snap=1; 
myIsoSprite.smoothed = false; 
 

good luck!