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