本文欢迎转载,但是必须得保住原文地址 http://www.cocos2dres.com/view.asp?id=63 否则将追究责任。

引言

        现在智能手机已经慢慢进入大众化,移动类应用开始火爆起来,游戏类应用更是占据了手机用户的大部分碎片时间。

        现在手机开发游戏也逐渐流行开来,手机的平台目前主打是 Andoird、IOS和WindowPhone。Cocos2DX跨平台开发成为吸引手机开发商和独立游戏制作人的一大亮点。

        Cocos2dX脱胎于Cocos2D,有优良的血统,成熟的框架,加上不错的效率,成为跨平台手机游戏开发的首选。

         在游戏开发过程中,各种辅助工具的开发是难免的。下面的文章 http://www.cocos2dres.com/view.asp?id=55 中有 介绍网络上可以找到一些工具,其中一些需要收费。

         如果您是制作一些小游戏,网上找到的那些工具,也许可以解决制作中的问题,但是如果您在制作大型游戏,您就不得不自己动手制作工具了。

        本文介绍将Cocos2dX渲染到MFC窗口,是制作游戏工具所需的一些知识。

 

COCOS2DX开发环境

        本文的Cocos2DX的版本是 cocos2d-2.0-x-2.0.3,  点击进入下载页面  www.cocos2d-x.org/projects/cocos2d-x/wiki/Download

        Cocos2DX下载后以及windows下配置这里就不赘述了 相关教程链接 http://www.cocos2dres.com/post/7.html win7下 VS2010教程

        在理解了 helloCPP后,我们就可以进行下一步了。

 

MFC工程

      第一步,创建MFC工程,修改工程属性  

   打开 cocos2d-win32.vc2010.sln 解决方案,添加一个MFC单文档程序。不会添加MFC工程的同学,到网上找找教程。

       spacer.gif以下是工程(工程名叫MFCTest)截图:

                      

 

  其中 Cocos2DApp是自己添加的。

  在工程属性面板,

        

  图中红圈处设置成现HelloCPP一样就可以了。调试的工作路径,需要设置成自己的路径。

  第二步,分析HelloCpp下的Windows窗口

  查看main.cpp的代码:

复制代码

int APIENTRY _tWinMain(HINSTANCE hInstance,
                       HINSTANCE hPrevInstance,
                       LPTSTR    lpCmdLine,                       int       nCmdShow)
{
    UNREFERENCED_PARAMETER(hPrevInstance);
    UNREFERENCED_PARAMETER(lpCmdLine);    // create the application instance    AppDelegate app;
    CCEGLView* eglView = CCEGLView::sharedOpenGLView();
    eglView->setFrameSize( 960, 640 );    return CCApplication::sharedApplication()->run();
}

复制代码

  这里首先创建一个app,然后设置窗口大小,然后就是run()了。Windows的窗口在哪里创建的呢?

  eglView应当是与窗口相关的,我们看看setFrameSize的相关实现:

void CCEGLView::setFrameSize(float width, float height)
{
    Create((LPCTSTR)m_szViewName, (int)width, (int)height );
    CCEGLViewProtocol::setFrameSize(width, height);
}

  首先映入眼帘就是Create方法,看来windows窗口的创建就在这个方法里面:

复制代码

bool CCEGLView::Create(LPCTSTR pTitle, int w, int h)
{    bool bRet = false;    if( hWnd == NULL )
    {        do 
        {
            CC_BREAK_IF(m_hWnd);

            HINSTANCE hInstance = GetModuleHandle( NULL );
            WNDCLASS  wc;        // Windows Class Structure            // Redraw On Size, And Own DC For Window.
            wc.style          = CS_HREDRAW | CS_VREDRAW | CS_OWNDC;  
            wc.lpfnWndProc    = _WindowProc;                    // WndProc Handles Messages
            wc.cbClsExtra     = 0;                              // No Extra Window Data
            wc.cbWndExtra     = 0;                                // No Extra Window Data
            wc.hInstance      = hInstance;                        // Set The Instance
            wc.hIcon          = LoadIcon( NULL, IDI_WINLOGO );    // Load The Default Icon
            wc.hCursor        = LoadCursor( NULL, IDC_ARROW );    // Load The Arrow Pointer
            wc.hbrBackground  = NULL;                           // No Background Required For GL
            wc.lpszMenuName   = NULL;                           // We Don't Want A Menu
            wc.lpszClassName  = kWindowClassName;               // Set The Class Name
            CC_BREAK_IF(! RegisterClass(&wc) && 1410 != GetLastError());        

            // center window position            RECT rcDesktop;
            GetWindowRect(GetDesktopWindow(), &rcDesktop);

            WCHAR wszBuf[50] = {0};
            MultiByteToWideChar(CP_UTF8, 0, m_szViewName, -1, wszBuf, sizeof(wszBuf));            // create window
            m_hWnd = CreateWindowEx(
                WS_EX_APPWINDOW | WS_EX_WINDOWEDGE,    // Extended Style For The Window
                kWindowClassName,                                    // Class Name
                wszBuf,                                                // Window Title
                WS_CAPTION | WS_POPUPWINDOW | WS_MINIMIZEBOX,        // Defined Window Style
                0, 0,                                                // Window Position
                0,                                                  // Window Width
                0,                                                  // Window Height
                NULL,                                                // No Parent Window
                NULL,                                                // No Menu
                hInstance,                                            // Instance                NULL );

            CC_BREAK_IF(! m_hWnd);

            resize(w, h);

            bRet = initGL();
            CC_BREAK_IF(!bRet);

            s_pMainWindow = this;
            bRet = true;
        } while (0);
    }return bRet;
}

复制代码

  果不出我所料,我们看到了熟悉的CreateWindowEx,然后调用initGL()初始化OpenGL相关。

  我们再看看 initGL的实现:

复制代码

bool CCEGLView::initGL()
{
    m_hDC = GetDC(m_hWnd); // 拿到窗口的DC
    SetupPixelFormat(m_hDC); // 设置像素格式    //SetupPalette();
    m_hRC = wglCreateContext(m_hDC); /// 创建OpenGLES渲染环境
    wglMakeCurrent(m_hDC, m_hRC);    /// 设置当前渲染环境

    GLenum GlewInitResult = glewInit();    if (GLEW_OK != GlewInitResult) 
    {
        fprintf(stderr,"ERROR: %s\n",glewGetErrorString(GlewInitResult));        return false;
    }    if (GLEW_ARB_vertex_shader && GLEW_ARB_fragment_shader)
    {
        CCLog("Ready for GLSL\n");
    }    else 
    {
        CCLog("Not totally ready :( \n");
    }    if (glewIsSupported("GL_VERSION_2_0"))
    {
        CCLog("Ready for OpenGL 2.0\n");
    }    else
    {
        CCLog("OpenGL 2.0 not supported\n");
    }    return true;
}

复制代码

  这样 Windows窗口就和OpenGLES的渲染环境关联起来了。

  我们如何将MFC的窗口和OpenGLES的渲染环境关联起来呢?

  MFC窗口是预先已经创建好的,我们只要在创建的时候,用已经创建好的窗口来做 initGL应当就可以实现。于是我将CCEGLView的Create和SetFrameSize做了调整,可以   传入窗口句柄。新的函数代码如下:

  

复制代码

void CCEGLView::setFrameSize(float width, float height,HWND hWnd)/// 将窗口句柄通过参数传进来
{
    Create((LPCTSTR)m_szViewName, (int)width, (int)height, hWnd);
    CCEGLViewProtocol::setFrameSize(width, height);
}bool CCEGLView::Create(LPCTSTR pTitle, int w, int h, HWND hWnd)
{    bool bRet = false;    if( hWnd == NULL ) /// 如果等于 NULL 则按以前的方式走
    {        do 
        {
            CC_BREAK_IF(m_hWnd);

            HINSTANCE hInstance = GetModuleHandle( NULL );
            WNDCLASS  wc;        // Windows Class Structure            // Redraw On Size, And Own DC For Window.
            wc.style          = CS_HREDRAW | CS_VREDRAW | CS_OWNDC;  
            wc.lpfnWndProc    = _WindowProc;                    // WndProc Handles Messages
            wc.cbClsExtra     = 0;                              // No Extra Window Data
            wc.cbWndExtra     = 0;                                // No Extra Window Data
            wc.hInstance      = hInstance;                        // Set The Instance
            wc.hIcon          = LoadIcon( NULL, IDI_WINLOGO );    // Load The Default Icon
            wc.hCursor        = LoadCursor( NULL, IDC_ARROW );    // Load The Arrow Pointer
            wc.hbrBackground  = NULL;                           // No Background Required For GL
            wc.lpszMenuName   = NULL;                           // We Don't Want A Menu
            wc.lpszClassName  = kWindowClassName;               // Set The Class Name
            CC_BREAK_IF(! RegisterClass(&wc) && 1410 != GetLastError());        

            // center window position            RECT rcDesktop;
            GetWindowRect(GetDesktopWindow(), &rcDesktop);

            WCHAR wszBuf[50] = {0};
            MultiByteToWideChar(CP_UTF8, 0, m_szViewName, -1, wszBuf, sizeof(wszBuf));            // create window
            m_hWnd = CreateWindowEx(
                WS_EX_APPWINDOW | WS_EX_WINDOWEDGE,    // Extended Style For The Window
                kWindowClassName,                                    // Class Name
                wszBuf,                                                // Window Title
                WS_CAPTION | WS_POPUPWINDOW | WS_MINIMIZEBOX,        // Defined Window Style
                0, 0,                                                // Window Position
                0,                                                  // Window Width
                0,                                                  // Window Height
                NULL,                                                // No Parent Window
                NULL,                                                // No Menu
                hInstance,                                            // Instance                NULL );

            CC_BREAK_IF(! m_hWnd);

            resize(w, h);

            bRet = initGL();
            CC_BREAK_IF(!bRet);

            s_pMainWindow = this;
            bRet = true;
        } while (0);
    }    else
    {
        m_hWnd = hWnd; /// 直接将外部窗口当做当前窗口
        bRet = initGL(); /// 初始化OpenGLES相关
    }    return bRet;
}

复制代码

  底层已经支持将外部窗口传入作为渲染窗口了,那我们就只要做相应的调整就可以了。

  第三步,添加Cocos2DApp

  在工程中添加 类 CCocos2DApp继承自 cocos2d::CCApplication, 这就相当于HelloCPP中的 AppDelegate.之所以在这里自己实现,是想将MFC的窗口句柄交给

  Cocos2D的渲染层。

  CCocos2DApp需要在AppDelegate的基础上,添加两个方法,代码如下:

复制代码

 1 /** 2 @brief 系统初始化 3 @param uWnd 窗口句柄 4 @param nWidth 窗口宽 5 @param nHeight 窗口高 6 */ 7 void CCocos2DApp::init( uint32 uWnd, int32 nWidth, int32 nHeight )/// uint32 int32 是自定义数据类型 就是int 和 unsinged int 8 { 9     m_uWnd = uWnd;10 11     cocos2d::CCEGLView* eglView = cocos2d::CCEGLView::sharedOpenGLView();12     if( eglView == NULL )13     {14         return;15     }16 17     eglView->setFrameSize(nWidth, nHeight, (HWND)m_uWnd); /// 这里调用已经修改的cocos2d::CCEGLView方法18 19     // Initialize instance and cocos2d.20     if (!applicationDidFinishLaunching())21     {22         return;23     }24 25     n_bCocos2DInit = true;26 }27 //------------------------------------------------------------------------------28 /**29 @brief 系统运行 重载基类的run方法30 @param31 */32 int CCocos2DApp::run()33 {34     if( m_uWnd == 0 )35     {36         return cocos2d::CCApplication::run();  /// 如果是引擎底层创建窗口,在消息循环在这里执行,在消息循环中执行mainLoop37     }38     else39     {40         if( n_bCocos2DInit)41         {42             cocos2d::CCDirector::sharedDirector()->mainLoop(); 
43         }44 45         return 1;46     }47 }

复制代码

   再把HelloWorldScene添加到工程。运行HelloCPP需要的图片资源,也需要复制到工作目录下。

  第四步 将CCocos2DApp添加到CMFCTestView中

    在CMFCTestView.h中添加

    CCocos2DApp       m_Cocos2DApp;

  我们希望在窗口初始后,调用CCocos2DApp的init方法,实现渲染环境初始化。

  切换到类视图,选择属性,选择重写(Overide)标签,找到OnInitialUpdate,添加重写CMFCTestView::InitUpdate方法

                                                      

  在其中添加代码,调用CCocos2DApp::init,代码如下:

复制代码

 1 void CMFCTestView::OnInitialUpdate() 2 { 3     CView::OnInitialUpdate(); 4  5     // TODO: 在此添加专用代码和/或调用基类 6  7     RECT rc; 8     ::GetClientRect( m_hWnd, &rc ); 9 10     m_Cocos2DApp.init( (uint32)m_hWnd, rc.right - rc.left, rc.bottom - rc.top ); /// 传入窗口句柄和宽高11     SetTimer( 1, 30, NULL ); /// 见下面的分析12 }

复制代码

  在之前分析中已经提到,HelloCpp的Render是在消息循环中执行的,MFC窗口接管消息循环,我们Render放在哪里比较好呢?因为我们是用来制作工具,对渲染效率要求不是很高,所以我想用定时器来驱动我们的Render。所以在初始化的时候启动了一个定时器。

  在CMFCTestView中添加定时器处理方法:

1 // CMFCTestView 消息处理程序2 void CMFCTestView::OnTimer(UINT_PTR nIDEvent)3 {4     // TODO: 在此添加消息处理程序代码和/或调用默认值5     m_Cocos2DApp.run(); /// 这里执行mainLoop,在mainLoop中执行Render6     CView::OnTimer(nIDEvent);7 }

  编译运行应当就可以看到可爱的Cocoser了,如下图

                                       

   画面是渲染出来了,可是却收不到鼠标消息。原来引擎实现了CCEGLView::WindowProc用来处理Windows消息,系统在这里模拟了触屏的一些操作。那我们只要将MFC的窗口消息传递给CCEGLView::WindowProc就可以实现了。

  在CMFCTestView中添加重写(Ovreide)函数WindProc,代码如下:

复制代码

/**
@brief 窗口回调函数
@param*/LRESULT CCocos2DApp::WindowProc(UINT message, WPARAM wParam, LPARAM lParam)
{
    cocos2d::CCEGLView* eglView = cocos2d::CCEGLView::sharedOpenGLView();    if( eglView )
    {        return eglView->WindowProc( message, wParam, lParam );
    }    return 0;
}

复制代码

   这样就可以正常收到windows窗口消息了。

 还有一个需要注意的问题,当窗口大小发生变化,我们也需要通知到引擎底层,所以我们需要再添加一个针对WM_SIZE的处理函数,函数代码如下:

1 void CMFCTestView::OnSize(UINT nType, int cx, int cy)2 {3     CView::OnSize(nType, cx, cy);4 5     // TODO: 在此处添加消息处理程序代码6     m_Cocos2DApp.OnSize( cx, cy );7 }

  在CCocos2DApp::OnSize中再对底层进行相关的设置,我们看下代码:

复制代码

/**
@brief 重置大小
@param*/void CCocos2DApp::OnSize( int nWidth, int nHeight )
{    // TODO: 在此处添加消息处理程序代码  
    cocos2d::CCEGLView* eglView = cocos2d::CCEGLView::sharedOpenGLView();    if( eglView )
    {if( n_bCocos2DInit )  
        {  
            //重新设置窗口大小及投影矩阵  
            cocos2d::CCEGLView::sharedOpenGLView()->resize(nWidth,nHeight);  
            cocos2d::CCDirector::sharedDirector()->reshapeProjection(cocos2d::CCSizeMake(nWidth,nHeight));
        }
    }    
}

复制代码

  至此,你已经看到怎样将Cocos2DX渲染到MFC窗口的全过程,相信聪明的你也一定可以制作你自己想要的游戏工具,最后希望大家Coding happy!!!