Hashasm

Defining collision using collision editor of tiled map

Recommended Posts

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.

 

collision.png

 

still its passing my collision tile....

building.png.

 

here is my code

    update : function (dt) {

      ....

.....

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

   .......

.....

......
    },


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

 

Share this post


Link to post
Share on other sites

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. :)

shapes.thumb.png.1929d23effbc4bd873ace842ee5bad5f.png

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. 

Share this post


Link to post
Share on other sites

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 ???

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.