『Cocosドキュメント』で、『Cocos Studio 2』によるシーンの作成やプロジェクトのパブリッシュ等に触れてきましたが、実際にコードを書くまでには至っていません。
そこで、個人的にCocosの環境を使っていけるか判断するためにも、まずは下記のことを試しておきたいと思います。
これができれば、Cocosの環境でiOSアプリを作成できる希望が持てそうです。
<<（2015/09/14 追記）：下記で生じたエラーについて、『『Cocos Framework』のバージョンを『v3.7.1』から『v3.7』に下げました - モーリーのメモ』で改善した点等を記載していますのでこちらも御覧ください。>>
目次
実行環境
- Mac OS X Yosemite Version 10.10.5
- Cocos Studio 2 Version 2.3.1.2
- Cocos Code IDE Version 1.2.0
- Xcode Version 6.4（6E35b）
- ブラウザ：Google Chrome Version 45.0.2454.85 (64-bit)
今回使用する『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』をクリック
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』の上部にある
『デバッグ配置』ボタンをクリック
2.『デバッグ構成』ウインドウの『ターゲットのプラットフォーム』で、『Mac OSX』を選択し、『デバッグ』をクリック
『iOSシミュレーター（『Cocoa Code IDE』から）』で実行
1.『Cocos Code IDE』の『デバッグ配置』ボタンをクリック
2.『デバッグ構成』ウインドウの『ターゲットのプラットフォーム』で、『iOSシミュレーター』を選択し、『デバッグ』をクリック
- こちらも先ほどと同様の青い画面が表示され、アプリが落ちる場合もありました。
- こちらは『Project Language』で『Lua』を選んだプロジェクトでも落ちました。
実行をふまえて修正（『Cocos Code IDE』でコード等）
『とりあえず実行』した際に、下記の点が気になったので修正したいと思います。
1.『Cocos Studio 2』でせっかく作ったシーンが表示されない
2.画面が縦になっていない
3.動きがないので、ちゃんと動いているのかわかりづらい
『Cocos Studio 2』で作成したシーンを表示
1.『Cocos Code IDE』の画面左の『JSプロジェクトExplorer』で『HelloCocos』-『src』にある『resource.js』をダブルクリックして開く
2.ソースコードの下記の部分を修正
var res = { HelloWorld_png : "res/HelloWorld.png", // MainScene_json : "res/MainScene.json" // 修正前 MainScene_json : "res/Scene1.json" // 修正後 };
3.『Cocos Code IDE』の上部にある
『すべて保管』ボタンをクリック
4.『ブラウザで起動』ボタンをクリックして確認
『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.『ブラウザで起動』ボタンをクリックして確認
動き（ボタンのイベント）を追加
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.『ブラウザで起動』ボタンをクリックして確認
『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』の
『Run』ボタンをクリック
『iOSシミュレータ』が起動しますが、アプリの起動に失敗しました。
あと画面が横で実行される模様。
再度修正
調べた結果、下記の点を修正しました。
『CodeIDESupport.h』の修正
1.『〜/Documents/CocosProjects/HelloCocos/frameworks/runtime-src/Classes/ide-support/CodeIDESupport.h』を右クリックし、『このアプリケーションで開く』-『テキストエディット』をクリックして開く
2.下記の部分を修正
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』に次の３つのファイルをそれぞれドラッグアンドドロップ
- 『LS07.png』を『Normal State』にドラッグアンドドロップ
- 『LS08.png』を『Pressed State』にドラッグアンドドロップ
- 『LS09.png』を『Disabled State』にドラッグアンドドロップ
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』にチェック
修正結果
『Xcode』の『Run』ボタンから起動しました。
まとめ
- 『Cocos Code IDE』でのアプリの実行で、『Mac OSX』と『iOSシミュレーター』上では起動せず、『ブラウザで起動』でのみ起動した。
- アプリの画面の向きは、『Cocos』でプロジェクトを最初に作るときに設定したほうが良い。
- 『Cocos Studio 2』の『レイヤー』を、コード（Cocos Code IDE）上で取り扱う方法がわからなかった。
- 『Cocos Code IDE』の『ブラウザで起動』での実行結果と、『Xcode』での実行結果が異なる場合があった。
- 『レイヤー』を使わないという条件つきだが、『Xcode』でアプリが実行できた。
- 『Cocos Code IDE』でのデバッグの際、コードの修正箇所がわかりづらい場合があった。
あとがき
わからないことだらけでした。少しずつ解決できたらと思います。
