cocos2dx 3.3 + QT5.3制作游戲編輯器

歡迎轉載，但請注明本blog地址，謝謝_(:зゝ∠)_

http://www.cnblogs.com/marisa/p/4141862.html

 

主要參考：

http://blog.csdn.net/greatchina01/article/details/39579185

http://blog.csdn.net/yurenjimi/article/details/7427330

 

准備

1. qt-opensource-windows-x86-msvc2013_opengl-5.3.2.exe

2. qt-vs-addin-1.2.3-opensource.exe

3. vs2013

 

配置環境變量

1. 添加QTDIR為QT的安裝路徑，如：D:\Qt\Qt5.3.2\5.3\msvc2013_opengl

2. 添加PATH，%QTDIR%\bin

 

建立工程

(事先用cocos2dx創建一個HelloWorld工程)

1. 打開VS2013，新建QtApplication工程（需要勾選openGL模塊）。

2. 拷貝Classes, cocos2d, Resources三個目錄到QT工程的根目錄下（.vcxproj文件所在目錄）

3. 右鍵點擊解決方案添加工程libbox2d, libcocos2d, libSpine。

 

配置工程屬性

基本就是照抄HelloWorld的工程屬性:

1. 添加屬性宏

視圖->其他窗口->屬性管理器->點擊工程添加新屬性表（名字隨意）

點擊新建的屬性表，在用戶宏中添加宏:

名稱: EngineRoot

值: $(ProjectDir)cocos2d\

2. 通用屬性/引用

添加新引用，勾選libbox2d, libcocos2d, libSpine三個工程。

3. 常規

輸出目錄: $(SolutionDir)$(Configuration).win32\

中間目錄: $(Configuration).win32\

4. 調試

工作目錄: $(ProjectDir)Resources

5. C/C++/常規

附加包含目錄:

添加

$(EngineRoot)cocos\audio\include
$(EngineRoot)external
$(EngineRoot)external\chipmunk\include\chipmunk
$(EngineRoot)extensions
$(ProjectDir)Classes
$(ProjectDir)
$(EngineRoot)cocos\editor-support
$(EngineRoot)cocos
$(EngineRoot)cocos\platform
$(EngineRoot)cocos\platform\desktop
$(EngineRoot)external\glfw3\include\win32
$(EngineRoot)external\win32-specific\gles\include\OGLES

6. C/C++/預處理器

添加

_DEBUG
_WINDOWS
_USE_MATH_DEFINES
GL_GLEXT_PROTOTYPES
CC_ENABLE_CHIPMUNK_INTEGRATION=1
COCOS2D_DEBUG=1
_CRT_SECURE_NO_WARNINGS
_SCL_SECURE_NO_WARNINGS
_VARIADIC_MAX=10
_USING_V110_SDK71_
_UNICODE

7. 鏈接器/常規

附加庫目錄:

添加

$(SolutionDir)$(Configuration).win32\

8. 鏈接器/輸入

附加依賴項:

添加

opengl32.lib
glew32.lib
libzlib.lib
libpng.lib
libjpeg.lib
libtiff.lib
libwebp.lib
libiconv.lib
glfw3.lib
freetype250.lib
winmm.lib
ws2_32.lib
libchipmunk.lib
libbox2d.lib
libSpine.lib
kernel32.lib
user32.lib
gdi32.lib
winspool.lib
comdlg32.lib
advapi32.lib
shell32.lib
ole32.lib
oleaut32.lib
uuid.lib
odbc32.lib
odbccp32.lib

9. 生成事件

預鏈接事件

if not exist "$(OutDir)" mkdir "$(OutDir)"
xcopy /Y /Q "$(EngineRoot)external\websockets\prebuilt\win32\*.*" "$(OutDir)"

 

修改代碼

測試：在MainWindow的構造函數中啟動cocos2d，看是否能編譯運行通過

#include "qttest.h"
#include "Classes/AppDelegate.h"

QTTest::QTTest(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);

    AppDelegate app;
    cocos2d::Application::getInstance()->run();
}

QTTest::~QTTest()
{
}

上面的代碼運行成功會先彈出cocos2d的HelloWorld界面，關掉后再彈出QT窗口。因為run函數里面是死循環，只有run退出了才會完成QTTest的構造。

這里只是檢查下工程配置是否正確，如果可以正常編譯和運行再繼續_(:зゝ∠)_

 

制作編輯器

接下來才是正題，因為cocos2d-x 3.x版本window的創建用的是glfwCreateWindow(), 拿到的窗口句柄是GLFWwindow*類型的_mainWindow。

老實說我不知道怎么拿這個GLFWwindow去創建一個QT窗口_(:зゝ∠)_

那怎么辦？造輪子唄，參考了一個cocos2d-x 2.14版本的QtPort工程，於是打算這樣搞：

1. 不用glfwCreateWindow創建窗口，用QGLwidget搞。那么需要繼承GLViewImpl，重寫create方法，另外還需重寫輸入接口。

2. 重寫消息循環，用QTimer驅動。那么需要繼承Application，同時還需多重繼承QApplication，重寫run方法。

輪子我已經造了，代碼放在：

https://github.com/gameboy12615/CocosQtPort

或者:

https://git.oschina.net/takamachimarisa/CocosQtPort

 

目前基本功能都有了，支持窗口自動縮放，不過key輸入事件還沒寫。另外由於DesignResolutionSize不能改，導致窗口寬高比只能是固定的，因此窗口拉長后會空出一塊。

當然做2D編輯器的話，在CCQGLView::Create()中把寬高比設大點就可以了。但是要做3D編輯器就有點不方面，具體可以自己體會（有好方法也求路過的大牛不吝賜教）_(:зゝ∠)_

嘛，先看效果：

 

大概就是這個樣子，下面說下輪子的用法：

1. 參考前面1~9步用VS2013創建一個QT Application項目，我這里命名為CCGEditor，因此主窗口類是CCGEditor.h和CCGEditor.cpp這兩個文件。

2. 用QT設計師創建一個QDockWidget（隨便什么QWidget都可以）用來放cocos2d的窗口。我這里是SceneWidget，代碼中可以直接用ui.SceneWidget來獲取到。

3. 拷貝CocosQtPort到Classes目錄下。

4. 修改AppDelegate，使其繼承自cocos2d::CCQApplication，並使用CCQGLView創建glview，代碼如下：

AppDelegate.h

#include "cocos2d.h"
#include "CocosQtPort/CCQApplication.h"
#include "../ccgeditor.h"

class  AppDelegate : private cocos2d::CCQApplication
{
public:
	AppDelegate(int argc, char *argv[]) : cocos2d::CCQApplication(argc, argv) {};
    virtual ~AppDelegate();
......
protected:
	CCGEditor _mainWindow;
};

AppDelegate.cpp

#include "AppDelegate.h"
#include "HelloWorldScene.h"
#include "CocosQtPort/CCQGLView.h"

......
bool AppDelegate::applicationDidFinishLaunching() {
    // initialize director
    auto director = Director::getInstance();
	auto glview = CCQGLView::getInstance();
	glview->setBgColor(Color4B(50, 50, 50, 255));

	director->setOpenGLView(glview);
	_mainWindow.setGLView(glview->getGLWidget());
	_mainWindow.show();
......
}

5. 修改CCGEditor，代碼如下：

CCGEditor.h

#ifndef CCGEDITOR_H
#define CCGEDITOR_H

#include <QtWidgets/QMainWindow>
#include "ui_ccgeditor.h"

class AppDelegate;
namespace Ui {
	class CCGEditor;
}

class CCGEditor : public QMainWindow
{
	Q_OBJECT

public:
	CCGEditor(QWidget *parent = 0);
	~CCGEditor();

	void setGLView(QWidget *glWidget);

protected:
	void closeEvent(QCloseEvent *);

private:
	Ui::CCGEditorClass	ui;
	AppDelegate			*_appDelegate;
	QWidget				*_glWidget;
};

#endif // CCGEDITOR_H

CCGEditor.cpp

#include "ccgeditor.h"
#include "Classes/AppDelegate.h"
#include "Classes/CocosQtPort/CCQGLView.h"

#include <QTimer>
#include <QDockWidget>

CCGEditor::CCGEditor(QWidget *parent)
	: QMainWindow(parent),
	_appDelegate(NULL),
	_glWidget(NULL)
{
	ui.setupUi(this);
}

CCGEditor::~CCGEditor()
{

}

void CCGEditor::closeEvent(QCloseEvent *)
{
	cocos2d::Director::getInstance()->end();
	qApp->quit();
}

void CCGEditor::setGLView(QWidget *glWidget)
{
	_glWidget = glWidget;

	if (_glWidget)
	{
		ui.SceneWidget->setWidget(_glWidget);
		setCentralWidget(ui.SceneWidget);
	}
}

6. 修改main.cpp

#include "ccgeditor.h"
#include <QtWidgets/QApplication>

#include "Classes/AppDelegate.h"
#include "Classes/CocosQtPort/CCQGLView.h"
#include "cocos2d.h"

USING_NS_CC;

int main(int argc, char *argv[])
{
	AppDelegate app(argc, argv);
	return cocos2d::CCQApplication::getInstance()->run();
}

 

編譯運行，打完收工_(:зゝ∠)_