2018-10-31に更新

cocos2d-jsにcocos studioで作成したシーンを読み込む

cocos2dx-jsにcocos studioで作成したシーンを読み込む方法。
すごくハマったので…。

cocos2dx-jsのバージョンは3.2。
cocos stuidoのバージョンは1.6。
多分、完全に現状の状況での成功方法なので、
日があいたら他の方法を確認していただきたい。

cocos stuidoの最新バージョンはjsonファイルを作ってくれないのでダメ。
デバッグしてみても、明らかにjsonファイルの読み込み機能しか実装されてない。

読み込みは下記のような感じ。

|javascript|
cc.loader.resPath = "res/publish";
var scene = ccs.sceneReader.createNodeWithSceneFile("res/publish/NewScene.json");
this.addChild(scene);
||

大事なのは1行目。
ネットで探してもマニュアルにもどこにも説明がなくたまたま気づいたのだが
これを入れないとプロジェクトのルートに画像とかを入れておかないと落ちる。
というかこれくらいわかりやすくドキュメント化しておいてくれよ…。

あとccsのネームスペースを使うためには
project.jsonのmodulesにextensionsを追加。

引き続き色々試しているが、IDEのデバッグを使わずコマンドラインのみで開発の場合は
resPathは""とした方がいいかもしれない。
(createNodeWithSceneFileの前にかならず代入した方が良い????)

違った。いろいろ試してみた結果、
ちゃんとresPathに例えば全てのリソースが入っているところがres/publishであればそれを指定し、
最初のg_resources含め、リソースの指定はそのパスより下の部分で指定してやれば
デバッグ環境関係なくちゃんと動くみたい。
""だと変なパス指定しないと動かなかったりする箇所があるので
環境によって動作が変わってしまう。

追記
どうもAndroidでEclipseから実行する場合、
preloadを使っている場合は問題ないのだが、
途中でcc.loader.loadを使用する場合などは画像が読み込まれない。
asset is nullptrというエラーが出る。
androidのプロジェクトのassets直下に画像などを入れなければならないみたいだ。
(それ以下のフォルダ構造などはそのままでいい)
他にうまいやり方があるのかは不明。
まあ、実機でのチェックはそう頻繁でもないと思うのでそれほど大変でもないと願いたい。
CCFileUtils-android.cppだと思うので分かる人は調べてみてください。
更に追記
・サウンドはそのままで良い
・何故かasset直下にコピーしなくても動くようになった。その都度各々うまくいかない時に試すだけにした方がよい。

なんにしろ、WindowsとAndroidのデバッグは
実際の実機用にちゃんとビルドしたものではなくデバッグ用実行ファイルを介したものなので
まともに使えると思わないほうが良さげ。
今のところcocos run -p webでデバッグしているのが一番安定している。
(ただし、jsがキャッシュされたりするので自分の場合はCCBoot.jsを少し改造して
?*****を付加してキャッシュされないようにしてデバッグしている。
(ブレークポイントが消えてしまうので、切り替えできるようにもしている)

追記
ちなみに色々試した結果、UIエディタで作ったUIだけを使ってやりくりするのが
一番簡単な気がした。
(一人でやる分には。アニメーションもjsで書いた方が早くて柔軟だし…)

|javascript|
var ui = ccs.uiReader.widgetFromJsonFile(resource);
||

実際には下記のような感じでテキストは簡単に置き換えられるようにして使っている。

|javascript|
var ui = createUI(resource, {Name: chara.name, Level: chara.level});

function createUI(resource, params) {
var ui = ccs.uiReader.widgetFromJsonFile(resource);
if (params == undefined) {
params = {};
}
setUIParameters(ui, params);
return ui;
}

function setUIParameters(ui, params) {
for (var name in params) {
setUIParameter(ui, name, params[name]);
}
}

function setUIParameter(ui, name, value) {
var node = ui.getChildByName(name);
if (typeof value == 'string' || typeof value == 'number') {
node.setString(value);
} else {
setUIParameters(node, value);
}
}
||

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント