Search the Community

Hello there I’ve built a map with Tiled with a tileset built from an images collection. So, I would to know how to load this tileset in my scene? Here where I am in my code work: export default class PreloadLevel1 extends Phaser.Scene { //... preload() { for (let i = 1; i < 101; i++) { const num = i.toString().padStart(3, '0'); this.load.image('objects' + num, 'assets/img/tiles/objects' + num + '.png'); this.load.image('tiles' + num, 'assets/img/tiles/tiles' + num + '.png'); } this.load.tilemapTiledJSON('tileset', 'assets/json/levels/level1.json'); } //... } export default class Level1 extends Phaser.Scene { //... create() { this.tilemap = this.make.tilemap({ key:'tileset' }); for (let i = 1; i < 101; i++) { const num = i.toString().padStart(3, '0'); this.tilesets.push(this.tilemap.addTilesetImage('tileset', 'objects' + num)); this.tilesets.push(this.tilemap.addTilesetImage('tileset', 'tiles' + num)); } //... } //... } But I finish with the warning in my console: No data found for Tileset: tileset Here an extract of my level1.json file: "tilesets":[ { "columns":0, "firstgid":1, "grid": { "height":1, "orientation":"orthogonal", "width":1 }, "margin":0, "name":"tileset", // <----- there "spacing":0, "tilecount":173, "tileheight":64, As you can see, the name of my tileset is right. And another extract of this same file to see you how my tiles array is built: "tiles":[ { "id":404, "image":"..\/..\/img\/tiles\/objects001.png", "imageheight":17, "imagewidth":13 }, { "id":405, "image":"..\/..\/img\/tiles\/objects002.png", "imageheight":19, "imagewidth":20 }, { "id":406, "image":"..\/..\/img\/tiles\/objects003.png", "imageheight":35, "imagewidth":22 }, { "id":407, "image":"..\/..\/img\/tiles\/objects004.png", "imageheight":40, "imagewidth":43 Is somebody to help me?

For some reason the following code isn't working. I've created all the tilesets, keys and images are correct and nothing is erroring in the console log preload this.load.image('tiles', 'assets//maps/newest.png'); this.load.tilemapTiledJSON('map', 'assets/maps/newest.json'); create const map = this.make.tilemap({key: "map", tileWidth: 32, tileHeight: 32}); const tileset = map.addTilesetImage('newest', 'tiles') const layer = map.createLayer('ground', 'map') The assets are loading in fine too, but I haven't added a map before using tilesets so not sure where I could of gone wrong. The image also loads in fine when adding that in so I figured it might be something to do with the following JSON file. { "compressionlevel":-1, "height":20, "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, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5, 5, 5, 5, 5, 5, 5, 5, 2, 2, 2, 2, 5, 5, 5, 5, 5, 5, 5, 5, 2, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 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], "height":20, "id":1, "name":"ground", "opacity":1, "type":"tilelayer", "visible":true, "width":25, "x":0, "y":0 }], "nextlayerid":2, "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tiledversion":"1.7.2", "tileheight":32, "tilesets":[ { "columns":3, "firstgid":1, "image":"..\/..\/Documents\/sprites\/tileset2.png", "imageheight":96, "imagewidth":96, "margin":0, "name":"newest", "spacing":0, "tilecount":9, "tileheight":32, "tilewidth":32 }], "tilewidth":32, "type":"map", "version":"1.6", "width":25 } I'll add the full code here for anyone to look over class Level1 extends Phaser.Scene { constructor() { super({key: "Level1" }); } preload () { this.load.aseprite('alco', 'assets/animations/StrongAlc.png', '../assets/animations/StrongAlc.json'); this.load.aseprite('chef', 'assets/animations/alcochef.png', '../assets/animations/alcochef.json'); this.load.image('tiles', 'assets//maps/newest.png'); this.load.tilemapTiledJSON('map', 'assets/maps/newest.json'); } create () { this.width = 800; this.height = 640; const map = this.make.tilemap({key: "map", tileWidth: 32, tileHeight: 32}); const tileset = map.addTilesetImage('newest', 'tiles') const layer = map.createLayer('ground', 'map') let playerPoints = 0; this.keyF = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.F); this.keyW = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W); this.keyD = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D); this.keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A); this.anims.createFromAseprite('chef', [ 'idleburp', 'standingattack', 'jump', 'run' ]); this.anims.createFromAseprite('alco'); this.alco = this.physics.add.sprite(this.width/2, (this.height /2) -50, 'alco'); this.chef = this.physics.add.sprite(this.width/50, this.height/2.5, 'chef'); this.chef.body.setCollideWorldBounds(true) this.physics.add.collider(this.chef, this.ground) this.chef.sideFacing = 'right' this.chef.moving = false; function colliderAlco(sprite) { playerPoints ++ console.log(playerPoints) // destroySprite(sprite) } this.physics.add.collider(this.chef, this.alco, colliderAlco(this.alco)) this.alco.play({key: 'rotatinglabel', repeat: -1}) // var frameNames = this.textures.get('chef').getFrameNames(); this.chef.play({key: 'idleburp', repeat: -1, ignoreIfPlaying: false}) } update() { if(this.keyF.isDown) { this.chef.play({key: 'standingattack', repeat: 0, ignoreIfPlaying: false}) this.chef.moving = true } if(this.keyD.isDown) { this.chef.play({key: 'run', repeat: -1, ignoreIfPlaying: false}) this.chef.moving = true this.chef.body.setVelocityX(100); this.chef.flipX = false if(this.chef.facing === 'left') { return this.chef.facing === 'right' } } if(this.keyW.isDown) { this.chef.play({key: 'jump', repeat: 0, ignoreIfPlaying: false}) this.chef.moving = true } if(this.keyA.isDown) { this.chef.play({key: 'jump', repeat: 0, ignoreIfPlaying: false}) this.chef.moving = true this.chef.body.setVelocityX(-100); this.chef.flipX = true if(this.chef.facing === 'right') { return this.chef.facing === 'left' } } } } function destroySprite(sprite) { sprite.destroy(); } export default Level1; This is the index.js import Phaser from 'phaser' import Level1 from './scenes/level1' var config = { type: Phaser.AUTO, width: 800, height: 640, physics: { default: 'arcade', arcade: { debug: true, gravity: {}, } }, scene: [Level1], scale: { zoom: 1, } }; var game = new Phaser.Game(config);

I'm building a grid of 64x96 sprites, laying them out at x * 64, y * 96, such that they should theoretically be seamless. However, some artifacts are appearing in the seams between sprites (image attached). My best plan to resolve that at the moment is laying sprites out at x * (63), y * (95). Does anyone know if there's another, accepted approach to this problem? I'm sure I'm not the first person to run into it.

Hi everyone! I have a problem. If I write a custom properties for the objects in the Tiled programs. How get custom properties?

In Tiled (1.1.3) you can make a layer that includes multiple different embedded tilesets. The resulting JSON has an array in the tilesets property. See complete example https://pastebin.com/jYP4buQc . I can't get this to load in Phaser. I've tried several things, but anything after the first tileset throws an error one way or another. Here's the latest attempt: function preload() { this.load.tilemapTiledJSON('map', '/maps/phaserTest.json'); this.load.image('phaserTestImg', '/maps/phaserTest.png'); this.load.image('Door0', '/maps/Door0.png'); this.load.image('Floor', '/maps/Floor.png'); this.load.image('Wall', '/maps/Wall.png'); } function create() { var map = this.add.tilemap('map'); var tileset = map.addTilesetImage('Wall', undefined, 16, 16, 0, 0, 1); var tileset2 = map.addTilesetImage('Door0', undefined, 16, 16, 0, 0, 2); var tileset3 = map.addTilesetImage('Floor', undefined, 16, 16, 0, 0, 3); var layer = map.createStaticLayer(0, tileset); var layer2 = map.createStaticLayer(1, tileset2); var layer3 = map.createStaticLayer(2, tileset3); //debugger; var graphics = this.add.graphics(); //[...] (I've also tried using map.createStaticLayer with the string name of the layer from Tiled JSON, this is just the latest failed experiment.) My guess is this isn't supported and I have to create my maps differently in Tiled, but I am brand new to Phaser and I might just be missing something obvious. Back in 2013, Rich seemed to say it wasn't supported but 2013 is quite a long time ago and I know a lot has changed with tileset handling since then. So my questions: 1) Can you make a map in Tiled that has multiple (embedded) tilesets in a single layer, and use that JSON from Phaser successfully? If so, can I get a hint on how to do this correctly? 2) If this isn't supported, what is the best alternate approach in Phaser 3? Two things that occur to me are making a Tiled map that has a separate layer for each tileset, or combining lots of little tilesets together into a mechagodzilla tileset so I can lay out a whole bunch of features in a single layer. Or something different. Opinions?

How can I load giant Tiled maps in Phaser? I have a .json map which is 2048x2048 tiles, and each tile is 64x64 pixels. Is there a way to load/unload chunks of it? I tried ths article but the splitter tool doesn't do anything. I think my map is too large for it.

Kaetram Kaetram is an open-source game-engine created to aid those interested in entering the game development realm. The codebase is simple, clean, and intuitive. This project is intended to be used as a learning tool. The original idea is based on Little Workshop's demo game – BrowserQuest (BQ). This game uses original BQ assets as well as custom-made ones. The entire code-base has been written from scratch, using more modern approaches. GitHub Repo – https://github.com/Veradictus/Kaetram-Open Live Version – https://kaetram.com Join us on Discord – https://discord.gg/MmbGAaw Patreon – https://www.patreon.com/kaetram Features BQ was intended as an experiment to showcase HTML5 capabilities, since then, technology has only served to advance. Kaetram contains a lot of ideas and features that builds on top of its predecesor, a couple are: Multiplayer using Socket.IO Enhanced rendering engine (includes dynamic lighting, overlays, animated tiles) Region system (client receives only necessary data and saves it) Questing and achievements system. Plugin-based combat system (for bosses/special enemies). Supports RESTful API. Discord server integration. Cross-server private messaging and interactions. And much more Regions The region system sends data to the client according to the map data of the server. The collisions are checked both server-side and client-side to avoid cheating. The region system makes use of dynamic tiles, which are unlocked according to a player's progress. Furthermore, there is integrated support for instancing, where we can use a section of the map (or clone it) and reuse it for certain groups of players. The instancing is perfect for activities such as minigames, where we will want to run multiple instances in parallel. Tilemap Kaetram is built with modularity in mind, as such, the client supports multiple tileset parsing. The tilemap can easily be constructed using Tiled Map Editor. Using our map parsing tool you can easily export your creation to both the client and the server. Kaetram Hub There is also support for a hub server. This can help connect servers across one another, allowing players to interact with their friends across them in a variety of ways (private messaging and guilds). Furthermore, the hub serves as a gateway for determining what server to place players in. If a server is full, it simply returns another server that has room for the player.

I am new to integrating tiled into phaser. Watched a bunch of tutorials and read a lot and followed instructions but my project just doesn't work the way it should... In Tiled, I added a Boolean property to each tile for collides: true. In phaser set it to setCollisionByProperty and.... no collision happens. I added debugging code, shows that there are tiles to collide with, my submarine is debugged and is showing a body, I have put my layer and sub on the same layer... still no collision. I've updated to the most recent versions of both Phaser 3 and Tiled... still no love. My sub should not cross into the islands area. My sub starts at my starting point placed in the objects layer, so I got that going for me. Any help would be greatly appreciated as this issue is destroying my productivity on this project. MapExplore.js

I am creating a platformer with Phaser3 and I am using Matter for my physics engine. I have loaded my tilemap/set into the world, however, I don't know if the collisions are working because since I have added in this code, my sprite has disappeared. Why is this? How do I get my sprite to appear again so that I can make sure he collides with the tiles? //Create tilemap const map = this.make.tilemap({key: 'map'}); //Create tileset const tileset = map.addTilesetImage('tiles'); const platforms = map.createDynamicLayer(0, tileset, 0, 0); map.setCollisionByExclusion([-1, 0]); this.matter.world.convertTilemapLayer(platforms); //Update the game at 30Hz this.matter.world.update30Hz(); //Get hitboxes this.shapes = this.cache.json.get('shapes'); //Set boundaries for physics this.matter.world.setBounds(0, 0, game.config.width, 750); //Player this.hero = this.matter.add.sprite(0, 0, 'sheet', 'run_right/0013', {shape: this.shapes.s0013}); //Don't want him rotating in the air this.hero.setFixedRotation(); //Set our variable to do calculations heroSize = this.hero.width;

Hello, What I am trying to accomplish is that I want to specify the type of tile the character is stepping at. But I'm stuck at "undefined tile property". Each of the tiles that have water in it has a "waterProperty" property name and type: boolean. So what I did is: var map = this.make.tilemap({ key: 'level1' }); var tileset = map.addTilesetImage('atlas_name','level1_tiles'); layer.setCollisionByProperty({ collides: true }); this.matter.world.convertTilemapLayer(layer); layer.forEachTile(function (tile) { console.log(tile.properties.waterProperty) // returns undefined. }); From: Phaser - Example - Matter Destroy Tile Bodies

I am making a top down RPG styled game using Tiled and Phaser 3. I have already made a map in Tiled for the city and store. Also, I have already set the objects for the location of the store where the player is suppose to go in order to enter the store and the location where the player is supposed to appear. The thing I am having trouble figuring out the code I am suppose to use in order to facilitate this action, as well as going back to city map. One more thing, If there are any other ideas on how to go about this I am all ears.

Hello, I have design this car path with tiled editor: but when i load it in phaser i see this: It's like the tile rotation i made in tiled is no working in phaser. This is the code i use to load it the tilemap: function preload(){ this.load.tilemapTiledJSON('level1', 'map.json'); this.load.image('nombreDelTilesetEnPhaser', '../img/tiles.png'); } function create(){ map = this.make.tilemap({key:'level1'}); tileset = map.addTilesetImage('nombreDelTilesetEnTiled', 'nombreDelTilesetEnPhaser'); backgroundLayer = map.createStaticLayer('background', tileset,0,0); } How can i get the tiles rotation working in phaser as i can see on tiled editor? Thank you in advance.

I've been having a look through the phaser tutorials for json tiled maps and I've noticed that it's not clear on how to create a json tiled map that is 'phaser ready'. After creating a tiled map in tiled and following the code examples I've been unable to get passed the following error. Cannot read property '2' of undefined line phaser.js:98679 // find the relevant tileset sid = map.tiles[tile.index][2]; set = map.tilesets[sid]; version: 2.6.2 Is there anything obviously wrong with the code or the exported json tile map? Maybe there is a special way to export maps from tiled? Help would be appreciated. Thanks. game = new Phaser.Game(600, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.tilemap('map', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tmw_desert_spacing', 'assets/tmw_desert_spacing.png'); } function create() { map = game.add.tilemap('map'); map.addTilesetImage('tmw_desert_spacing'); layer = map.createLayer('Tile Layer 1'); } { "height":14, "layers":[ { "data":[0, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 0, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 0, 0, 40, 40, 0, 0, 40, 40, 40, 0, 40, 40, 0, 40, 0, 0, 40, 40, 0, 0, 0, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 40, 0, 40, 40, 40, 0, 40, 40, 40, 40, 40, 40, 40, 0, 40, 0, 40, 0, 40, 40, 40, 40, 40, 0, 40, 40, 40, 0, 40, 40, 0, 40, 0, 40, 40, 0, 40, 0, 40, 40, 40, 0, 0, 40, 40, 40, 0, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 0, 0, 0, 40, 40, 40, 40, 40, 40, 40, 0, 0, 0, 40, 0, 0, 0, 0, 0, 0, 0, 0, 0, 40, 0, 0, 40, 40, 40], "height":14, "name":"Tile Layer 1", "opacity":1, "type":"tilelayer", "visible":true, "width":14, "x":0, "y":0 }], "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tiledversion":"1.0.1", "tileheight":32, "tilesets":[ { "firstgid":1, "source": { "columns":8, "image":"tmw_desert_spacing.png", "imageheight":199, "imagewidth":265, "margin":0, "name":"tmw_desert_spacing", "spacing":0, "tilecount":48, "tileheight":32, "tilewidth":32, "type":"tileset" } }], "tilewidth":32, "type":"map", "version":1, "width":14 }

I have made a map in Tiled and I have a already generated a JSON. Whenever I try to load the map in Chrome and it load only a black screen. When I went to inspect the website there are warning like: No data found in the Json tilemap from Tiled matching the tileset name "RunItUpCity" Cannot create tilemap layer, invalid layer ID given: Bottom Layer TilemapParser.ParseTiledJSON - Layer compression is unsupported, skipping layer 'Bottom Layer' Also, I got an Error that read: Uncaught Type Error: cannot read property 'setCollisionProperty' of null Does anyone think that there is a problem with the map or the code? Here is the JavaScript code if anyone needs it. const config = { type: Phaser.AUTO, width: 800, height: 600, parent: "game-container", pixelArt: true, physics: { default: "arcade", arcade: { gravity: { y: 0 } } }, scene: { preload: preload, create: create, update: update } }; const game = new Phaser.Game(config); let cursors; let player; let showDebug = false; function preload() { this.load.image("tiles", "../assets/tilesets/RunItUpCity.png"); this.load.tilemapTiledJSON("map", "../assets/tilemaps/GetawayCity.json"); // An atlas is a way to pack multiple images together into one texture. I'm using it to load all // the player animations (walking left, walking right, etc.) in one image. For more info see: // https://labs.phaser.io/view.html?src=src/animation/texture%20atlas%20animation.js // If you don't use an atlas, you can do the same thing with a spritesheet, see: // https://labs.phaser.io/view.html?src=src/animation/single%20sprite%20sheet.js this.load.atlas("atlas", "../assets/atlas/atlas.png", "../assets/atlas/atlas.json"); } function create() { const map = this.make.tilemap({ key: "map" }); // Parameters are the name you gave the tileset in Tiled and then the key of the tileset image in // Phaser's cache (i.e. the name you used in preload) const tileset = map.addTilesetImage("RunitUpCity", "tiles"); // Parameters: layer name (or index) from Tiled, tileset, x, y const belowLayer = map.createStaticLayer("Bottom Layer", tileset, 0, 0); const worldLayer = map.createStaticLayer("Top Layer", tileset, 0, 0); const aboveLayer = map.createStaticLayer("Collision Layer", tileset, 0, 0); aboveLayer.setCollisionByProperty({ collides: true }); // By default, everything gets depth sorted on the screen in the order we created things. Here, we // want the "Above Player" layer to sit on top of the player, so we explicitly give it a depth. // Higher depths will sit on top of lower depth objects. worldLayer.setDepth(10); // Object layers in Tiled let you embed extra info into a map - like a spawn point or custom // collision shapes. In the tmx file, there's an object layer with a point named "Spawn Point" const spawnPoint = map.findObject("Objects", obj => obj.name === "Spawn Point"); Also, I will attach the JSON code to the post because it is 17000+ of code. GetawayCity.json

Hello, I've recently acquired some sprites from Oryx and have attempted to load the sample Tiled file contained within. I'm able to load the assets just fine in my Preloader: loadAssets() { this.load.tilemap("oryx_tilemap", "assets/tilemaps/maps/oryx_test.json", null, Phaser.Tilemap.TILED_JSON); this.load.image("oryx_creatures", "assets/tilemaps/tiles/oryx_creatures.png"); this.load.image("oryx_items", "assets/tilemaps/tiles/oryx_items.png"); this.load.image("oryx_tiles", "assets/tilemaps/tiles/oryx_tiles.png"); this.load.image("oryx_world", "assets/tilemaps/tiles/oryx_world.png"); this.load.image("oryx_world2", "assets/tilemaps/tiles/oryx_world2.png"); } However, as soon as I attempt to "do" anything with the map, it crashes: create() { this.game.stage.backgroundColor = "#ffffff"; this.map = this.game.add.tilemap("oryx_tilemap"); // Error here this.map.addTilesetImage("oryx_world", "oryx_world"); this.map.addTilesetImage("oryx_creatures", "oryx_creatures"); this.map.addTilesetImage("oryx_items", "oryx_items"); this.map.addTilesetImage("oryx_world2", "oryx_world2"); this.layer = this.map.createLayer("background"); this.layer.resizeWorld(); } With the following error message: Uncaught TypeError: Cannot read property '2' of undefined Phaser.TilemapParser.parseTiledJSON Phaser.TilemapParser.parse Phaser.Tilemap Phaser.GameObjectFactory.tilemap InGame.create Phaser.StateManager.loadComplete Phaser.StateManager.preUpdate Phaser.Game.update Phaser.RequestAnimationFrame.updateRAF You can find the entire .json in this pastebin snippet. I'm not aware that I'm messing something up, judging from the tilemap example. What could I be doing wrong? Is the tilemap using any properties that are unsupported by Phaser?

Hey Guys, following problem making me crazy. I have googled and tryd all out what i have found. I have installed old Tiled Version and so on. I always getting these "Cannot read property '2' of undefined" error. My Tilemap.json { "height":50, "infinite":false, "layers":[ { "draworder":"topdown", "id":2, "name":"Objects", "objects":[ { "height":0, "id":1, "name":"Player Spawn", "point":true, "rotation":0, "type":"", "visible":true, "width":0, "x":858, "y":114 }], "opacity":1, "type":"objectgroup", "visible":true, "x":0, "y":0 }, { "data":"AAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==", "encoding":"base64", "height":50, "id":3, "name":"Tiles", "opacity":1, "type":"tilelayer", "visible":true, "width":38, "x":0, "y":0 }], "nextlayerid":4, "nextobjectid":5, "orientation":"orthogonal", "renderorder":"right-down", "tiledversion":"1.2.0", "tileheight":50, "tilesets":[ { "columns":0, "firstgid":1, "grid": { "height":1, "orientation":"orthogonal", "width":1 }, "margin":0, "name":"CaveTiles", "spacing":0, "tilecount":2, "tileheight":50, "tiles":[ { "id":0, "image":"assets\/images\/tiles\/black_cave_bg.png", "imageheight":50, "imagewidth":50 }, { "id":1, "image":"assets\/images\/tiles\/gray_cave_bg.png", "imageheight":50, "imagewidth":50 }], "tilewidth":50 }], "tilewidth":50, "type":"map", "version":1.2, "width":38 } My Code Implementation var config = { type: Phaser.AUTO, width: 500, height: window.innerHeight, backgroundColor: '#2d2d2d', physics: { default: "arcade", arcade: { debug: true, gravity: { y: 0 } } }, scene: { preload: preload, create: create, update: update } }; var player var cursors; var tilemap; var game = new Phaser.Game(config); function preload() { this.load.image('background', './assets/images/game_background_2.png'); this.load.tilemapTiledJSON('map', './lvl3.json'); this.load.spritesheet('tiles', './assets/tilemaps/TilesImage.png', { frameWidth: 50, frameHeight: 50 }); } function create() { this.add.image(0, 0, 'background').setOrigin(0, 0); map = this.make.tilemap({ key: 'map' }); const spawnPoint = map.findObject("Objects", obj => obj.name === "Player Spawn"); player = this.physics.add.sprite(spawnPoint.x, spawnPoint.y, "atlas"); player.setVelocity(100, 200); player.setBounce(1, 1); player.setCollideWorldBounds(true); } function update() { }

Hi, It seems that the latest Tiled program uses a different tiles "properties" syntax. Different from Phaser 3 expects. Currently if I export a JSON tilemap from Tiled (version 2018.06.01) I get the following tiles descriptions: "tilesets":[ { "columns":8, "firstgid":1, "image":"warTileset_64x64.png", "imageheight":512, "imagewidth":512, "margin":0, "name":"warTileset_64x64", "spacing":0, "tilecount":64, "tileheight":64, "tiles":[ { "id":2, "properties":[ { "name":"health", "type":"int", "value":1 }] }, { "id":5, "properties":[ { "name":"health", "type":"int", "value":2 }] }], "tilewidth":64 }], If I import this into Phaser 3 - I can't access any custom property. But if I modify JSON like this: "tilesets":[ { "columns":8, "firstgid":1, "image":"warTileset_64x64.png", "imageheight":512, "imagewidth":512, "margin":0, "name":"warTileset_64x64", "spacing":0, "tilecount":64, "tileheight":64, "tileproperties": { "2": { "health": 2 }, "5": { "health": 3 } }, "tilewidth":64 }], Then everything works as expected. I haven't used very old versions of both Phaser and Tiled, but it seems somebody has changed his syntax, which is not supported by both projects. Or I miss something? Question of course is how to access custom properties with the latest versions of Phaser 3 and Tiled? I create a tilemap in a standard way: ... scene.load.tilemapTiledJSON('map', '1.json'); ... this.map = scene.make.tilemap({ key: 'map' }); var groundTiles = scene.map.addTilesetImage('warTileset_64x64'); var groundLayer = scene.map.createDynamicLayer('ground', groundTiles, 0, 0); ... ... ... // Later when we process collision with specific tile var prop = tile.properties // No data here ...

Hello, I've built a tilemap using Tiled. The only thing is, I want to offset the tilemap (or preferably, individual tilemap layers) dynamically in the game (i.e. by a variable/calculated number of pixels). Tiled does have a 'Horizontal Offset' property for the layer. Obviously that would be a fixed value, but I thought it would map to a property of the tilemap layer object which I would then be able to dynamically modify, but as far as I can tell Phaser doesn't do anything with the 'Horizontal Offset' property. So I tried setting the tilemap layer's x position. This did offset the layer, but it doesn't just offset where the tilemap starts it offsets where the tilemap exists. By which I mean, that the tiles are culled as the move further left than it's x position, so my tiles disappear/appear at the left edge of the tilemap layer instead of the game viewport. I'm a bit stuck... I'm fairly sure that the Horizontal Offset is what I want, but as I said, it doesn't seem to be used by Phaser. Am I missing something? Is there another way to do what I want? Thanks, Josh

Hello, I am trying to load a tilemap mad with tiled, but i am getting this error in the console: Error: No data found in the JSON tilemap from Tiled matching the tileset name: "gameTiles" This is the code i am using in phaser: function preload(){ this.load.tilemapTiledJSON('level1', 'map.json'); this.load.image('gameTiles', 'tiles.png'); //this.load.spritesheet('gameTiles', '../img/tiles.png', { frameWidth: 32, frameHeight: 32 }); } function create(){ map = this.make.tilemap({key:'level1'}); tileset = map.addTilesetImage('gameTiles'); backgroundLayer = map.createStaticLayer('background', tileset,0,0); } I give you the complete source code in the attachment. It is not so much. Thanks in advance. 1-carga-carretera.zip

Hello, I am quite new to phaser and Tiled. I was wondering if anyone could give me some help with understanding on how to create tilemap collisions that are more than just squares with the p2 physics system. Right now every tile has a square collision box, I would like the collision shape to match the tile shape so that I can have slopes and what not. I am a quite a bit confused on the Tiled to phaser workflow especially on what p2.convertTilemap does and how Tiled's collision editor ties into phaser. So far my code looks like this: preload: function () { this.game.load.image('mapTiles', "assets/platformer-pack-redux-360-assets/Spritesheets/spritesheet_ground.png"); this.game.load.tilemap('level1', "assets/testmap2.json", null, Phaser.Tilemap.TILED_JSON); this.game.load.spritesheet('player', "assets/kenney_platformercharacters/PNG/Player/player_tilesheet.png", 80,110, 24); }, create: function () { this.game.physics.startSystem(Phaser.Physics.P2JS); var level1 = this.game.add.tilemap('level1'); level1.addTilesetImage('spritesheet_ground', 'mapTiles'); var wallsLayer = level1.createLayer("layer1"); wallsLayer.resizeWorld(); level1.setCollisionByExclusion([],true,'layer1'); this.game.physics.p2.convertTilemap(level1,wallsLayer); this.game.physics.p2.convertCollisionObjects(level1,"objectLayer1"); player = this.game.add.sprite(110,80, 'player'); var walk = player.animations.add('walk', [0]); player.animations.play('walk', 10, true); this.game.physics.p2.enable(player); this.game.camera.follow(player); player.body.setZeroDamping(); player.body.fixedRotation = true; this.game.physics.p2.setBoundsToWorld(true,true,true,true,false); cursors = this.game.input.keyboard.createCursorKeys(); wallsLayer.debug = true; player.body.debug = true; }, Any help is appreciated!

Hello, I am trying to load a tilemap json file made with the tiled program. I am looking for phaser 3 equivalent to this phaser 2 code: function preload(){ this.load.image('gameTiles', 'tiles_spritesheet.png'); this.load.tilemap('level1', 'map.json', null, Phaser.Tilemap.TILED_JSON); } function create(){ this.map = this.add.tilemap('level1'); this.map.addTilesetImage('tiles_spritesheet','gameTiles'); this.backgroundLayer = this.map.createLayer('backgroundLayer'); } I have the attached the phaser 2 code, they are a few lines. Thank you! 1-carga-carretera.zip

Hi, It is possible to create an Object Layer in a Tiled program. One of the options is "Insert Text" - how to show these labels in a Phaser game? If I try something like this: map.createFromObjects('labels', 3); .. black rectangle (like when needed image was not found) appears instead of the plain text, so this method probably is for images only. But how to show a text?

Hello everyone! I've been a lurker on this site for most of the time and the threads here helped me time and time again to sort things out. I'm currently trying to get a simple Jump'n'Run Game going, but I'm struggling with the collectibles. I'm using a Tiled Object Layer and imported it succesfully into the game. However, the overlap between the objects and the player just isn't working. I've tested the collectPoint1 function on another object and it worked. Also the sprites are all visible in my game. Really, the only problem is the overlap. class Level extends Phaser.Scene { constructor(){ super({ key: 'Level' }); }; create(){ let scene = this; let map = this.make.tilemap({ key: 'Level1'}); let player1_config = {...}; //Player 1 this.player1 = new Player1(this, player1_config); //Setting the score-data this.data.set('player1Score',0); //Animation of the Coins var coinSpin_config = { key: 'spin', frames: this.anims.generateFrameNumbers('coin', { start: 0, end: 7 }), frameRate: 10, repeat: -1 }; this.anims.create(coinSpin_config); //Using createFromObjects to display the coins this.points = map.createFromObjects('HousePoints', 'point', {key: 'coin'}, this); this.points.enableBody = true; this.anims.play('spin', this.points); //Score-text this.scoreText = this.add.text(30, 22, 'Score for ' + this.playerHouse + ': 0'); this.scoreText.setScrollFactor(0); }; //Collecting Points collectPoint1 (player, coin){ var score = this.data.get('player1Score'); this.data.set('player1Score', score + 10); this.scoreText.setText('Score: ' + this.data.get('player1Score')); coin.disableBody(); } update(){ this.player1.move(); this.physics.add.overlap(this.player1, this.points, this.collectPoint1, null, this); } } } As I'm well aware of this post, I've tried it with map.getObjectLayer as well. Didn't work. I'm a huge fan of this template, but its structure is so very different to mine that it down't really help me. . . . . this.housePoints = this.add.group(null); const objects = map.getObjectLayer('HousePoints'); let housePoints_config = { scene: this, collected: false } objects.objects.forEach( (point) => { //Creates a Points Object defined in a Points class (see below) point = new Points(this, housePoints_config); this.housePoints.add(point); }); . . . . . } update(){ this.player1.move(); //This throws the error 'spin is not a function', but that's not my focus this.housePoints.spin(); //This overlap doesn't work either this.physics.add.overlap(this.player1, this.housePoints, this.collectPoint1, null, this); } } ///////////////////////////////////////////// ///This is in another .js file naturally//// /////////////////////////////////////////// class Points extends Phaser.Physics.Arcade.Sprite { constructor(scene, config) { super(config.scene, config.x, config.y); config.scene.physics.world.enable(this); this.scene = config.scene; this.collected = config.collected; this.scene.add.existing(this); this.scene.physics.world.enable(this); var coinSpin_config = { key: 'spin', frames: this.anims.generateFrameNumbers('coin', { start: 0, end: 7 }), frameRate: 10, repeat: -1 }; this.anims.create(coinSpin_config); } spin(){ this.anims.play('spin', true); console.log('point updated'); } } I'd be eternally thankful for every tip! Thanks so much, if you decide to take the time to help me.

Hi everyone, I just wanted to share a new Phaser Plugin called phaser-tilemap-plus, that extends the tilemap loader and factory to support tile animations defined in the Tiled editor. It also allows you to implement collision detection against the map using polygons and rectangles within an object layer, enabling the use of sloped and curved surfaces. It will eventually also support custom properties and region-based events via the object layer. You can access and build the library from GitHub or install it directly as a Node package via NPM. Please note that it is still a work in progress, with features that are yet to be added and kinks to iron out. Anyhow, let me know what you think!

Her is an example based on a Phaser 2 example, 0 index is set as colliding: Her is the tiled json file: https://examples.phaser.io/assets/games/starstruck/level1.json Phaser 2 example where empty (index 0 in tiled json) is not collideable: https://phaser.io/examples/v2/games/starstruck What is the easiest way to fix this in phaser 3? Setting 0 in setCollisionByExclusion method does not exclude it from collision.