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

10 years 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!

10 years ago by Apiheld

Box2d, if you want correct physics.

10 years 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 »