Loading Objects from Tiled

[Gryxs]

Hi

I'm new to phaser ( and new-ish to coding in general ), and for the past few days I've been trying to make a really simple game, platformer-style, where the player must navigate to certain areas before being able to exit the level.

 

I have the basics running, but now I can't seem to figure out how to check if the player is in those areas.

The relevant part of the code so far is as follows: 

var game = new Phaser.Game(800, 600, Phaser.AUTO, "mygame", {  preload: preload,  create: create,  update: update,  render: render});function preload() {  game.load.tilemap("questMap", "assets/quest.json", null, Phaser.Tilemap.TILED_JSON);  game.load.image("tilesheet", "assets/tilesheet.png");  game.load.image("npc", "assets/npc.png");  game.load.spritesheet("player", "assets/player.png", 64, 64);}var map;var tileset;var groundBg;var props;var houses;var houseProps;var npc;var ground;var areas;var player;function create() {  game.physics.startSystem(Phaser.Physics.ARCADE);  game.stage.backgroundColor = "#A8DBFF";  map = game.add.tilemap("questMap");  map.addTilesetImage("tilesheet");  map.addTilesetImage("npc");  ground = map.createLayer("ground");  groundBg = map.createLayer("groundbg");  props = map.createLayer("props");  houses = map.createLayer("houses");  houseProps = map.createLayer("houseprops");  npc = map.createLayer("npc");  map.setCollisionBetween(1, 5000);  ground.resizeWorld();

Not too pretty, I know.

I've created the map with tiled and there are a lot of small props and decorative tiles, hence the multiple "map.createLayer()" calls. The only one with collision is the ground layer.

Now, on my Tiled file, i've created an Object layer and drawn small rectangles on the areas I want to check if the player is in. I tought this was going to be an easy process but I can't seem to figure out how to load those areas into phaser, and then check if the player is within bounds. 

Googling has given me some results, but none seem to fit, as they usually cover how to add a sprite to an object, which in this case does not apply: I simply need that small area to exist and check if the player is there. I've also given names to each of those rectangles in Tiled, via the custom properties tab.

[drhayes]

See that part where you said "map = game.add.tilemap("questMap");"? You now have access to the JSON data present in your Tiled map file as parsed by Phaser. It has a property called "objects". "objects" has several properties corresponding to your object layers. In my game, that could include "map.objects.switches" or "map.objects.portals", etc.

 

One neat thing to do is to "console.log(map);" after you load it. Look in your Chrome dev tools to see what the object looks like.

 

What you'll probably end up doing is looping through your "object.whatever" (corresponding to the "whatever" object layer in Tiled), grabbing those object's x, y, width, and height properties, then creating Phaser.Rectangles out of each of them. Store these rectangles in a list and check the intersection of those rectangles against your player for the effect.

[cdelstad]

Have you tried changing the settings to Orthagonal, and XML format. Then export the Tiled files in JSON format?

 

Preload:

this.load.image('tiles', 'assets/images/spritesheet.png');    

this.load.tilemap('level1', 'assets/levels/level1.json', null, Phaser.Tilemap.TILED_JSON);

    

 

You also need to link up the spritesheet and the JSON data in your game state 'create' section.

   // Create a tilemap object

this.map = this.add.tilemap('level1');

  // Link tileset name to spritesheet

this.map.addTilesetImage('spritesheet', 'tiles');

 

Where 'spritesheet' is the name of the tileset in the JSON file below.

 

"tilesets":[

        {

[...snip...]

         "name":"spritesheet",

{...snip...]

}

 

I borrowed this from Zenva's course on HTML5 gaming (module 7).

Hope this helps,

-Chad