Just in general I’m getting some errors with this.
The major one is in safari and the android browser get the error
JavaScript reference error can’t find variable
The variable in question is b2AABB.
Here is the code var worldAABB = new b2AABB();
I am working with box2d JavaScript (the pixel lab variant) for google closure. Also if you can give my closure dependencies and requires a good once over I would appreciate it.
<html>
<title>Tune Tunnels Alpha</title>
<head>
<!--=============================-->
<!-- Copy this part to your app. -->
<!-- START -->
<!--=============================-->
<!-- libs -->
<!--[if IE]><script type="text/javascript" src="lib/excanvas.js"></script><![endif]-->
<script src="prototype.js"></script>
<!-- <script src="raphael.js"></script> -->
<script src="closure-library/closure/goog/base.js"></script>
<!-- box2djs -->
<script>
goog.addDependency('../common/b2Settings.js', ['box2d.Settings'], []);
goog.addDependency('../common/math/b2Vec2.js', ['box2d.Vec2'], []);
goog.addDependency('../common/math/b2Mat22.js', ['box2d.Mat22'], []);
goog.addDependency('../collision/b2Proxy.js', ['box2d.Proxy'], []);
goog.addDependency('../collision/ClipVertex.js', ['box2d.ClipVertex'], []);
goog.addDependency('../common/math/b2Math.js', ['box2d.Math'], []);
goog.addDependency('../collision/b2AABB.js', ['box2d.AABB'], []);
goog.addDependency('../collision/b2Bound.js', ['box2d.Bound'], []);
goog.addDependency('../collision/shapes/b2ShapeDef.js', ['box2d.ShapeDef'], []);
goog.addDependency('../collision/b2BoundValues.js', ['box2d.BoundValues'], []);
goog.addDependency('../collision/b2Pair.js', ['box2d.Pair'], []);
goog.addDependency('../collision/b2PairCallback.js', ['box2d.Callback'], []);
goog.addDependency('../collision/b2BufferedPair.js', ['box2d.BufferedPair'], []);
goog.addDependency('../collision/b2PairManager.js', ['box2d.PairManager'], []);
goog.addDependency('../collision/b2BroadPhase.js', ['box2d.BroadPhase'], []);
goog.addDependency('../collision/b2Collision.js', ['box2d.Collision'], []);
goog.addDependency('../collision/Features.js', ['box2d.Features'], []);
goog.addDependency('../collision/b2ContactID.js', ['box2d.ContactID'], []);
goog.addDependency('../collision/b2ContactPoint.js', ['box2d.ContactPoint'], []);
goog.addDependency('../collision/b2Distance.js', ['box2d.Distance'], []);
goog.addDependency('../collision/b2Manifold.js', ['box2d.Manifold'], []);
goog.addDependency('../collision/b2OBB.js', ['box2d.OBB'], []);
goog.addDependency('../collision/shapes/b2Shape.js', ['box2d.Shape'], []);
goog.addDependency('../collision/shapes/b2BoxDef.js', ['box2d.BoxDef'], []);
goog.addDependency('../collision/shapes/b2CircleDef.js', ['box2d.CircleDef'], []);
goog.addDependency('../collision/shapes/b2CircleShape.js', ['box2d.CircleShape'], []);
goog.addDependency('../collision/shapes/b2MassData.js', ['box2d.MassData'], []);
goog.addDependency('../collision/shapes/b2PolyDef.js', ['box2d.PolyDef'], []);
goog.addDependency('../collision/shapes/b2PolyShape.js', ['box2d.PolyShape'], []);
goog.addDependency('../dynamics/b2Body.js', ['box2d.Body'], []);
goog.addDependency('../dynamics/b2BodyDef.js', ['box2d.BodyDef'], []);
goog.addDependency('../dynamics/b2CollisionFilter.js', ['box2d.CollisionFilter'], []);
goog.addDependency('../dynamics/b2Island.js', ['box2d.Island'], []);
goog.addDependency('../dynamics/b2TimeStep.js', ['box2d.TimeStep'], []);
goog.addDependency('../dynamics/contacts/b2ContactNode.js', ['box2d.ContactNode'], []);
goog.addDependency('../dynamics/contacts/b2Contact.js', ['box2d.Contact'], []);
goog.addDependency('../dynamics/contacts/b2ContactConstraint.js', ['box2d.ContactConstraint'], []);
goog.addDependency('../dynamics/contacts/b2ContactConstraintPoint.js', ['box2d.ContactConstraintPoint'], []);
goog.addDependency('../dynamics/contacts/b2ContactRegister.js', ['box2d.ContactRegister'], []);
goog.addDependency('../dynamics/contacts/b2ContactSolver.js', ['box2d.ContactSolver'], []);
goog.addDependency('../dynamics/contacts/b2CircleContact.js', ['box2d.CircleContact'], []);
goog.addDependency('../dynamics/contacts/b2Conservative.js', ['box2d.Conservative'], []);
goog.addDependency('../dynamics/contacts/b2NullContact.js', ['box2d.NullContact'], []);
goog.addDependency('../dynamics/contacts/b2PolyAndCircleContact.js', ['box2d.PolyAndCircleContact'], []);
goog.addDependency('../dynamics/contacts/b2PolyContact.js', ['box2d.PolyContact'], []);
goog.addDependency('../dynamics/b2ContactManager.js', ['box2d.ContactManager'], []);
goog.addDependency('../dynamics/b2World.js', ['box2d.World'], []);
goog.addDependency('../dynamics/b2WorldListener.js', ['box2d.WorldListener'], []);
goog.addDependency('../dynamics/joints/b2JointNode.js', ['box2d.JointNode'], []);
goog.addDependency('../dynamics/joints/b2Joint.js', ['box2d.Joint'], []);
goog.addDependency('../dynamics/joints/b2JointDef.js', ['box2d.JointDef'], []);
goog.addDependency('../dynamics/joints/b2DistanceJoint.js', ['box2d.DistanceJoint'], []);
goog.addDependency('../dynamics/joints/b2DistanceJointDef.js', ['box2d.DistanceJointDef'], []);
goog.addDependency('../dynamics/joints/b2Jacobian.js', ['box2d.Jacobian'], []);
goog.addDependency('../dynamics/joints/b2GearJoint.js', ['box2d.GearJoint'], []);
goog.addDependency('../dynamics/joints/b2GearJointDef.js', ['box2d.GearJointDef'], []);
goog.addDependency('../dynamics/joints/b2MouseJoint.js', ['box2d.MouseJoint'], []);
goog.addDependency('../dynamics/joints/b2MouseJointDef.js', ['box2d.MouseJointDef'], []);
goog.addDependency('../dynamics/joints/b2PrismaticJoint.js', ['box2d.PrismaticJoint'], []);
goog.addDependency('../dynamics/joints/b2PrismaticJointDef.js', ['box2d.PrismaticJointDef'], []);
goog.addDependency('../dynamics/joints/b2PulleyJoint.js', ['box2d.PulleyJoint'], []);
goog.addDependency('../dynamics/joints/b2PulleyJointDef.js', ['box2d.PulleyJointDef'], []);
goog.addDependency('../dynamics/joints/b2RevoluteJoint.js', ['box2d.RevoluteJoint'], []);
goog.addDependency('../dynamics/joints/b2RevoluteJointDef.js', ['box2d.RevoluteJointDef'], []);
goog.require('goog.dom');
goog.require('box2d.Settings');
goog.require('box2d.Vec2');
goog.require('box2d.Mat22');
goog.require('box2d.Proxy');
goog.require('box2d.ClipVertex');
goog.require('box2d.Math');
goog.require('box2d.AABB');
goog.require('box2d.Bound');
goog.require('box2d.ShapeDef');
goog.require('box2d.RevoluteJoint');
goog.require('box2d.World')
goog.require('box2d.BoundValues');
goog.require('box2d.Pair');
goog.require('box2d.Callback');
goog.require('box2d.BufferedPair');
goog.require('box2d.PairManager');
goog.require('box2d.BroadPhase');
goog.require('box2d.Collision');
goog.require('box2d.Features');
goog.require('box2d.ContactID');
goog.require('box2d.ContactPoint');
goog.require('box2d.Distance');
goog.require('box2d.Manifold');
goog.require('box2d.OBB');
goog.require('box2d.Shape');
goog.require('box2d.BoxDef');
goog.require('box2d.CircleDef');
goog.require('box2d.CircleShape');
goog.require('box2d.MassData');
goog.require('box2d.PolyDef');
goog.require('box2d.PolyShape');
goog.require('box2d.Body');
goog.require('box2d.BodyDef');
goog.require('box2d.CollisionFilter')
goog.require('box2d.Island')
goog.require('box2d.TimeStep');
goog.require('box2d.ContactNode');
goog.require('box2d.Contact');
goog.require('box2d.ContactConstraint');
goog.require('box2d.ContactConstraintPoint');
goog.require('box2d.ContactRegister');
goog.require('box2d.ContactSolver');
goog.require('box2d.CircleContact');
goog.require('box2d.Conservative');
goog.require('box2d.NullContact');
goog.require('box2d.PolyAndCircleContact');
goog.require('box2d.PolyContact');
goog.require('box2d.ContactManager');
goog.require('box2d.WorldListener');
goog.require('box2d.JointNode');
goog.require('box2d.Joint');
goog.require('box2d.JointDef');
goog.require('box2d.DistanceJoint');
goog.require('box2d.DistanceJointDef');
goog.require('box2d.Jacobian');
goog.require('box2d.GearJoint');
goog.require('box2d.GearJointDef');
goog.require('box2d.MouseJoint');
goog.require('box2d.MouseJointDef');
goog.require('box2d.PrismaticJoint');
goog.require('box2d.PrismaticJointDef');
goog.require('box2d.PulleyJoint');
goog.require('box2d.PulleyJointDef');
goog.require('box2d.RevoluteJointDef');
</script>
<!--=============================-->
<!-- Copy this part to your app. -->
<!-- END -->
<!--=============================-->
<link href="style/box2d.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
document.observe("dom:loaded", function() {
var worldAABB = new b2AABB();
worldAABB.minVertex.Set(-1000, -1000);
worldAABB.maxVertex.Set(1000, 1000);
var gravity = new b2Vec2(0, 300);
var doSleep = true;
var world = new b2World(worldAABB, gravity, doSleep);
var circleSd = new b2CircleDef();
circleSd.density = 1.0;
circleSd.radius = 20;
circleSd.restitution = 1.0;
circleSd.friction = 0;
var circleBd = new b2BodyDef();
circleBd.AddShape(circleSd);
circleBd.position.Set(x,y);
var circleBody = world.CreateBody(circleBd);
var jointDef = new b2RevoluteJointDef();
jointDef.anchorPoint.Set(250, 200);
jointDef.body1 = world.GetGroundBody();
jointDef.body2 = circleBody;
world.CreateJoint(jointDef);
var timeStep = 1.0/60;
var iteration = 1;
world.Step(timeStep, iteration);
var ctx;
var canvasWidth;
var canvasHeight;
function step(cnt) {
world.Step(1.0/60, 1);
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
drawWorld(world, ctx); // see demos/draw_world.js
setTimeout('step(' + (cnt || 0) + ')', 10);
}
Event.observe(window, 'load', function() {
setupWorld(world); // as you like
ctx = $('canvas').getContext('2d');
var canvasElm = $('canvas');
canvasWidth = parseInt(canvasElm.width);
canvasHeight = parseInt(canvasElm.height);
step();
});
});
</script>
<canvas> </canvas>
</body>
</html>
I don’t know your closure/prototype environment, but since it looks like your JS files might be loading asynchronously, is it possible that all your JS files aren’t loaded yet before the dom:loaded event fires:
The error is occurring on the first line of this function which is pretty suspicious. Is there an event that fires when the JS files are all loaded?
So, I think you need to figure out whether this is a timing issue of script loading or whether it’s a dependency problem and the desired scripts are never going to be loaded. You can do that by temporarily replacing the entire
document.observe("dom:loaded", function() {with a new function that just tests for the existence of b2AABB after a long timeout:If it’s still not present after 60 seconds, then it’s probably never going to be available and you probably have a dependency issue. If it is there after 60 seconds, then you probably have a timing issue.