Phaser: "Only orthogonal map types are supported in this version of Phaser"

[njt1982]

https://github.com/photonstorm/phaser/blob/28e27647233cfa1fcefa4db1ccc7101a51264cac/src/tilemaps/parsers/tiled/ParseJSONTiled.js#L41

When will non-orthogonal maps be supported? Specifically for my use-case, hexagonal maps?

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[photonstorm]

Honestly, no idea. It's not on our roadmap yet, but we'd happily take a community contribution for the feature.

[njt1982]

@photonstorm ok - thanks for getting back to me. Any tips/guidance/documentation on the best approach to make a start on that?

Best as a third party plugin (any examples on how to make plugins)? Or best to fork Phaser and open a PR to get it into "core"?

[rexrainbow]

The different between maps might be transferring position between tileX/tileY and worldX/worldY.

In orthogonal map, tileX could be calculated by worldX, and wordX could be calculated by tileX.
In isometric, staggered, hexagonal map (there are 4 sub-types of hexagonal map), tileX might be calculated by ( worldX, worldY ), and wordX might be calculated by (tileX, tileY)

Here are some formulas of transferring between tileX/tileY and worldX/worldY in orthogonal and isometric map.

But adding additional parameter might break current function interface, is there better solution to extend the map supporting?

[the-simian]

@njt1982 If you're looking for examples on plugins there's examples here, in particular the global and scene level plugins http://labs.phaser.io/index.html?dir=plugins/&q=

For a scene level plugin, its useful to inherit from Phaser.Plugins.BasePlugin. here's a little code sample:

export default class YourPlugin extends Phaser.Plugins.BasePlugin {
  constructor(scene) {
    super('YourPlugin ', scene);
    this.scene = scene;
  }

  //reserved method will fire on init
   init(name) {
    console.log(this.scene); //here is your scene.
  }

  //arbitrary method
  test() {
    console.log(this.scene); //here is your scene.
  }
}

and you register this plugin in your game config like:

import YourPlugin from './plugins/your-plugin';

const config= {
//game config
plugins: {
    scene: [
      {
        key: 'YourPlugin',
        plugin: YourPlugin,
        mapping: 'yourPlugin'
      }
    ]
  },
//game config
}

const game = new Phaser.Game(config);

now yourPlugin is accessible attached to the scene.

[DamageESP]

I'm currently working on making this work.

I'm fairly (very) new to Phaser 3, and any _orientation_ (see what I did there?) on this topic would be helpful.

@photonstorm, What components are responsible or have something to do with the implementation of the map orientation?

For now, I see that I have to modify almost the whole /tilemaps folder: parsers, coordinate mappers...

I can make the game render the tile positions properly, but the tile culling doesn't seem to properly identify which tiles to cull.

Is there anything outside /tilemaps that needs to be modified to make this work?

[paaaav]

Will full isometric support arrive in Phaser 3 in near future? Are there plans? I know there is a plugin (for Phaser 2, ported to v3), but it can't load Tiled maps. I would be more than happy if Phaser natively would support isometric maps. If necessary, I'm willing to put up a small - for the time being - bounty for it.

[photonstorm]

It won't happen any time soon unless someone from the community contributes it.

[paaaav]

Okay, I put up a bounty of 100$ for isometric map support.

[paaaav]

Would anyone be interested in implementing it? Interested? - Then how much is your work worth to you? For a start, I gave 200$ total for isometric support for now (which is not much I think) and I'm willing to give more.

We should pool money. I think it's time, now that Phaser 3 is stable for a while, this could be the next great feature.

Also is there a site you'd recommend where I could better promote this feature and which is read by many Javascript developers? I think the visibility here is almost zero.

[photonstorm]

Thank you for opening this feature request (all those months ago!). As the development of Phaser 4 has now started I am tidying-up the repo and closing off old issues that won't be directly fixed or implemented in Phaser 3 by me. I would still consider community PRs that address this issue, however, and have left the GitHub tags intact so others can track them if they wish to get involved. However, I'm afraid this is no longer a feature that will be added to v3.

[paaaav]

Thank you photonstorm, I understand. But now that the github issue is closed, it is automatically closed on bountysource as well, which means nobody can claim it or give more money to the cause. Is this your intend? Should I open a new issue for v4 now or later? How should we handle this?

[photonstorm]

I know, but it's been well over 2 years and no-one has contributed anything, so I think we can safely say it's never likely to happen.

[paaaav]

Maybe that's true, nobody knows for sure. I would like to raise my stake to 400$ this month but now can't. Previously nobody contributed anything for free. I'm hoping that money matters. Of course the 200$ previously was not enough. I'd like to contribute money every few months for this issue until it's done. Is this ok for you?

[photonstorm]

Fine, go ahead, but I'll be surprised if it makes a difference (as it's a massive feature to ask for)

[svipal]

I believe I can implement this, will begin tomorrow.

[paaaav]

Thank you, that would be perfect.
The issue opener njt1982 needed hexagonal map support. I on the other hand am interested in isometric map and Tiled map support. If you want the bounty of $400 it's up to you if you want to do hexagonal also or only add complete isometric support, which of course includes Tiled map support.

[xdeltax]

hello, i decided to publish my isometric implementation because i found nothing (and i searched a lot. and i tried a lot with statictilemaplayer. lol) for my use case (isometric tilemaps, big maps, fast). in the end i coded it from "scratch". its based on blitter-component. its in development, its ugly, contains a lot of coding errors, is unstable, ... i dont know.

demo https://client.xdeltax.now.sh/#/game/phaser
repo https://github.com/xdeltax/xdx-rippms

you can try it on mobile. its a pwa. open on chrome for android: https://client.xdeltax.now.sh add to home-screen

[svipal]

Hey I had a lot of stuff going on in december; ended up not being able to do what I planned to do, sorry for that.
I have started work on this. expect a WIP in the incoming 2 weeks.
@paaaav
Yeah I'm planning on adding isometric support for this issue.
However I have experience with hexagonal maps so if I judge it's not too much hassle I will likely implement it after.

[svipal]

Hey !
Here's a progress report.
There was a looot of work to be done for sure ! And I'm not finished, a major bug and a few quirks to iron out.
Adding the orientation to all the components that deal with world and tile coordinates, passing it through the layerData, as well as changing things in the renderer so that it doesn't make weird artifacts when rendering dynamically. (in Tiled, isometric tileset elements don't have the same height and width as the tiles ! )
Note : because of the nature of the isometric coordinates you always have to treat both coordinates at the same time when converting to/from world. Else you get a warning for now. ~In a future commit I will just check the orientation and dispatch the correct component when people try to do it separately.~
^edit : _spoke too soon, not possible without some kind of context that would give the other coordinate._

You can view my current test on my fork here : https://svipal.github.io/ (source : https://github.com/svipal/svipal.github.io)
It is the classical phaser 3 dynamiclayer example, but with an isometric map.
(https://phaser.io/examples/v3/view/game-objects/tilemap/dynamic/painttiles#)

A far as I know, everything works with static layers. There's just this weird thing with the dynamic layer I'm working on.
Will PR as soon as I fix it to get some feedback, then will start work on Object layers.

[svipal]

As you guys can see I made a PR over two weeks ago and got no feedback or suggestions, which I was planning on in order to advance.
I totally respect the project's pace, not complaining here, but since if I don't do it soon it will kind of leave my mental headspace, I'll go ahead and implement the staggered isometric orientation on my own (which is very similar to isometric) in the following days.
I'd really rather wait until I have feedback and people test stuff out before I begin implementing hexagonal, because it's more complicated than just adding a different tiletoworld/worldtoTile, but if in two weeks there's no advancement, I will just do it before my brain phases out (lol) the project's structure.

[paaaav]

@svipal, thank you, I'm really grateful you took the opportunity to make this real. Kudos to you! I was busy with other work and currently I'm preparing to test the new mode. But I won't respond quickly as I have other stuff to do currently :(
I expect if this is finally merged and released there will be big interest in these new map types. I can't wait to see what people make of it. I hope you and @photonstorm can work together to get this merged and released in the near future, hopefully early this year. I'll keep watching your progress.

[paaaav]

Hey there,

I did a test with isometric_grass_and_water (from tiled, see https://github.com/bjorn/tiled/blob/master/examples/isometric_grass_and_water.tmx), changed some things (csv format, layers) and loaded it. It seems to work fine. Good job @svipal :) I'm very happy. Yes, I really like to see staggered as well, please continue as you may. BTW: in another project I get log spam with "With isometric map types you have to use the TileToWorldXY function. phaser.min.js:1:530315" Do you know the cause?

While I won't comment on the implementation I'm hoping that @photonstorm accepts it if he has time.

[svipal]

BTW: in another project I get log spam with "With isometric map types you have to use the TileToWorldXY function. phaser.min.js:1:530315" Do you know the cause?

@paaaav If at any point in your code you use tileToWorldX or tileToWorldY, you get warned as these functions can't succeed independently with a standard isometric layout. You have to deal with both coordinates at once, because the formulas require it :

world.x =  (tileX - tileY) * (tileWidth / 2);
world.y = (tileX + tileY) * (tileHeight / 2);

You can see it well explained for instance in this link : http://clintbellanger.net/articles/isometric_math/
Staggered is coming by the end of the week.

[svipal]

@paaaav @njt1982 Hexagonal and staggered are implemented !
Please test them out if you can.

[paaaav]

@svipal I wasn't using them :) It's a big project and I'm doing my own calculations.

Nevertheless, I build your phaser repo and found the culprit: in the function collideSpriteVsTilesHandler there were two "separate" calls to tileToWorldX and ...Y. I changed them to

var point = tilemapLayer.tileToWorldXY(tile.x,tile.y);
tileWorldRect.left=point.x;
tileWorldRect.top=point.y;

which seems to work. In the meantime the console spam doesn't trash my browser anymore.

[svipal]

Thanks a lot :)
Sorry I didn't catch that...
Fixed in the build I pushed.

[paaaav]

So far so good :)

Are the world bounds isometric? I think physics.world.setBounds(x, y, w, h) sets a rectangle. Can this be adapted to isometric in Phaser's engine? Maybe it already does that, I am not sure.

I've seen some – I think – drawing issues. You can see it here It's what happens when you draw one or more maps adjacent.

Also how would you recommend to do z-ordering in isometric? Is this already implemented? Do I have to set depth to each tile with varying values?

[photonstorm]

Thank you for submitting this feature request. We have implemented this and the feature has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.