Box2D es un motor de física de 2 dimensiones de cuerpos rigidos. Que significa esto? Que los elementos que creamos dentro del motor, cuando colisionen entre si no van a sufrir deformaciones.

Box2D esta desarrollado en C++, por lo que es fácil de portearlo a la plataforma iPhone. Este motor en la actualiadad es usado por varios juegos en 2D que tienen algun elemento de física. Existe una versión en Actionscript por lo que vamos a encontrar muchos tutoriales en esa tecnología.

Hay otro motor de física llamado Chipmunk que esta desarrollado en C, pero en lo personal me parecio mas comodo y mas intuitivo de usar Box2D.

Voy a comenzar a postear una serie de tutoriales que explican como incluir y usar este motor en nuestra aplicación iPhone. Estos tutoriales están basados en la ultima versión de Box2D, la version 2.1.2.

Basicamente lo que tenemos que hacer con Box2D es definir las cartacteristicas del Mundo (objeto World), crear Cuerpos dentro de ese Mundo (objetos Body and Shape), podemos crear Relaciones/Uniones entre los distintos Cuerpos creados (objeto Joint), luego debemos asociar nuestros objetos sprites (esto va a depender del motor grafico que usemos) con los Cuerpos creados, de esta forma cuando el motor calcule la posición de los Cuerpos, esto va a actualizar la posición de los objetos Sprite.

Primer Paso: Integrar Box2D en nuestro proyecto

1. Antes que nada debemos descargar los fuentes.

2. Abrimos Xcode y creamos un nuevo proyecto del tipo View-based Application y la llamamos TestBox2D.

Xcode new project

3. Agregamos un Target al proyecto, este nuevo Target lo vamos a usar para encapusular a Box2d como una libreria estática. Para hacer eso vamos a la opción Project >> New Target, seleccionamos el tipo Static Library la llamamos Box2d.

New target

4. Ahora vamos a incluir el codigo fuente de Box2D en el Target que recien creamos. Hay que tener mucho cuidado con estos pasos ya que si colocamos en un lugar diferente las carpetas dentro de nuestro proyecto, luego al momento de compilar vamos a tener errores de archivos faltantes, por eso es importante respetar todos los pasos para asegurarnos de no tener errores.

Primero vamos a crear una carpeta llamada Box2D dentro del directorio del proyecto y luego dentro de ese directorio vamos a copiar la carpeta Box2D_v2.1.2\Box2D\Box2D del zip que descargamos al proyecto. Borramos los archivosBox2DConfig.cmake y CMakeLists.txt, ya que no los vamos a necesitar. Osea que el código fuente nos tiene que quedar dentro de /TestBox2D/Box2D/Box2D.

Luego en el proyecto agregamos la carpeta /TestBox2D/Box2D/Box2D con la opcion ‘Copy items into destination group’s folder (if needed)’ desactivada y los Targets TestBox2D desactivado y Box2D activado.

Adding source code

Luego en la seccion Targets del arbol ‘Groups & Files’, hacemos doble click en el Target Box2D y en la ventana que se abre nos paramos en la solapa Build, debemos ir a la seccion ‘Search Paths’ y la seteamos como se ve en la imagen.

Setting the target

5. Hacemos un Build del Target Box2D para chequear si exite algun error, no deberiamos tener ningun inconveniente.

6. Debemos agregar al Target TestBox2D la libreria estatica generada por el Target Box2D, para eso hacemos doble click en el Target TestBox2D, seleccionamos la solapa General, tanto en la seccion Direct Dependencies y en la seccion Linked Libraries, presionamos el boton ‘+’ y seleccionamos Box2D.

Adding Box2D lib to main project

Luego vamos a la solapa Build, debemos ir a la seccion ‘Search Paths’ y seteamos los valores de esta sección de la misma forma que lo hicimos cuando seteamos el Target Box2D. Esto la hacemos para que cuando incluyamos cosas del estilo #include Xcode encuentre los headers correspondientes.

7. Por ultimo debemos renombrar todos los archivos .m del proyecto a la extension .mm, esto lo hacemos por que es una forma de decirle al compilador que nuestro codigo maneja C++ (Box2D esta desarrollada en C++).

9. Finalmente cruzamos los dedos y hacemos un build del Target TestBox2 y no deberíamos obtener ningún error.

En el proximo post vamos a codificar un ejemplo simple (como el que se ve en la animación al inicio del post)

Acá se pueden descargar el código de la aplicación que acabamos de crear.