Jump to content

How to use a tile collision created in the tiled editor.


spiritabsolute
 Share

Recommended Posts

I created map by tiled editor.

My collision layer have walls and it placed on the tile 64x64. I set collision for tile width 16px, because I need to the actual width of the wall was 16px. The remaining area is transparent.

Tiled Editor allows you to do that, everything looks good. But, how to use a tile collision created in the tiled editor from phaser?

Created tile collision, create an object in the json structure "tiles":{"2":{"objectgroup":   etc.

How to use the phaser api set Collision to these tiles?

СonvertCollisionObjects does not work. 

Cannot read property 'length' of undefined  -> for (var i = 0, len = map.collision[layer].length; i < len; i++) 

this.game.physics.p2.convertCollisionObjects(this.map, 'walls');

As if tiled editor has generated the not correct structure.

phaser v2.6.2, tiled Version 0.17.0

My json file have structure:

{
 "columns":4,
 "firstgid":1,
 "image":"..\/tiles\/fullSetTiles.png",
 "imageheight":64,
 "imagewidth":259,
 "margin":0,
 "name":"fullSetTiles",
 "spacing":1,
 "tilecount":4,
 "tileheight":64,
 "tiles":
    {
     "2":
        {
         "objectgroup":
            {
             "draworder":"index",
             "height":0,
             "name":"",
             "objects":[
                    {
                     "height":64,
                     "id":1,
                     "name":"",
                     "rotation":0,
                     "type":"",
                     "visible":true,
                     "width":16,
                     "x":0,
                     "y":0
                    }],
             "opacity":1,
             "type":"objectgroup",
             "visible":true,
             "width":0,
             "x":0,
             "y":0
            }
        },
     "3":
        {
         "objectgroup":
            {
             "draworder":"index",
             "height":0,
             "name":"",
             "objects":[
                    {
                     "height":16,
                     "id":2,
                     "name":"",
                     "rotation":0,
                     "type":"",
                     "visible":true,
                     "width":64,
                     "x":0,
                     "y":0
                    }, 
                    {
                     "height":48,
                     "id":3,
                     "name":"",
                     "rotation":0,
                     "type":"",
                     "visible":true,
                     "width":16,
                     "x":0,
                     "y":16.25
                    }],
             "opacity":1,
             "type":"objectgroup",
             "visible":true,
             "width":0,
             "x":0,
             "y":0
            }
        }
    },
 "tilewidth":64
}, 

 

Link to comment
Share on other sites

This is how I set collision the tile in p2 with collision groups:

//Collision Group:
playerCollisionGroup = game.physics.p2.createCollisionGroup();
wallsCollisionGroup = game.physics.p2.createCollisionGroup();

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

    world.addTilesetImage('tileset');

    walls_layer = this.map.createLayer('walls');
    walls_layer.resizeWorld();
    walls_layer_convert = game.physics.p2.convertTilemap(this.map, walls_layer);
    for (var i = 0; i < walls_layer_convert.length; i++) {
      var walls_layer_body = walls_layer_convert[i];
      walls_layer_body.setCollisionGroup(wallsCollisionGroup);
      walls_layer_body.collides(playerCollisionGroup);
    }

game.physics.p2.setBoundsToWorld(true, true, true, true, false);

If that doesn't work, try these: https://phaser.io/examples/v2/p2-physics/tilemap

map = game.add.tilemap('map');

    map.addTilesetImage('ground_1x1');
    map.addTilesetImage('walls_1x2');
    map.addTilesetImage('tiles2');
    
    layer = map.createLayer('Tile Layer 1');

    layer.resizeWorld();

    //  Set the tiles for collision.
    //  Do this BEFORE generating the p2 bodies below.
    map.setCollisionBetween(1, 12);

    //  Convert the tilemap layer into bodies. Only tiles that collide (see above) are created.
    //  This call returns an array of body objects which you can perform addition actions on if
    //  required. There is also a parameter to control optimising the map build.
    game.physics.p2.convertTilemap(map, layer);

    ship = game.add.sprite(200, 200, 'ship');
    game.physics.p2.enable(ship);

    game.camera.follow(ship);

    //  By default the ship will collide with the World bounds,
    //  however because you have changed the size of the world (via layer.resizeWorld) to match the tilemap
    //  you need to rebuild the physics world boundary as well. The following
    //  line does that. The first 4 parameters control if you need a boundary on the left, right, top and bottom of your world.
    //  The final parameter (false) controls if the boundary should use its own collision group or not. In this case we don't require
    //  that, so it's set to false. But if you had custom collision groups set-up then you would need this set to true.
    game.physics.p2.setBoundsToWorld(true, true, true, true, false);

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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