Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

1 decade ago by SirPereira

Hello,

I'm building a game mainly based on collision between entity balls.

What would the best way to handle this?

Thanks!

1 decade ago by Apiheld

Box2d, if you want correct physics.

1 decade ago by SirPereira

Quote from Apiheld
Box2d, if you want correct physics.


Yeah, that's what I've been reading. However I'm finding a bit difficult to deal with it.

Currently, I have a rounded sprite, and I'm trying to transform it as a rounded Box2D entity.

I've changing the code following the basics of Box2D Physics (http://impactjs.com/documentation/physics-with-box2d) and currently I got some strange behaviour like this: http://gyazo.com/7adf2d7aa9c79b56db48a325b5729650

The entity is placed outside the collision map, and I can only see part of it. And it doesn't move at all (according to my code it should only move in up direction - as the rest of the code I didn't change to work with Box2D).

Current code for this:

main.js
ig.module( 
    'game.main' 
)
.requires(
    'impact.game',
    'plugins.camera',
    'impact.debug.debug',
    'game.levels.classic',
    'plugins.box2d.game',
    'plugins.box2d.debug'
)
.defines(function(){

MyGame = ig.Box2DGame.extend({
//MyGame = ig.Game.extend({

    init: function() {    

        ig.input.bind(ig.KEY.UP_ARROW, 'up');
        ig.input.bind(ig.KEY.DOWN_ARROW,'down');
        ig.input.bind(ig.KEY.LEFT_ARROW,'left');
        ig.input.bind(ig.KEY.RIGHT_ARROW,'right');

        this.camera = new ig.Camera( ig.system.width/4, ig.system.height/3, 5 );
        this.camera.trap.size.x = ig.system.width/10;
        this.camera.trap.size.y = ig.system.height/3;
        this.camera.lookAhead.x = ig.ua.mobile ? ig.system.width/6 : 0;

        this.loadLevel(LevelClassic);

        
        // -------------------
        // begin from http://impactjs.com/forums/code/box2d-plugin
        // In your game's init() method, after the Box2d world has 
        // been created (e.g. after .loadLevel())
        this.debugDrawer = new ig.Box2DDebug( ig.world );
        // end from http://impactjs.com/forums/code/box2d-plugin
        // ---------------------
        

    },

    loadLevel: function( level ) {        
        this.parent( level );

        this.player = this.getEntitiesByType( EntityPlayer )[0];
        
        // Set camera max and reposition trap
        this.camera.max.x = this.collisionMap.width * this.collisionMap.tilesize - ig.system.width;
        this.camera.max.y = this.collisionMap.height * this.collisionMap.tilesize - ig.system.height;
        
        this.camera.set( this.player );
    },

    update: function() {
        this.camera.follow( this.player );
        this.parent();
    },
    
    draw: function() {
        // Draw all entities and backgroundMaps
        this.parent();
        
        
        // ---------------------
        // begin from web page http://impactjs.com/forums/code/box2d-plugin
        // Then draw the Box2d debug stuff
        this.debugDrawer.draw();
        // end from http://impactjs.com/forums/code/box2d-plugin
        // ---------------------

    }
});


// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2
ig.main( '#canvas', MyGame, 60, 320, 240, 2 );

});

player.js
ig.module(
    'game.entities.player'
)
.requires(
    'plugins.box2d.entity'
//    'impact.entity'
)
.defines(function(){

EntityPlayer = ig.Box2DEntity.extend({
//EntityPlayer = ig.Entity.extend({

    size: {x: 33, y: 33},

    type: ig.Entity.TYPE.B,
    checkAgainst: ig.Entity.TYPE.NONE,
    collides: ig.Entity.COLLIDES.NEVER,

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

    init: function( x, y, settings ) {
        this.parent( x, y, settings );
        
        // Add the animations
        this.addAnim( 'idle', 1, [1] );
        this.addAnim( 'shoot', 1, [2] );

        // Set a reference to the player on the game instance
        ig.game.player = this;
    },
    
    
    // --------------------
    // begin from http://impactjs.com/forums/code/box2d-plugin
    // In your entity class
    createBody: function() { 
        
        var def = new Box2D.Dynamics.b2BodyDef();
        def.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
        def.position.Set(
            (this.pos.x + this.size.x / 2) * Box2D.Dynamics.SCALE,
            (this.pos.y + this.size.y / 2) * Box2D.Dynamics.SCALE
        );
        this.body = ig.world.CreateBody(def);
        
        var shape = new Box2D.Collision.Shapes.b2CircleShape();
        shape.SetRadius(7 * Box2D.Dynamics.SCALE);
        //this.body = ig.world.CreateCircle(shape); i don't know what to do here
        
        var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
        fixtureDef.shape = shape;
        fixtureDef.friction = 5;
        fixtureDef.density = 1;
        fixtureDef.restitution = .25;
        current = this;
        this.body.CreateFixture(fixtureDef);
        
    },
    // end from http://impactjs.com/forums/code/box2d-plugin
    // ------------------------

    
    update: function(){

        //player movement
        if (ig.input.state('down') && ig.input.state('left')) {
            this.vel.y = 50;
            this.vel.x = -50;
        } else if (ig.input.state('down') && ig.input.state('right')) {
            this.vel.y = 50;
            this.vel.x = 50;
        } else if (ig.input.state('up') && ig.input.state('left')) {
            this.vel.y = -50;
            this.vel.x = -50;
        } else if (ig.input.state('up') && ig.input.state('right')) {
            this.vel.y = -50;
            this.vel.x = 50;


        } else if(ig.input.state('up')) {
            //this.vel.y = -100;

            var force = new Box2D.Common.Math.b2Vec2(0,-100);
            this.body.ApplyForce(force , this.body.GetPosition());


        } else if (ig.input.state('down')) {
            this.vel.y = 100;
        } else if (ig.input.state('left')) {
            this.vel.x = -100;
        } else if (ig.input.state('right')) {
            this.vel.x = 100;
        } else {
            this.vel.y = 0;
            this.vel.x = 0;
        }

        this.parent();

    }
});


});

However, with my previous code (using Impact Entity), I have no problem at all making the entity move, and the entity starts where it should start: http://gyazo.com/a9d4bf9fa91a921c7eb02dff0d9f5dfb

main.js
ig.module( 
    'game.main' 
)
.requires(
    'impact.game',
    'plugins.camera',
    'impact.debug.debug',
    'game.levels.classic'/*,
    'plugins.box2d.game',
    'plugins.box2d.debug'*/
)
.defines(function(){

//MyGame = ig.Box2DGame.extend({
MyGame = ig.Game.extend({

    init: function() {    

        ig.input.bind(ig.KEY.UP_ARROW, 'up');
        ig.input.bind(ig.KEY.DOWN_ARROW,'down');
        ig.input.bind(ig.KEY.LEFT_ARROW,'left');
        ig.input.bind(ig.KEY.RIGHT_ARROW,'right');

        this.camera = new ig.Camera( ig.system.width/4, ig.system.height/3, 5 );
        this.camera.trap.size.x = ig.system.width/10;
        this.camera.trap.size.y = ig.system.height/3;
        this.camera.lookAhead.x = ig.ua.mobile ? ig.system.width/6 : 0;

        this.loadLevel(LevelClassic);

        /*
        // -------------------
        // begin from http://impactjs.com/forums/code/box2d-plugin
        // In your game's init() method, after the Box2d world has 
        // been created (e.g. after .loadLevel())
        this.debugDrawer = new ig.Box2DDebug( ig.world );
        // end from http://impactjs.com/forums/code/box2d-plugin
        // ---------------------
        */
        

    },

    loadLevel: function( level ) {        
        this.parent( level );

        this.player = this.getEntitiesByType( EntityPlayer )[0];
        
        // Set camera max and reposition trap
        this.camera.max.x = this.collisionMap.width * this.collisionMap.tilesize - ig.system.width;
        this.camera.max.y = this.collisionMap.height * this.collisionMap.tilesize - ig.system.height;
        
        this.camera.set( this.player );
    },

    update: function() {
        this.camera.follow( this.player );
        this.parent();
    }/*,
    
    draw: function() {
        // Draw all entities and backgroundMaps
        this.parent();
        
        
        // ---------------------
        // begin from web page http://impactjs.com/forums/code/box2d-plugin
        // Then draw the Box2d debug stuff
        this.debugDrawer.draw();
        // end from http://impactjs.com/forums/code/box2d-plugin
        // ---------------------

    }*/
});


// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2
ig.main( '#canvas', MyGame, 60, 320, 240, 2 );

});

player.js
ig.module(
    'game.entities.player'
)
.requires(
//    'plugins.box2d.entity'
    'impact.entity'
)
.defines(function(){

//EntityPlayer = ig.Box2DEntity.extend({
EntityPlayer = ig.Entity.extend({

    size: {x: 33, y: 33},

    type: ig.Entity.TYPE.B,
    checkAgainst: ig.Entity.TYPE.NONE,
    collides: ig.Entity.COLLIDES.NEVER,

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

    init: function( x, y, settings ) {
        this.parent( x, y, settings );
        
        // Add the animations
        this.addAnim( 'idle', 1, [1] );
        this.addAnim( 'shoot', 1, [2] );

        // Set a reference to the player on the game instance
        ig.game.player = this;
    },
    /*
    
    // --------------------
    // begin from http://impactjs.com/forums/code/box2d-plugin
    // In your entity class
    createBody: function() { 
        
        var def = new Box2D.Dynamics.b2BodyDef();
        def.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
        def.position.Set(
            (this.pos.x + this.size.x / 2) * Box2D.Dynamics.SCALE,
            (this.pos.y + this.size.y / 2) * Box2D.Dynamics.SCALE
        );
        this.body = ig.world.CreateBody(def);
        
        var shape = new Box2D.Collision.Shapes.b2CircleShape();
        shape.SetRadius(7 * Box2D.Dynamics.SCALE);
        //this.body = ig.world.CreateCircle(shape); i don't know what to do here
        
        var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
        fixtureDef.shape = shape;
        fixtureDef.friction = 5;
        fixtureDef.density = 1;
        fixtureDef.restitution = .25;
        current = this;
        this.body.CreateFixture(fixtureDef);
        
    },
    // end from http://impactjs.com/forums/code/box2d-plugin
    // ------------------------
*/
    
    update: function(){

        //player movement
        if (ig.input.state('down') && ig.input.state('left')) {
            this.vel.y = 50;
            this.vel.x = -50;
        } else if (ig.input.state('down') && ig.input.state('right')) {
            this.vel.y = 50;
            this.vel.x = 50;
        } else if (ig.input.state('up') && ig.input.state('left')) {
            this.vel.y = -50;
            this.vel.x = -50;
        } else if (ig.input.state('up') && ig.input.state('right')) {
            this.vel.y = -50;
            this.vel.x = 50;
        } else if(ig.input.state('up')) {
            this.vel.y = -100;
//            var force = new Box2D.Common.Math.b2Vec2(0,-100);
//            this.body.ApplyForce(force , this.body.GetPosition());
        } else if (ig.input.state('down')) {
            this.vel.y = 100;
        } else if (ig.input.state('left')) {
            this.vel.x = -100;
        } else if (ig.input.state('right')) {
            this.vel.x = 100;
        } else {
            this.vel.y = 0;
            this.vel.x = 0;
        }

        this.parent();

    }
});


});

Any ideas?

(An apart, suddenly my collision map started appearing in the canvas. It was not before, as my camera were hiding it. It looks it stopped working when I started playing with Box2D. If anyone gets any insight why it did stop, I would like you to tell me!)


Thanks
Page 1 of 1
« first « previous next › last »