ChipMunk - Librería de física 2D - Videojuegos para Iphone - Evaluando los resultados (Parte 7)

Evaluando los resultados

Todas estas reglas y este código tiene un objetivo que es la simulación de la físca. Puede ser que consigas lo mismo con la mitad de código pero veamos porque Chipmunk es la mejor opción:

Trata de cambiar la fricción de toda la forma del piso de 0.1 a 0.5. Ejecutemos el código, ahora la caida va a tener menos velocidad.

Traten de aumentar o decrementar la gravedad y/o la masa de la pelota. Traten de editar las formas un poco.
Finalmente, habrán notado que todas las formas tienen la propiedad de elasticidad pero no parece tener algún efecto en la simulación. Para habilitar la elasticidad del cuerpo hay que agregar el siguiente código después de setear la gravedad del espacio (el orden no importa siempre que obviamente haya sido creado el espacio):

// Agrega efecto elestico a la simulación 
  
space->elasticIterations = 10; 

Ahora si ejecutas la simulación y/o juegas con los valores de elasticidad de las formas veras que la pelota bouncing del suelo cuando cae.

Conclusión


Piensen que toma tiempo y esfuerzo entender como funciona Chipmunk además de los conceptos nuevos. En este tutorial espero haber sido claro en los principales conceptos de Chipmunk: espacio, cuerpos y formas.

ChipMunk - Librería de física 2D - Videojuegos para Iphone - Definiendo el cuerpo y la forma para el piso (Parte 6)

El piso necesita un cuerpo y una forma mas compleja. Crear el cuerpo es sencillo y solo tiene 2 detalles: su masa no importa y no la vamos a agregar a nuestro espacio. Esto puede sorprenderderlos pero si piensan por segundo se daran cuenta que el piso es estatico y por lo tanto no es necesario agregarle gravedad o un espacio. Por la misma razón configurar la masa estaría bien pero no tendría ningún efecto. Entonces, agregamos este código al final método setupChipmunk (También lo podemos agregar antes de la creación del cuerpo y forma de la pelota sin efectos negativos).

// Creamos el cuerpo del piso y le seteamos posición
  
cpBody *floorBody = cpBodyNew(INFINITY, INFINITY);  
  
floorBody->p = cpv(160, 480-350);

Entonces, ahora que tenemos el cuerpo necesitamos las formas. Hay muchas maneras de adjuntar la imagen, como comente en la sección de conceptos se puede agregar varias formas al cuerpo. En nuestro caso podemos crear varias lineas o definir un polígono. Realizaremos lo último porque es menos confuso si es que son nuevos en C. Los polígonos son poderosos pero tienen algunas restricciones en Chipmunk que deberían entender para poder aplicarlo de manera correcta. Lo primero que deben saber es que deberas proveer todos los vertices en el sentido de las agujas del reloj. Otra cosa que deben saber acerca de los polígonos en Chipmunk es que definen una forma convexa. Un poligono convexo es aquel donde la linea entre 2 puntos dentro de la forma sigue dentro de la forma.

Pueden buscar más información en Wikipedia o en este sitio.

// Definiendo los vertices de la forma
      
    cpVect verts1[] = { cpv(0.0, 0.0), cpv(50.0, 0.0), cpv(45.0, -15.0), cpv(0.0, -15.0) };  
      
    cpVect verts2[] = { cpv(50.0, 0.0), cpv(116.0, -66.0), cpv(110.0, -81.0), cpv(45.0, -15.0) };  
      
    cpVect verts3[] = { cpv(116.0, -66.0), cpv(204.0, -66.0), cpv(210.0, -81.0), cpv(110.0, -81.0) };  
      
    cpVect verts4[] = { cpv(204.0, -66.0), cpv(270.0, 0.0), cpv(275.0, -15.0), cpv(210.0, -81.0) };  
      
    cpVect verts5[] = { cpv(270.0, 0.0), cpv(320.0, 0.0), cpv(320.0, -15.0), cpv(275.0, -15.0) };  

Esto significa que si estas utilizando las imágenes que yo otorgué no seremos capaces de definir correctamente el piso solo con una forma. Para definirlo correctamente debemos utilizar 5 formas poligonales, vamos a definirlas.

    // Creando todas las formas 
      
    cpShape *floorShape = cpPolyShapeNew(floorBody, 4, verts1, cpv(-320.0f / 2, 81.0f / 2));  
      
    floorShape->e = 0.5; floorShape->u = 0.1; floorShape->collision_type = 0;  
      
    floorShape->data = floor;  
      
    cpSpaceAddStaticShape(space, floorShape);  
      
    floorShape = cpPolyShapeNew(floorBody, 4, verts2, cpv(-320.0f / 2, 81.0f / 2));  
      
    floorShape->e = 0.5; floorShape->u = 0.1; floorShape->collision_type = 0;  
      
    floorShape->data = floor;  
      
    cpSpaceAddStaticShape(space, floorShape);  
      
    floorShape = cpPolyShapeNew(floorBody, 4, verts3, cpv(-320.0f / 2, 81.0f / 2));  
      
    floorShape->e = 0.5; floorShape->u = 0.1; floorShape->collision_type = 0;  
      
    floorShape->data = floor;  
      
    cpSpaceAddStaticShape(space, floorShape);  
      
    floorShape = cpPolyShapeNew(floorBody, 4, verts4, cpv(-320.0f / 2, 81.0f / 2));  
      
    floorShape->e = 0.5; floorShape->u = 0.1; floorShape->collision_type = 0;  
      
    floorShape->data = floor;  
      
    cpSpaceAddStaticShape(space, floorShape);  
      
    floorShape = cpPolyShapeNew(floorBody, 4, verts5, cpv(-320.0f / 2, 81.0f / 2));  
      
    floorShape->e = 0.5; floorShape->u = 0.1; floorShape->collision_type = 0;  
      
    floorShape->data = floor;  
      
    cpSpaceAddStaticShape(space, floorShape);  

Este código debería ser facil de entender ahora. Crea 5 formas, todas adjuntadas al cuerpo del piso y después se setean algunas propiedades. Hay dos diferencias menores entre la forma en que la forma del piso es definida y las definicion anterior de la pelota. La primer diferencia es el ajuste de la fricción desde 0.8 a 0.1, sin esta fricción entre el piso y la pelota. La segunda diferencia es la manera en que las formas son agregadas, se utiliza cpSpaceAddStaticShape en vez de cpSpaceAddSpace para que la forma no se mueva. Chipmunk usa esto para optimizar los calculos en cada paso y reducir uso de CPU. Si ejecutamos el proyecto la pelota va a caer y en vez de pasar a través del piso va a golpear con el mismo y frenarse. Esto es un buen indicio de que las dos formas estan interactuando correctamente, no nos da la mejor demostración de lo que aprendimos. Busquemos el código donde creamos y configuaramos el cuerpo de la pelota y cambiemos la posición del vector X de 160 a 60.

ballBody->p = cpv(60, 250); 

si ejecutamos otra vez el demo vamos a ver que la pelota comienza a deslizarce un poco más a la izquierda cayendo con la inclinación y haciendo un movimiento muy realístico a través del piso.

ChipMunk - Librería de física 2D - Videojuegos para Iphone - Siguiendo el movimiento de la pelota (Parte 5)

Ahora no hay código que se pueda enlazar con la simulación de Chipmunk con la gráfica de manera que la pelota se mueva correctamente. Esto se realiza extendiendo el metódo tick y leyendo las nuevas posiciones desde Chipmunk desde donde actualizaremos las coordenadas de nuestras imagén. Este proceso se puede realizar de varias formas (por ej. se puede almacenar una lisa de items para chequar y/o actualizar) pero por suerte Chipmunk esta diseñado para hacer las cosas tan abstractas como sea posible. En la parte 4 creamos una forma, que esta enlazada con un cuerpo particular, también almacenamos una referencia a nuestra UIImageView en la misma forma. Esto significa que todos los datos que necesitamos estan centralizados, con esto en mente Chipmunk nos ofrece una función:

  
cpSpaceHashEach(cpSpaceHash * hash, cpSpaceHashIterator func, void * data)

Esta función toma un hash (un array), una función que será llamada para cada elemento en el array y opcionalmente para un parametro convencional. Entonces agregamos este código después de cpSpaceStep

 
    // Llama a nuestra funcion para cada forma 
      
    cpSpaceHashEach(space->activeShapes, &updateShape, nil);  

Como se explico antes, se llamara a la funcion updateShape (que implementaremos luego) para el array activeShapes. Discutiremos el termino formas (shapes) "activas" en más detalle cuando implementemos el piso, no se preocupen por los detalles ahora. Ahora necesitamos implementar la función updateShape empezando por agregar esto en el .h después de las otras declaraciones de los métodos.

    
void updateShape(void *ptr, void* unused);
   // Actualiza la representación visual (sprite)  

y luego, este código en el archivo de implementación

   
   
void updateShape(void *ptr, void* unused) {  
      
    // Obtenemos la forma  
      
    cpShape *shape = (cpShape*)ptr;  
      
    // Asegurate que todo está correcto  
      
    if(shape == nil || shape->body == nil || shape->data == nil) {  
      
    NSLog(@"Unexpected shape please debug here...");  
      
    return;  
      
    }  
      
    // Finalmente chequea si el objeto es un UIView de cualquier tipo 
      
    // y actualizamos la posición de acuerdo a ello  
      
    if([shape->data isKindOfClass:[UIView class]]) {  
      
    [(UIView *)shape->data setCenter:CGPointMake(shape->body->p.x, 480-shape->body->p.y)];  
      
    }  
      
    else  
      
    NSLog(@"The shape data wasn't updateable using this code.");  
      
    }  

Esta última parte del código hace varias cosas, sin embargo solo 1 o 2 lineas de código son requeridas. Agregué algunas advertencias para que vean cuales pueden llegar a ser los problemas, lo importante es donde realizamos el update de nuestra posición. Presten atención al hecho de que que no asigne directamente las coordenadas Y, esto es porque Chipmunk tiene un sistema de coordenadas diferentes al de Cocoa. El origen de las coordenadas en Cocoa esta en la esquina superior izquierda y en Chipmunk el origen esta en la esquina inferior izquierda entonces hay que tener especial cuidado en esto. Cocos2D comparte el mismo sistema de coordenas que Chipmunk.
Ahora que finalmente parece que tenemos todo lo que necesitamos para que se mueva la pelota es hora de que compilemos y corramos el proyecto. Si seguiste correctamente todas las instrucciones deberias ver la pelota cayendo y aumentando su velocidad descendente. Vemos que la pelota pasa a traves del piso, esto es lo que solucionaremos en las siguientes partes del tutorial.

ChipMunk - Librería de física 2D - Videojuegos para Iphone - Definiendo el cuerpo y la forma (Parte 4)

Definir el cuerpo es un proceso simple aunque requiere un poco de conocimiento de física. Chipmunk dispone de una función  cpBodyNew(masa, momento); que maneja todas las condiciones iniciales que  requiere un cuerpo. En general todo esto es para la 
posición del cuerpo.

Entonces el siguiente código definirá el cuerpo de nuestra pelota, establecerá la posición y la agregará a nuestro espacio. El siguiente código irá al final del método setupChipmunk.

  

    // Crea el cuerpo de la pelota con 100 de masa  
    // y el momento es infinito 
      
    cpBody *ballBody = cpBodyNew(100.0, INFINITY);  
      
    // Setear la posición inicial   
      
    ballBody->p = cpv(160, 250);  
      
    // Agregar el cuerpo al espacio  
      
    cpSpaceAddBody(space, ballBody);  

Luego debemos especificar como la pelota interactua con otros objetos definiendo su forma(shape) y asociandole propiedades.

Este proceso es actualmente el más complejo de todos y a veces requiere que se modifiquen algunas cosas mediante prueba y error. Chipmunk consta de 3 funciones para crear formas basadas en el tipo de forma que se desee.

- cpCircleShapeNew(cpBody * body, cpFloat radius, cpVect offset)
- cpSegmentShapeNew(cpBody * body, cpVect a, cpVect b, cpFloat radius)
- cpPolyShapeNew(cpBody * body, int numVerts, cpVect * verts, cpVect offset)

El significado de los argumentos en esas funciones es el siguientes:
body: el cuerpo asociada con la forma que estan creando
radius: el radio del circulo que estas creando o el ancho de la linea/segmento
offset: donde posicionar la forma relativa al centro del cuerpo
a, b : los puntos comienzo/final para el segmento (crea una linea entre dos puntos) numVerts, verts: para los poligonos se provee un array de los vertices que que definen la forma (debido a restricciones que tiene C se necesita pasar numVerts que es el numero de items/puntos en un array). Entonces ahora que tenemos un vistazo de como crear formas todo lo que falta es saber como definir sus propiedades, las explicaciones se encuentran en los comentarios del siguiente código.

  
    // Crear la forma asociada con el cuerpo de la pelota  
      
    cpShape *ballShape = cpCircleShapeNew(ballBody, 20.0, cpvzero);  
      
    ballShape->e = 0.5; // Elasticity  
      
    ballShape->u = 0.8; // Friction  
      
    ballShape->data = ball; // Associate with out ball's UIImageView  
      
    ballShape->collision_type = 1; // Collisions are grouped by types  
      
    // Agregar la forma al espacio  
      
    cpSpaceAddShape(space, ballShape);  

Se pueden definir más propiedades, se puede chequear la documentación si se quiere saber más sobre ellas, por ahora lo que necesitamos que esta configurado los datos y el collision_type. Se puede eliminar la elasticidad y la fricción e incluso cambiar sus valores.

ChipMunk - Librería de física 2D - Videojuegos para Iphone - Inicializando Chipmunk (Parte 3)

 Para comenzar a trabajar con Chipmunk se necesita:

 1) Inicializarlo
 2) Usar un timer para que Chipmunk pueda saber los pasos de la simulación
 3) Crear y Configurar el espacio

Inicializar Chipmunk es la parte más facil, se necesita llamar a cpInitChipmunk(); en alguna parte de la inicialización de tu aplicación. El timer puede ser seteado usando un simple objeto NSTimer o en algunos casos si estas usando algún game engine deberías usar el timer del engine (para asegurar la sincronización). Finalmente crear un espacio es tan simple como llamar a cpSpaceNew();

Para completar estos 3 pasos hay que comenzar agregando el #import correcto para el .h y .m de tu controlador.

#import "chipmunk.h" 

Luego en el .h se necesita agregar una variable para almacenar nuestro espacio y dos métodos, el .h completo debería verse de esta manera:

    
 
    #import "chipmunk.h"  
      
    @interface ChipmunkTutorialViewController : UIViewController {  
      
        UIImageView *floor; // imagen del piso  
      
        UIImageView *ball; //  imagen de la pelota  
      
        cpSpace *space; // Objeto espacio  
      
    }  
      
    - (void)setupChipmunk; 
      
    - (void)tick:(NSTimer *)timer; // Se dispara en cada "frame"  
      
    @end  

Ahora en el archivo de implementacón deberiamos agregar la siguiente llamada en el viewDidLoad

[self setupChipmunk];  

y finalmente la declaración de los dos métodos definidos

      
    - (void)setupChipmunk {  
      
        // Comienza chipmunk       
        cpInitChipmunk();  
      
        // Crea un objeto espacio       
        space = cpSpaceNew();  
      
        // Define el vector de gravedad       
        space->gravity = cpv(0, -100);  
      
        // Crea un timer que dispara en un intervalo constante (desired frame rate)    
        // Notar que si se esta usando demasiada CPU 
        // El timer debe ser disparado antes de que se complete el ultimo frame
        // Hay tecnicas que se pueden usar para evitar esto pero no se realizaran aqui 
      
        [NSTimer scheduledTimerWithTimeInterval:1.0f/60.0f target:self selector:@selector(tick:) userInfo:nil repeats:YES];  
      
    }  
      
    // LLama a cada frame
      
    - (void)tick:(NSTimer *)timer {  
      
        // Le dice a Chipmunk que avance otro "paso" en la simulación    
        cpSpaceStep(space, 1.0f/60.0f);  
      
    } 

Notarán que también definimos la gravedad para nuestro space. La gravedad es algo que comparten globalmente todos los objetos entonces es de sentido común setearlo al principio. Una cosa que quizás no se comprenda rapidamente es que el valor de la gravedad es una fuerza que se aplica verticalmente hacia abajo con una elasticidad de 100 pero los valores se pueden ajustar como quieran.
El código debe compilar y ejecutarse sin ningún problema pero todavía no se vera nada nuevo ya que no hemos definido nuestros cuerpos (bodies).