Defining collision using collision editor of tiled map

[Hashasm]

HI all,

Insted of using collision object to define collision i am using tiled map collision editor to mention the collision to the tile(as shown in collision.pgn) but its not working my player(here my player is the building) going through that tile(as shown in building.png) can some one tell me where i am doing it wrong.

 

 

still its passing my collision tile....

.

 

here is my code

    update : function (dt) {

      ....

.....

.....
        me.collision.check(this);

   .......

.....

......
    },

    onCollision: function ( response) {
       
    // Make the object solid
   
        return true;
    }

 

[Parasyte]

Collision shapes defined by the Tiled Collision Editor are not supported in melonJS. I had to do some digging through old tickets, but the decision was basically "this feature has high difficulty and low value", so we punted on it.

The current workaround is defining all collision shapes on the normal collision layer, as seen in the tutorial. This does have the benefit that your collision shapes will actually be visible while creating your map (this is not currently supported by Tiled for Tile Shapes). And another bonus is that you have more freedom of control over defining the collision boundaries; e.g. use a single PolyLine object to define the shape of the wall or the house by tracing the object borders (vs hundreds of small shapes). For example, this screenshot shows how we use BIG shapes that cover multiple tiles. This ends up performing far better at runtime than hundreds of small shapes, and it also allows us to be lazy and not worry about writing a bunch of code to merge shapes.

The only downside is that it may create some duplication of effort for level design; e.g. every rock or tree needs its own collision shape anyway, and if you decide to move them, you have to move the tile and the shape separately. 

[Hashasm]

hmm yeah I am getting the collision by using collision object. but my requirement is like,

In my case i want a sprite image which is collidable in the map,  And at the same time i want to drag and drop the sprite image.

in my game i have HUD element that i can drag and clone and create now sprite image .when i drop that image i want to make that image as Collidable..

like wise i am creating or modifying my map inside the game in that i am building roads so i wana make those roads as Collidable dynamically.Is there any other workaround for this kind of issue ???

[Parasyte]

Unfortunately I think it's just going to be a matter of writing code. Code to support tile collision shapes, or code to automagically create collision shapes as you add roads to the scene.

[Hashasm]

hi thanks for the timely response,

Here i am trying my level best to get that functionality in the code. If you can share some code reference it will be of a great help. Or please guide a good way to start implementing it.

[Hashasm]

I am still trying but no luck please can someone help me on this

[obiot]

you just need to add a entity with a body shape, at the same place of the house, and check for collision from or with that entity.

if you look at the melonJS source code, it's all we really we do  : create an entity with a body, and configure them as WORLD_SHAPE for the the collision layer  :

https://github.com/melonjs/melonJS/blob/master/src/level/TMXTiledMap.js#L463-L465

[Hashasm]

thank you for responding.

actually i am crating a new entity and making as its type =collision around my sprite image. but the problem is when i drag my sprite image the collision entity which i have crated it wont follw my sprite can you please help me with it

here is my code....

 

game.mycopy = me.DraggableEntity.extend({
    init: function (x, y, settings) {

       // console.log("Dragged !!!!!!!!!!!!!!!!!!!!!!!!");
        this._super(me.DraggableEntity, "init", [x, y, settings]);

        this.xcor = x;
        this.ycor = y;
        this.anchorPoint.set(0.5, 0.5);
        this.isHoldable = true;
        this.hover = true;
        this.entityselected = true;
        var settle = {};
        this.settle = settings;

        
       // console.log("settings" + JSON.stringify(settings));

    },
    update: function () {
        // this.body.update(dt);
        //  this.body.vel.set(0,0);
        return true;
    },
    dragStart: function (event) {
        var temp;
        if (this.entityselected === true) {
            this._super(me.DraggableEntity, "dragStart", [event]);
            console.log("drag dragstart");
            this.isHoldable = true;
            this.hover = true;
            this.entityselected = true;
         //   me.game.world.removeChild(temp);
         //   console.log(this.temp)
        //  
        }
        //return false;
    },
    dragMove: function (event) {
        
       
        if (this.entityselected === true) {
            this.isHoldable = true;
            this.hover = true;
            this.entityselected = true;
            this._super(me.DraggableEntity, "dragMove", [event]);
          //  console.log(me.input.pointer.pos.x);
            //console.log(me.input.pointer.pos.y);

me.collision.check(this);
          
        }
        //return false;

    },
    dragEnd: function (event) {
        
        var x,y;
       // console.log(temp);
     //   var collide=new Object();
        if (this.entityselected === true) {
        
            if (me.levelDirector.getCurrentLevelId()) {
                var layer = me.game.world.getChildByName("background")[0];
                var tile = layer.getTile(event.gameX, event.gameY);
                if (tile) {
                    if (me.collision.check(this) === false) {

                        this._super(me.DraggableEntity, "dragEnd", [event]);
                        console.log("drag end");

                        console.info(tile.tileId);
                        x = this.pos.x;
                        y = this.pos.y;
                        console.log("tile.col" + tile.col);
                        console.log("tile.row" + tile.row);

                        me.game.world.removeChild(this);
                        this.isHoldable = false;
                        this.hover = false;
                        this.entityselected = false;
                        //var viewport = me.game.viewport;
                        //    console.log("viewport"+JSON.stringify(viewport));
                        // me.game.viewport.follow(this, me.game.viewport.AXIS.BOTH);
                        //    this.hover = false; 
                        //this.entityselected = false;
                       me.game.world.addChild(new MySprite(tile.row, tile.col, x, y, {
                            image: this.settle.image,
                            framewidth: this.settle.width,
                            frameheight: this.settle.height,
                    
                        }));
                       
                     //my collision entity
                        
                   temp=  me.game.world.addChild(new me.Entity(this.pos.x,this.pos.y, {
                           image: this.settle.image,
                            width: 64,
                            height: 64,
                            type: me.collision.types.WORLD_SHAPE,
                        }));
                        
                  /*      console.log(temp);
                       me.game.world.addChild(new game.mycopy(this.pos.x,this.pos.y, {
                           image: this.settle.image,
                           height: 64,
                            width: 64,
                            type: me.collision.types.WORLD_SHAPE
                        }));
                        */
                    }
                }
            }
        }
        me.collision.check(this);
    },
    onCollision: function ( /*response, other*/ ) {
        // Make all other objects solid
        console.log("coliding..............")
        return true;
    }
});

 

so each and every time when i drop i am trying to remove my collision entity and creating new collision entity for my sprite for its new position  , but When i am removing collision entity it will remove all collision entities which i have crated for other sprites also..

Please help me with this

[agmcleod]

Could it be that the dragEnd is some how firing on those other entities as well? Have you tried logging to see which IDs are getting removed? Entities should have a this.GUID property available.

[Parasyte]

This would admittedly be much easier with ECS. As a short-term workaround, the DraggableEntity is already an entity; it has a body with no shapes. Add your shapes to its own body.

If you want to add shapes when the draggable is created, just pass an array of shapes as settings.shapes to the DraggableEntity constructor.

[Hashasm]

I was creating sprite and i am creating collision entity at the same position of the sprite ,now i am having confusion how to pass the shapes i mean to which entity it will take  shape.

[Hashasm]

HI guys ,

finally i found the solution.

i just created a pointer down function on click of the particular entity i am removing it.