Following is my code:
demo.json file (exported map from tiled):
{
"compressionlevel":-1,
"height":16,
"infinite":false,
"layers":[
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":16,
"id":1,
"name":"layer",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":16,
"x":0,
"y":0
}],
"nextlayerid":2,
"nextobjectid":1,
"orientation":"isometric",
"renderorder":"right-down",
"tiledversion":"1.11.0",
"tileheight":64,
"tilesets":[
{
"columns":1,
"firstgid":1,
"grid":
{
"height":64,
"orientation":"isometric",
"width":128
},
"image":"assets/tilesets/emp_1.png",
"imageheight":64,
"imagewidth":128,
"margin":0,
"name":"emp_1",
"spacing":0,
"tilecount":1,
"tileheight":64,
"tilewidth":128
}],
"tilewidth":128,
"type":"map",
"version":"1.10",
"width":16
}
index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phaser Tilemap</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
</head>
<body>
<button id="startButton">Start Game</button>
<script>
class TilemapScene extends Phaser.Scene {
preload() {
this.load.image('tiles', 'assets/tilesets/emp_1.png');
this.load.tilemapTiledJSON('tilemap', 'assets/maps/demo.json');
}
create() {
const map = this.make.tilemap({ key: 'tilemap' });
const tileset = map.addTilesetImage('emp_1', 'tiles');
const layer = map.createLayer('layer', tileset, 0, 0);
layer.setVisible(true);
}
}
const config = {
type: Phaser.AUTO,
width: 128 * 16,
height: 64 * 16,
backgroundColor: '#87CEEB',
scene: TilemapScene,
};
document.getElementById('startButton').addEventListener('click', () => {
document.getElementById('startButton').style.display = 'none';
const game = new Phaser.Game(config);
});
</script>
</body>
</html>
my console is giving no errors and network gives a 200 status to all requests. i don’t know why i can’t see the loaded map (which has one tile, trying with many tiles and layers caused the same problem so i decided to start slow and find out the error). i can only see the blue background. please help, been at it for too long.
New contributor
greaye is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Well our code works, the issue has to do with your json file.
You can see, that your phaser-code works, if you change the first values of the data property of the json file, to “1’s” like this:
"data":[1, 1,
than you should see something.
Apart from that I assume (from your code and json) you wanted 16×16 tiles, but the definition of the json shows a tilesize of 128×64. if you fix this it should work as desired.
Important: And don’t forget index 0 is an empty tile, so you would also have to fix that, if not you won’t see anything.
As starting point, you could use these altered json-values:
(Or better yet fix the issue in the Tiled editor)
/* only altered values were kept */
{
/*...*/
"layers": [
{
"data": [
1, 1, 1, /* ... */
],
/*...*/
}
],
/* ... */
"tileheight": 16,
"tilesets": [
{
/* ... */
"tilecount": 64,
"tileheight": 16,
"tilewidth": 16
}
],
"tilewidth": 16,
/* ... */
}