dgzornoza

Cocos2dx (SceneGraph: Sprites I)

noreply@blogger.com (Anonymous) — Thu, 22 May 2014 22:10:00 +0000

Categoría: Cocos2dx

Nivel: Básico

Los sprites son elementos del scene graph y por tanto heredan de un nodo, una de las principales características de los sprites es que se les puede asociar una textura para renderizarse completa o parcialmente mediante la especificación de un área de recorte. En esta serie de artículos voy explicar el uso de los sprites en cocos2dx y como optimizar su uso ya que es uno de los pilares principales en la creación de un videojuego

Conceptos básicos:

Un sprite es uno de los elementos más importantes del SceneGraph ya que su principal característica es el renderizado de una textura. En un juego pueden existir desde unas decenas hasta cientos de sprites y por ello es uno de los apartados que más atención hay que prestar para poder ofrecer una buena experiencia de usuario (UX User eXperience), el principal problema en los juegos es el conocido "cuello de botella" en el sistema de render lo que hace bajar el framerate del juego y producir un retraso en la interacción del usuario, comúnmente conocido como "lag". No todos los dispositivos disponen de una GPU de última generación y como la finalidad es abarcar el mayor número de dispositivos siempre se debe poner mayor énfasis en la optimización, consiguiendo también con ello alargar la vida de la batería del dispositivo.

Los siguientes son algunos objetos y técnicas relacionadas con los sprites que deben conocerse antes de comenzar a trabajar con ellos.

Texture2D:

Como se ha comentado, los sprites renderizan texturas (objetos de la clase Texture2D), las texturas básicamente son áreas bidimensionales que contienen datos de una imagen y se renderizan según las propiedades establecidas en la textura.

Actualmente se pueden crear texturas desde imágenes en los formatos (Jpg, Png, Tiff, Tga, Webp, Pvr, Etc, S3tc y Atitc) aunque generalmente se usa el formato Png por ser de los más extendidos con soporte de transparencias.

Entre las principales propiedades de las texturas se encuentra el formato de pixel (PixelFormat) que por defecto es RGBA8888 (Rojo-Verde-Azul-Alpha de 8 bits cada uno = 32 bits), para optimizar se puede usar cualquier otro de los disponibles intentando buscar una buena relación con la calidad.

Las texturas también pueden hacer uso de técnicas como mipmap y antialiasing para renderizar las imágenes además de la posibilidad de establecer un programa de sombreado (ShaderProgram).

Texture Atlas y Sprite Sheet:

Texture Atlas y Sprite Sheet son dos conceptos diferentes para una misma cosa, ambos consisten en una imagen grande que agrupa subimagenes, pero el concepto de Sprite Sheet es el de usar solo subimagenes para animaciones de sprites en frames, mientras que un Texture Atlas es más abstracto y puede contener subimagenes para cualquier composición, tiles para la creación de mapas, frames de sprites, partes de un objeto para animar mediante huesos o esqueleto y en general cualquier otro grafico que pueda usarse en un juego.

La finalidad de crear la imagen compuesta de subimagenes es la de optimizar el proceso de renderizado, ya que al usar una única textura, solo hace falta una llamada a la función de dibujo de la librería de render para dibujar todos los objetos que hagan uso de la textura.

En cocos2dx existe la clase TextureAtlas, la cual contiene una textura (Texture2D) que puede crearse desde la imagen conteniendo subimagenes.

TextureAtlas es usada por algunas clases para optimizar el proceso de renderizado, en el caso de los sprites, se puede hacer uso de la clase SpriteBatchNode para tal fin.

TextureCache:

Para optimizar la creación y mantenimiento de texturas, cocos2dx hace uso de la clase TextureCache, la cual es básicamente una cache para almacenar las texturas que van siendo usadas por la aplicación. Mediante esta clase, las texturas serán creadas solo en caso de no existir en la cache, en caso de que ya exista la textura, será retornada la referencia y no se volverá a crear, optimizando de este modo los recursos disponibles.

En versiones anteriores a cocos2dx 3.0 la clase TextureCache era un singleton y se podía acceder mediante su método 'TextureCache::getInstance()', a partir de la versión 3.0 ya no es tratada como un singleton, en su lugar será gestionada por la clase 'Director' de modo que para acceder a la instancia de la clase TextureCache deberá usarse el método:

Director::getInstance()->getTextureCache()

La clase TextureCache crea y añade texturas a la cache mediante imágenes de forma síncrona o asíncronamente además de implementar métodos para su gestión.

Sprite:

Los Sprites son las clases más usadas para renderizar imágenes, para ello se crea una textura desde la imagen y se establece en el sprite, la textura puede ser renderizada completa o parcialmente mediante un área de recorte.

Los sprites heredan de un nodo, por lo tanto disponen de todas las propiedades de estos, como pueden ser rotación, escalado, translación, etc.

SpriteBatchNode:

La clase SpriteBatchNode hereda de un nodo y por tanto contiene todas sus propiedades del mismo modo que un Sprite.

Esta clase se usa como un contenedor de sprites para optimizar su renderizado, la finalidad es la de renderizar todos los Sprites que contiene en una única llamada a la función de dibujo de la librería de render (técnica conocida como "Batch Draw"), para ello hace uso de un objeto TextureAtlas que contiene la textura a usar por los sprites.

La clase tiene algunas limitaciones para permitir realizar su tarea correctamente y en caso de no cumplirse será lanzada una aserción:

Todos los hijos de un SpriteBatchNode deben ser del tipo Sprite o heredados de él.
Todos los Sprites deben usar el mismo Id de textura.

El uso de la clase SpriteBatchNode es el más óptimo en el uso de sprites, no obstante la primera de estas limitaciones envenena el SceneGraph y hay veces que merece la pena sacrificar un poco de rendimiento para ganar otras ventajas, algo que ya se puede hacer a partir de la versión cocos2dx 3.0 con el nuevo sistema de render y la técnica automatic batching.

SpriteFrame:

Como su propio nombre indica, la clase SpriteFrame representa un marco para un sprite, esta clase básicamente contiene una textura (Texture2D) y un rectángulo que representa el marco a usar dentro de la textura.

La clase SpriteFrame está diseñada principalmente para crear sprites animados, para ello se crea un array de SpriteFrame que representan la animación y en un intervalo de tiempo deseado se van estableciendo en el Sprite. Para animaciones complejas existen clases para facilitar todo este trabajo.

SpriteFrameCache:

Al igual que TextureCache, la clase SpriteFrameCache es una clase que implementa un sistema de cache, pero en este caso es para objetos del tipo SpriteFrame.

SpriteFrameCache está implementada con el patrón singleton, esto significa (en este caso) que solo existirá una única instancia en toda la aplicación y se podrá acceder a ella mediante:

SpriteFrameCache::getInstance();

Existen diversas formas de añadir SpriteFrames a la cache, entre ellas destaca la posibilidad de establecer una textura y un archivo plist (lista de propiedades) que define las propiedades de los SpriteFrames en la textura, mediante este método se pueden usar editores de sprites como por ejemploTexturePacker o SpritePacker y crear sprites de forma muy sencilla.

Automatic batching:

La principal optimización en los sprites se consigue renderizando el mayor número de ellos en una única llamada a la función de dibujo de la librería de render. En versiones anteriores de cocos2dx existía una clase llamada 'SpriteBatchNode' que se encargaba de renderizar todos los sprites asociados a ella en una única llamada al render, aunque en la versión 3.0 sigue estando esta clase, una de las características del nuevo sistema de render es la automatización de esta funcionalidad sin requerir el uso de la clase, lo que se conoce con el concepto 'automatic batching'. Para que todos los sprites sean renderizados en una única llamada mediante el automatic batching, deben tener el mismo id de material, un material básicamente es una combinación de los siguientes objetos:

Texture
Shader Program
Blend function

Si estas tres características se cumplen, los sprites serán automáticamente agrupados y renderizados en una única llamada al sistema de render. Para compartir la misma textura se puede hacer uso de una imagen grande con subimagenes (Sprite Sheet o Texture Atlas), el shader program y blend function si no se modifican se usaran los predefinidos.

El uso de un SpriteBatchNode puede ganar entre un 5% ~ 10% en el rendimiento de renderizado contra el automatic batching, pero no permite la misma flexibilidad, por ejemplo un SpriteBatchNode solo permite tener Sprites como hijos. Si se quiere optimizar ese porcentaje de rendimiento en algún caso, tan solo hay que poner los sprites como hijos de un SpriteBatchNode y usar al igual que en el auto batching la misma textura.

Auto culling:

Otro factor a tener en cuenta es el recorte automático, una técnica conocida como 'auto culling', si el AABB (Axis Aligned Bounding Box) del sprite esta fuera de la pantalla no se enviara comandos de dibujo a la cola de render. El auto culling es una optimización que se implementa automáticamente.

Hasta aquí los conceptos básicos que hay que conocer bien antes de trabajar con sprites, en la siguiente parte del artículo dedicado a sprites voy a implementar todos estos conceptos mediante ejemplos para comprenderlos con más detalle.

Saludos y… "a fluzear"

Cocos2dx (HelloCocos2dx)

noreply@blogger.com (Anonymous) — Thu, 10 Apr 2014 15:26:00 +0000

Categoría: Cocos2dx

Nivel: Básico

Una vez instalado el entorno y conocido los conceptos básicos llega la hora de ponerlos en práctica, para ello en este artículo voy a crear un proyecto de prueba y explicar su estructura para familiarizarse con el código.

Como el desarrollo va a realizarse mediante el lenguaje c++, es muy recomendable leerse algún documento con buenas prácticas y convenciones usadas en la escritura de código c++, cocos2dx tiene el documento '%cocos2dx%/docs/CODING_STYLE.md' que es un fork del google c++ oficial guide (se puede convertir el documento 'markdown' a 'pdf' mediante pandoc).

El que no tenga muchos conocimiento de c/c++, puede aprender la base en c.conclase.net, es una página muy buena en español con mucho recursos, el único problema es que no toca el nuevo estándar c++ 11, pero la base del lenguaje es la misma y lo explica muy bien.

Como guía de referencia del lenguaje puede usarse Referencia de lenguaje C++ del msdn de Microsoft.

En cualquier caso intentare explicar algunos conceptos del lenguaje sobre el transcurso de los artículos.

Creación del proyecto:

La creación de los proyectos para todas las plataformas se realiza mediante el script en Python que existe en la ruta '%cocos2dx%\tools\cocos2d-console\bin\cocos.py', si se han seguido los pasos del artículo dedicado a la instalación, se habrá creado una variable de entorno a la ruta, de modo que no es necesario entrar en ella para ejecutar el script.

Como ejemplo crearé un proyecto para todas las plataformas disponibles usando c++, para ello se abre una consola y se inserta el siguiente comando:

cocos new MyGame -p com.dgzornoza.games -l cpp -d D:\dgzornoza\Projects\Games

(Esto realizara una copia de las plantillas en el directorio de salida especificado)

Una vez termine el proceso se accede al directorio del proyecto y se podrá ver la estructura con todos los marcos de aplicación de las diferentes plataformas, como he comentado en anteriores artículos usare Visual Studio para la edición de código y la plataforma 'Win32', posteriormente se podrá compilar en cualquier otra plataforma.

Se accede a la carpeta proj.win32 y se ejecuta el archivo con la solución de VS en mi caso 'MyGame.sln', en este punto ya se puede compilar y ejecutar el proyecto con F5 tras lo cual se mostrara una ventana con el logotipo de cocos2dx y el texto 'Hello World'.

La información de depuración en la esquina inferior izquierda indica el número de vértices, el número de llamadas a la función de dibujo de la librería de render (actualmente OpenGL) y el número de frames por segundo.

Estructura:

La solución de VS contiene por defecto los siguientes proyectos:

libaudio: Librería para trabajar con audio.
libchipmunk: Librería para trabajar con físicas.
libcocos2d: Librería con el núcleo de cocos2dx.
MyGame: Proyecto creado para desarrollar el juego.

Como mínimo debe existir una referencia al núcleo de cocos2dx 'libcocos2d', la librería de audio y físicas no tienen por qué usarse, de hecho, en lugar de chipmunk se puede usar box2d que es otra librería de físicas que también incluye cocos2dx.

Si se abre el explorador de soluciones se podrá ver la estructura de los proyectos:

Me voy a centrar en el proyecto 'MyGame' que es el proyecto del juego de ejemplo. El marco de aplicación para la plataforma win32 reside en la carpeta con el mismo nombre y aquí está el punto de entrada de la aplicación que en cada plataforma será diferente. En principio el marco de aplicación no hay que tocarlo, solo nos centraremos en el código común del juego que es el mismo para todas las plataformas y reside en la carpeta 'Classes', conteniendo los siguientes archivos:

AppDelegate.h/.cpp: Archivos de declaración y definición de una clase para implementar una aplicación en cocos2dx. Esta es la clase principal del juego y la que gestionara los eventos de la aplicación, por defecto se implementan las siguientes funciones virtuales:

applicationDidFinishLaunching: Función que será invocada cuando se inicializa la aplicación, en ella por defecto se configura el director con la escena principal del juego.
applicationDidEnterBackground: Función que será invocada cuando la aplicación pasa a estar inactiva, por ejemplo al recibir una llamada en un dispositivo móvil.
applicationWillEnterForeground: Función que será invocada cuando la aplicación vuelve a estar activa.

HelloWorldScene.h/.cpp: Archivos de declaración y definición de la escena de ejemplo suministrada por la plantilla. Este es el archivo que contiene la escena de ejemplo que detallare a continuación.

Estructura:

Antes de ver el código, un repaso a la jerarquía básica de objetos del scenegraph en cocos2dx:

Escena (clase Scene) 1 -> * Capas (clase Layer) 1 -> * Nodos (clase Node) 1 -> * Sprites (clase Sprite)

De este modo una escena contiene una o varias capas, una capa contiene uno o varios nodos y un nodo contiene uno o varios sprites.

También hay que recordar que cualquier objeto en el SceneGraph debe ser un nodo o heredar de él, lo que significa que tanto las escenas, capas y sprites son básicamente nodos, heredan de un nodo y por tanto su comportamiento básico.

HelloWorldScene.h:

El archivo ' HelloWorldScene.h' contiene el código con la declaración de una clase para implementar una capa de ejemplo:

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

class HelloWorld : public cocos2d::Layer
{
public:
    // there's no 'id' in cpp, so we recommend returning the class instance pointer
    static cocos2d::Scene* createScene();

    // Here's a difference. Method 'init' in cocos2d-x returns bool, 
    // instead of returning 'id' in cocos2d-iphone
    virtual bool init();  
    
    // a selector callback
    void menuCloseCallback(cocos2d::Ref* pSender);
    
    // implement the "static create()" method manually
    CREATE_FUNC(HelloWorld);
};

#endif // __HELLOWORLD_SCENE_H__

En este código existen algunas cosas importantes a tener en cuenta:

1. El nombre de la definición '__HELLOWORLD_SCENE_H__', aunque puede usarse el que se quiera, una de las recomendaciones es usar '__<PROJECT>_<PATH>_<FILE>_H__'.
La clase hereda de una capa (clase Layer), Esta es la forma en cocos2dx de definir una capa, se hereda de Layer y se implementa el código necesario, de modo que la clase HelloWorld es una capa.
La escena en el ejemplo se crea mediante la función estática 'createScene()', Es una forma muy básica de crear una escena sin tener que crear una clase para ella, yo no soy partidario de esta forma de crear la escena ya que rompe con uno de los principios SOLID en la programación OO, en concreto el principio de responsabilidad única y además puede llegar a confundir, debería ser la escena la que creara sus capas y no al contrario. En cualquier caso, esto solo es una plantilla base, en un proyecto real se suele tener una o varias clases para las escenas.
La función de inicialización de la capa 'init()' en esta función se inicializara la capa, yo generalmente la establezco como una función protegida para asegurar de que solo sea llamada por la propia clase o alguna clase heredada.
'menuCloseCallback' es una declaración de una función Callback que en el ejemplo está asignada al botón para cerrar la aplicación.
La macro 'CREATE_FUNC' es la parte más importante de este archivo de ejemplo y la que mejor hay que comprender. Como bien es sabido c/c++ es un lenguaje en el cual la memoria dinámica es gestionada por el programador, esto significa que toda memoria dinámica creada deberá ser liberada explícitamente por el programador, de no ser así se crearan fugas de memoria conocidas como 'Memory Leak', casi todos los motores gráficos que he usado implementan en su arquitectura algún mecanismo para evitar fugas de memoria al trabajar con ellos, generalmente algún mecanismo de cuenta de referencias y cocos2dx es uno de ellos. Como cocos2dx es un proyecto que hereda de la versión para IOS, se ha mantenido el sistema ARC (Automatic Reference Counting) de Objetive-C sobre el que dedicare un artículo junto con los Smart pointers de c++.

Si se establece el cursor en la macro y se pulsa F12 se navegara a su definición, en este ejemplo la macro será desplegada en el siguiente código:
```
static HelloWorld* create()
{
    HelloWorld *pRet = new HelloWorld();
    if (pRet && pRet->init())
    {
        pRet->autorelease();
        return pRet;
    }
    else
    {
        delete pRet;
        pRet = NULL;
        return NULL;
    }
}
```
Aquí se puede ver que se crea un método 'create()' en el cual se crea en memoria dinámica la capa 'HelloWorld', en caso de poder crearse será invocado el método 'init()' del punto 4. Si el método 'init()' retorna true se procederá a insertar la referencia en el pool del sistema de conteo de referencias ARC mediante el método 'autorelease()' y será retornada la referencia de la capa creada.

(NOTA: En cocos2dx cualquier objeto del engine que sea insertado en el pool ARC mediante 'autorelease()', será liberado automáticamente y no tendremos que liberarlo manualmente.)

En caso de que 'init()' retorne false se liberara la memoria de la capa y se retorna 'NULL'.

(NOTA: Hay que tener en cuenta que NULL es una macro que se define como 0, en c++ 11 existe una nueva palabra reservada 'nullptr' que debería de comenzar a usarse en lugar de NULL, en la versión 3.0 de cocos2dx ya comienza a implementarse el estándar c++11 y poco a poco se irán corrigiendo estos detalles.)

HelloWorldScene.cpp:

El archivo .cpp contiene la definición de las funciones declaradas en el archivo .h con la capa de ejemplo.

Al principio del archivo se pueden ver las siguientes instrucciones:

#include "HelloWorldScene.h"

USING_NS_CC;

La directiva '#include' indica el archivo con la declaración de las funciones. La macro 'USING_NS_CC' será desplegada en el código 'using namespace cocos2d', el cual añade el namespace cocos2d para evitar tener que usarlo constantemente al llamar a sus funciones.

(NOTA: en el archivo .cpp se permite añadir las directivas using con namespaces de librerías, pero en los archivos de cabecera .h no es una buena práctica.)

La definición para crear la escena del ejemplo es bastante sencilla:

Scene* HelloWorld::createScene()
{
    // 'scene' is an autorelease object
    auto scene = Scene::create();
    
    // 'layer' is an autorelease object
    auto layer = HelloWorld::create();

    // add layer as a child to scene
    scene->addChild(layer);

    // return the scene
    return scene;
}

Cada línea está bien comentada y no hay mucho que decir. Solo comentar que en las clases de cocos2dx casi siempre existirá una función estática 'create()' para crear las instancias, esto permite añadir la referencia al pool ARC para liberarse automáticamente. Si nos fijamos en la creación de la capa 'HelloWorld::create()' se puede ver que se invoca a la función desplegada por la macro 'CREATE_FUNC' comentada anteriormente, la macro ha creado la función estática de creación de la capa del ejemplo incluyéndola en el pool ARC del mismo modo que hacen las clases del SceneGraph de cocos2dx.

Por último se añade la capa como hija de la escena y se retorna. Esta función es llamada desde la función 'applicationDidFinishLaunching()' del archivo AppDelegate.cpp que es la función que inicializara la aplicación con la escena y capa que aquí se crea.

La siguiente definición es la del método 'init()', hay que recordar que este método era llamado desde la función estática 'create()' definida en la macro 'CREATE_FUNC'.

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
    
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Point origin = Director::getInstance()->getVisibleOrigin();

    /////////////////////////////
    // 2. add a menu item with "X" image, which is clicked to quit the program
    //    you may modify it.

    // add a "close" icon to exit the progress. it's an autorelease object
    auto closeItem = MenuItemImage::create(
                                           "CloseNormal.png",
                                           "CloseSelected.png",
                                           CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
    
    closeItem->setPosition(Point(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,
                                origin.y + closeItem->getContentSize().height/2));

    // create menu, it's an autorelease object
    auto menu = Menu::create(closeItem, NULL);
    menu->setPosition(Point::ZERO);
    this->addChild(menu, 1);

    /////////////////////////////
    // 3. add your codes below...

    // add a label shows "Hello World"
    // create and initialize a label
    
    auto label = LabelTTF::create("Hello World", "Arial", 24);
    
    // position the label on the center of the screen
    label->setPosition(Point(origin.x + visibleSize.width/2,
                            origin.y + visibleSize.height - label->getContentSize().height));

    // add the label as a child to this layer
    this->addChild(label, 1);

    // add "HelloWorld" splash screen"
    auto sprite = Sprite::create("HelloWorld.png");

    // position the sprite on the center of the screen
    sprite->setPosition(Point(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

    // add the sprite as a child to this layer
    this->addChild(sprite, 0);
    
    return true;
}

Generalmente lo primero que se hace es intentar inicializar la clase base mediante el mismo método virtual 'init()'.

Las siguientes dos líneas obtienen las dimensiones del área visible en el dispositivo y el punto donde comienza el área visible, esto sirve para adaptar a las diferentes pantallas de los dispositivos y le dedicare un artículo entero.

Las líneas de código del apartado 2, crean un ítem de menú con una imagen, este ítem establece como función callback 'HelloWorld::menuCloseCallback' que es asignada mediante la macro 'CC_CALLBACK_1' y será llamada al pulsar el ítem con la imagen.

El apartado 3 crea el texto "Hello World" mediante un nodo de tipo LabelTTF y también un Sprite con el logo de cocos2dx.

NOTA: la clase LabelTTF está obsoleta en la versión 3.0 y ya no debe usarse, en su lugar se ha creado una nueva clase para el texto llamada 'Label', mediante esta clase se pueden crear textos con fuentes TTF (True Type Font) y BMF (BitMap Font). El código equivalente para crear el texto con la nueva clase es:

auto label = Label::create("Hello World", "Arial", 24);

('auto' es una nueva palabra reservada en c++ 11 que añade la característica de inferencia de tipos a c++, el compilador infiere el tipo y ayuda a mantener ciertas partes de código más limpias y legibles. No hay que abusar de ella ya que oculta la visualización del tipo al programador)

Al final si todo ha sido correcto, la función retorna 'true', recordando el código de la macro 'CREATE_FUNC' si la función retorna false, el puntero será liberado de la memoria dinámica y no será creada la capa, retornando NULL, de modo que para indicar que la inicialización ha sido correcta debe retornarse true.

La última función de la clase, es la definición de la función callback del ítem de menú con la imagen, el código es el siguiente:

void HelloWorld::menuCloseCallback(Ref* pSender)
{
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WP8) || (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT)
 MessageBox("You pressed the close button. Windows Store Apps do not implement a close button.","Alert");
    return;
#endif

    Director::getInstance()->end();

#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
    exit(0);
#endif
}

Esta función implementa el cierre de la aplicación al pulsar el ítem de menú en las diferentes plataformas. En la función se pueden observar el uso de las macros que definen la plataforma de destino, la macro 'CC_TARGET_PLATFORM' se establece en una plataforma u otra dependiendo de las directivas del preprocesador especificadas en el proyecto (hay que recordar que cada plataforma tiene un proyecto propio con el marco de la aplicación), de este modo se permite escribir código específico para cada plataforma en caso de ser requerido en cualquier momento.

Aquí termina el ejemplo usado en la plantilla de creación de un nuevo proyecto en cocos2dx, siguiendo los pasos del anterior artículo dedicado a la compilación, se puede ejecutar en las diferentes plataformas para ver el resultado.

¿Has tenido algún problema para seguir el código?

Saludos y… "a fluzear"

Cocos2dx (Conceptos básicos II)

noreply@blogger.com (Anonymous) — Fri, 07 Mar 2014 19:02:00 +0000

Categoría: Cocos2dx

Nivel: Básico

En el artículo anterior vimos los conceptos básicos sobre el sistema de coordenadas, anchor point, nodos y sprites. En este artículo terminare de explicar los conceptos básicos que hace falta conocer para poder desarrollar en cocos2dx.

Layers:

El elemento Layer (capa) es otro de los elementos del scene graph, de modo que al igual que los demás elementos también hereda de un nodo.

Las capas, como su propio nombre indica son áreas bidimensionales que son apiladas para formar una composición. Pueden ser de un color, un degradado o transparentes para permitir visualizar capas en niveles inferiores. En el software de dibujo profesional como Photoshop o Gimp, son muy usadas para componer una imagen.

En la siguiente imagen se puede ver una composición de capas:

Entre las propiedades de las capas, la más destacada es la posibilidad de gestionar eventos táctiles (Touch Events). Por defecto tienen un tamaño igual al usado por la vista de la librería de render (actualmente OpenGL ES) que es igual al tamaño de la ventana del dispositivo si no es modificada la resolución de diseño (usada para adaptar una pantalla a diferentes dispositivos/resoluciones).

Cabe resaltar que las capas es uno de los elementos a los que no le influye el anchor point, el anchor point por defecto está establecido en el centro (0.5, 0.5) pero es ignorado y la posición siempre será relativa a la esquina inferior izquierda.

Scene:

Las escenas (Scene) son los elementos de más alto nivel en la jerarquía del scene graph, al igual que los demás elementos, también heredan de un nodo y debe considerarse como el nodo raíz (root node), aunque no es obligatorio, es una buena práctica usar una escena como el nodo padre.

En un juego pueden existir muchas escenas, pero solo una puede estar activa al mismo tiempo formando el flujo principal de la aplicación con los menús, niveles, puntuaciones, etc. En la siguiente imagen, se puede ver un flujo básico de ejemplo con algunas escenas:

Además de las escenas básicas, existen escenas de transición (Transition Scene) para permitir realizar efectos al cambiar de una escena a otra como fade, jump, shrink, flip, etc.

Director:

El director es el equivalente al gestor de escena (SceneManager) en otros motores de juegos y es el elemento encargado de gestionar todo el scene graph. Realiza la navegación entre escenas, crea y configura el formato de pixel, buffer de profundidad, proyección, etc. de la librería de render (actualmente OpenGL ES) y se encarga de actualizar todos los nodos de la escena activa recursivamente.

Como no podía ser de otra forma, el director es un singleton ya que solo puede existir una única instancia compartida en la aplicación para gestionar todo el scene graph sin ningún tipo de incongruencia.

Aunque existen otros conceptos básicos a tener en cuenta, he intentado explicar los que me han parecido más básicos e importantes para poder seguir el curso de los artículos, donde se irán ampliando progresivamente.

¿Hay algún concepto que no acaba de quedar claro?

Saludos y… "a fluzear"

Cocos2dx (Conceptos básicos I)

noreply@blogger.com (Anonymous) — Thu, 27 Feb 2014 21:43:00 +0000

Categoría: Cocos2dx

Nivel: Básico

Antes de comenzar a desarrollar hace falta conocer algunos conceptos básicos sobre la arquitectura del scene graph y sistemas de coordenadas usados por cocos2dx, que en términos generales es similar a los usados por otros motores de juegos.

Un scene graph básicamente es una colección de nodos en estructura de árbol o grafo, esta es la forma en la que cocos2dx y otros motores gestionan los objetos en una escena. De forma general una escena contiene una o varias capas y cada capa contiene uno o varios nodos.

Sistema de coordenadas:

Cocos2dx es un motor de juegos en dos dimensiones que hace uso del conocido sistema de coordenadas cartesianas con 2 ejes (x e y).

Las librerías OpenGL y DirectX coinciden en la representación de las coordenadas X e Y, actualmente cocos2dx está basado solo en OpenGL de modo que para que en una pantalla se pueda establecer un punto sin ningún tipo de transformación siguiendo el sistema de coordenadas, la pantalla deberá estar en el cuadrante superior derecho de la gráfica, con lo cual la coordenada (0,0) queda en la esquina inferior izquierda de la pantalla coincidiendo con el centro del sistema de coordenadas como se muestra en la siguiente imagen:

De esta forma, cualquier posición en el espacio visual de la pantalla estará formado por las componentes x e y, con un numero positivo.

Anchor Point:

El anchor point o punto de anclaje, es el punto de referencia usado para establecer la posición de un elemento. La magnitud para definirlo varía entre los diferentes motores o librerías de gráficos, en cocos2dx se hace uso de una coordenada escalar relativa a la esquina inferior izquierda del elemento, de este modo la coordenada (0.5, 0.5) establecerá el anchor point en el centro del elemento.

Nodos:

En términos generales, un nodo es un nexo de unión con otros nodos formando en conjunto un grafo o una estructura en forma de árbol en la cual los nodos hijos comparten las mismas características de los padres. Un nodo puede contener varios hijos, pero un hijo solo puede contener un único nodo padre.

En otros motores de juegos, además de los nodos, existen entidades, esto requiere una arquitectura basada en la composición para los elementos del scene graph, en cocos2dx no existen entidades, la arquitectura está basada en la herencia, de esta forma todos los elementos del scene graph son nodos o clases que heredan de ellos.

Los nodos contienen propiedades relacionadas con el scene graph pero no son elementos gráficos, esto no quiere decir que no dispongan de dimensiones, solo significa que no es renderizado en pantalla. Algunas de las propiedades de un nodo son las dimensiones, posición, rotación, escalado, visibilidad, anchor point, etc. Además, pueden tener otros nodos como hijos formando el grafo o estructura en forma de árbol que conforma el scene graph.

Otras características de los nodos es que pueden programar retrollamadas periódicas (funciones Callback) y ejecutar acciones.

Sprites:

Un sprite (traducido como duende, hada o trasgo) es un elemento gráfico conteniendo una imagen o una parte de ella para ser renderizada en pantalla, generalmente se hace uso del formato de imagen png como fuente del sprite por su reducido tamaño y el uso de transparencia.

Aunque es posible asignar a un sprite una imagen con un único elemento (por ejemplo un personaje), en la práctica es muy común agrupar múltiples elementos en una imagen, lo que se conoce con el nombre sprite sheet (hoja de sprites), en las hojas de sprites se encuentran desde elementos estáticos hasta completas animaciones que pueden ser establecidas en el sprite mediante un área de recorte. En la página spritedatabase se pueden ver algunos ejemplos de sprite sheets.

Los sprites son elementos del scene graph, por lo tanto en cocos2dx heredan de un nodo y contienen todas sus propiedades. Un dato a tener en cuenta al trabajar con sprites es que el anchor point en cocos2dx reside por defecto en el centro del sprite (0.5, 0.5), de este modo la posición del sprite será relativa a su centro mientras no sea modificado.

Hasta aquí la primera parte de los conceptos básicos.

Saludos y… "a fluzear"

Cocos2dx (Compilación)

noreply@blogger.com (Anonymous) — Mon, 10 Feb 2014 21:18:00 +0000

Categoría: Cocos2dx

Nivel: Básico

En este artículo, voy a explicar cómo compilar los ejemplos que vienen en la librería Cocos2dx y como crear un proyecto multiplataforma para comenzar a desarrollar un juego. Aunque Cocos2dx permite hacer uso de lenguajes de script como lua y javascript para el desarrollo, yo solo me voy a centrar en c/c++ ya que es el lenguaje que más flexibilidad ofrece y el más compatible con todas las plataformas.

En la versión Cocos2dx 2.2.2 para compilar el código c/c++ sobre la plataforma Android se hace uso de un script bash de Linux que es necesario en versiones antiguas del NDK de Android, en la versión Cocos2dx 3.0 han eliminado estos scripts y hacen uso de scripts en Python que permiten compilar en Windows con las últimas versiones de NDK.

Debido a que la versión 3.0 acaba de salir y no tiene plantillas para todas las plataformas actualmente, iré actualizando el artículo según vayan añadiendo plantillas para las diferentes plataformas.

Creación de un proyecto multiplataforma:

(NOTA: a partir de ahora, la variable '%cocos2dx%' la usare como el directorio raíz de cocos2dx que contiene los directorios de la librería)

Para crear el proyecto se abre una consola y se inserta el comando 'cocos', esto mostrara los comandos disponibles, la creación del proyecto se realiza con el comando 'new', de modo que insertamos 'cocos new --help' y se mostraran todas las opciones disponibles para la creación.

Básicamente este es el comando para crear un proyecto para todas las plataformas:

cocos new {Project Name} -p {Package Name} -l {Lenguaje} -d {Project Path}

Project Name: Nombre del proyecto que será creado
Package Name: Nombre del paquete en Java que será usado en el marco de aplicación de Android.
Lenguaje: Lenguaje usado para la creación del proyecto (Yo usare C++ = cpp).
Project Path: Ruta donde será creado el proyecto.

Como ejemplo crearé un proyecto para todas las plataformas disponibles usando c++:

cocos new MyGame -p com.dgzornoza.games -l cpp -d D:\dgonzalez\Projects\Games

El script creara una copia de las plantillas para todos los proyectos en la ruta que se haya indicado conteniendo una estructura como la siguiente:

Classes: Directorio con el código fuente común del juego, conteniendo una escena básica.
Cocos2d: Directorio raíz de la librería cocos2dx que es copiado para mantener las referencias al código fuente en todos los entornos.
proj.x: Directorios con los diferentes marcos de aplicación para cada plataforma específica.
Resources: Directorio con los recursos comunes del juego.

NOTA: Como se puede observar, se crea una copia de la librería completa en cada proyecto nuevo creado, esto tiene la ventaja de poder crear el proyecto en la ruta deseada, pero la desventaja de que cada proyecto ocupara unos 300MB, y una vez compilado será como mínimo 1GB.

Ahora solo queda compilar los diferentes marcos de aplicación para las plataformas, esto se puede realizar de dos formas diferentes:

Consola: Mediante el script 'cocos.py' se puede compilar sin necesidad de abrir y configurar un entorno específico, esta opción es muy útil para probar las diferentes plataformas de forma rápida.
IDE: Configurando el entorno correspondiente a la plataforma que se quiera compilar. Esta opción es útil en el entorno con el que se quiera desarrollar (en mi caso con Visual Studio y win32) y también si se quiere depurar en alguna plataforma especifica o para tener un mayor control sobre la compilación y resultado final.

Explicare ambas formas para todos los entornos para poder elegir la mejor al caso. Al ejecutarse el proyecto de prueba se podrá ver la pantalla del juego conteniendo la escena de ejemplo con el logo de cocos2dx:

Windows:

Consola: Dentro del directorio del proyecto creado, se ejecuta el siguiente comando:
```
cocos run -p win32
```
IDE: Se entra en el directorio proj.win32, se abre la solución 'MyGame.sln' con Visual Studio (si el directorio donde reside no esta marcado como confiable es posible que se tengan que recargar los proyectos).
Este es el proyecto con el que voy a trabajar para el desarrollo en Cocos2dx, ya que es el que más rápido va a compilar y el que menos requisitos necesita, una vez se tenga parte del código se puede compilar y probar en los diferentes dispositivos para verificar su correcto funcionamiento en todos ellos.

La estructura de la solución contiene las librerías básicas:
- libAudio: Librería con soporte para el audio.
- libchipmunk: Librería con el motor de físicas chipmunk.
- libcocos2d: Librería de cocos2dx.
- MyGame: Proyecto principal creado para desarrollar el juego.
Para compilar y ejecutar, se establece 'MyGame' como proyecto de inicio en el explorador de soluciones y se pulsa F5 para ejecutar.

WinRT:

Actualmente no está disponible, según los desarrolladores estará disponible en breve.

WP8:

Consola: Actualmente no está disponible la opción de compilación con la consola.

IDE:Se entra en el directorio 'proj.wp8-xaml' y se abre la solución, para compilar y ejecutar solo hace falta pulsar F5.

Android:

Consola: Antes de ejecutar el comando para compilar y ejecutar, se deberá iniciar el emulador o dispositivo físico deseado y desbloquearlo (en caso contrario puede dar algún error). Para iniciar el emulador lo más rápido sin abrir eclipse es ejecutar en una consola 'android avd' para abrir AVD Manager y gestionar los emuladores de forma visual. Otra forma es insertar el comando 'android list avd' para ver los emuladores configurados y ejecutar el deseado mediante 'emulator @nombre_emulador'

Una vez iniciado y desbloqueado el dispositivo, dentro del directorio del proyecto creado, se ejecuta el siguiente comando:
```
cocos run -p android -j 4
```
(-j es un parámetro de la opción 'compile' que se puede usar en 'run' para acelerar el proceso de compilación con 4 o más jobs al mismo tiempo)
IDE: Para compilar sobre esta plataforma hay que seguir una serie de pasos ya que cocos2dx no tiene una plantilla específica para ningún IDE de desarrollo en Android. Las aplicaciones Android usan JAVA pero se permite interoperabilidad con c/c++ y ASM mediante el JNI (Java Native Interface), es posible configurar Eclipse para compilarlo todo, pero como yo voy a usar Visual Studio para el desarrollo de c/c++, solo usare Eclipse para compilar el marco de aplicación en JAVA.

Como he comentado anteriormente, Cocos2dx 3.0 hace uso de un script en Python para compilar la librería estática c/c++ con el juego mediante el NDK de Android.
1. Ejecutar el script 'build_native.py' en el directorio proj.android. Si se quiere compilar con las opciones por defecto se puede ejecutar directamente el script, en caso de querer modificar las opciones de compilación, se tiene que abrir una consola y navegar a la ruta del script tras lo cual se pueden ver las diferentes opciones del script ejecutando:
```
build_native.py –help
```
  Por defecto será compilado en modo 'Debug' y para la API 10 (Android 2.3.3).
  
  Otra opción para compilar es usar el script cocos.py, si no se quiere ejecutar con ningún emulador, puede compilarse con el siguiente comando:
```
cocos compile -p Android -j 4
```
2. Abrir Eclipse y seleccionar menú File -> Import, se selecciona como fuente a importar código existente de Android y en la siguiente ventana como directorio raíz se selecciona la carpeta 'proj.android' del juego de prueba.
3. Añadir la referencia a las clases JAVA de cocos2dx usadas por el marco de aplicación. Para ello se entra en las propiedades del proyecto (botón derecho -> propiedades), se selecciona 'Java Build Path' pestaña 'Source' botón 'link source':
  
  Y en la ventana que aparece, se establece la ruta a las clases base de cocos2dx para Android que están en la ruta: '%cocos2dx%/cocos/2d/platform/android/java/src'
  
  Ahora ya se puede ejecutar la aplicación desde el menú Run -> Run As -> Android Application y si todo ha ido bien, se iniciara el emulador con el juego.
  
  NOTA: es posible que al iniciar la aplicación de un error y el log indique algo así:
```
Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace
```
  Esto se corrige instalando la librería de soporte de Android, Boton derecho en el proyecto -> Android Tools -> Add support library.

Iphone/Ipad, Mac OS X:

(Los siguientes pasos deben realizarse en un Mac OS X 10.7+)

Consola: Dentro del directorio del proyecto creado, se ejecuta uno de los siguientes comandos según se quiera ejecutar para IOS o Mac OS X:
```
IOS: cocos run -p ios
```
```
Mac OS X: cocos run -p mac
```
IDE: En la carpeta proj.ios está el archivo de proyecto xcode para estas plataformas, una vez abierto se selecciona el proyecto deseado y se ejecuta 'Cmd+R'

Compilando los ejemplos de Cocos2dx

La librería contiene algunos ejemplos para mostrar las características disponibles, existen ejemplos para lua, javascript y c++, pero no todos están disponibles para todas las plataformas.

De todos los ejemplos, 'TestCpp' que reside en la ruta '%cocos2dx%/samples/Cpp/TestCpp' contiene casi todas las características de la librería y es una buena referencia para aprender a usarla.

Para compilar los ejemplos lo ideal es usar el IDE correspondiente. A continuación indico como compilar los ejemplos en las diferentes plataformas:

Windows:

En la ruta principal '%cocos2dx%/build' reside la solución 'cocos2d-win32.vc2012.sln', una vez abierta con VS2012, se podrán ver todas las librerías de cocos2dx y todos los ejemplos disponibles de javascript, lua y c++, tan solo hay que establecer el ejemplo deseado como proyecto de inicio y ejecutarlo con F5.

WinRT:

Actualmente no está disponible, según los desarrolladores estará disponible en breve.

WP8:

Actualmente solo está disponible descargando la versión de desarrollo del repositorio en GitHub, en la siguiente reléase ya será incluida en el código fuente.

Android:

No existe plantilla para ningún IDE de desarrollo de Android, de modo que los pasos para compilar algún ejemplo son los mismos que he usado en la creación del proyecto multiplataforma mediante el IDE eclipse, pero esta vez debe compilarse el código c++ de los ejemplos usando el script en Python existente en la ruta '%cocos2dx%/build', una vez ejecutado serán compilados todos los ejemplos especificados en el script. Cuando termine de compilar, se deberá importar y configurar eclipse como he comentado anteriormente.

Iphone/Ipad, Mac OS X:

En la carpeta '%cocos2dx%/build' está la carpeta 'cocos2d_samples.xcodeproj' con el archivo de proyecto xcode para estas plataformas, una vez abierto se selecciona el proyecto deseado y se ejecuta 'Cmd+R'

Con los ejemplos compilados y conociendo como se puede crear un proyecto multiplataforma, ya se sabe lo básico para comenzar a probar la librería. En el siguiente artículo hablare sobre algunos conceptos básicos necesarios para comenzar a escribir código.

¿Has tenido algún problema en la compilación de los proyectos?

Saludos y… "a fluzear"

Cocos2dx (Instalación y configuración)

noreply@blogger.com (Anonymous) — Mon, 27 Jan 2014 23:08:00 +0000

Categoría: Cocos2dx

Nivel: Básico

En el anterior articulo explique el por qué escogí este framework para la creación de videojuegos en dispositivos móviles, ahora llega el momento de configurar todo el entorno de trabajo para comenzar a trabajar con él.

En internet y en la documentación oficial existen muchos recursos para trabajar con Mac ya que hasta ahora una de las ramas existentes de cocos2d que ha tenido mucho éxito es la versión para IOS ‘cocos2d-iphone’ que cuenta además con un editor bastante bueno llamado CocosBuilder.

Yo voy a hacer uso del sistema Windows y el entorno de desarrollo Visual Studio ya que es con el entorno que mayor productividad he conseguido en estos últimos años, aunque se puede usar cualquier otro IDE que permita compilar c/c++ como netbeans, eclipse, codeblocks, etc.

Con el entorno que voy a configurar se puede desarrollar para todas las plataformas disponibles, ya que el código fuente del juego en un principio será el mismo para todos los entornos si se tiene cuidado en algunas partes del código, debido a las diferentes restricciones que ofrece el hardware de los dispositivos (una de ellas es trabajar con el audio, no todos los dispositivos soportan el mismo tipo de codificaciones en archivos de audio).

No obstante cada dispositivo requiere de un marco de aplicación diferente y solo podrá ser compilado y probado si se dispone de los requisitos necesarios que se muestran a continuación:

Compilación:

WinRT: Necesario un SO Windows 8 Pro o superior.
Windows/Windows Phone 8: Como mínimo Windows 7.
Android: En principio cualquier plataforma puede ser usada para compilar.
IPhone/IPad/OS X: Necesario un Mac OS X 10.7+
Linux: Necesario un Linux.

Ejecución:

WinRT: Para probar es necesario un SO Windows 8 Pro o superior o un dispositivo físico.
Windows/Windows Phone 8: Para depurar en un dispositivo físico es necesario como mínimo un Windows 7, para probar en el emulador es necesario un SO Windows 8 Pro o superior de 64 bits y una BIOS con SLAT (Second Level Address Translation), en procesadores Intel actualmente solo lo implementan a partir de la familia I3, I5 e I7.
Android: En principio cualquier plataforma puede ser usada para probar en dispositivos físico y emulador.
IPhone/IPad/OS X: Para probar es necesario un Mac OS X 10.7+ con el que se pueden emular los dispositivos o probar en los dispositivos físicos.
Windows: Necesario un Windows 7 como mínimo.
Linux: Necesario un Linux.

Independientemente de la compilación del producto final, como se ha comentado anteriormente el código a escribir va a ser el mismo. Lo ideal sería ir probando en todos los dispositivos para ver si hay que modificar partes del código para un dispositivo concreto, pero esto requiere mucho tiempo y muchas plataformas de desarrollo, con lo que al final y dependiendo de los recursos disponibles se va desarrollando y probando en una única plataforma con los inconvenientes que ello conlleva.

Instalación del código fuente:

Lo primero es descargar la librería y el editor oficial para facilitar la creación de escenas, animaciones y otros recursos, todo ello se puede descargar desde la página oficial en la sección descargas:

Cocos2dx

El editor oficial actualmente está en la versión 1.3.0.0, una vez descargado se instala siguiendo el asistente.

La librería 'cocos2dx', actualmente está en la versión 3.0, esta es la primera versión que da un gran salto, comienza a dejar los patrones usados en objetive-C y se centra más en el standard c++ 11 que es la última revisión del lenguaje c++ a día de hoy. Además implementa algunas nuevas características en físicas y el apartado de render, no obstante aun no dispone de integración para todos los dispositivos, aunque se irán implementando sobre Marzo/Abril. Yo voy a usar esta versión para ir usando las nuevas clases y los nuevos patrones de la librería.

Una vez descargada la librería se descomprime el archivo en la ubicación deseada y se podrá ver el código fuente de la librería, dentro de la cual se puede ver la siguiente estructura de directorios:

build: Carpeta conteniendo scripts y archivos de proyecto para compilar la librería y ejemplos.
cocos: Directorio principal con el código fuente de la librería.
docs: Documentación de la librería, el directorio contiene un archivo para generarla mediante la herramienta ‘doxygen’ (se merece un artículo aparte).
extensions: Directorio con extensiones de la librería.
external: Librerías externas usadas por cocos2dx para gestionar imágenes, físicas, archivos, sockets, etc.
licenses: Directorio con todas las licencias de las librerías externas usadas por cocos2dx.
plugin: Directorio con algunos plugins para ampliar funcionalidad.
templates: Plantillas usadas para la creación de proyectos en diferentes plataformas.
tests: Ejemplos para mostrar algunas características de cocos2dx.
tools: Herramientas y utilidades.

NOTA: Este directorio será considerado como el directorio raíz de cocox2dx.

En versiones anteriores se tenían que establecer manualmente las variables de entorno, en la versión 3.0 existe un script en Python 'setup.py' que realizara la tarea por nosotros. (Es recomendable ejecutar el script en una consola para poder leer las indicaciones sin que se cierre al terminar la ejecución. )

Al ejecutar el script es posible que no encuentre alguna ruta y te indique que la insertes a mano, de modo que siguiendo el ejemplo de este artículo estas serían las rutas que habría que indicar:

ANDROID_SDK_ROOT: C:/adt-bundle/sdk
NDK_ROOT: C:/adt-bundle/ndk
ANT_ROOT: C:/adt-bundle/eclipse/plugins/org.apache.ant_1.8.4.v201303080030/bin
(La versión de ant en los plugins de eclipse puede variar dependiendo del ADT descargado)

Para verificar que se han agregado correctamente, puede ejecutarse de nuevo el script y ver que todas las claves existen.

Instalación Visual Studio:

La versión mínima de Visual Studio para el desarrollo debe ser VS2012, si se quiere compilar para WinRT en Windows 8.1 deberá ser VS2013, si no se dispone de licencia se puede hacer uso de las versiones gratuitas denominadas Visual Studio Express, las cuales se pueden descargar en el siguiente link (a diferencia de las versiones profesionales que contienen todos los entornos de desarrollo, las versiones express son independientes para poder instalar las que se necesiten, en este caso serían tres (Visual Studio 2013 para Windows Desktop, para Windows y para Windows Phone) para Win32, WinRT y Windows Phone respectivamente:

Visual Studio

Para poder compilar en Windows Phone 8, hace falta instalar la SDK de Windows Phone 8 (La versión express de Visual Studio 2012 para Windows Phone, ya contiene la SDK y no hace falta instalarla). Puede descargarse en el siguiente link:

Windows Phone 8 SDK

(NOTA: Debe descargarse en el idioma que se haya instalado Visual Studio)

Instalación y configuración del entorno Android:

La configuración del entorno para compilar en dispositivos Android es un poco más costosa, las instrucciones de la página oficial para la versión 2.2.2 están un poco obsoletas e indican la necesidad de la instalación de ‘cygwin’ para la compilación de c++ mediante el NDK, actualmente el NDK va por la versión 9 y ya contiene herramientas para la compilación en Windows sin necesidad de instalarlo. La versión 3.0 de cocos2dx hace uso de nuevos scripts en Python usando estas nuevas versiones de NDK, de modo que no es necesaria la instalación de ‘cygwin’ para la compilación del código fuente.

Los pasos para instalar y configurar el entorno Android son los siguientes:

Instalar Python que será usado por algunos scripts de cocos2dx para generar plantillas, la versión v2.76 es la última versión de Python 2.x y es la recomendada actualmente

Python

NOTA: los scripts en Python que he visto en el código fuente de cocos2dx hacen uso de la sintaxis de Python 2.x, en caso de instalarse Python 3.x deberán modificarse los scripts para sustituir el código obsoleto (como por ejemplo las sentencias ‘print’, que en 3.x debe ir el comentario entre paréntesis)

Verificar que existe la variable de entorno en el sistema, para ello se abre una consola y se escribe 'python', si indica que no se reconoce, se tiene que añadir la ruta donde se ha instalado (ej: c:\Python27) a la variable de entorno 'path', (Para verificar se tiene que cerrar la consola y volver a abrir).
Instalar JDK (Java Development Kit) para la versión del sistema operativo Windows x86 o x64 según el caso:

Java JDK

Una vez instalado, deberá crearse la variable de entorno a la ruta del JDK instalado:
```
JAVA_HOME: C:\Program Files\Java\jdk1.7.0_51
```
Descargar Android SDK (Android Software Development Kit), la forma más sencilla es descargar el ADT (Android Developer Tools) Bundle, lo cual incluye:
- Eclipse + ADT plugin
- Android SDK Tools
- Android Platform-tools
- Las ultimas plataformas Android
- Los últimos sistemas de Android para el emulador
Android SDK

Una vez descargado se guarda en el directorio deseado por ejemplo ‘C:\adt-bundle’ y se descomprime, dentro existirá una carpeta con el IDE de eclipse y otra con el SDK de Android, además un ejecutable para gestionar el SDK de Android.

Para poder ejecutar las herramientas desde la línea de comandos, hay que añadir las siguientes rutas a la variable de entorno 'path':
```
%ANDROID_SDK_ROOT%/platform-tools;
%ANDROID_SDK_ROOT%/tools;
```
Descargar Android NDK (Android Native Development Kit), estas son las herramientas para poder implementar partes de una aplicación Android con código nativo como c/c++ que es con el que trabaja cocos2dx.

Android NDK
Abrir Eclipse, estará en la carpeta que se ha descargado con el SDK de Android, una vez abierto, preguntara por el espacio de trabajo, yo uso el que indica por defecto pero puede cambiarse por el deseado.
Para configurar la SDK se selecciona en Eclipse menú Window -> Android SDK Manager tras lo cual se abrirá la aplicación para gestionar la SDK (esta aplicación reside en el directorio donde se ha descargado la SDK y se puede ejecutar sin abrir Eclipse, si se han añadido correctamente las variables de entorno, se puede escribir el comando 'android' en una consola).

Para configurar la SDK se selecciona en Eclipse menú Window -> Android SDK Manager tras lo cual se abrirá la aplicación para gestionar la SDK (esta aplicación reside en realidad en el directorio donde se ha descargado la SDK y se puede ejecutar sin abrir Eclipse).

Por defecto estará seleccionada para actualizar la última versión, pero para mayor compatibilidad con los dispositivos existentes instalaremos también la mínima requerida por cocos2dx con la cual se compilara la aplicación, de modo que se instala la API 10 (Android 2.3.3) y la última disponible.
Configurar algún emulador para la ejecución, para ello en Eclipse se selecciona menú Window -> Android Virtual Device Manager, tras los cual se mostrara la ventana de configuración de dispositivos virtuales. Desde aquí se pueden crear diferentes dispositivos virtuales para probar la aplicación con diferente hardware. Como nota importante a la hora de crear un nuevo dispositivo cabe destacar que la plataforma del dispositivo tiene que ser de las ultimas para que no de problemas con OpenGL ES 2.0 en el emulador y además seleccionar en opciones de emulación ‘Use Host GPU’ Si esto no se hace así, es posible que de problemas al ejecutar la aplicación en el emulador (Lo ideal siempre es probar en un dispositivo físico).

Con esto termina la instalación de cocos2dx en un entorno Windows en el que se va a poder compilar para dispositivos WinRT, Win32, Windows Phone 8 y Android. Solo faltarían los dispositivos de Apple que se pueden compilar con un Mac OS X 10.7+ y en caso de querer compilar sobre Linux, alguna distribución GNU Linux.

En el próximo artículo veremos cómo compilar los ejemplos y crear una aplicación multiplataforma desde las plantillas de cocos2dx.

Saludos y… "a fluzear"

Cocos2dx (Introducción)

noreply@blogger.com (Anonymous) — Tue, 14 Jan 2014 18:12:00 +0000

Categoría: Cocos2dx

Nivel: Básico

Tras un tiempo de inactividad por falta de tiempo, voy a comenzar una serie de artículos relacionados con la programación de videojuegos, un tema en el que he estado aprendiendo desde que era pequeño con mi zx spectrum, tiempo en el que se ha avanzado tecnológicamente en gran medida y solo he dispuesto de un poco de tiempo libre para mantenerme un poco al día.

Actualmente con los Smartphone, la cosa ha cambiado y ya no hace falta un gran equipo de desarrollo y dos años de trabajo para poder crear un juego competitivo en el mercado, además de facilitar el despliegue del mismo mediante las diferentes tiendas existentes en los terminales.

A lo largo del tiempo, he visto y trabajado con multitud de lenguajes, frameworks, engines, etc. para el desarrollo de videojuegos y otras áreas, incluso he creado algunos propios, pero son pocos los que sigo usando por su madurez, flexibilidad y potencia. En este y los siguientes artículos voy a relatar mi experiencia con un engine 2d que he estado siguiendo de cerca viendo su progreso y ahora que empieza a ser lo suficientemente maduro, he decidido darle una oportunidad y por lo que he visto hasta el momento, creo que es uno de esos que llegan para quedarse por mucho tiempo, su nombre: Cocos2dx

Introducción:

Cocos2dx como su nombre indica, es un framework para la creación de videojuegos en 2 dimensiones y está basado en el famoso Cocos2d que fue creado en Python en el año 2008, cocos2d tiene muchas ramas que lo implementan en diferentes lenguajes, cocos2d-android, cocos2d-iphone, cocos2d-xna, etc. Las cuales se pueden encontrar en github.

Existe multitud de framework y engines para la creación de juegos, dependiendo de la finalidad de un producto debe escogerse uno u otro, en esta serie de artículos la finalidad es la creación de juegos para dispositivos móviles y este es una buena elección por lo siguiente:

Esta implementado en c/c++. A diferencia de las ramas de lenguajes específicos, cocos2dx esta implementada en c/c++ y es por ello que puede ser usado en cualquier plataforma para la cual se pueda compilar, y aseguro que hoy día c/c++ es el lenguaje que se puede compilar en mayor número de plataformas diferentes incluidos microcontroladores. Además es el lenguaje más cercano al ensamblador y el que más rápido ejecuta un procesador.

El orden de los lenguajes en cuanto a velocidad básicamente es el siguiente:

Ensamblador -> c/c++ -> .net, java -> lenguajes de script.

En cada uno de ellos se pierde algo, no hay mejor ni peor, cada uno tiene sus ventajas y desventajas, los primeros tienen mayor velocidad pero son más duros de trabajar con ellos, mientras que los últimos tienen menos velocidad pero una mayor productividad (aunque esto puede ser relativo).

En cuestión de juegos personalmente doy preferencia a la velocidad de código ya que otorga una mayor experiencia de usuario y ofrece menor consumo lo que en un dispositivo móvil se traduce en mayor duración de batería.
Es open source y libre de comercializar, lo cual es una gran ventaja para los desarrolladores libres que cuentan con poco o nada de presupuesto para pagar licencias.
Tiene multitud de herramientas de desarrollo. Si la experiencia me ha enseñado algo es que un lenguaje, framework, etc. Solo tiene éxito si existen herramientas para facilitar el desarrollo, cuantas más y mejores herramientas existan, mejor adopción tendrá en los desarrolladores lo que hará que aumente la comunidad y los recursos disponibles para el desarrollo.
Como la base es la de cocos2d, tiene más de 5 años de seguimiento con multitud de recursos y una gran comunidad.
Es multiplataforma para los dispositivos móviles predominantes en el mercado que actualmente son Android, IPhone y Windows Phone, de modo que el mismo código puede compilarse para sistemas Android (Smartphone y Tablet), IOS (iPhone, iPad), Windows Phone 8 y WinRT, además de las plataformas de escritorio Windows, Linux y Mac. Todas estas plataformas sin ningún tipo de complemento o librería adicional.

Para terminar, dejo el link a la página oficial donde se puede ampliar información sobre cocos2dx:

Página oficial Cocos2dx:

Saludos y… “a fluzear”

Nueva funcionalidad de búsqueda personal

noreply@blogger.com (Anonymous) — Mon, 05 Mar 2012 20:21:00 +0000

Categoría: Noticia

A pasado algo de tiempo desde la última entrada y en todo este tiempo han
salido muchas novedades.

El poco tiempo que he tenido libre lo he dedicado a responder en los foros de
Microsoft, de modo que he creado un buscador para poder buscar respuestas en los
foros a través de la nueva sección ‘Buscador’.

De momento solo se busca en los foros de Microsoft con respuestas en las que
he contribuido, con el tiempo iré añadiéndole mejoras mientras voy añadiendo
contenido al sitio.

El buscador esta implementado sobre Silverlight completamente y hace uso del
motor BING Search, inicialmente lo implemente para Silverlight 4, pero ya que ha
salido la versión 5, lo he portado para implementar algunas mejoras en
funcionalidades.

Espero que sirva de utilidad.

Microsoft Community Contributor Award 2011

noreply@blogger.com (Anonymous) — Thu, 28 Apr 2011 18:46:00 +0000

Categoría: off topic

Debido a la sobrecarga de proyectos que he tenido últimamente, apenas he tenido tiempo de escribir entradas en el blog, pero hoy he recibido un correo de Microsoft que quiero compartir y comienza de la siguiente forma:

Dear David,

Congratulations! We’re pleased to inform you that your contributions to Microsoft online technical communities have been recognized with the Microsoft Community Contributor Award.
...

El Microsoft Community Contributor, es un galardón o premio que otorga Microsoft que está diseñado para reconocer las contribuciones notables a las comunidades de foros online de Microsoft, tales como TechNet, MSDN, etc. Donde se puede encontrar información en [1].

Tan solo quería compartir este premio con todas las personas que forman la comunidad ya que son todos ellos los que hacen que día tras día me interese más por la tecnología, aprendiendo de los errores y de las buenas prácticas.

Además y para darle un poco de vida al blog, aprovecho esta entrada para comentar que a partir de ahora voy a abrir una nueva sección e intentare sacar un poco de tiempo para escribir artículos frecuentes desarrollando alguna de las entradas del foro de Silverlight en MSDN[2] que más puedan interesar de ámbito general y sea de mayor complejidad (ya que me encantan los retos).

Gracias a todos y … “a fluzear”

Referencias:

[1]	FAQ MCC - https://www.microsoftcommunitycontributor.com/faq.aspx
[2]	Foro Silverlight/WPF MSDN - http://social.msdn.microsoft.com/Forums/es/wpfes/threads