Jump to content

How to create a cloud platform with Tiled Map Editor


Recommended Posts

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!

Link to comment
Share on other sites

  • 2 weeks later...

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
    // 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!
Link to comment
Share on other sites

  • 2 years later...

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);


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...