Home » Cursos » Cocos2D (I), Introducción y conceptos
Curso Cocos2D

Cocos2D (I), Introducción y conceptos

Todos hemos jugado infinidad de veces a juegos móviles como ¿Dónde Está mi Agua?, Badland, Plantas contra Zombies, Candy Crush Saga, Dots, Jetpack Joyride o incluso al ignominioso Flappy Bird. Todos tienen una cosa en común: son juegos creados en 2D, es decir, 2 dimensiones. De hecho, Badland y Dots están oficial y reconocidamente hechos en Cocos2D

Lo que vemos en pantalla, lo que nos permite interactuar, está representado en un campo visual de 2 dimensiones con objetos que se desplazan de arriba a abajo o hacia los lados, pero nunca en profundidad (nunca, aunque haya trucos para hacernos creer que así lo hace en ocasiones).

Unity3D LayersEn plataformas móviles los juegos 2D tienen una base: el lenguaje gráfico OpenGL ES. Una API de programación gráfica 3D, que permite crear y gestionar objetos tridimensionales dentro de un espacio igualmente tridimensional.

¿Y cómo se consigue entonces los 2D, si hemos dicho que OpenGL ES trabaja en 3D? Fácil. En un espacio de trabajo tridimensional hay un elemento que es el que permite darnos una visión de nuestros objetos o entorno: la cámara. Y ¿qué pasa si en un entorno tridimensional, colocamos elementos en diferentes planos, uno detrás de otro, con zonas que dejen ver las capas posteriores al fondo y ponemos la cámara fija delante de ellos? Que conseguiríamos algo parecido a lo que hacía Walt Disney para animar sus películas: crear un entorno de dos dimensiones dentro de uno de tres. Como podéis ver en la imagen, extraída del middleware de desarrollo Unity 3D, arriba tenemos la representación de las diferentes capas de imagen en perspectiva y abajo el resultado final.

El propósito de esto es homogeneizar el desarrollo gráfico en una sola API (OpenGL ES) y obtener un entorno de programación en 2D con altas capacidades que nos permite hacer cosas que en otras circunstancias no podríamos como: usar física (para que unos objetos interaccionen con otros), jugar con diferentes capas y profundidad a la hora de colocar objetos, hacer efectos de scroll con diferentes profundidades y velocidades (lo que se llama técnicamente scroll parallax) o poder rotar o cambiar la escala de cualquier objeto libremente. Al final, nuestros objetos son texturas planas en un entorno 3D con una cámara fija. He ahí “la magia”.

Cocos2D, un framework para facilitar implementar OpenGL ES

Los inicios del framework se remontan a 2008, cuando un equipo de desarrollo adaptó las funciones de Pyglet, un entorno de programación gráfica para videojuegos basado en Python, con el objetivo de conseguir una capa que facilitara la creación de juegos en entornos de ordenadores de sobremesa.

Pero en 2010, el argentino Ricardo Quesada, pensó que sería buena idea coger Cocos2D y convertirlo en un framework para la entonces emergente tienda de apps de Apple para su iPhone, iPod Touch y el recién nacido iPad. Así nació el proyecto de código abierto cocos2d-iphone, basado en Objective-C. La idea era crear una capa de programación más sencilla para OpenGL ES, proporcionando una serie de objetos creados en el lenguaje de Apple y compatible con sus dispositivos. Creando y gestionando objetos bidimensionales, programando directamente OpenGL ES (compatible con todos los dispositivos iOS), pero todo desde la comodidad de Objective-C, sin que el desarrollador final tuviera que pelearse con la complejidad de OpenGL.

Cocos2D, actualmente en versión v3.1, ya no está en manos de Quesada, quien se ha hecho cargo de un proyecto más grande: Cocos2D-x, basado en C++, que permite desarrollar una única app que sea compatible con iOS, Android, Windows Phone y casi cada entorno móvil u ordenador. Mientras, Cocos2D para iPhone, como ya os comentamos aquí, ha pasado a llamarse Cocos2D-Swift, ya que cambiará el lenguaje en que está escrito al nuevo lenguaje de programación de Apple.

Trabajando con Cocos2D v3

Estos cambios se propiciaron el pasado año cuando Apple lanzó SpriteKit, su propia API de desarrollo de juegos creada en la misma idea de Cocos2D, con gente que había participado en el proyecto original y que ahora están en nómina de Apple. SpriteKit proporciona un nivel de integración con el sistema más alto y una estructura más óptima. Por lo tanto, Cocos2D cambió su estructura igualmente para optimizarse, acercándose más al SpriteKit de Apple, pero con la gran baza de poder ser convertido a Android a través del compilador Apportable, con una sola instrucción y sin modificar nuestro proyecto. El famoso juego “Dots, A Game About Connecting”, usa este compilador para tener su versión en Android sin programación alguna.

¿Qué puedo hacer con Cocos2D?

Física de objetos en Cocos2DLo primero que hay que entender es que Cocos2D es código abierto y libre. No está sujeto a pagos, licencias, ni nada en absoluto. Es totalmente gratuito, podemos hacer los juegos que queramos con él y jamás tendremos que pagar nada. Y ahí radica una de sus grandes ventajas frente a SpriteKit: su código es abierto y libre, por lo que si queremos modificar e implementar nuestras propias ideas o modificaciones, podemos hacerlo sin problema. Todo el código de Cocos2D está ahí para que lo estudiemos, leamos, comprendamos, adaptemos, modificamos… SpriteKit, al contrario, es una API cerrada donde solo podemos acceder a las especificaciones pero no podemos modificarlo ni hacer nada más con él que simplemente usarlo.

En cuanto a las posibilidades, en esencia, Cocos2D permite crear objetos (llamados sprites) con los que interaccionar, tanto entre sí como con la interacción del usuario con el dispositivo. Además, podemos generar físicas reales de objetos para que nuestros sprites simulen estar en un espacio físico real y como tal, se comporten con unas reglas de fricción, gravedad, espacio, etc.

Angry Birds sería un buen ejemplo de juego: convirtiendo los escenarios y los cerdos en objetos físicos, permite que al chocar los pájaros contra ellos se ejerza una fuerza física (en función de la velocidad) y sus propiedades de gravedad, posición en el espacio e incluso peso relativo, hacen que estos reaccionen ante el choque. Y todo eso no se programa. Solo hay que dibujar el escenario, situar los objetos en él, darle las propiedades apropiadas y esperar a que suceda el evento que esperamos (que hayamos matado a todos los cerdos) para dar el nivel por terminado: toda la lógica del juego viene ya incorporada en Cocos2D.

Las posibilidades son tantas como queramos imaginar: arrastrar y soltar objetos, reproducir sonidos o música, tocar objetos y que estos reaccionen como queramos, mover objetos por la pantalla en función de eventos, crear mapas creados a base de elementos repetitivos (llamados tilemaps) donde un personaje pueda interaccionar, utilizar transiciones entre escenas, poner mandos virtuales sobre la pantalla o incluso crear generadores de partículas basadas en física que hagan campos de estrellas, fuegos, explosiones, humo y un sinfín de cosas que se nos puedan ocurrir.

Cocos2D v3.1, una versión recargada

Las primeras versiones de Cocos2D llevaban una serie de librerías incorporadas al framework (todas de código abierto) que nos ayudaban a hacer los juegos. Pero, por ejemplo, la física de objetos radicaba en dos librerías: Box2D (escrita en C++) y Chipmunk (escrita en C). Esto era un problema, pues teníamos que mezclar código Objetive-C con C++ o C (en función de nuestra elección de motor de física) y crear nosotros la sinergia entre los diferentes framework.

SpriteKit cambió eso radicalmente y creo una capa Objective-C para manejar la física de objetos (basada en este caso en una versión propia y cerrada de Apple de Box2D) integrando todo de una manera transparente a los sprites. Y ese es uno de los principales cambios entre Cocos2D v2 y v3: la integración de física de objetos. El nuevo Cocos2D v3 ahora permite trabajar con la física en Objective-C, olvidarnos de tener que elegir y programar en otros lenguajes e integra de una manera mucho más eficiente y elegante toda la física con los objetos y nodos con que trabajamos.

Cocos2D v3 Final Badland

Cocos2D v3 incorporó también algo esencial para el desarrollo en iOS hoy día: ARC, la gestión automática de memoria. La versión v2 seguía teniendo el modelo manual de manejo de memoria, donde nosotros teníamos que crear y destruir cada objeto en el momento apropiado. Podía usarse ARC en nuestro código de manera mixta, pero Cocos2D era forzado a seguir funcionando de forma manual. Ahora, la versión 3 está plenamente integrada con el conteo automático de referencias, por lo que podemos despreocuparnos del ciclo de vida de nuestros objetos y centrarnos en la programación.

Además del cambio de estructura, gestión de memoria y formas de trabajar con los datos, Cocos2D v3.1 incorpora una gran novedad que es un nuevo motor de renderizado integrado que acelera significativamente el rendimiento de los juegos.

Ahora, de manera automática, cuando cargamos una textura con objetos y creamos muchos objetos con una misma imagen, esta no se multiplica en memoria si no que se referencia creando diferentes copias del mismo objeto a nivel dato pero no a nivel de imagen generando de forma automática lo que viene a llamarse un BatchNode o nodos en lotes. Esto, que era una opción que el programador podía usar en versiones anteriores, ahora está integrado de manera natural. Además, se ha optimizado ampliamente la implementación en OpenGL ES y conseguido que el procesamiento sea muy superior a versiones anteriores (sobre todo de la v1/v2).

El fin del principio

Y con esto, ya hemos dado una introducción a Cocos2D, qué es, cómo funciona, en qué se basa y en qué versión vamos a trabajar. Trabajaremos en Objetive-C con notación moderna (Modern Objective-C) y más adelante veremos cómo hacerlo también en Swift. En la próxima lección aprenderemos a instalar la última versión, crear un proyecto y conocer los conceptos básicos de sprite, escenas, nodos y sus propiedades, así como la estructura de un juego.

Y recuerda: tienes muchas vías para seguir conectado con nosotros: un foro, otros artículos, análisis, nuestra presencia en redes sociales, la posibilidad de suscribirte a nuestro RSS incluso por email… Mientras seguimos adelante nuestro camino, Good Apple Coding.

Acerca de Julio César Fernández

Analista, consultor y periodista tecnológico, desarrollador, empresario, productor audiovisual, actor de doblaje e ingeniero de vídeo y audio.

Otras recomendaciones

Lecciones Prototipos (I): UITableView

Lecciones por prototipos (I): Vistas de tabla (UITableView)

Primera lección por prototipos, un nuevo e innovador contenido. A veces, lo normal es que nos perdamos sin terminar de entender qué es o cómo funcionan los componentes que forman parte de una app o un juego. Para este caso hemos creado las lecciones por prototipos. Una exploración básica de conceptos esenciales a través de prototipos en Playground que podemos probar con Swift Playgrounds en el iPad o con Xcode 8. En esta primera lección abordamos las UITableView (vistas de tabla). Un elemento esencial en la mayoría de apps de iOS que muchas veces no es entendido desde su base y por lo tanto, provoca un mal uso de las mismas.