HTML5 Gets a Physics Engine - Need Help With Docs

[Gan]

http://gamemakersgarage.com/html5/HTML5-ShareGame.php?gameID=315

This is the new physics engine. Here is the code:

Code: [Select]

//This activates when your game starts. Remember! All commands and variables are case sensitive.
//world = new b2World(new b2Vec2(0, 10),  true);
LoadBox2DPhysicsEngine()

world = new b2World(new b2Vec2(0, 10),  true);
//world.SetContinuousPhysics(true);

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;

// positions the center of the object (not upper left!)
bodyDef.position.x = GetGameWidth() / 2 / SCALE;
bodyDef.position.y = (GetGameHeight()-50) / SCALE;

fixDef.shape = new b2PolygonShape;

// half width, half height. eg actual height here is 1 unit
fixDef.shape.SetAsBox((600 / SCALE) / 2, (10/SCALE) / 2);
world.CreateBody(bodyDef).CreateFixture(fixDef);

//create circle
bodyDef.type = b2Body.b2_dynamicBody;
//bodyDef.bullet = true;
fixDef.shape = new b2CircleShape(20 / SCALE);
bodyDef.position.x = 250 / SCALE;
bodyDef.position.y = 250 / SCALE;
bike1 = world.CreateBody(bodyDef);
bike1.CreateFixture(fixDef)
bodyDef.position.x = 300 / SCALE;
bodyDef.position.y = 250 / SCALE;
bike2 = world.CreateBody(bodyDef);
bike2.CreateFixture(fixDef)

var joint = new b2DistanceJointDef();
joint.Initialize(bike1, bike2, new b2Vec2(250 / SCALE, 250 / SCALE), new b2Vec2(300 / SCALE, 250 / SCALE));
this.world.CreateJoint(joint);


//setup debug draw
var debugDraw = new b2DebugDraw();
debugDraw.SetSprite(GetMainContext());
debugDraw.SetDrawScale(SCALE);
debugDraw.SetFillAlpha(0.3);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);

myTimer = new Timer("GameTimer()", 1.0/60.0)

This code first initializes the physics engine. Then it creates the world, adds the ground, makes the two wheels of the bike and connects them by a distance joint. Then it sets up the debug drawing and starts the game timer.

You guys think this is too complex?
I do.

I'm gonna need some helping thinking of how to turn this complexity into fluff commands that still allow the great customizability.

Now when you create an object in the physics world you must:
(1) Define a body definition. Includes type and position.
(2) Define a fixture definition. Fixtures contain the attributes like density, friction, and restitution.
(3) Add shapes to the fixture definition. These shapes can be simple like a circle or square or complex like a bunch of lines or a polygon. Fixtures can hold as many shapes as you want to add.
(4) Build the completed object by running the body definition to the world.
(5) Run the fixture definition through the completed object and thus giving your object a form.

And that's how you make an object. This method allows lots of customizability.
Then you can make joints and connect objects with joints.
And there's also ways to detect collisions with objects and even to specify if objects can collide with certain other objects.

And you can even apply force and torque to objects to make them behave differently.


Now...
If you wanted to have the simplest yet most customizable commands to accomplish all of the above, what would those commands look like?

[Connors]

Well you've got me interested now. I personally would like to see learn these commands myself, and then I could make my own methods or classes to streamline things later. Where are the docs you used to write that program? I feel like I'd find it a LOT easier after learning more about OOP by looking at Java.

[Gan]

The Javascript Box2D is actually a port from the Flash version. So here's the Flash manual, should work with the Javascript:
http://www.box2dflash.org/docs/2.0.2/manual

And here's the API, just a list of commands:
http://www.box2dflash.org/docs/2.1a/reference/

I made the example Box2D game into a template so you guys can check out the code.

[Connors]

Cool, they're the same link! That should save tons of time.

[Gan]

My bad, here's the API:
http://www.box2dflash.org/docs/2.1a/reference/

[Connors]

Now this gets tricky guys:
I wanted to attempt a basic platformer, which I can do, and I may not try to implement this feature described below but man it's interesting.

If a person walks they exert an equal and opposite force on the floor and themselves. How could you simulate a player doing the same? If Player moves, he might be pushing the ball he's standing on the other way for example. He would do the same when jumping! However, for this to work realistically you have to distribute the net force between both objects based on their mass, position, inertia, friction and all kinds of factors that make this whole idea seem pretty daunting...

Also, basic example of applying force to only the player:
http://gamemakersgarage.com/html5/HTML5-ShareGame.php?gameID=331

The important line:
box1.ApplyForce(leftSpeed, box1.GetPosition());
ApplyForce accepts two 2D vector objects (the object is called b2Vec2). Two are declared in Global:
var leftSpeed = new b2Vec2(-0.1, 0);
var rightSpeed = new b2Vec2(0.1, 0);
The other is a method that gets the box's position.

Again, many thanks to Gan for setting all of this up.

[Connors]

Gan I looked up some stuff on how to use contact listeners and it only leads to looking up how to do more things in Javascript, can you help me out?
EDIT:
that manual. Always start with the manual.
Also, I may be getting the old delayed key down glitch by putting code in Key Down.
Always put it in the Game Loop.

[Gan]

Ah, to do contact listeners I believe you'll have to set up some methods for them to call.
I'll have to research into this some. Never actually used them.
I'm sure they're super useful though.
Then again, I believe there's a way to use the contact listeners without setting up methods, just looping through contacting objects. Though I'm sure you'll want to use those methods as well. They probably will be handy.

As for the delay key glitch, it's not a glitch. It's how it's suppose to work. To get rid of the delay, put key detection in the game loop.

[Connors]

In that case what did you do to check contacts in Silver Creator Box2D? I remember that was all fluff commands but one made the program check contacts for a specific shape.

I would also love to try drawing graphics.
EDIT:
http://gamemakersgarage.com/html5/HTML5-ShareGame.php?gameID=332

[Gan]

That's awesome! And kinda entertaining.

I see you figured out how to draw. I'll spend some time working on the contact listener.

The manual up above is an old version. Here are the changes:
http://www.box2dflash.org/docs/2.1a/updating

[Gan]

I've update the HTML5 GameMaker to have all commands enabled! So now you can do everything.

I also figured out how to use the Contact Listener.

//Create contact listener
var m_contactListener=new b2ContactListener();
world.SetContactListener(m_contactListener);
m_contactListener.BeginContact = BeginContact;
m_contactListener.EndContact = EndContact;

You see the last two lines? In order for those to work, you need to create 2 new methods. BeginContact and EndContact.
Though you can name the methods differently if you want.

Then every time a contact happens it calls BeginContact and whenever it ends, it contacts EndContact.
Alternatively, if you add (contact) as a perimeter to the  BeginContact and EndContact methods, you'll be able to get the contact variable, from the contact variable you can get the fixtures that are touching, and from the fixtures you can get the actual bodies that are touching. And from the contact variable you can also get the contact manifold which will give you the exact X/Y location of contact points between the bodies.

If you look in the Box2D template, I have a basic example of the contact listener.

[Circuit]

This is cool.  Nice work Gan.

[Connors]

The listener you set up does nothing to prove that it's responding and I can't get it to do anything. Could you be a bit more specific? And what is the function console.log(string) doing?

[Gan]

Oh. console.log(string) writes a message to the browser's console. That's how I make sure things work. By looking in the browser's console.

I'll edit the template to show it doing something.

[Connors]

When you press jump and hold it and then press up again it waits until you've hit left or right.
Trying to figure out why...

EDIT when it comes to rest SetVelocity doesn't take effect.