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?

I'm coding a vanilla JS canvas engine from scratch. I plan to start a little metroidvania-like platformer as soon as possible. Since it might get some big maps, got a little doubt regarding performance... Which is the best way to render a map bigger than game screen? Prerendering the tilemap into a huge image (i.e. an horizontal level could be as big as 8000x240), then draw it according to the scroll position. I figure this have a cost during the map building (and also RAM), but then it should be faster while drawing it every frame. Parsing the tilemap array and drawing only the visible tiles according to the scroll position. I figure this is slower because of calculations made every frame, but I might be wrong. I have tried to do some benchmark with both methods, but it doesn't seem to have any noticeable difference in both my desktop PC and laptop. It might have some impact on smartphones though, which is what really worries me.

Hi, I'm prototyping a turn-based strategy game and I would need the display a the world map as tiles (orthogonal, isometric, hexagonal, I don't care at the moment, I will go the easier way...) The main requirement is that I would need to easily change the texture on a tile depending on the player actions. What is the best (simplest) framework for this? I see phaser, pixi or melon could do it, but which one has as the simplest API for tile maps? Thanks you for your advice!

I searched and didn't find anything, but: I am working from the example at: http://labs.phaser.io/view.html?src=src\game objects\tilemap\collision\csv map arcade physics.js I thought the problem only appeared in my project, but this also happens in the in the example. When the camera moves horizontally to follow the player, gaps appear between the columns of tiles. Is there something that I can do to fix this? Is it something only appearing for me? Thank you!

Hey guys, I'm pretty new to the Phaser 3 framework and I followed a tutorial about making a phaser 3 game. Now, I wanted to load my tilemap into my game. But the browser console gives me this error : Uncaught TypeError: Cannot read property 'TILED_JSON' of undefined preload() { this.load.spritesheet( "charactYellowR", "https://cdn.glitch.com/7d2d6955-7277-4e96-807c-25649d73ba29%2FYellowWalkL.png?v=1603766562142", { frameWidth: 17, frameHeight: 25 } ); this.load.tilemap( "map", "https://cdn.glitch.com/7d2d6955-7277-4e96-807c-25649d73ba29%2FspaceBG.json?v=1603882479054", null, Phaser.Tilemap.TILED_JSON ); this.load.spritesheet( "tileset", "https://cdn.glitch.com/7d2d6955-7277-4e96-807c-25649d73ba29%2FspaceBg.jpg?v=1603882472713", 16, 16 ); } Please respond to my question... Thanks in advance!

UPDATE: Phaser is throwing an error since version 3.14 for: datasource of undefined By setting the pipeline for lighting. (Normalmap is also defined and loaded) This worked before. Now I try to find out what changed and what has to be changed.. but that's quite hard despite a real API version changelog. Has anyone a clue? Bug on GitHub: https://github.com/photonstorm/phaser/issues/4079?_pjax=%23js-repo-pjax-container Also the example breaks: http://labs.phaser.io/view.html?src=src\game objects\lights\dynamic tilemap layer.js //layer_ground is a dynamicTilemaplayer reference layer_ground.setPipeline('Light2D'); Help! by updating to phaser 3.14 my games are broken. EDIT: I set the dynamic tilemap code to a string ('tilemap') instead of referring to their variable. But then the tilemap simply does not render. It's there anyway. But it seems it cannot find the texture anymore. But referring (as in the code) to the variable for the texture causes the error as described below. my games are breaking and I can't figure out what's exactly wrong. Here is the console output of the non-minified phaser file. (attached) As far as I know, this has something to do with dynamic tilemap layers? phaser14.js:45334 Uncaught TypeError: Cannot read property 'dataSource' of undefined How I use them: // tilemap graphic and map are loaded: the graphic is loaded and at the right place this.map = this.make.tilemap({ key: key, tileWidth: TILESIZE, tileHeight: TILESIZE }); const tileset = this.map.addTilesetImage('tilemap'); // dynamic tilemaps: const layer_clouds = this.map.createDynamicLayer(0, tileset, 0, 0); this.layer.clouds.add(layer_clouds); layer_clouds.setScale(SCALE); but it worked before, it's hard to find a place where I can track changes of the API on phaser.io ?... maybe I just need the reference, but I can't find one. Thanks in advance for any help!

I am sorry if this topic exists already, but I struggle with this problem now for hours and I have no clue how to solve it. I created a tilemap in tiled, and there is a layer which uses multiple tilesets. However, if I want to create a new Dynamic Layer with Phaser, I have to specify one tileset for the layer: var dekoimg = map.addTilesetImage('spikes'); var layer = map.createDynamicLayer('Deko', dekoimg, 0,0); Is there a way to use multiple tilesets instead of only one? Thanks in advance

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.

Hi, I'm new to this forum so hi to everyone! :) Currently, I'm trying to build an isometric tilemap that also displays a certain height. Here is a demo: https://www.pixiplayground.com/#/edit/69C1wfNIowvu5wNNccv8w I have the following problems and maybe somebody could guide me in the right direction. 1. Shadows: When I remove the lineStyle, different heights and the depth of the scene are not really recognizable. I think this could be solved with proper lighting and shadows. Any suggestions on how to implement this? 2. Sprites & Performance: I'm currently calculating all vertices manually and then I draw a PIXI.Graphics-Polygon according to the vertices. Is there a more efficient way to do this. I'm not very experienced with PIXI.Mesh, SimpleMesh or SimplePlane. I wanted to use the PIXI.SimplePlane first but the documentation seems to be wrong... In addition to the mesh generation do you have any tips on how to properly cover the mesh with sprites, soften the edges and smoothly transition between different sprites. 3. Player movements & buildings: In the future I'd like to be able to add players and buildings. This is not so important right now but as the objects will heavily interact with the map, I'm happy if you have some guidance on this topic as well. Thank you very much! All the best Tom

Hello! So I'm working on this game on my spare time. I'm trying to merge alot of what I think resembles a good game with some(alot?) own ideas. You might find it close looking like Tibia. Features Spells Quite unique spell system (in my opinion). You craft spells, so the same spell can have different abilities or have different cast styles. Here's an example of magic wall and poison cloud: https://i.gyazo.com/fcd7ed547a9116c2b0d1c359c2b9381f.mp4 Here's another example, but from your spellbook. In the spellbook you have all your spells that you know. They all have different properties, which are random when learned. You can have 2 spells selected at the same time (as of now, might increase in the future). https://i.gyazo.com/4539a561f97cb90029643a45637b66ee.mp4 As you can see in the vid, the spells have different properties: Draw/Single: Different throwing styles, either point and shoot, or draw, where you draw where you want to shoot the spell, and hit space to fire it off. CD: Cooldown, how long it takes until you can shoot this spell again. MAC: Max Affected Coords - Crappy name, but if you have a draw with MAC of 5, you can pick 5 tiles to fire the spell on. Mobs Fight of undefined mobs that are attacking you. Are capable of throwing spells and are of various size. The Red Dragon is 3x3 tiles big and throws scary fireballs. Harvesting Chop down trees, mine ores or grab a machete to get som wheat or even flax. Crafting Use your harvested items to create weapons, armors Towns Create your own town, claim land(tiles) and build walls around it. Invite your friends to your town. Inventory Drag and drop inventory system Large map The map can be quite large, tested with 25 000 000 tiles so far. (5000 x 5000). Technical details The game is made with HTML5 and mostly VanillaJS. Some Vue.js to structure different modules such as the inventory. Would be happy with some feedback/ideas whatever to keep my motivation up Still BIGWIP..

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;

Hi guys, I have a problem when try to resize the world. This is the code: this.map = this.game.add.tilemap('test'); this.map.addTilesetImage('tile', 'tile'); this.layer = this.map.createLayer(0); this.map.setCollisionBetween(1, 100, true, 'blockedLayer'); this.layer.resizeWorld(); In the photos you can see that the world is not resizing, i dont know what is happening, any idea? i want to try to resolve this for myself XD

Hi, I am updating a game from Phaser2 to 3, and was hoping someone can help! The game is a platformer game, somewhat similar to the Mario demo game, but the tilemap needs to resize on smaller screens to allow a range of browsers to be used to play the game. In Phaser2 the following code worked layer = map.createLayer( 'tiles' ); layer.setScale( scale_y ) layer.resizeWorld(); if( scale_y != 1) layer.resize(tile_width, tile_height); I have tried multiple approaches to getting the tiles to resize in Phaser 3 and realise that we don't have the same scaling functionality as before, but was hoping someone has some ideas on how this can be achieved. I have managed to resize the actual tiles, but then the extra tiles that are then displayed aren't rendered, see print screen below. You can see that the physics body is being added correctly, not sure if it makes any difference but am using matterJS, see code below if( utils.DEBUG ) { scene.matter.world.createDebugGraphic() scene.matter.world.drawDebug = true } let size = utils.TILE_SIZE * utils.scale_y var map = scene.make.tilemap({ key: 'map_level' }) var tiles = map.addTilesetImage('world_tiles') var layer = map.createStaticLayer( 'tiles', tiles, 0, 0 ) .setScale( utils.scale_y ) .setScrollFactor( 0 ) .setCollisionByProperty({ collides: true }) // if( utils.scale_y != 1 ) layer.resizeWorld( utils.TILE_WIDTH, utils.TILE_HEIGHT ) scene.matter.world.setBounds( size, utils.TILE_HEIGHT ) scene.matter.world.convertTilemapLayer( layer ) If you need anything clarified please let me know. Many thanks in advance Áine

I am creating a game, where a lot of tiles need to be rendered. My goal is to render with this method at least 500k tiles. Since the tiles won't be redrawn every time but moved, this method should work out. I am using the pixi-tilemap library to create a fast & simple renderer to render a dynamic tilemap. The renderer approves itself to work, but .position.set seems to pull the tilemap from the interface away. I know, the function .position.set does not contain the same parameters as the one of the demo, however this function also does not work with the parameters of the demo. Some parameters must be added. The tutorial I have been using this classic demo: https://github.com/Alan01252/pixi-tilemap-tutorial

I've created a template to illustrate the concept of levels generated from dynamically loaded tilemaps from a single level scene. Phaser 3 Tilemap & File Pack Project Template Demo Questions and feedback are welcome!

Hello everyone, first time here (so might excuse if its the wrong section) but I'm fricking desperate at the moment. I'm trying for about 2 days now to get my player to collide with my "Obstacle" tilemap layer. I looked at almost every post about this here or elsewhere but I can't get it to work. It might be a simple thing but I can't find whats wrong and I want to throw my pc out of the window now. So maybe one of you guys have an idea and can help me. Any help is appreciated. The code is the Following: var game = new Phaser.Game(255, 255, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var player; var speed = 2; var floor; var walls; var obsts; var map; function preload() { game.load.spritesheet('player','assets/player_spritesheet.png', 48,48); game.load.image("tileset", "assets/tileset.png"); game.load.tilemap( "map", "assets/test_map.json", null, Phaser.Tilemap.TILED_JSON ); // Phaser.Canvas.setSmoothingEnabled(this.game.context, false); this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; this.game.scale.setUserScale(3, 3); this.game.renderer.renderSession.roundPixels = true; Phaser.Canvas.setImageRenderingCrisp(this.game.canvas); } function create() { // Create map map = game.add.tilemap("map", 48, 48, 16, 16); map.addTilesetImage('tileset'); // Use layers floor = map.createLayer('Floor'); walls = map.createLayer('Walls'); obsts = map.createLayer('Obstacles'); map.setCollisionBetween(1,1000); // create player player = game.add.sprite(50,50,'player'); // all physics related stuff game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.enable(player, Phaser.Physics.ARCADE); player.body.setSize(10, 14, 2, 1); player.body.collideWorldBounds = true; // walk animations player.animations.add('idle',[0,1,2],10,true); player.animations.add('walk_right', [12,13,14,15],10,true); player.animations.add('walk_left', [20,21,22,23],10,true); player.animations.add('walk_down', [8,9,10,11],10,true); player.animations.add('walk_up', [16,17,18,19],10,true); //attack animations player.animations.add('attack_down', [24,25,26,27],10,true); player.animations.add('attack_right', [28,29,30,31],10,true); player.animations.add('attack_left', [32,33,34,35],10,true); player.animations.add('attack_up', [36,37,38,39],10,true); player.animations.play('idle'); game.camera.follow(player); } function update() { game.physics.arcade.collide(player,obsts); player.body.velocity.set(0); // Walk mechanic if(game.input.keyboard.isDown(Phaser.Keyboard.A)) { player.animations.play('walk_left'); player.x -= speed; } else if (game.input.keyboard.isDown(Phaser.Keyboard.D)) { player.animations.play('walk_right'); player.x += speed; } if(game.input.keyboard.isDown(Phaser.Keyboard.W)) { player.animations.play('walk_up'); player.y -= speed; } else if (game.input.keyboard.isDown(Phaser.Keyboard.S)) { player.animations.play('walk_down'); player.animations.stop; player.y += speed; } // attack mechanic if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { player.animations.play('attack_left'); } if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { player.animations.play('attack_right'); } if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) { player.animations.play('attack_up'); } if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { player.animations.play('attack_down'); } //jump back to idle when not walking or attacking else if ( !game.input.keyboard.isDown(Phaser.Keyboard.A) && !game.input.keyboard.isDown(Phaser.Keyboard.D) && !game.input.keyboard.isDown(Phaser.Keyboard.W) && !game.input.keyboard.isDown(Phaser.Keyboard.S) && !game.input.keyboard.isDown(Phaser.Keyboard.UP) && !game.input.keyboard.isDown(Phaser.Keyboard.DOWN) && !game.input.keyboard.isDown(Phaser.Keyboard.LEFT) && !game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)){ player.animations.play('idle'); } } Also if you see any other mistakes, feel free to send suggestions to this as well. Thank you in advance. Kind regards

Hi, i want to know if pixi js have a editor that it can to handle the graphic's pixi and it drag and set your position, this graphics: var app = new PIXI.Application(800, 600, { antialias: true }); document.body.appendChild(app.view); var graphics = new PIXI.Graphics(); // Rectangle graphics.beginFill(0xDE3249); graphics.drawRect(50, 50, 100, 100); graphics.endFill(); or i use tilemap editor but i don't know if tilemap edito can to handle graphic's pixi,

Hi, I created a simple tilemap with tiled, and I'm trying to load it. The code and files can be seen here: https://codesandbox.io/s/qqq47wqv3w I'm not getting any errors in the console, but the canvas is just a black square. Any ideas what I am doing wrong? var game = new Phaser.Game(config); function preload() { this.load.image("tiles", "assets/tiles.png"); this.load.tilemapTiledJSON("World", "assets/tilemap2.json"); } function create() { this.map = this.add.tilemap("World"); var tileset = this.map.addTilesetImage("tiles", "tiles"); his.backgroundLayer = this.map.createStaticLayer("World", tileset); } The timemap.json from Tiles is below: { "height":100, "infinite":false, "layers":[ { "data":[3, 3, 3, 3, 3, 3, 3, 3, ...[data omitted]..., 3, 3], "height":100, "id":1, "name":"World", "opacity":1, "type":"tilelayer", "visible":true, "width":100, "x":0, "y":0 }], "nextlayerid":2, "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tiledversion":"1.2.1", "tileheight":8, "tilesets":[ { "columns":8, "firstgid":1, "image":"tiles.png", "imageheight":48, "imagewidth":64, "margin":0, "name":"tiles", "spacing":0, "tilecount":48, "tileheight":8, "tilewidth":8 }], "tilewidth":8, "type":"map", "version":1.2, "width":100 }

Hello, I'm trying to scale the layers of my map, but when I try it shows part of the following tiles, some idea of how to solve this ?, the map is created in tiled, the spritesheet is 16 x 16: CODE create function: map = this.make.tilemap({'key':'01'}); const TilesPacked = map.addTilesetImage('tiles_packed', 'tiles_packed'); const SnowExpansion = map.addTilesetImage('snow-expansion', 'snow-expansion'); groundLayer = map.createDynamicLayer('Wall', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const Ground = map.createStaticLayer('Ground', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const OverGround = map.createDynamicLayer('OverGround', [TilesPacked,SnowExpansion], 0, 0).setScale(2); const Npc = map.createDynamicLayer('NPC', [TilesPacked,SnowExpansion], 0, 0).setScale(2); player = this.physics.add.sprite(16*3, 16*3, 'characters', 1).setBounce(0.2).setScale(2); preload function: this.load.image('tiles_packed', 'sprites/tiles_packed.png'); this.load.spritesheet('characters', 'sprites/characters.png', {frameWidth:16, framaeHeight:16}); this.load.image('snow-expansion', 'sprites/snow-expansion.png'); this.load.tilemapTiledJSON('01', 'sprites/Maps/02.json');

Hey, when I assign setDepth(number) to Groups and Tilemaps, it seems not to work. Only after setting setDepth(number) on an already added sprite, it works. Any Ideas on it? Complete code below. // Tilemaps already created // # Configure z indexes layer.background.setDepth(0); //dynamic tilemap layer layer.midground.setDepth(1); //dynamic tilemap layer layer.objects.setDepth(2); // group layer.enemies.setDepth(3); // group layer.player.setDepth(4); // group layer.ground.setDepth(5); //dynamic tilemap layer layer.effects.setDepth(6); // group layer.water.setDepth(7); //dynamic tilemap layer //later on const SPRITE = this.add.sprite(0,0,'player') layer.player.add(SPRITE); //result: SPRITE is not in front of layer.background .. // BUT when I also write: const SPRITE = this.add.sprite(0,0,'player') layer.player.add(SPRITE); SPRITE.setDepth(0); // Now the sprite is before layer.background... ?

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?

Hello, I've been fiddling with the new camera and tilemaps and I've encountered a problem. I have created a tile layer much like in this example for a level editor I'm working on. var controlConfig = { camera: this.cameras.main, left: cursors.left, right: cursors.right, up: cursors.up, down: cursors.down, speed: 0.5, disableCull: true, zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A), zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E), }; controls = new Phaser.Cameras.Controls.Fixed(controlConfig); The problem with this way to handle the zoom is that it produces this kind of effect, The camera zooms out of the whole scene, including things that are fixed to it but leaves the rest of the tiles unrendered and culled. As you can see here, zooming should show more of the green tiles; but zooming out only made the tilemap layer and the contents of the scene smaller, when I'd like it to render more of the tilemap's tiles. I've tried updating with .setBounds, .setSize and .setViewport with a key call after zooming out but I may have missed something obvious... Any help greatly appreciated. EDIT: To clarify further; the camera has no trouble moving around inside the tilemap layer using the arrow keys but it shows black bars around on zooming out.

Hello, I was looking at the source code of Tilemap.js (https://github.com/photonstorm/phaser/blob/master/src/tilemaps/Tilemap.js) and I see strange rewriting of the layer variable all the time. For example: hasTileAt: function (tileX, tileY, layer) { layer = this.getLayer(layer); if (layer === null) { return null; } return TilemapComponents.HasTileAt(tileX, tileY, layer); }, Could you tell more what is the idea to sent layer as an argument and then rewrite it with itself in the very beginning?

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() { }