Search the Community

Showing results for tags 'tiled'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 197 results

  1. 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.
  2. jd.joshuadavison

    Tilemap (layer) offset

    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
  3. 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.
  4. 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 () {'mapTiles', "assets/platformer-pack-redux-360-assets/Spritesheets/spritesheet_ground.png");'level1', "assets/testmap2.json", null, Phaser.Tilemap.TILED_JSON);'player', "assets/kenney_platformercharacters/PNG/Player/player_tilesheet.png", 80,110, 24); }, create: function () {; var level1 ='level1'); level1.addTilesetImage('spritesheet_ground', 'mapTiles'); var wallsLayer = level1.createLayer("layer1"); wallsLayer.resizeWorld(); level1.setCollisionByExclusion([],true,'layer1');,wallsLayer);,"objectLayer1"); player =,80, 'player'); var walk = player.animations.add('walk', [0]);'walk', 10, true);;; player.body.setZeroDamping(); player.body.fixedRotation = true;,true,true,true,false); cursors =; wallsLayer.debug = true; player.body.debug = true; }, Any help is appreciated!
  5. Pau

    Load tilemap

    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.add.tilemap('level1');'tiles_spritesheet','gameTiles'); this.backgroundLayer ='backgroundLayer'); } I have the attached the phaser 2 code, they are a few lines. Thank you!
  6. kurhlaa

    Load text from Tiled Object Layer

    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?
  7. 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'); ... = scene.make.tilemap({ key: 'map' }); var groundTiles ='warTileset_64x64'); var groundLayer ='ground', groundTiles, 0, 0); ... ... ... // Later when we process collision with specific tile var prop = // No data here ...
  8. 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'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;'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 ='player1Score');'player1Score', score + 10); this.scoreText.setText('Score: ' +'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 =; 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);; this.scene = config.scene; this.collected = config.collected; this.scene.add.existing(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(){'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.
  9. 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 }
  10. 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!
  11. Her is an example based on a Phaser 2 example, 0 index is set as colliding: Her is the tiled json file: Phaser 2 example where empty (index 0 in tiled json) is not collideable: What is the easiest way to fix this in phaser 3? Setting 0 in setCollisionByExclusion method does not exclude it from collision.
  12. 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 . 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 =; //[...] (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?
  13. I'm making my levels with Tiled and my tiles are 32x32. I would like to use different size tiles in my game depending on the screen size but I can't get 64x64 tiles to line up. Is there a way to change the map's tile size in Phaser?
  14. Hi!, I need some help doing new maps for my game: Check this post to know more about the game: I leave all you need to build the map in the zip file of this post! (you need to use tiled to edit it) If I uses the map your name will appear in the game Map Thanks!.
  15. I am trying to make an android build via using Canvas+ The game imports json tilemap data generated by Tiled. The game works fine in the browser, it evenr works when I use's webview instead of canvas+ (very slow though, like 1 FPS). I understand that this is probably a issue, but maybe someone else had this problem? Any idea what might be wrong?
  16. I am developing a game where I need to zoom in entire map also I can be able zoom out. I have created a tilemap using tiled software and rendered it using phaser.js. How can I add this function to my game?
  17. I have created tilemap using Tiled software of pixel size 1200x1000. While rendering it using phaser I have set width equal to 500 and height equal to 400.After this only map of 500x400 area is loading and remaining part is missing. How can I show the full map in 500x400 area on my webpage?
  18. nkholski

    Phaser 3 Animated Tiles Plugin

    I've prepared a plugin in time for the release of Phaser 3 today: support for animated tiles. The plugin parses tile animation data configured in Tiled and then, well, animates layers (dynamic layers required). All you need is three lines of code; one for preloading the plugin, a second for installing the plugin and the third for initializing it for a map. Features: Animate tiles as configured and displayed in Tiled. Support for unlimited tile animations, layers, maps, and tilesets. Use the API to manipulate the rate (multiplier of the frame duration set in Tiled) globally or for a certain tile id or map. Animations adapt to the timeScale set by the Phaser 3 API. Add and remove animated tiles any time. API demo: Playable demo (question marks are animated tiles): Github repository: Suggestions are welcome and if you use the plugin, please tell!
  19. Hi people, i'm new into Phaser and its community. I made a little test map with an Object Layer in it, the idea is to add some traps sectors or teleports where if the player touches it, it will teletransport it to some random place. Hence, it won't add any texture to it, i just want to have that area to collide with my player. Is this possible? without having to attach a texture to it? I used the square polygon to do so on Tiled Maps. Exported it as JSON. So here's my Object JSON: { "draworder":"topdown", "name":"objects", "objects":[ { "height":10, "id":1, "name":"trap1", "rotation":0, "type":"trap", "visible":true, "width":128, "x":445.41, "y":627.62, "gid": 2 }, { "height":10, "id":3, "name":"trap2", "rotation":0, "type":"trap", "visible":true, "width":64, "x":1023.87, "y":627.54, "gid": 2 }], "opacity":1, "type":"objectgroup", "visible":true, "x":0, "y":0 }], Then i created a group of traps and try to iterate them one by one to avoid them from falling due to gravity: traps =; traps.enableBody = true; // Get all traps map.createFromObjects('objects', 2, null, 0, true, false, traps); traps.forEach(function(trap) { trap.body.immovable = true; trap.body.allowGravity = false; }); I get the trap individual objects properly, but the problem that i found is, i'm not able to get the width/height i set on Tiled or shows up on my JSON. They are both equals to 1. Why did i lose those width & height values? but others don't such as `x` and `y` coordinates. What do you recommend to do to achieve the same effect? I just want certain areas to be "readable" so i can call functions after collision. It works fine when i set the texture, but also sets the default height x width of the texture applied, and i don't have any way to get the real Tiled values so i can resize my texture properly. Right now if I add a texture it works with this: this.physics.arcade.overlap(player.character, traps, this.resetPlayer, null, this); Even if i try to get the objects by doing: var trap = map.objects['objects'][1] The object returned doesn't contain any width/height. This is what it's returning: gid:2 name:"trap2" properties:undefined type:"" visible:true x:1023.87 y:627.54 I don't know if i explained myself correctly. Hope someone helps me Thanks in advance.
  20. Pretty straightforward question: I want to draw my collision layers in Tiled, preferrably using the Polyline tool. I would use createFromObjects, but I don't really need the polyline to appear as a sprite, or appear at all (except for debug mode as a collision layer). Phaser: 2.6.2 Physics: Arcade Create() { ... map = game.add.tilemap('mario'); map.addTilesetImage('tileset', 'tiles'); layer = map.createLayer('Tile Layer 1'); boundary = map.objects.boundaries[0]; player = game.add.sprite(map.objects.mainPlayer[0].x, map.objects.mainPlayer[0].y, 'dude'); game.physics.arcade.enable(player); player.body.collideWorldBounds = true; ... } Update() { ... game.physics.arcade.collide(player, boundary); ...
  21. I have created a sample map using tiled software. Then tried to load the same u on webpage using phaser.js. But I am not getting the proper result. Is there any mistake in my code or something wrong with library. <!DOCTYPE html> <html> <head> <title>Basic Platformer game</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="js/phaser.min.js"></script> <script src="js/phaser.js"></script> </head> <body> <div id="phaser-game"></div> <script type="text/javascript"> (function() { var game = new Phaser.Game( 800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.tilemap('map', 'background.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tile2', 'floor2.png'); game.load.image('player','bot2.png'); } var map; var layer; var marker; var player; var currentTile; var cursors; var curser; function create() { game.stage.backgroundColor = '#787878'; game.physics.startSystem(Phaser.Physics.P2JS); map = game.add.tilemap('map'); map.addTilesetImage('floor2','tile2'); currentTile = map.getTile(0, 0); layer = map.createLayer('Tile Layer 1'); player = game.add.sprite(20, 20, 'player'); game.physics.p2.enable(player); player.body.fixedRotation = true; layer.resizeWorld(); marker =; marker.lineStyle(2, 0x000000, 1); marker.drawRect(0, 0, 20, 20); cursors = game.input.keyboard.createCursorKeys();, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1); game.physics.arcade.enable(player); </script> </body> </html>
  22. Games

    Tiled/Sprite collision

    Hi, I want to ask how to collide sprite with a tile in layer on map created in tiled. So far I have this, but it doesnt work /* global demo, game, Phaser */ demo.stateMaze = function(){}; var ball; var playerSpeed = 3; var map; demo.stateMaze.prototype = { preload: function() { game.load.tilemap('map-maze', 'assets/maps/hole_in_a_park/maze/mapa.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tileset-maze', 'assets/maps/hole_in_a_park/maze/tileset.jpg'); game.load.image('ball','assets/imgs/gula.png'); }, create: function() { game.stage.backgroundColor = '#FFFFFF'; //Starting physics game.physics.startSystem(Phaser.Physics.ARCADE); map = game.add.tilemap('map-maze'); map.addTilesetImage('tileset','tileset-maze'); //CallBACK map.setTileIndexCallback(15, this.collisionHandler(), this); normal = map.createLayer('normal'); normal.resizeWorld(); wall = map.createLayer("wall"); wall.resizeWorld(); normal.renderSettings.enableScrollDelta = true; wall.renderSettings.enableScrollDelta = true; ball = game.add.sprite(0, 80, 'ball'); ball.anchor.setTo(0.5, 0.5); //Enabling ball physics game.physics.enable(ball); game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; game.input.onDown.add(function(){ if (game.scale.isFullScreen) { game.scale.stopFullScreen(); } else { game.scale.startFullScreen(false); } }); }, update: function() { //Collide game.physics.arcade.collide(ball, wall); if(game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { ball.scale.setTo(1, 1); ball.x += playerSpeed; } if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { ball.scale.setTo(-1, 1); ball.x -= playerSpeed; } if(game.input.keyboard.isDown(Phaser.Keyboard.UP)) { ball.y -= playerSpeed; } if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { ball.y += playerSpeed; } }, collisionHandler: function() { console.log("COLLISION!!!"); } }; But it never write COLLISION!!! so can anyone tell me what to do ?
  23. n7pankake

    Camera problem - following player

    Hello I'm having an interesting problem with my camera, this is how my game looks without the camera following the player this is how it looks following the player... (the only good thing is that it actually follows the player) but I would like to know how to set up the bounds of the camera and to make sure it doesn't ... well do this. here's my code : scenes.scene3 = function(){}; //Player speed var link, vel = 150; //Map/Level var map; //Tiled Layers var floor, water,walls; //Object Tiled Layers var rocks var bushes1, bushes2, bushes3, bushes4; scenes.scene3.prototype = { preload: function (){ game.load.image('tiles', 'Assets/Sprites/Levels/zelda_01.png'); music ='openWorld'); music.addMarker('openWorld', 0, 16, true); game.renderer.resize( 1216/2, 800/2); }, create: function (){ //Game itself,0, 1216, 800); game.physics.startSystem(Phaser.Physics.ARCADE); map = game.add.tilemap('level_01'); map.addTilesetImage('tiles'); floor = map.createLayer('ground'); walls = map.createLayer('walls'); water = map.createLayer('water'); map.setCollisionBetween(0, 100, true, 'walls'); map.setCollisionBetween(0, 100, true, 'water'); //Objects layer related rocks = game.add.physicsGroup(); map.createFromObjects('rocks','ROCK','tiles', 48, true, false, rocks); rocks.forEach(function(rocks){rocks.body.immovable = true;}); bushes = game.add.physicsGroup(); map.createFromObjects('bushes', 'BUSHTOP', 'tiles', 37, true, false , bushes); map.createFromObjects('bushes', 'BUSHBOT', 'tiles', 35, true, false , bushes); map.createFromObjects('bushes', 'BUSHLEFT', 'tiles', 36, true, false , bushes); map.createFromObjects('bushes', 'BUSHRIGHT', 'tiles', 34, true, false , bushes); bushes.forEach(function(bushes){bushes.body.immovable = true;}); //'openWorld', 0,1,true); // Player link = game.add.sprite((centerX-500), 100, 'LinkMovement'); link.scale.setTo(0.25, 0.25); link.animations.add('walkHorizontalRight', [6,7,8]); link.animations.add('walkHorizontalLeft', [9,10,11]); link.animations.add('walkVerticalDown', [0,1,2]); link.animations.add('walkVerticalUp', [3,4,5]); game.physics.enable(link); link.body.collideWorldBounds=true; //Life bar life = game.add.sprite((centerX-600), (centerY-675), 'lifeBar'); life.scale.setTo(0.15, 0.15); life.animations.add('fullHP', [0]); life.animations.add('twoHP', [1]); life.animations.add('oneHP', [2]); life.animations.add('Dead', [3]); cursors = game.input.keyboard.createCursorKeys(); var b1 = game.add.button(900,300, 'buttonFire', function() {fire();}); b1.scale.setTo(0.25,0.25); = (608,400);; }, update: function (){ game.physics.arcade.collide(link, walls); game.physics.arcade.collide(link, water); game.physics.arcade.collide(link, rocks); game.physics.arcade.collide(link, bushes); if(cursors.up.isDown){ link.body.velocity.y = -vel;'walkVerticalUp', 9, true); } else if(cursors.down.isDown){ link.body.velocity.y = vel;'walkVerticalDown', 9, true); } else{ link.body.velocity.y = 0; link.animations.stop('walkVerticalUp'); link.animations.stop('walkVerticalDown'); } if(cursors.left.isDown){ link.body.velocity.x = -vel;'walkHorizontalLeft', 9, true); } else if(cursors.right.isDown){ link.body.velocity.x = vel;'walkHorizontalRight', 9, true); } else{ link.body.velocity.x = 0; link.animations.stop('walkHorizontalRight'); link.animations.stop('walkHorizontalLeft'); } }, fire: function(){ console.log('firing') var bullet = bullets.getFirstDead(); bullet.reset(link.x, link.y); }, drawHealthBar: function(){ if (hitPoints === 3) {'fullHP'); } else if (hitPoints === 2) {'twoHP'); } else if (hitPoints === 1) {'oneHP'); } else if (hitPoints === 0) {'Dead'); } } };
  24. Thanks for your help, anyone who can spare the time. I've been digging around other threads and have found similar issues but not specifically what's happening to me, and I haven't found a solution yet. Basically Phaser is rendering the wrong tiles when I load my tilemap and tileset image. I'm using a tileset image that is 512/512, divided into a tileset with 16 rows and 16 columns of 32/32 tiles. My tilemap tiles are 32/32. I load the tilemap json object, and the image, as I'm supposed to, and then in the create function create the layers and add the sprite. My sprite is colliding with walls, but the tilemap looks like the tiles are simply a few tiles over from the index of the tiles I placed when I made my map. Everywhere I've read says this is a problem with the tileset not being divisible by the map tiles height/width but that's clearly not the case here. Other people say it's a problem with phaser's implementation of tilemaps, but I can't figure out how to fix the problem short if editing the json by hand which seems stupid. No discernible effect is observed when I change the firstgid in the json, either. Some code: function preload() { game.load.tilemap('map', 'maps/wintertest32.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('wintertest32', 'img/snowy.png'); game.load.image('player', 'img/singlebunny.png', 32, 32); } function create() { map = game.add.tilemap('map'); map.addTilesetImage('wintertest32', 'wintertest32'); backgroundLayer = map.createLayer('backgroundLayer'); platformLayer = map.createLayer('platformLayer'); groundLayer = map.createLayer('groundLayer'); foregroundLayer = map.createLayer('foregroundLayer'); groundLayer.resizeWorld() map.setCollisionBetween(1,6000, true, groundLayer, true) player = game.add.sprite(32, 32, 'player'); player.frame = 1 and so on... }
  25. Dannflower

    Tilemap layer order with Tiled

    Hi all, First off, apologies if I'm jumping the gun a bit here since I'm not sure if Mike's work on the Tilemap API is still a WIP or if it's wrapping up. That being said, the Tilemap API is near and dear to my heart due to its role within my personal projects. After poking around the recent Tilemap commits I'm curious about one thing: Are there plans to maintain layer ordering of layers within a Tilemap object as they are within the Tiled JSON? For instance: In a particular map I have something like the above where layer 1 is beneath layer 2 and object layer 1 is between layers 2 and 3. In the current build of v3 as was the implementation in v2, we lose this relationship between layers once we parse in our JSON. Current parser for reference: Within the final Tilemap, we are given the properties "objects," "layers," and "images" (ignoring collision for time being). Is there any plan to include a property on a Tilemap object that contains the ordered (as they are in the JSON) array of all layer types that are currently supported? My first instinct would be to suggest having the "layers" property serve that purpose and instead rename the existing property to "tileLayers" for the sake of being specific. That being said, a shout-out to Mike for doing an excellent job cleaning up and improving the Tilemap API. I'm excited to put it through its paces!