本文欢迎转载，但是必须得保住原文地址 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工程的同学，到网上找找教程。
以下是工程（工程名叫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 @param 31 */ 32 int CCocos2DApp::run() 33 { 34 if( m_uWnd == 0 ) 35 { 36 return cocos2d::CCApplication::run(); /// 如果是引擎底层创建窗口，在消息循环在这里执行,在消息循环中执行mainLoop 37 } 38 else 39 { 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中执行Render 6 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!!!
