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).

ChipMunk - Librería de física 2D - Videojuegos para Iphone - Conceptos básicos (Parte 2)

Ahora que tenemos configurado nuestro proyecto y esta listo para comenzar, podemos empezar a estudiar Chipmunk. Para eso necesitamos conocer la terminología básica de Chipmunk y saber como esta organizado.

Para simular un mundo con física necesitamos establecer ciertas reglas como por ej la gravedad para nuestro nuevo "Universo", también necesitamos crear un contenedor para todos nuestros objetos, en Chipmunk a esto se lo denomina espacio (space).
Para definir cualquier objeto es necesario establecer cual es su masa y otras propiedades del mismo. Esto se hace con lo que Chipmunk llama cuerpo (body).
Un cuerpo no produce colisiones por si mismo porque no tiene "forma" (shape) cuando interactua con otros objetos. Algunos objetos no son homogeneos, a veces se necesitan definir diferentes parametros para diferentes partes de un objeto (por ej un helado tiene dos partes, una más blanda que la otra).

Para definir que áreas de un cuerpo interactuan con el resto del mundo y las diferentes superficies, se necesitan agregar una o mas formas (shapes) a un body. En Chipmunk hay tres tipos de formas disponibles: circulo, segmento y polígono. Combinando estos tres tipos de formas se definen casi todos los tipos de área de interacción imaginables para nuestros cuerpos. Obviamente que las formas agregadas al mismo cuerpo no producen colisiones  entre ellos.
No siempre es mejor completar el cuerpo con formas para que se unan con los sprites, agregar muchas formas incrementa  el número de cálculos que Chipmunk necesita para cada frame, es mejor simplificar las fomas de manera que cubran las partes importantes.

Podemos cambiar cosas como la velocidad o la posición del cuerpo pero no es recomendado. El método principal para  hacer esto es, como en el mundo real, es aplicar fuerzas. Una fuerza es un vector. Para trabajar con vectores Chipmunk tiene una libreria llamada cpVect que permita hacer las operaciones más comunes como multiplicar y proyectar 2 vectores.
Chipmunk también soporta Joints que nos permiten conectar 2 cuerpos mediante diferentes puntos.

ChipMunk - Librería de física 2D - Videojuegos para Iphone - Introducción (Parte 1)

ChipMunk es una librería para física 2D muy facil, rápida e independiente del engine gráfico que utilizas para tus juegos. En este caso vamos a utilizar Cocos2D.
En este artículo veremos las características básicas de esta librería para que después puedas continuar por tu cuenta.
LLegaremos a hacer la simulación que se muestra en la figura:

Setup:
Antes de comenzar debemos configurar el proyecto para luego enfocarnos en ChipMunk.
Creamos un proyecto de XCode seleccionando el template "View-Based-Application" o "Single View Application" para versiones posteriores de XCode.
Luego debemos importar todos los archivos de ChipMunk necesarios, para eso descargamos el código de ChipMunk desde aquí , al descomprimirlo vamos a encontrarnos con documentos, demos, etc pero lo que vamos a necesitar esta en la carpeta "src" aunque en nuevas versiones de chipmunk los archivos necesarios los encontré en la carpeta "include".
Antes de importar todos los archivos, sugeriría que creen un nuevo grupo en el proyecto al que llamaremos "Other Sources" y luego hacer "Add Existing Files ..." y seleccionar los archivos que se encuentran en la carpeta src. Tenemos que asegurarnos de seleccionar "Copy items into destination group´s folder (if needed)"  . El proyecto debería quedar como muestra la imagen siguiente:

Ahora debemos agregar al proyecto las dos imágenes:

y en el header del View Controller agregar el siguiente código:

UIImageView *floor; // imagen del piso
UIImageView *ball; //  imagen de la pelota

En el método viewDidLoad que se encuentra en el archivo de implementación agregamos el siguiente código:

floor = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"floor.png"]];

floor.center = CGPointMake(160, 350);

ball = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ball.png"]];

ball.center = CGPointMake(160, 230);

[self.view addSubview:floor];

[self.view addSubview:ball];

Fuente: http://www.alexandre-gomes.com/articles/chipmunk/

Compartir en twitter y en facebook

Una de las opciones es utilizar el framework ShareKit: http://www.getsharekit.com que además de permitirnos compartir en twitter nos va a permitir hacerlo en otras redes sociales como facebook, google reader, delicious, etc.
Compartir un item consite en dos pasos:

1.Crear un SHKItem con el texto que se quiere postear.
2.Llamar al método shareItem: de la subclase apropiada

- (IBAction)tweet:(id)sender
{
    SHKItem *aTweet = [SHKItem text: @"Share this text"];
    [SHKTwitter shareItem:aTweet];
}

- (IBAction)facebook:(id)sender
{
    SHKItem *post = [SHKItem text: @"Share this text"];
    [SHKFacebook shareItem:post];
}

Otras opciones para twitter son

- RSOAuthEngine OAuth engine basado en ARC
- MGTwitterEngine
- MPOAuth


Para compartir en facebook  podemos utilizar el sdk de ellos que lo podemos descargar desde aquí
https://github.com/facebook/facebook-ios-sdk
Tienen también un buen tutorial:
https://developers.facebook.com/docs/mobile/ios/build/

UIView

Cada subclase de UIView tiene un método drawRect:. El código para dibujar un view se encuentra en este método. Cada vez que se dibuja una instancia de UIView el sistema prepara un contexto para esa view.
El contexto es de tipo  CGContextRef (Core Graphics Context Reference) y es responsable de producir la imagen y de recibir los comandos para poder dibujar. Un contexto gráfico también tiene información del color que se esta utilizando para dibujar, del sistema de coordenadas y del ancho de las lineas que se están dibujando.
drawRect recibe como parámetro una estructura CGRect que es el rectángulo que se va a dibujar. CGRect tiene origen y tamaño que también son estructuras. Origen es un CGPoint que tiene dos miembros x e y. CGSize tiene también dos miembros width y height. La imagen siguiente nos muestra un CGRect.

Hay dos formas de instanciar un UIView una es mediante alloc e initWithFrame y otra es crearlo a través del Interface Builder.