Hello!
I’m porting an iOS game to HTML5. The only item I’m stuck with is the debug draw of the Box2D world. It seems the other topics about this are for earlier (2.x) versions of the CC2D-JS engine. Using a different physics engine isn’t an option due to all content already prepared for Box2D.
Apologies if another discussion already solves this topic.
The physics initialization I came up with is based on the Box2Dweb testbed:
The following code snippets show the integration attempt of box2D debug draw in this project. The render mode has been set to 1.
var world = new b2World(new b2Vec2(0, 10) , true);
world.SetContinuousPhysics(true);
//setup debug draw
var debugDraw = new b2DebugDraw();
var cnvs = document.getElementById("gameCanvas");
var ctx = cnvs.getContext("2d")
debugDraw.SetSprite(ctx);
debugDraw.SetDrawScale(30.0);
debugDraw.SetFillAlpha(0.5);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);
world.Step(1 / 60, 10, 10);
world.DrawDebugData();
world.ClearForces();
I skimmed all potential side effects of my implementation by only adding the following to my update method:
function update() {
world.Step(1 / 60, 10, 10);
world.DrawDebugData();
world.ClearForces();
};
window.setInterval(update, 1000 / 60);
To test the debug drawing, the world gets a very basic shape:
var fixDef = new b2FixtureDef;
fixDef.density = 1.0;
fixDef.friction = 0.5;
fixDef.restitution = 0.2;
var bodyDef = new b2BodyDef;
//create ground
bodyDef.type = b2Body.b2_staticBody;
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(20, 2);
bodyDef.position.Set(10, 10);
world.CreateBody(bodyDef).CreateFixture(fixDef);
Problem here, the whole canvas get painted with a green mate:
The canvas is 800x500 pixels, so this small 20,2 box should only take a fraction of the screen.
Then I tried the following in the JS console to troubleshoot:
var canvas = document.getElementById("gameCanvas");
var cctx = canvas.getContext("2d");
cctx.beginPath();
cctx.setStrokeColor(0,255,0,255);cctx.setFillColor(255,0,0,255);
cctx.arc(120, 120, 140, 140, 130 + Math.PI*2, true);
cctx.closePath();
cctx.fill();
While this creates a small circle in the Box2Dweb testbed (first image below), the whole canvas is painted red in CC2D-JS (second image below). I have no sufficient understanding of the Canvas element or its troubleshooting.
Box2Dweb testbed:
Cocos2D-JS:
Any lead or clue will be helpful. Thanks in advance for your advice / thoughts on this!
L.