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 »