Aprendiendo Box2dWeb - 2da parte

En el 1er capítulo..

Se vió sobre un pequeño concepto de lo que es box2d, e intanciamos en 1era las variables y objetos a usar, ahora continuamos con el code...

2. Creamos ahora si las variables para nuestra demo:

//definimos el mundo
var world = new b2World( new b2Vec(0, 10), true);

//el patrón global para el entorno y el comportamiento de los objetos
fixDef = new b2FixtureDef;
fixDef.density = 1.0;
fixDef.friction = 0.5;
fixDef.restitution = 0.2;

//usamos esta variable para definir de modo gráfico un objeto
var bodyDef = new b2BodyDef;

//Aja! aqui interactuan 2 objetos que definimos en un principio
//la variable que define al objeto y el b2Body que te da las 2 opciones
//Si tu objeto es dinámico (b2_dynamicBody) o es estático (b2_staticBody)
//En este caso es estático, que quiere decir que no se va a mover en el //entorno
bodyDef.type = b2Body.b2_staticBody;

//La siguiente definición es con la parte del render del objeto
fixDef.shape = new b2PolygonShape;

//Al ya estar definido de qué forma es la figura, se trabaja en este caso
//como es poligonal, y quiero que sea un cuadrado, solamente recibe 2 //parámetros como Ancho y Alto
fixDef.shape.SetAsBox(20, 2);

//Establecemos las coordenadas del objeto que son X, Y
bodyDef.position.Set(10, 400/30 + 1.8);

//Ahora ya tienes de que tipo es, sus dimensiones, y sus coordenadas...
//y ahora que?
//Tenemos que agregar nuestro objeto creado en el world.
//el world lo crea tanto la definición (que es estática) y el objeto //encapsulado que es la figura a renderizarse
world.CreateBody(bodyDef).CreateFixture(fixDef);

//Luego de haber sido creado y agregado, queda aun en memoria 
//las características del objeto reciente en este caso cambio de posición //de nuevo
bodyDef.position.Set(10, -1.8);

//y luego lo agrego al mundo
world.CreateBody(bodyDef).CreateFixture(fixDef);

//Listo!, ya tenemos 2 objetos estáticos en el world!! Felicitaciones! :D
//Usando los pasos anteriores podemos reusar las variables que usamos //para la creación de los objetos estáticos.
fixDef.shape.SetAsBox(2, 14);


//Aqui nomas le cambiamos la posición
bodyDef.position.Set(-1.8, 13);
//Hacemos la misma jugada de adicionarlo al world
world.CreateBody(bodyDef).CreateFixture(fixDef);
//Otro objeto más que agregamos con distinta posición nomás
bodyDef.position.Set(21.8, 13);
//Y listo!
world.CreateBody(bodyDef).CreateFixture(fixDef);

//Ufff! que cansado jeje.. pero con esto tenemos un entorno cerrado para //hacer pruebas respectivas en el world, hay editores que nos ayuden, //pero el único detalle es que está en c++ http://www.iforce2d.net/b2deditor/

3. Ya que tenemos objetos estáticos que hacen la apariencia del world, creamos objetos dinámicos con los que vamos a interactuar, crearemos un cuadrado, un círculo y un triángulo:

//Aqui usamos de nuevo el b2Body, en este caso de modo dinámico que va
//a tener ese comportamiento de elemento manipulable y arrastrable, //claro también sería mas entendible el comportamiento de caída libre
bodyDef.type = b2Body.b2_dynamicBody;

//Otra vez consumimos del b2PolygonShape
fixDef.shape = new b2PolygonShape;

//lo manejamos como un elemento de caja
fixDef.shape.SetAsBox(1, 1);

//Definimos la posición
bodyDef.position.x = 1;
bodyDef.position.y = 1;

//Y lo agregamos :D
world.CreateBody(bodyDef).CreateFixture(fixDef);

//Ahora aqui llamamos el objeto b2CircleShape, que solamente te pide el //radio para renderizarlo
fixDef.shape = new b2CircleShape(1);
//Lo adicionamos
world.CreateBody(bodyDef).CreateFixture(fixDef);

//Para definir el triángulo, por geometría es poligonal
fixDef.shape = new b2PolygonShape;

//y definimos los vertices de este objeto
var bodyVertices = [
  new b2Vec2(0, -1),
  new b2Vec2(1, 1),
  new b2Vec2(-1, 1)
];
//Aqui se agregan los vertices a la figura poligonal
fixDef.shape.SetAsArray(bodyVertices);

//Y otra vez lo adicionamos
world.CreateBody(bodyDef).CreateFixture(fixDef);

En el siguiente capítulo continuamos con la explicación del code, queda pendiente detallar el DebugDraw y el comportamiento del mouse ;)