この記事は Akatsuki Advent Calendar の17日目の記事です。
背景
Cocos2d-xだけでエディターを作成するのは難儀だとおもいます。
CococsCreatorを使ってない場合はさらに困難だと思います。
UIの作成・調整の実装などで相当なコストがかかります。
そこでCocos2d-xをViewer、ElectronをEditorにするという手法を紹介します。
UIの部分をElectronに任せることで、比較的簡単にUIの作成・調整を行えるようにするというのが狙いです。
実装
動作確認環境
- Mac OS Mojave
- Xcode 11.3
- Cocos2d-x 3.17.1
- Electron 5.0.7
概要図
PC上で動くことを想定しています。
Cocos2d-xをViewer、ElectronをEditorにするということで、重要になってくるのはプロセス間通信になります。
今回は名前付きパイプを使用することで実現する方法を紹介します。
実装
コアとなる部分のコードのみを紹介します。
また、以下の例では通信はjsonを使用することを想定しています。
Electron側のコーディングイメージとしては以下の通りです。
ElectronSample.js
const exec = require('child_process')
...
/**
* 引数に指定したJsonをビュワーに送信します
* @param json ビュワーに送信するJson
*/
function sendJsonToViewer(json)
{
var jsonString = JSON.stringify(json)
var command = 'echo \'' + jsonString + '\' > /tmp/pipename'
exec.exec(command)
}
Cocos2d-x側のコーディングイメージとしては以下の通りです。
CocosSample.cpp
// callback: Editor側からデータを受け取った際に呼ばれる関数。
void SomeClass::listenMessageFromEditor(const std::function<void(json型)> callback)
{
mkfifo("/tmp/pipename", 0700);
_thread = std::thread([this, callback]() {
while (1) {
std::string message = 名前付きパイプの中身を読み取ってstd::string型に変換する関数("/tmp/pipename");
auto json = 文字列をJsonに変換する関数(message);
auto scheduler = Director::getInstance()->getScheduler();
scheduler->performFunctionInCocosThread([callback] { callback(json); });
}
});
}
使い方次第では以下のようなものが出来上がります。
Cocos2d-xをViewer、ElectronをEditorにして出来上がったマテリアルエディターもどきです。
考察
メリット
- Cocos2d-xを使ってるプロダクトにはおすすめです。
- 既存の資産を利用してViewerを作成することができます。
デメリット
- Cocos2d-xを使っておらず、UnityやUnreal Engineを使用しているプロダクトであればエディタ拡張が充実しているので、今回の手法はほぼ役に立たないでしょう・・・。
- ElectronはHTMLやJavaScriptなどWeb系の技術を使用するため、それらについてあまり詳しくない人であれば導入コストは高いです。
- 名前付きパイプをしようしている都合上、セキュリティ上パブリックな環境に置くのは避けた方が良いでしょう。ローカル環境・社内ツール向けです。
以上です。
それでは良い開発ライフを！