Capítulo 3 - Conceptos básicos de cocos2d-x v3
En esta sección veremos los conceptos básicos de una aplicación en Cocos2d-x, el uso de algunos elementos esenciales como los Sprites y el tratamiento de los ejes de coordenadas.
3.2 Conceptos básicos
Cocos2d-x y C++
Si tienes experiencia en lenguajes de programación como Java y nunca usaste C++, Cocos te lo pone fácil. Todos los objetos como Sprite o Layer heredan de Node, esto quiere decir que Cocos hace la gestión de memoria por ti. Sin miedos a memory leaks siempre y cuando tus objetos hereden de cocos2d::Node.
Macros
Cocos cuenta con una gran cantidad de macros para el preprocesador, algunas de ellos son simples como USING_NS_CC que equivale a using namespace cocos2d, pero también tenemos algunas un poco más complejas como CC_SYNTHESIZE para generar automáticamente getters y setters. Iremos viendo algunas de ellos durante los próximos capítulos
Eje de coordenadas
Cocos tiene un eje de coordenadas como el siguiente:
Está abstraído de tal forma que independientemente de la orientación de nuestro juego, ya sea portrait o landscape, el {0,0} siempre estará en la parte inferior izquierda de la pantalla. El eje Z se usa para saber qué imagen debe ser dibujada más adelante o más atrás, de tal forma que se verá siempre la imagen cuyo valor para Z sea mayor. Este valor de Z se puede cambiar directamente en el nodo o en el momento de añadirlo a un nodo padre.
Anchor point
El anchor point de un Sprite indica desde donde se realizaran las operaciones como mover o rotar, es decir puedo mover un Sprite o rotarlo desde su centro, desde una esquina o desde donde se le indique a cocos. Basta con cambiar su Anchor Point. El valor por defecto es el centro mySprite->setAnchorPoint(0.5, 0.5) mejor veámoslo gráficamente
Aquí vemos algunas de las posibles combinaciones. El resto de componentes los veremos sobre la marcha en capítulos siguientes.
3.3 Usando estos tutoriales
En cada capítulo se aporta un link de descarga del código relativo a cada capítulo. Tan sólo crea un proyecto con cocos y reemplaza el contenido de las carpetas Classes y Resources del proyecto creado por ti con el contenido provisto en los capítulos.
Al compilar en Visual Studio ...
Recuerda arrastrar los ficheros desde la carpeta Classes a la carpeta src de la solución de Visual Studio para compilarlos. Si ya has compilado algo antes en modo debug, recuerda además eliminar la carpeta *.tlog. Por ejemplo, nuestro poryecto se llama Test, elimina la carpeta Test\proj.win32\Debug.win32\Test.tlog.
3.4 Usando Sprites
Lo primero que debemos hacer es copiar las imágenes cuyo link de descarga está aquí, a la carpeta Resources y borrar todo su contenido anterior a excepción de la carpeta fonts.
Recordar que esta carpeta se encuentra en SkyHunter -> Resources, al mismo nivel que la carpeta Classes
Ahora que ya tenemos las imagenes incluidas en nuestro proyecto, las podemos utilizar. Para ello usaremos la clase cocos2d::Sprite y crearemos a modo de ejemplo el fondo de nuestro juego con Sprite::create("nombre-imagen").
Para posicionar el fondo de nuestro juego usamos fondo->setPosition(visibleSize.width / 2, visibleSize.height / 2) porque como vimos en el capítulo 2 por defecto los sprites tienen su anchor point en el centro, entonces como queremos que ocupe toda la pantalla, lo colocamos en el centro de la misma. Cocos automáticamente escalará el sprite gracias a la configuración que pusimos en nuestro AppDelegate.cpp.
Ahora que ya sabemos como funciona la clase Sprite, crearemos las clases para nuestro juego que heredaran de cocos2d::Sprite y de cocos2d::Node. Para comenzar, crearemos una clase Background que se mueva. Para tener sensación de desplazamiento en nuestro juego.
Background.h
Background.cpp
Esta clase hereda de Node para poder ser añadida a la escena de cocos. Básicamente es un nodo al que se le añaden dos hijos que son dos Sprite simples.
Uno es añadido por encima de la altura de la pantalla por lo que no será visible y otro justo dentro de la pantalla por lo que sí será visible.
En el update se mueven ambos sprites hacia abajo para dar una sensación de movimiento. Una vez que el Sprite que en principio no era visible está situado justo en el centro de la pantalla, se recoloca en su posición original, de la misma forma el Sprite que al principio estaba situado en el centro de la pantalla es reseteado a su posición inicial cuando ya no es visible al salirse por debajo de la pantalla.
Mejor veámoslo ilustrado.
También usamos dos macros CC_SYNTHESIZE ya nombrado en el capítulo anterior, que nos permite generar rápidamente getters y setters y el segundo macro CREATE_FUNC que genera automáticamente el método estático create() para esta clase.
Excelente, ahora sólo falta decirle a nuestro juego que añada el nuevo background en lugar del que teníamos inicialmente y hacer que este background se mueva.
GameLayer.h
GameLayer.cpp
Como podemos ver, hemos creado un método update y le decimos al framework que incluya en el ciclo del juego ese método update mediante this->schedule(schedule_selector(GameLayer::update)). El macro schedule_selector es uno de esos macros especiales que Cocos2d-x incluye para facilitar el desarrollo de nuestro juego.
No es necesario que el método se llame update pero sí que reciba un float como parámetro y retorne void
En el update recibiremos como parámetro la cantidad de tiempo que transcurrió desde la última vez que se ejecutó dicho metodo. Para garantizar que el juego trabaja siempre a la misma velocidad, multiplicaremos la velocidad a la que se mueven todos los elementos por dt tal y como hicimos en el método update de la clase Background que es llamado desde aquí al igual que todos los métodos update de los diferentes componentes que iremos creando.
Puedes descargar las carpetas Classes y Resources del proyecto hasta el momento aquí.