読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

Cocosを試してみました。

 『Cocosドキュメント』で、『Cocos Studio 2』によるシーンの作成やプロジェクトのパブリッシュ等に触れてきましたが、実際にコードを書くまでには至っていません。
 
 そこで、個人的にCocosの環境を使っていけるか判断するためにも、まずは下記のことを試しておきたいと思います。

  1. 『Cocos Studio 2』で作成した画面に対し、『Cocos Code IDE』で簡単な動きやイベント等のコードを記述し、実行
  2. Xcode』へプロジェクトの書き出し、実行

 これができれば、Cocosの環境でiOSアプリを作成できる希望が持てそうです。
 
<<(2015/09/14 追記):下記で生じたエラーについて、『『Cocos Framework』のバージョンを下げました - モーリーのメモ』で改善した点等を記載していますのでこちらも御覧ください。>>

実行環境

今回使用する『Cocosプロジェクト』について

 『シーンとUI:Cocosドキュメント - モーリーのメモ』の最終段階まで作成した『HelloCocos』プロジェクトを使用します。
 ちなみに『Cocosドキュメント』では、『Cocos』でプロジェクトを作成していましたが、『Cocos Studio 2』でも同様に作れました。

『Cocosプロジェクト』の『Cocos Code IDE』へのパブリッシュ

1.『Cocos Studio 2』で『HelloCocos』プロジェクトを読み込む
1-1.『Cocos Studio 2』を起動し、アプリケーションメニューの『File』-『Open Project』をクリック
f:id:mmorley:20150908144332p:plain
1-2."/Documents/CocosProjects/HelloCocos/HelloCocos.ccs"を選択し、『OK』をクリック
2.アプリケーションメニューの『Project』-『Publish and Package...』をクリック
3.『Publish and Package』ウインドウで、以下のように選択し、『OK』をクリック
・『Publish』を選択
・『Publilsh Type』で『Publish to Code IDE』を選択
 『Cocos Code IDE』が起動します。

『Cocos Code IDE』でとりあえず実行(デバッグ

『Mac OSX』で実行

1.『Cocos Code IDE』の上部にあるf:id:mmorley:20150908171911p:plainデバッグ配置』ボタンをクリック
f:id:mmorley:20150908172100p:plain
2.『デバッグ構成』ウインドウの『ターゲットのプラットフォーム』で、『Mac OSX』を選択し、『デバッグ』をクリック
f:id:mmorley:20150908172911p:plain

  • 下図の画面から変化がなく動きませんでした。
    f:id:mmorley:20150908173438p:plain
  • 『Cocos Code IDE』の『コンソール』には、
    『〜/Documents/CocosProjects/HelloCocos/script/studio/jsb_studio_boot.js:72:TypeError: ccs.BoneNode is undefined』というエラーが表示されていました。
  • 原因を調べてみましたが、まだ解決方法はわかっていません。
  • ちなみに『Project Language』で『Lua』を選んだプロジェクトでは、実行できました。

iOSシミュレーター(『Cocoa Code IDE』から)』で実行

1.『Cocos Code IDE』の『デバッグ配置』ボタンをクリック
2.『デバッグ構成』ウインドウの『ターゲットのプラットフォーム』で、『iOSシミュレーター』を選択し、『デバッグ』をクリック

  • こちらも先ほどと同様の青い画面が表示され、アプリが落ちる場合もありました。
  • こちらは『Project Language』で『Lua』を選んだプロジェクトでも落ちました。

『ブラウザ』で実行

1.『Cocos Code IDE』の上部にあるf:id:mmorley:20150908184923p:plain『ブラウザで起動』ボタンをクリック

  • 図だとわかりにくいですが、起動しました。
    f:id:mmorley:20150908202954p:plain

 同じ設定で、実行する場合は、『Cocos Code IDE』の上部にあるf:id:mmorley:20150908203048p:plain『〜〜 Run』ボタンをクリック(ボタンのアイコンが設定によって変わります。)

  • 『ブラウザ』で実行すると、『ターミナル』が起動します。ブラウザ側を閉じてもターミナルは開いたままなので、ターミナルも閉じて下さい。

『とりあえず実行』した結果

 『Mac OSX』、『iOSシミュレーター(『Cocoa Code IDE』から)』のプラットフォームでは実行出来ませんでしたが、『ブラウザ』では実行できました。最低限ですが、アプリの動きの確認はできるので、これで進めることにしました。

実行をふまえて修正(『Cocos Code IDE』でコード等)

 『とりあえず実行』した際に、下記の点が気になったので修正したいと思います。
1.『Cocos Studio 2』でせっかく作ったシーンが表示されない
2.画面が縦になっていない
3.動きがないので、ちゃんと動いているのかわかりづらい

『Cocos Studio 2』で作成したシーンを表示

1.『Cocos Code IDE』の画面左の『JSプロジェクトExplorer』で『HelloCocos』-『src』にある『resource.js』をダブルクリックして開く
f:id:mmorley:20150908211641p:plain
2.ソースコードの下記の部分を修正

var res = {
    HelloWorld_png : "res/HelloWorld.png",
    // MainScene_json : "res/MainScene.json" // 修正前
    MainScene_json : "res/Scene1.json" // 修正後
};

3.『Cocos Code IDE』の上部にあるf:id:mmorley:20150908220804p:plain『すべて保管』ボタンをクリック
f:id:mmorley:20150908220827p:plain
4.『ブラウザで起動』ボタンをクリックして確認
f:id:mmorley:20150908221228p:plain
 『Cocos Studio 2』で作成したシーンが表示されました。
 直し方はいろいろあると思いますが、手っ取り早い方法で直しました。

画面を縦にする

1.『Cocos Code IDE』の画面左の『JSプロジェクトExplorer』で『HelloCocos』配下の『main.js』をダブルクリックして開く
2.ソースコードの下記の部分を修正(『main.js』の一番下のほう)

cc.game.onStart = function(){
    cc.view.adjustViewPort(true);
    // cc.view.setDesignResolutionSize(960, 640, cc.ResolutionPolicy.SHOW_ALL); // 修正前 
    cc.view.setDesignResolutionSize(640, 960, cc.ResolutionPolicy.SHOW_ALL); // 修正後
    cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new HelloWorldScene());
    }, this);
};

3.『Cocos Code IDE』の画面左の『JSプロジェクトExplorer』で『HelloCocos』配下の『config.json』を右クリックし、『Open With』-『テキストエディタ』をクリックして開く
4.下記の部分を修正

  • 修正前:『"isLandscape": true,』
  • 修正後:『"isLandscape": false,』

3.『Cocos Code IDE』の『すべて保管』ボタンをクリック
4.『ブラウザで起動』ボタンをクリックして確認
f:id:mmorley:20150908223619p:plain

動き(ボタンのイベント)を追加

1.『Cocos Code IDE』の画面左の『JSプロジェクトExplorer』で『『HelloCocos』-『src』にある『app.js』をダブルクリックして開く
2.ソースコードの下記の部分を修正(『main.js』の一番下)

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();

        /////////////////////////////
        // 2. add a menu item with "X" image, which is clicked to quit the program
        //    you may modify it.
        // ask the window size
        var size = cc.winSize;

        var mainscene = ccs.load(res.MainScene_json);
        this.addChild(mainscene.node);
        
        // ここから 追加
        // Startボタン(Button_1)を取得
        var button1 = ccui.helper.seekWidgetByName(mainscene.node, "Button_1");
        
        // ボタンのタッチイベントを追加
        button1.addTouchEventListener(function(sender, type){
        	switch (type) {
        	case ccui.Widget.TOUCH_BEGAN: // ボタンにタッチした時
        		break;

        	case ccui.Widget.TOUCH_MOVED: // ボタンにタッチ中
        		break;

        	case ccui.Widget.TOUCH_ENDED: // ボタンを離した時
        		// ボタンのY座標を設定
        		button1.setPositionY(480);
        		break;

        	case ccui.Widget.TOUCH_CANCELED: // キャンセルした時
        		break;
        	}
        }, this);
        // ここまで
        
        return true;
    }
});
  • 『Cocos Studio 2』で『Start』ボタンを選択すると、『Properties』の『Name』で『Start』ボタンの呼び出し名”Button_1”が確認できます。

3.『Cocos Code IDE』の『すべて保管』ボタンをクリック
4.『ブラウザで起動』ボタンをクリックして確認
f:id:mmorley:20150908232314p:plain
『Start』ボタンにタッチして、離したタイミングでボタンが画面中央に移動します。

Xcode』へプロジェクトの書き出し、実行

 今回、一番試しておきたいところです

『Cocosプロジェクト』の『Xcode』へのパブリッシュ

1.『Cocos Studio 2』で『HelloCocos』プロジェクトを読み込む
2.アプリケーションメニューの『Project』-『Publish and Package...』をクリック
3.『Publish and Xcode』ウインドウで、以下のように選択し、『OK』をクリック

  • 『Publish』を選択
  • 『Publilsh Type』で『Publish to Xcode』を選択

 『Xcode』が起動します。
4.『Xcode』のf:id:mmorley:20150908233724p:plain『Run』ボタンをクリック
f:id:mmorley:20150908233812p:plain
iOSシミュレータ』が起動しますが、アプリの起動に失敗しました。
 あと画面が横で実行される模様。

再度修正

 調べた結果、下記の点を修正しました。

『CodeIDESupport.h』の修正

1.『〜/Documents/CocosProjects/HelloCocos/frameworks/runtime-src/Classes/ide-support/CodeIDESupport.h』を右クリックし、『このアプリケーションで開く』-『テキストエディット』をクリックして開く
2.下記の部分を修正

  • 修正前:『#define CC_CODE_IDE_DEBUG_SUPPORT 1』
  • 修正後:『#define CC_CODE_IDE_DEBUG_SUPPORT 0』

3.『テキストエディット』で保存して、閉じる

 これで、シミュレータが『waiting for debugger to connect ...』と表示した状態で止まらないようになりました。
 ただし、ここで修正したフラグが他にどう影響するかは不明です。

『Layer.csd』の除去

  • 『Cocos Studio 2』でシーンを作成する際に『Layer』上に『Button_1』を配置していましたが、『Layer』を削除して『Scene1』上に直接『Button_1』を配置しました。

1.『Cocos Studio 2』で、『HelloCocos』プロジェクトを開く
2.『Resources』パネルで『Layer.csd』を右クリックし、『Delete』
3.『Notification』ウインドウで、『Move to Trash』をクリック(ファイルそのものを消去)
4.『Resources』パネルで『Scene1.csd』をダブルクリック
5.『Widget』の『Button』を『Canvas』にドラッグアンドドロップ
6.『Resource』パネルから『Feature』の『Background』に次の3つのファイルをそれぞれドラッグアンドドロップ

7.『Properties』の『Position & Size』の値を次のように設定

  • 『Position』の『X』を"320"px、『Y』を"120"pxに設定

8.『Properties』の『Name』を"Button_1"に設定
9.アプリケーションメニューの『File』-『Save All』をクリックして保存

 シーンを呼び出すだけならレイヤーを使用していても表示されます。しかしそこに『Cocos Code IDE』で動き(コード)を追加すると、『ブラウザ(『Cocos Code IDE』から)』上では実行されるが、『Xcode』では画面が真っ暗になり実行されないという現象が起きました。
 コード側での修正方法が不明のため、『Cocos Studio 2』でシーンの方を修正して対処しました。

Xcode』プロジェクトで画面の向きの修正

1.『Xcode』の左側で『HelloCocos』のプロジェクトファイルを選択
2.『General』の『Deployment Info』の『Device Orientation』を下記のように修正

  • 修正前:『LandScape Left』と『LandScape Right』にチェック
  • 修正後:『Portrait』と『Upside Down』にチェック

f:id:mmorley:20150909150919p:plain

修正結果

 『Xcode』の『Run』ボタンから起動しました。

まとめ

  • 『Cocos Code IDE』でのアプリの実行で、『Mac OSX』と『iOSシミュレーター』上では起動せず、『ブラウザで起動』でのみ起動した。
  • アプリの画面の向きは、『Cocos』でプロジェクトを最初に作るときに設定したほうが良い。
  • 『Cocos Studio 2』の『レイヤー』を、コード(Cocos Code IDE)上で取り扱う方法がわからなかった。
  • 『Cocos Code IDE』の『ブラウザで起動』での実行結果と、『Xcode』での実行結果が異なる場合があった。
    • 『レイヤー』を使用した場合、『Cocos Code IDE』の『ブラウザで起動』ではアプリが実行できたが、『Xcode』では実行できなかった。
    • 『Cocos Studio 2』の『Run on Mac』ボタンからの実行では、同様にアプリが起動しませんでした。(『Xcode』からの実行と振る舞いが似ている?)
  • 『レイヤー』を使わないという条件つきだが、『Xcode』でアプリが実行できた。
  • 『Cocos Code IDE』でのデバッグの際、コードの修正箇所がわかりづらい場合があった。

あとがき

 わからないことだらけでした。少しずつ解決できたらと思います。

広告を非表示にする