Forums » Help » Collision question

I have a door entity that "opens" by changing the collision from FIXED to NEVER. If the player is standing on top of the door when it opens, he predictably falls to the ground.

However, if a crate is on top of the door when it opens, it just stays up there. How can I fix this? I've even set the crate to the exact same collision settings as the player, and it still doesn't move.

Link: http://bsmallbeck.com/impact/ (Press X to pick up crate. Open door by standing on button to the right of it)

Collision settings:

Door

type: ig.Entity.TYPE.B,
checkAgainst: ig.Entity.TYPE.BOTH,
collides: ig.Entity.COLLIDES.FIXED,

(Changes to ig.Entity.COLLIDES.NEVER when trigger is engaged)

Crate

type: ig.Entity.TYPE.B,
checkAgainst: ig.Entity.TYPE.BOTH,
collides: ig.Entity.COLLIDES.FIXED,

Player

type: ig.Entity.TYPE.A,
checkAgainst: ig.Entity.TYPE.B,
collides: ig.Entity.COLLIDES.PASSIVE,

You want crates to pass through like the player does, so shouldn't crates be:

collides: ig.Entity.COLLIDES.PASSIVE

...same as the player?

Yeah I tried setting the crate to the same collision settings as the player, but it did not work.

Mind sharing crate.js, player.js, and door.js?

No problem:


box.js

ig.module(
        'game.entities.box'
    )
    .requires(
        'impact.entity',
        'game.entities.playerbox'
    )
    .defines(function () {

        EntityBox = ig.Entity.extend({

            size: {
                x: 36,
                y: 36
            },
            offset: {
                x: 2,
                y: 6
            },

            maxVel: {
                x: 200,
                y: 230
            },

            zIndex: 2,

            type: ig.Entity.TYPE.B,
            checkAgainst: ig.Entity.TYPE.BOTH,
            collides: ig.Entity.COLLIDES.FIXED,

            animSheet: new ig.AnimationSheet('media/box.png', 40, 44),

            init: function (x, y, settings) {
                this.parent(x, y, settings);

                this.addAnim('idle', 1, [0]);
                ig.game.box = this;

            },

            facingCorrect: function (other) {
                return ((!other.flip && other.pos.x < this.pos.x) || (other.flip && other.pos.x > this.pos.x));
            },

            update: function () {
                // AND statement with facing check.
                if (this.distanceTo(ig.game.player) < 38 && ig.input.pressed('pickup') && this.facingCorrect(ig.game.player) && this.onetick) {
                    ig.game.player.kill();
                    this.kill();

                    var left = (ig.game.player.pos.x < this.pos.x), // Check if the player is on the left side of the box

                        x = (!left || ig.input.state('forward') || ig.input.state('back')) ? this.pos.x + 11 : ig.game.player.pos.x;


                    ig.game.spawnEntity(EntityPlayerbox, x + 2, this.pos.y, {
                        flip: !left
                    }); // spawn with the flip setting.
                };
                this.onetick = true;

                if (this.pos.x > ig.system.width) {
                    this.pos.x = 0;
                    this.currentAnim.draw(this.pos.x);

                } else if (this.pos.x < -this.size.x / 2) {
                    this.pos.x = ig.system.width;
                }

                if (this.pos.y > ig.system.height) {
                    this.pos.y = 0;

                } else if (this.pos.y < -this.size.y / 2) {
                    this.pos.y = ig.system.height;
                }

                this.parent();
            }

        });

    });

player.js

ig.module(
        'game.entities.player'
    )
    .requires(
        'impact.entity'
    )
    .defines(function () {

        EntityPlayer = ig.Entity.extend({

            size: {
                x: 34,
                y: 56
            },
            offset: {
                x: 1,
                y: 14
            },

            maxVel: {
                x: 200,
                y: 200
            },

            type: ig.Entity.TYPE.A,
            checkAgainst: ig.Entity.TYPE.B,
            collides: ig.Entity.COLLIDES.PASSIVE,

            animSheet: new ig.AnimationSheet('media/player.png', 36, 72),

            flip: false,
            accelGround: 400,
            accelAir: 200,
            jump: 200,
            zIndex: 3,

            init: function (x, y, settings) {
                this.parent(x, y, settings);

                this.addAnim('idle', 1, [0]);
                this.addAnim('run', .11, [1, 2, 3, 4, 5, 6, 7, 8]);
                this.addAnim('jump', 1, [9]);
                this.addAnim('fall', 1, [9]);

                this.jumpTimer = new ig.Timer();
                this.jumpAttackVel = -35;
                this.jumpSustainVel = -150;

                ig.game.player = this;


            },



            update: function () {

                var accel = this.standing ? this.accelGround : this.accelAir;
                var playerSpeed = 170;

                if (ig.input.state('forward')) {
                    this.vel.x = playerSpeed;
                    this.flip = false;

                } else if (ig.input.state('back')) {
                    this.vel.x = -playerSpeed;
                    this.flip = true;

                } else {
                    this.vel.x = 0;
                }

                if (ig.input.pressed('jump') && this.standing) {
                    this.jumpTimer.set(0);
                    this.vel.y = this.jumpAttackVel;

                } else if (ig.input.state('jump') && this.jumpTimer.delta() < 0.25) {
                    this.vel.y = this.jumpSustainVel;;
                } else {
                    this.accel.y = 0;
                }

                if (this.pos.x > ig.system.width) {
                    this.pos.x = 0;

                } else if (this.pos.x < -this.size.x / 2) {
                    this.pos.x = ig.system.width;
                }

                if (this.pos.y > ig.system.height) {
                    this.pos.y = 0;

                } else if (this.pos.y < -this.size.y / 2) {
                    this.pos.y = ig.system.height;
                }


                if (this.vel.y < 0) {
                    this.currentAnim = this.anims.jump;
                } else if (this.vel.y > 0) {
                    this.currentAnim = this.anims.fall;
                } else if (this.vel.x != 0) {
                    this.currentAnim = this.anims.run;
                } else {
                    this.currentAnim = this.anims.idle;
                }

                this.currentAnim.flip.x = this.flip;

                this.parent();
            }

        });

    });

door.js

ig.module(
        'game.entities.door'
    )
    .requires(
        'impact.entity'
    )
    .defines(function () {

        EntityDoor = ig.Entity.extend({

            size: {
                x: 24,
                y: 74
            },
            offset: {
                x: 6,
                y: 28
            },

            animSheet: new ig.AnimationSheet('media/door.png', 36, 108),

            zIndex: 1,

            type: ig.Entity.TYPE.B,
            checkAgainst: ig.Entity.TYPE.BOTH,

            init: function (x, y, settings) {
                this.parent(x, y, settings);

                this.addAnim('closed', 1, [0]);
                this.addAnim('open', 1, [7]);
                this.addAnim('opening', .3, [1, 2, 3, 4, 5, 6], true);
                this.addAnim('closing', .3, [7, 6, 5, 4, 3, 2, 1, 0], true);

            },

            update: function () {

                this.collides = ig.Entity.COLLIDES.FIXED;

                this.parent();
            }

        });
    });

1) You should probably run your code through jsBeautifier. Just paste in your code and hit the "Beautify JavaScript or HTML" button. Makes your code much easier to read.

2) In door.js, why not remove this.collides from your update function, and set it once as a property instead, so you're not unnecessarily setting it over and over?

3) In box.js, you&039;re setting #ig.game.box = this; in your init function, however it seems you intend for there to be multiple boxes. So it might be a better idea to store the boxes in an array instead? Otherwise you can only access the most recently spawned box.

Also... Mind posting your switch.js too?

1. Sorry, my production code is always messy! Good to know about that site though, thanks!

2. OK I removed this.collides from door.js, and now the crate falls as expected! However, the reason I had that there, was I needed an "off" state for the trigger. Is there some other way to make an on/off trigger?

3. I set that because I wanted a way to refer to all boxes (like ig.game.player) Is there a better way to do that? And ig.game.box will only refer to the most recently spawned box?

Here is switch.js:

ig.module(
        'game.entities.switch'
    )
    .requires(
        'impact.entity'
    )
    .defines(function () {

        EntitySwitch = ig.Entity.extend({

            size: {
                x: 20,
                y: 10
            },
            offset: {
                x: 4,
                y: 18
            },

            animSheet: new ig.AnimationSheet('media/switch.png', 28, 36),

            zIndex: 0,

            type: ig.Entity.TYPE.NONE,
            checkAgainst: ig.Entity.TYPE.BOTH,
            collides: ig.Entity.COLLIDES.PASSIVE,

            init: function (x, y, settings) {
                this.parent(x, y, settings);

                this.addAnim('inactive', 1, [0]);
                this.addAnim('active', 1, [1]);

            },

            update: function () {

                this.currentAnim = this.anims.inactive;


            },

            check: function (other) {

                // Iterate over all targets
                for (var t in this.target) {
                    var ent = ig.game.getEntityByName(this.target[t]);

                    // Check if we got a "door" entity with the given name
                    if (ent && ent instanceof EntityDoor) {

                        ent.collides = ig.Entity.COLLIDES.NEVER;

                        this.currentAnim = this.anims.active;

                    }
                }

            }


        });
    });

Thanks for your help so far! I'm new at this, and it seems to be 1 step forward, 2 steps back with this thing so far.

What do you mean "an off state for the trigger"?
What trigger? Do you mean switch?

If so, you could use a Boolean to track if the switch is on/off.

ig.module('game.entities.switch')
.requires('impact.entity')
.defines(function() {
    EntitySwitch = ig.Entity.extend({
        ...
        is_on: false, // Or maybe call it "active" instead.
        init: function(x, y, settings) {
            this.parent(x, y, settings);
            this.addAnim('inactive', 1, [0]);
            this.addAnim('active', 1, [1]);
        },
        ...
    });
});

Yup, I mean the switch. What I was looking for was a way to execute code when the player or a crate was sitting on the switch (the "on" state) and when the player or a crate is not sitting on the switch (the "off" state). In other words, a toggle switch.

I've already coded the "on" state with code provided by the documentation, but haven't figured out a way to do the "off" state, which would consist of the collision setting changed back to FIXED and a little animation of the door closing.

What is this.target equal to in your switch?
I don't see where you define it, and there's no comment explaining it.

Basically, you want the switch to have a record somewhere containing all of the "things" it is capable of affecting. This might be the answer to the above?

Then, every update, you want to run a check: "is there a box on me"?

If so, change the state of all the "things" way one.
If not, change the state of all the "things" to a different way.

The target is defined in Weltmeister, and the target is the door next to it.

So you are saying that in the update() method in switch.js, I should write something like:

if ( this.touches(other)){
 //"on" state
} else {
 //"off" state
}