Control Open Source para mostrar notificaciones similares a las de Android

Control inspirado en las notificaciones Toast de Android. El control permite  hacer simples alertas que pueden contener imagenes y  estar en diferentes posiciones.

Lo podemos encontrar en Github

Recursos - UIAlertView Customizable

Este es un proyecto de Michael Zaborowski que nos permite customizar facilmente los AlertsViews, se puede elegir entre varios estilos, cambiar los títulos y el color.

El proyecto se puede bajar desde GitHub

Convertir CFDictionaryRef en NSDictionary

CFDictionaryRef exifAttachments = CMGetAttachment( imageSampleBuffer, kCGImagePropertyExifDictionary, NULL); 

NSDictionary *andBack = (__bridge NSDictionary*)exifAttachments;

Ejecutar instruments con XCode 4.3.3

Ir al menú Product > Profile.

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.