1 decade ago by JackImpact
Hi All,
Anyone know to create a circle shape entity using box 2d? I was playing with box 2d in impactjs and managed to put a circle-shaped entity in my game, however the circle cannot be seen even all the collision is there. It is just like an invisible ghost.
My codes are as below
in Main.js
in circleA.js
in entity.js
Your help is very appriciated and I think Dominic should put the box 2d API for impactjs in the doc.
Thanks in advance!
Anyone know to create a circle shape entity using box 2d? I was playing with box 2d in impactjs and managed to put a circle-shaped entity in my game, however the circle cannot be seen even all the collision is there. It is just like an invisible ghost.
My codes are as below
in Main.js
ig.module(
'game.main'
)
.requires(
'impact.game',
'impact.font',
//'impact.debug.debug',
'game.entities.player',
'game.entities.crate',
'game.entities.stone',
'game.entities.circleA',
'game.levels.test',
'plugins.box2d.game'
)
.defines(function(){
MyGame = ig.Box2DGame.extend({
gravity: 100, // All entities are affected by this
// Load a font
font: new ig.Font( 'media/04b03.font.png' ),
clearColor: '#1b2026',
init: function() {
// Bind keys
ig.input.bind( ig.KEY.LEFT_ARROW, 'left' );
ig.input.bind( ig.KEY.RIGHT_ARROW, 'right' );
ig.input.bind( ig.KEY.X, 'jump' );
ig.input.bind( ig.KEY.C, 'shoot' );
if( ig.ua.mobile ) {
ig.input.bindTouch( '#buttonLeft', 'left' );
ig.input.bindTouch( '#buttonRight', 'right' );
ig.input.bindTouch( '#buttonShoot', 'shoot' );
ig.input.bindTouch( '#buttonJump', 'jump' );
}
// Load the LevelTest as required above ('game.level.test')
this.loadLevel( LevelTest );
},
loadLevel: function( data ) {
this.parent( data );
for( var i = 0; i < this.backgroundMaps.length; i++ ) {
this.backgroundMaps[i].preRender = true;
}
},
update: function() {
// Update all entities and BackgroundMaps
this.parent();
if(ig.game.getEntitiesByType(EntityCircleA).length==0){
ig.game.spawnEntity( EntityCircleA, 20, 100, {shape:'circle'} );
}
// screen follows the player
var player = this.getEntitiesByType( EntityPlayer )[0];
if( player ) {
this.screen.x = player.pos.x - ig.system.width/2;
this.screen.y = player.pos.y - ig.system.height/2;
}
},
draw: function() {
// Draw all entities and BackgroundMaps
this.parent();
if( !ig.ua.mobile ) {
this.font.draw( 'Arrow Keys, X, C', 2, 2 );
}
}
});
in circleA.js
ig.module(
'game.entities.circleA'
)
.requires(
'plugins.box2d.entity'
)
.defines(function(){
EntityCircleA = ig.Box2DEntity.extend({
size: {x: 50, y: 50},
type: ig.Entity.TYPE.B,
checkAgainst: ig.Entity.TYPE.NONE,
collides: ig.Entity.COLLIDES.NEVER,
animSheet: new ig.AnimationSheet( 'media/ball.png', 50, 50 ),
init: function( x, y, settings ) {
//this.addAnim( 'idle', 1, [0] );
this.parent( x, y, settings );
}
});
});
in entity.js
ig.module(
'plugins.box2d.entity'
)
.requires(
'impact.entity',
'plugins.box2d.game'
)
.defines(function(){
ig.Box2DEntity = ig.Entity.extend({
body: null,
angle: 0,
init: function( x, y , settings ) {
this.parent( x, y, settings );
// Only create a box2d body when we are not in Weltmeister
if( !ig.global.wm ) {
if(settings.shape=='circle'){
this.createCircleBody();
}
else{
this.createBody();
}
}
},
createBody: function() {
var bodyDef = new b2.BodyDef();
bodyDef.position.Set(
(this.pos.x + this.size.x / 2) * b2.SCALE,
(this.pos.y + this.size.y / 2) * b2.SCALE
);
this.body = ig.world.CreateBody(bodyDef);
var shapeDef = new b2.PolygonDef();
shapeDef.SetAsBox(
this.size.x / 2 * b2.SCALE,
this.size.y / 2 * b2.SCALE
);
shapeDef.density = 1;
//shapeDef.restitution = 0.0;
//shapeDef.friction = 0.9;
this.body.CreateShape(shapeDef);
this.body.SetMassFromShapes();
},
createCircleBody: function() {
var bodyDef = new b2.BodyDef();
bodyDef.position.Set(
(this.pos.x + this.size.x / 2) * b2.SCALE,
(this.pos.y + this.size.y / 2) * b2.SCALE
);
this.body = ig.world.CreateBody(bodyDef);
var ballSd = new b2.CircleDef();
ballSd.density = 1.0;
ballSd.radius = 5;
ballSd.restitution = 0.2;
this.body.CreateShape(ballSd);
//this.body.SetMassFromShapes();
},
update: function() {
var p = this.body.GetPosition();
this.pos = {
x: (p.x / b2.SCALE - this.size.x / 2),
y: (p.y / b2.SCALE - this.size.y / 2 )
};
this.angle = this.body.GetAngle().round(2);
if( this.currentAnim ) {
this.currentAnim.update();
this.currentAnim.angle = this.angle;
}
},
kill: function() {
ig.world.DestroyBody( this.body );
this.parent();
}
});
});
Your help is very appriciated and I think Dominic should put the box 2d API for impactjs in the doc.
Thanks in advance!