How to create a cloud platform with Tiled Map Editor

[jansensan]

I have recently decided to try PhaserJS. I have created a platform test.

 

Demo: https://rawgit.com/jansensan/test-phaser-js-platformer/02-implement-cloud-platforms/src/index.html

 

Repository: https://github.com/jansensan/test-phaser-js-platformer/tree/02-implement-cloud-platforms

 

 

This seems to work well so far, however I can't seem to find documentation on how to make cloud platforms collision (a platform that the player can stand on, but can traverse from other directions).

 

I am using Tiled as a map editor. I have created a tileset that represent the collisions. The empty tile is for pass through, the red tile os a full block and the blue tile represents cloud platforms. See a screenshot of the map editor below:

 

How can I choose the type of collision I need per tile type or ID? I have looked into setCollisionByIndex, but the doc says it's an internal function. Also, it seems to target tile IDs on the map and not relative to what the tileset is.

 

Could anyone provide any assistance? Thanks in advance!

[rich]

Phaser Coding Tips #4 (out this Friday) covers exactly this!

[shmikucis]

Don't know how to set up this in tiled, but there is an example how to set collision for specific tile from code http://mightyfingers.com/tutorials/display/tilemap/

[jansensan]

@rich: That's an awesome coincidence! Looking forward to it, thanks!

[jansensan]

For those who stumble on this post, this is the article that @Rich was talking about: Phaser Coding Tips 4 - Cloud Platforms.

 

However, this is not what I meant in my original question. Maybe I did not use the term "cloud platform" correctly. What the article calls a cloud platform I call an elevator.

 

So I went to explore Tiled a bit more and noticed there was a way to apply properties to tiles directly in the tilesheet, so I added my collision this way. Then, in my code, I went through each tile in the collision layer to see its index and assigned collision accordingly:

 

    // set basic collision

    _map.setCollisionByExclusion([0]);

    

    // manually set directional collision

    var i = 0, j = 0, collisionTile, targetTile, collisions;

    for(i = 0; i < 23; i++) {

      for(j = 0; j < 40; j++) {

        collisionTile = _collisionLayer.layer.data[j];

        targetTile = _tilesLayer.layer.data[j];

        if(collisionTile.index > 0) {

          // set collision blocks

          if(collisionTile.properties.collisions === 'true') {

            targetTile.collideDown = true;

            targetTile.collideLeft = true;

            targetTile.collideRight = true;

            targetTile.collideUp = true;

          // set directional collision

          } else {

            collisions = collisionTile.properties.collisions.split(',');

            targetTile.collideDown = collisions[0] === 'false';

            targetTile.collideRight = collisions[1] === 'true';

            targetTile.collideUp = collisions[2] === 'false';

            targetTile.collideLeft = collisions[3] === 'true';

          }

        }

      }

    }

 

Is there a better way to do this? Any opinion on this method is appreciated, I feel this may do the work in double.

 

Check out the code here if you want. From here I can move forward. Cheers!

[indextwo]

I realise this is a super-late response, and it doesn't answer the question directly as it related to tilemaps with Tiled (I have very limited experience with that); however, this thread is the 2nd result on Google for 'phaser cloud platform', and I understood 'cloud platform' in exactly the same way as you, @jansensan - a platform that you could jump up through, and then land on (rather than an actual cloud that was moving).

So, again: not an answer with Tiled, but there is already a Phaser example of almost exactly this method: https://phaser.io/examples/v2/arcade-physics/one-way-collision

The trick is to set the `platform.body.checkCollision.down` property to `false`. Assuming you're doing this by adding platforms into a `group()`, you can do this with `setAll`:

this.platforms = this.add.group();
this.platforms.enableBody = true;

//  Add the platforms

this.platforms.setAll('body.checkCollision.down', false);