Hi All,
I am new to Phaser 3 and I was just seeking some help, I have build a map in Tiled and I would like the middle of the map to be 0,0 (x,y) when I use it in phaser. Does anyone know what I have to do to accomplish this?
I tried offsetting the map but everything I do doesn’t seem to work!
Thanks,
Shane
const CX = 0.5 * map.widthInPixels;
const CY = 0.5 * map.heightInPixels;
map.createLayer(layerID, tileset, -CX, -CY);
this.cameras.main.centerOn(0, 0);
Hi @samme Thanks for the response! I did try something similar to this but it didn’t work, the coords of each tile stayed the same but the map moved.
I just tried your code too and the issue remains the same.
Anything else I might be missing?
The tile coordinates don’t change. They refer to the map data itself, not the position of the tilemap layer in the game world.
Okay I understand that, so how do I change the tile coordinates? I tried doing an offset of the map inside the Tiled program, which then in the Json file it spat out I saw negative coords as the starting point.
I think you can set a negative offset for a tile layer in Tiled. But an offset doesn’t change the tile coordinates.
Can I ask what you’re trying to achieve, or why you need negative tile coordinates?
Ahh yes thats what I have been trying but I thought it would change the coordinate tiles.
Yes of course, I am trying to make a map, and on my map there is a central location in the middle of a 256x256 map, and I was the center to be 0,0 not 128, 128, does this make sense?
In Phaser you can convert to and from world/tile coordinates pretty easily, so the range of the tile coordinates is usually not that important. The right offset will put world coordinates (0, 0) at the center of the map.
If you still need negative tile coordinates for some purpose, you can just convert by subtracting half the map dimensions in tiles.
Yes I do need negative coordinates, I think I am following what you are saying, would you be able to provide some sample code for me?
Set a layer offset in Tiled (I think it’s in pixels) of -128 * tile width, -128 * tile height.
In Phaser that will position the tile layer so that the center tile (128, 128) is close to world coordinates (0, 0). World coordinates (in pixels) is how all the game objects are positioned.
The conversions are
const tile = tilemapLayer.getTileAtWorldXY(worldX, worldY);
// tile.x, tile.y
and
const { x, y } = tilemapLayer.tileToWorldXY(tile.x, tile.y);
So it’s usually not very important what the tile coordinates are in absolute terms. Do most of your work in world coordinates, which centered on the center of the map, and then convert to tile coordinates last.
If you need to interpret tile coordinates relative to the center of the map, it’s
const tx = tile.x - 128;
const ty = tile.y - 128;
Okay so… I did the offset like you said (-128x32)
Now when I put it into tiled using the following:
map = this.make.tilemap({ key: ‘UnboundedEarth’, tileWidth: tileWidth, tileHeight: tileHeight, width: 256, height: 256 });
var layer = map.createLayer(0, allTiles, 0, 0);
I still don’t see negative coordinates I have an on click which updates the text on screen:
if (this.input.manager.activePointer.isDown)
{
var tile = map.getTileAt(pointerTileX, pointerTileY);
if (tile)
{
// Note: JSON.stringify will convert the object tile properties to a string
propertiesText.setText('Properties: ' + JSON.stringify(tile.properties) + 'X:' + tile.x + ' Y:' + tile.y);
tile.properties.viewed = true;
}
}
Which shows:
I am not sure what I am missing? I wasn’t quite sure how to implement the code snippet above, as I was not sure what worldX and worldY were in your example, are they the current selected tile?
Thanks for your help so far!
If you’ve exported the map from Tiled and then loaded it in Phaser use only:
map = this.make.tilemap({ key: ‘UnboundedEarth’ });
And omit the layer coordinates, it will use the offset from the map data:
var layer = map.createLayer(0, allTiles);
// layer.x should be -4096
// layer.y should be -4096
The tile coordinates tile.x and tile.y are never negative. They are within (0, 0) to (255, 255).
World coordinates are positions on the game world in pixels. They can be negative.
Okay interesting… this has helped me understand the framework a lot so thanks for your help so far.
So what you are saying is that I need to stop focusing on tile coordinates as they cannot be changed, but focus on world coordinates?
So in my code rather than reporting the tile coord, I use your other code to convert to world coordinates and display this instead?
Then if I wanted to export a list of coords to a json file, I would also have to manipulate it? Either by taking away 128 or some other method?
Yes. You can still display whatever you want, but most of the time you will be working in world coordinates. You can show tile.x - 128 and tile.y - 128 if that’s relevant.
Okay that is super interesting… I will have a play around and then I will get back to you.
I really appreciate your patience and help so far. I’ve had some ideas on how I can tackle this issue based on your answers.
It seems like manipulating the World coordinates rather than focusing on tile coordinates is the way forward…
Okay, I think I managed to do get over the hurdle I had, thank you very much for your support you can consider this resolved for now!
@samme You are the best!