Posted at

CocosCreatorのエディタソースを解凍し、Electronコマンドで起動できるかの検証


CocosCreatorのapp.asarの解凍

CocosCreatorを使っている方なら、一度目にしたことがあるかもしれません。

image.png

このapp.asarという圧縮ファイルの中に、エディタ自体のソースコードが入っています。これを解凍出来れば、改修はもちろん、エンジンの勉強にも役立ちます。

通常のasarファイルなら、

asar e app.asar app

で解凍できますが、cocos creatorのこのファイルは暗号化されており、asar コマンドでは解凍できません(以下のようなエラーが発生します)。

image.png

cocos creatorオフィシャルフォーラムにも同じような質問があります。

https://forum.cocos.com/t/creator/65966

このスレッドで解決策を見つけました。

https://forum.cocos.com/t/creator/65966/4

以下は解決策になります。

①まずは、Consoleタブをクリックし、すると、画面が下図の状態になります。

image.png

②asarファイル内のファイルを外にコピーする関数を実行

https://gist.github.com/benloong/586d6c899c2d84cea557d358311ae9d7


var fs = require("fs");
var app = require("electron").remote.app;
var fsj = require("fs-jetpack");

// example usage : copyFileOutsideOfElectronAsar( "myFolderInsideTheAsarFile", app.getPath("temp") + "com.bla.bla"

var copyFileOutsideOfElectronAsar = function(sourceInAsarArchive, destOutsideAsarArchive) {
if ( fs.existsSync( app.getAppPath() + "/" + sourceInAsarArchive ) ) {

// file will be copied
if ( fs.statSync( app.getAppPath() + "/" + sourceInAsarArchive ).isFile() ) {

fsj.file( destOutsideAsarArchive , {content: fs.readFileSync( app.getAppPath() + "/" + sourceInAsarArchive ) });

}

// dir is browsed
else if ( fs.statSync( app.getAppPath() + "/" + sourceInAsarArchive ).isDirectory() ) {

fs.readdirSync( app.getAppPath() + "/" + sourceInAsarArchive ).forEach(function(fileOrFolderName) {

copyFileOutsideOfElectronAsar( sourceInAsarArchive + "/" + fileOrFolderName, destOutsideAsarArchive + "/" + fileOrFolderName );
});
}
}

}

上記コードをそのままConsoleにコピーし、実行(下図をご参照)

image.png

③app.asarと同じフォルダに一個appというフォルダを作成します。(mkdir appなどで)

image.png

④実際のコピー処理を実行します。

// 二つ目のパラメータはコピー先のフルパスに指定してください。

// 今回は上記で作成したappフォルダのフルパスを指定します。
copyFileOutsideOfElectronAsar("./","C:\\CocosCreator\\resources\\app")

これをConsoleで実行します。

image.png

実際のappフォルダを確認しましょう。

image.png

コピー出来ました!!

これでやっとapp.asarの中身を取り出せました。


electronコマンドでcocos creatorを起動

cocos creatorで使われているelectronのバージョンをまず確認します。

app.asarを解凍しない場合、Console上で

process.versions

で確認できます。

image.png

今回app.asarを解凍しましたので、この中のpackage.jsonからでも確認できます。

image.png

上記のprocess.versions実行でelectron 1.7.5で使われているnodeのバージョンは7.9.0で、chromiumのバージョンは58.0.3029.110です。

バージョン指定でelectron をインストールするとき、nodeのバージョンはあまり関係ないと思いますが、念のため、以下のようにインストールしました。

nvm use 7.9.0

npm -g install electron@1.7.5
electron --version

image.png

では本題のelectronコマンド実行でcreator creatorが起動できるかを見てみましょうか。

appフォルダに入り、electron .を実行

image.png

画面が立ち上がりました!!

今回の検証は今後どのような状況で使えるかはまだ課題として残っています。

例:・内蔵されているnodeが7.9.0で、もっと高いバージョンに上げるにはどうすればいいのか

参考資料:

https://forum.cocos.com/t/creator/65966

https://discuss.cocos2d-x.org/t/successfully-run-cocos-creator-on-linux-and-released-it-as-docker-image/40755

https://github.com/atom/atom/issues/9800