Mi Primer Proyecto en cocos2d-x para Windows Phone 8

en el anterior post (Introducción al desarrollo de videojuegos en cocos2d-x) vimos como crear un proyecto en cocos2d, vamos hablar un poco acerca de la estructura del mismo y después  a analizar un poco como es el flujo de ejecución de nuestra aplicación.

Estructura de carpeta:

image

  • Folder Assets: aquí debes adicionar todos los recursos multimedia que tu videojuego use.
  • Floder Classes: Todas las clases de tu proyecto cocos2d, escenas, capas. la clase AppDelegate es la mas importante, en el siguiente bloque se explicara el porque.

Flujo de ejecución:

g1

 

1. se ejecuta nuestra aplicación (el entry point de la misma): ver(http://developer.nokia.com/community/wiki/C++_support_from_Windows_Phone_8)

“To launch an application, Windows phone need an «entry point» it may consume. To perform it, your «entry point» will be developed with C++/CX and C++ main function is replaced by a C++/CX version:”

   1: [Platform::MTAThread]

   2: int main(Platform::Array<Platform::String^>^)

   3: {

   4:     auto factory= ref new myFactory();

   5:     CoreApplication::Run(direct3DApplicationSource);

   6:     return 0;

   7: }

el cual en nuestro proyecto demo1 esta dentro del archivo demo1.cpp

   1: [Platform::MTAThread]

   2: int main(Platform::Array<Platform::String^>^)

   3: {    

   4:     auto direct3DApplicationSource = ref new Direct3DApplicationSource();

   5:     CoreApplication::Run(direct3DApplicationSource);

   6:     return 0;

   7: }

Nuestra aplicación cocos2d  no deja de ser una aplicación Direct3d,es por esto que la clase Direct3DApplicationSource implementa la interface IFrameworkViewSource. ver (http://developer.nokia.com/community/wiki/C++_support_from_Windows_Phone_8)

Platform::MTAThread : metadata about application multi-thread apartment. myFactory(): implements IFrameworkViewSource. This class is a factory use to instantiate a Iframeworkview.”

   1: ref class myFactory sealed : Windows::ApplicationModel::Core::IFrameworkViewSource

   2: {

   3: public:

   4:     virtual Windows::ApplicationModel::Core::IFrameworkView^ CreateView()

   5:     {

   6:          return ref new myView();

   7:     };

   8: };

 

es la clase Direct3DApplicationSource(dentro del archivo demo.h)  que como lo mencione anteriormente, implementa la interfaz  IFrameworkViewSource ,  es la que se encarga de proveer el espacio(cargar la vista) en el que nuestro videojuego se ejecutara, por lo tanto la vista demo1, que representa ese espacio, implementa la interfaz IFrameworkView, como se muestra a continuación (archivo demo.h).

   1:  

   2: ref class demo1 sealed : public Windows::ApplicationModel::Core::IFrameworkView

   3: {

   4: public:

   5:     demo1();

   6:     

   7:     // IFrameworkView Methods.

   8:     virtual void Initialize(Windows::ApplicationModel::Core::CoreApplicationView^ applicationView);

   9:     virtual void SetWindow(Windows::UI::Core::CoreWindow^ window);

  10:     virtual void Load(Platform::String^ entryPoint);

  11:     virtual void Run();

  12:     virtual void Uninitialize();

  13:  

  14: protected:

  15:     // Event Handlers.

  16:     void OnActivated(Windows::ApplicationModel::Core::CoreApplicationView^ applicationView, Windows::ApplicationModel::Activation::IActivatedEventArgs^ args);

  17:     void OnSuspending(Platform::Object^ sender, Windows::ApplicationModel::SuspendingEventArgs^ args);

  18:     void OnResuming(Platform::Object^ sender, Platform::Object^ args);

  19:     void OnWindowClosed(Windows::UI::Core::CoreWindow^ sender, Windows::UI::Core::CoreWindowEventArgs^ args);

  20:     void OnVisibilityChanged(Windows::UI::Core::CoreWindow^ sender, Windows::UI::Core::VisibilityChangedEventArgs^ args);

  21:     void OnPointerPressed(Windows::UI::Core::CoreWindow^ sender, Windows::UI::Core::PointerEventArgs^ args);

  22:     void OnPointerMoved(Windows::UI::Core::CoreWindow^ sender, Windows::UI::Core::PointerEventArgs^ args);

  23:     void OnPointerReleased(Windows::UI::Core::CoreWindow^ sender, Windows::UI::Core::PointerEventArgs^ args);

  24:     void OnBackButtonPressed(Platform::Object^ sender, Windows::Phone::UI::Input::BackPressedEventArgs^ args);

  25:  

  26: private:

  27:  

  28:     // The AppDelegate for the Cocos2D app

  29:     AppDelegate app;

  30: };

 

es al función createView la que se encarga de crear ese espacio(crear la vista):

   1: IFrameworkView^ Direct3DApplicationSource::CreateView()

   2: {

   3:     return ref new demo1();

   4: }

al crearse la vista demo1, el método run es ejecutado y la aplicación cocos2d es cargada(AppDelegate):

   1: void demo1::Run()

   2: {    

   3:     CCApplication::sharedApplication()->run();

   4: }

AppDelegate En esta clase que hereda de cocos2d::CCApplication, ocurre todo.

 

   1:  

   2: #include "cocos2d.h"

   3:  

   4: /**

   5: @brief    The cocos2d Application.

   6: 

   7: The reason for implement as private inheritance is to hide some interface call by CCDirector.

   8: */

   9: class  AppDelegate : private cocos2d::CCApplication

  10: {

  11: public:

  12:     AppDelegate();

  13:     virtual ~AppDelegate();

  14:  

  15:     /**

  16:     @brief    Implement CCDirector and CCScene init code here.

  17:     @return true    Initialize success, app continue.

  18:     @return false   Initialize failed, app terminate.

  19:     */

  20:     virtual bool applicationDidFinishLaunching();

  21:  

  22:     /**

  23:     @brief  The function be called when the application enter background

  24:     @param  the pointer of the application

  25:     */

  26:     virtual void applicationDidEnterBackground();

  27:  

  28:     /**

  29:     @brief  The function be called when the application enter foreground

  30:     @param  the pointer of the application

  31:     */

  32:     virtual void applicationWillEnterForeground();

  33: };

  34:  

  35: #endif // _APP_DELEGATE_H_

  36:  

 

Justo en el metodo  AppDelegate::applicationDidFinishLaunching() dentro del archivo AppDelegate.cpp es donde se crea y se carga nuestra escena (CCScene).

   1:  

   2: bool AppDelegate::applicationDidFinishLaunching() {

   3:     // initialize director

   4:     CCDirector* pDirector = CCDirector::sharedDirector();

   5:     CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();

   6:  

   7:     pDirector->setOpenGLView(pEGLView);

   8:     

   9:     // turn on display FPS

  10:     pDirector->setDisplayStats(true);

  11:  

  12:     // set FPS. the default value is 1.0/60 if you don't call this

  13:     pDirector->setAnimationInterval(1.0 / 60);

  14:  

  15:     // create a scene. it's an autorelease object

  16:     CCScene *pScene = HelloWorld::scene();

  17:  

  18:     // run

  19:     pDirector->runWithScene(pScene);

  20:  

  21:     return true;

  22: }

 

Finalmente Nuestra escena, HelloworldScene, se cargan las capas, los Sprites y los demas elementos de nuestro Juego. archivo HelloWorldScene.cpp.

   1: #include "HelloWorldScene.h"

   2:  

   3: USING_NS_CC;

   4:  

   5:  

   6:  

   7: CCScene* HelloWorld::scene()

   8: {

   9:     // 'scene' is an autorelease object

  10:     CCScene *scene = CCScene::create();

  11:     

  12:     // 'layer' is an autorelease object

  13:     HelloWorld *layer = HelloWorld::create();

  14:  

  15:     // add layer as a child to scene

  16:     scene->addChild(layer);    

  17:     // return the scene

  18:     CCLayerGradient* layer1 = CCLayerGradient::create(ccc4(255,0,0,255),ccc4(255,0,255,255));

  19:  

  20:     //CCLayerGradient* layer1 = CCLayerGradient::create();

  21:  

  22:     layer1->setContentSize(CCSizeMake(800, 800));

  23:  

  24:     layer1->setPosition(ccp(0, 0));

  25:  

  26:     scene->addChild(layer1);

  27:  

  28:     

  29:     CCParticleSystemQuad* m_emitter = new CCParticleSystemQuad();

  30:  

  31:     m_emitter = CCParticleSun::create();

  32:  

  33:  

  34:     m_emitter->setEmitterMode(kCCParticleModeGravity);

  35:  

  36:     m_emitter->setGravity(CCPoint(0, -90));

  37:  

  38:     //m_emitter->setDuration(20);

  39:     

  40:  

  41:     layer1->addChild(m_emitter);

  42:     

  43:     m_emitter->setPosition(ccp(100, 100));    

  44:  

  45:     //gravity mode|

  46:     

  47:  

  48:     return scene;

  49: }

  50:  

  51: // on "init" you need to initialize your instance

  52: bool HelloWorld::init()

  53: {

  54:     //////////////////////////////

  55:     // 1. super init first

  56:     if ( !CCLayer::init() )

  57:     {

  58:         return false;

  59:     }

  60:     

  61:     CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();

  62:     CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

  63:     //create main loop

  64:     this->schedule(schedule_selector(HelloWorld::update));

  65:     return true;

  66: }

  67:  

  68:  

  69:  

  70: void HelloWorld::update(float dt) {

  71:     //the main loop

  72: }

  73:  

  74: void HelloWorld::menuCloseCallback(CCObject* pSender)

  75: {

  76:  

  77: #if (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT) || (CC_TARGET_PLATFORM == CC_PLATFORM_WP8)

  78:     CCMessageBox("You pressed the close button. Windows Store Apps do not implement a close button.","Alert");

  79: #else

  80:     CCDirector::sharedDirector()->end();

  81: #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)

  82:     exit(0);

  83: #endif

  84: #endif

  85: }

Anuncio publicitario

Fundamentos de cocos2d-x

 

antes de entrar en materia, es decir antes de entrar técnicamente a hablar de lo que es el desarrollo de videojuegos para Windows Phone 8 en cocos2d-x, es necesario entender su funcionamiento.

cocos2d2

Los Nodos / contenedores: son los componentes principales de un juego desarrollado usando cocos2d, en cocos2d-x todos los objetos son nodos, que pueden a su vez contener otros nodos, estos están organizados jerárquicamente  por lo tanto, cualquier cambio que se realice sobre un nodo afectara los hijos del mismo.conceptualmente se pueden organizar de la siguiente forma:

  • CCScene: puede contener uno o mas objetos CCLayer, suelen usarse para construir las pantallas de nuestro videojuego, por ejemplo un objeto CCSene, para el menú, otro para el primer nivel, otro para la pantalla de configuración etc.. cada objeto CCScene es independiente. programáticamente podemos aplicar efectos de transición entre las escenas.
  • CCLayer: puede contener uno o mas objetos de tipo CCSPrite, los objetos CCLayer nos permiten organizar el contenido de cada pantalla en capas,  por ejemplo para la pantalla del menú, un objeto CCLayer podría ser el fondo y otro el Menú como tal,los objetos CCLayer son capaces de escuchar y atender las entradas del usuario (eventos), por ejemplo el touch , accelerometer and gyroscope).
  • CCSprite: es quizás en mi opinión la clase mas importante, contienen las imágenes que serán adicionadas a nuestras Capas.
  • CCNode: de esta clase heredan todas las clase anteriormente mencionadas y otras que no dejan de ser importantes como por ejemplo CCMotionStreak, CCParallaxNode , y puede ser usada para la construcción de nodos propios.

El Objeto CCDirector

este objeto es el encargado de gestionar o administrar las escenas(CCScene) en nuestro videojuego además nos permite configurar por ejemplo el tamaño de la pantalla, el frame rate, la escala etc. existen otras clases muy útiles como por ejemplo, CCParticles, para el manejo de  sistemas de partículas,  muy sofisticados por cierto, CCActions para el manejo de animaciones por ejemplo, o nodos especializados para cosas como barras de progreso, efectos especiales, tile maps etc.

 

cocos2d

Sistema de coordenadas
 
en el desarrollo de videojuegos, existen 3 tipos de sistemas de coordenadas diferentes, basados en los 2 que ya conocemos, que se muestran en la siguiente figura:
 
left-right-handed-cartesian
 
UI Coordinate System:
  • el origen  (x=0, y=0) esta en la esquina superior izquierda.
    el eje x empieza al lado izquierdo de la pantalla y el valor  incrementa hacia la derecha. la coordenada Y empieza en la parte  superior de la pantalla y aumenta hacia abajo de la misma.

ui-coordinate-system

Direct3D Coordinate System

DirectX usa Left-handed Cartesian Coordinate.

OpenGL and Cocos2d Coordinate System

Cocos2d-x/-html5/-iphone usa el mismo sistema de coordenadas que usa OpenGL, “Right-handed Cartesian Coordinate System”.

el origen  (x=0, y=0) esta en la esquina inferior izquierda.
el eje x empieza al lado izquierdo de la pantalla y el valor  incrementa hacia la derecha. la coordenada Y empieza en la parte  inferior de la pantalla y aumenta hacia arriba de la misma.

 

DeviceScreen

Introducción al desarrollo de videojuegos para Windows Phone 8 usando cocos2d-x

Hola que tal a todos, este es el primer tutorial de la serie de tutoriales de introducción al desarrollo de videojuegos para Windows Phone 8  usando cocos2d-x que estaré publicando en los próximos días, espero que les sea de gran utilidad.

Cocos2CoordinateRelease

¿Qué es coco2D-x?

para los amantes del desarrollo de videojuegos cocos2d es un framework de desarrollo de videojuegos 2d, concebido en un principio específicamente para el desarrollo de videojuegos para iPhone, sin embargo debido al éxito que ha tenido en los últimos años (empresas como zynga, Atari  e incluso konami lo usan) hoy en día este popular framework permite desarrollar videojuegos casi que para cualquier plataforma. Actualmente existen 3 implementaciones de cocos2d, la primera cocos2d (basado en Pyglet escrito en python) específicamente para el desarrollo de videojuegos para iPhone , cocos2d-x para el desarrollo de  videojuegos multiplataforma(SO, escrito en c++  y OpenGl Es 1.1 /2.0) y Cocos2d-html5 (escrito en JavaScript) para el desarrollo de videojuegos usando html5, una de las características quizás la mas importante es que solo codificando nuestro videojuego una sola vez  estará disponible para las diferentes plataformas soportadas.

cocos2d-x-architecture

en este primer tutorial, explicare como instalar y crear un nuevo proyecto usando cocos2d-x.

  1. Crear un nuevo proyecto en cocos2d-x
  • primero descargue la versión mas recientes de cocos2d-x, directamente de la pagina (http://www.cocos2d-x.org/download), en internet se suelen encontrar muchas plantillas de proyectos, ya configuradas y lista para usar en visualstudio, sin embargo en este tutorial explicaré paso a paso como es el proceso de creación de un nuevo proyecto desde cero.
  • luego al terminar la descarga ,descomprima el contenido del archivo  .rar , en la carpeta que usted desee. como se muestra en la imagen a continuación.
  • dentro de la estructura de capetas ubique el siguiente archivo “..\cocos2d-x-2.2.2\tools\project-creator\create_project.py”
  • para el siguiente paso, que tiene que ver con la ejecución del archivo anteriormente mencionado, que nos permitirá crear nuestro nuevo proyecto,   es necesario instalar la versión de python 2.7, con algunas versiones mayores, suelen haber conflictos.
  • la instalación de python, consiste en seguir el asistente, teniendo en cuenta la ruta de instalación de este.
  • al finalizar la instalación de python, abra una nueva ventana de línea comando (cmd/línea de comandos), y ejecute el archivo teniendo en cuenta los parámetros que se le deben pasar. Note que es necesario a través del comando cd, ubicarse en la carpeta en donde esta el archivo create_project.py.

//esta primera línea solo se debe ejecutar si el path de instalación de python no esta registrada en las variables de entorno.

…\cocos2d-x-2.2.2\tools\project-creator>set Path=C:\Python27

…\cocos2d-x-2.2.2\tools\project-creator>python create_project.py -project demo1  -package com.sinapsis.demo1    –language    cpp

image

  • luego de que el comando haya sido ejecutado satisfactoriamente, vaya a la carpeta de instalación de cocos2d-x y valide si dentro de la carpeta projects el folder demo2 se creo.

Untitled

  • finalmente abra la carpeta proj.wp8.

Nota: si desea elimine el archivo HelloCpp.sdf y renombre el archivo HelloCpp.suo

Untitled2

  • abra la solución (demo.sln) en visualstudio 2013, y ejecute el proyecto, es posible que al cargar la solución le aparezca la siguiente advertencia, haga clic en ok .

image

  • finalmente ejecute el proyecto

Untitled3

 

hasta la próxima, espero les sea de utilidad.