モーリーのメモ

アプリ開発等（プログラミング、CG作成）、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

シーンごとの『.jsファイル』の追加

Cocos Cocos Code IDE Cocos Studio2 Mac

　『Cocos Studio2』で２つの画面を作成し、『Cocos Code IDE』でシーンごとに『.jsファイル』を作成します。
　コードではなく、『Cocos Studio2』によってシーンに組み込んだレイヤー上にあるボタンの扱い方も記載しています。

目次

開発環境

  • Mac OS X Yosemite Version 10.10.5
  • Cocos Studio 2 Version 2.3.1.1
  • Cocos Code IDE Version 1.2.0
  • Cocos Framework Version 3.7
  • ブラウザ：Google Chrome Version 45.0.2454.85 (64-bit)

『Cocos Studio 2』での画面作成

　画面の作成方法については、こちらも御覧ください。
シーンとUI：Cocosドキュメント - モーリーのメモ

シーンとUIの追加

ファイル構成

　下記のファイルを作成しました。
・『LevelSelection』：『LevelSelection』デモからインポートしたリソースフォルダ
・『Layer.csd』：レイヤー、新規作成
・『MainScene.csd』：シーン、プロジェクト作成時に作られたもの
・『TitleScene.csd』：レイヤー、新規作成
　最終的に『Cocos Studio 2』の『Resources』パネルは、下図のようになります。
使用しないファイルは消しています。
f:id:mmorley:20150915145627p:plain

『TitleScene.csd』の構成

　UI（オブジェクトとウィジェット）は下図のように配置しました。
　各UIには下図左のように名前をつけています。
　『Button』と『Label』のテキストは、それぞれの『Properties』-『Feature』で設定します。
f:id:mmorley:20150915151822p:plain

『Layer.csd』の構成

　『Label』と『Button』だけを配置しています。
　後で『MainScene.csd』に組み込みます。
f:id:mmorley:20150915152110p:plain

『MainScene.csd』の構成

　背景の『Sprite』を配置した後、『Layer.csd』をドラッグアンドドロップして組み込んでいます。『ProjectNode_1』がレイヤ（『Layer.csd』）です。
f:id:mmorley:20150915153341p:plain
『SpriteBackground』と『ProjectNode_1』の階層を上図左のように必ず同じにして下さい。階層は『CocosStudio 2』の画面下部の『Animation』パネルで変更できます。
f:id:mmorley:20150915154003p:plain

パブリッシュ

　画面が作成できたら、下記の操作をして『Cocos Code IDE』にパブリッシュします。

  1. アプリケーションメニューの『Project』-『Publish and Package...』をクリック
  2. 『Publish to Code IDE』を選択し、『OK』をクリック

『Cocos Code IDE』でコードの編集

シーンごとに『.jsファイル』を追加

下記の操作を行い、シーンごとの『.jsファイル』を追加します。

  1. 『Cocos Code IDE』の画面左の『JSプロジェクトExplorer』で『src』を右クリックし、『New』-『JavaScript』ファイルをクリック
  2. 『ファイル名』を入力し、『終了』をクリック

　作成後、『src』フォルダは下記のようになります。
　最初にある『app.js』を削除していますが、『app.js』の中身は『TitleScene.js』等の『シーンの.jsファイル』のひな形として利用出来ます。
f:id:mmorley:20150915155351p:plain

『project.json』の修正

  1. 『JSプロジェクトExplorer』で『project.json』を右クリックし、『Open With』-『テキストエディタ』をクリック
    次回に開くときは、ダブルクリックでかまいません。デフォルトの『JSON Editor』で開くとエラーが起きます。（私の環境だけかもしれませんが。）
  2. コードの下記の部分に、追加した『.jsファイル』を加えます。

・修正前

    "jsList" : [
        "src/resource.js",
        "src/MainScene.js"
    ]

・修正後

    "jsList" : [
        "src/resource.js",
        "src/TitleScene.js",
        "src/MainScene.js"
    ]

『resource.js』の編集

　コードの下記の部分に、追加した『.jsonファイル』を加えます。
『.jsonファイル』は、『.csdファイル（シーンのファイル）』と対になっています。
・修正前

var res = {
    HelloWorld_png : "res/HelloWorld.png",
    MainScene_json : "res/MainScene.json"
};

・修正後

var res = {
    MainScene_json : "res/MainScene.json",
    TitleScene_json : "res/TitleScene.json"
};

『TitleScene.js』の編集

　下記のように作成します。

var TitleLayer = 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.TitleScene_json);
		this.addChild(mainscene.node);

		// ボタンを取得
		var buttonToMain = ccui.helper.seekWidgetByName(mainscene.node, "ButtonToMain");
		
		// ボタンにタッチイベントを追加
		buttonToMain.addTouchEventListener(this.buttonToMainTouchEvent, this);
	
		return true;
	},
	
	buttonToMainTouchEvent:function(sender, type){
		switch (type) {
		case ccui.Widget.TOUCH_BEGAN: // ボタンにタッチした時
			break;

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

		case ccui.Widget.TOUCH_ENDED: // ボタンを離した時
			// メイン画面へ移動
			cc.director.runScene(new MainScene());
			break;

		case ccui.Widget.TOUCH_CANCELED: // キャンセルした時
			break;
		}
	}
});

var TitleScene = cc.Scene.extend({
	onEnter:function () {
		this._super();
		var layer = new TitleLayer();
		this.addChild(layer);
	}
});

『MainScene.js』の編集

　下記のように作成します。

var MainLayer = 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);

		// レイヤーの取得
		var layer = mainscene.node.getChildByName("ProjectNode_1");

		// ボタンを取得
		var buttonToTitle = ccui.helper.seekWidgetByName(layer, "ButtonToTitle");

		// ボタンにタッチイベントを追加
		buttonToTitle.addTouchEventListener(this.buttonToTitle, this);

		return;
	}
});

//ButtonToTitleのタッチイベント
MainLayer.prototype.buttonToTitle = function(sender, type){
	switch (type) {
	case ccui.Widget.TOUCH_BEGAN: // ボタンにタッチした時
		break;

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

	case ccui.Widget.TOUCH_ENDED: // ボタンを離した時
		// タイトル画面へ移動
		cc.director.runScene(new TitleScene());
		break;

	case ccui.Widget.TOUCH_CANCELED: // キャンセルした時
		break;
	}
}

var MainScene = cc.Scene.extend({
	onEnter:function () {
		this._super();
		var layer = new MainLayer();
		this.addChild(layer);
	}
});

『main.js』の編集

　『main.js』は元からあるファイルです。
　下記の部分（ファイルの一番下のあたり）を修正します。
　アプリの起動時に読み込むシーンを変更します。

// cc.director.runScene(new HelloWorldScene()); // 修正前
cc.director.runScene(new TitleScene()); // 修正後

レイヤー上のボタンの扱い方

　『Cocos Studio 2』で、シーンに組み込んだレイヤー上にあるボタンを扱う方法に、手こずったのでまとめます。

取得方法

　ボタンは下記の手順で取得します。

  1. 『ccs.load("res/MainScene.json");』で、シーンを取得
  2. 『var layer = mainscene.node.getChildByName("ProjectNode_1");』で、シーンからレイヤーを取得。
    "ProjectNode_1"は　『MainScene.csd』でレイヤーに付けた（付けられた）名前です。
  3. 『var buttonToTitle = ccui.helper.seekWidgetByName(layer, "ButtonToTitle");』で、レイヤーからボタンを取得。
タッチイベント関数の書き方の違いについて
  • 『TitleScene.csd』の『ButtonToMain』ボタン
    （シーン上に直接配置したボタン）の場合
    • タッチイベントの関数をオブジェクトリテラルの形式で記述しています。
      サンプルコード等で何回か見かけた形で、正常に動作しました。
  • 『MainScene.csd』の『ButtonToTitle』ボタン
    （シーンに組み込んだレイヤー上に配置したボタン）の場合
    • タッチイベントの関数をプロトタイプチェーンを利用して記述しています。
      こちらは、オブジェクトリテラルの形式で記述するとボタンのイベントがつかめませんでした。

　関数の記述方法については『関数の宣言：JavaScript - モーリーのメモ』も御覧ください。

リソースを『resource.js』に書かなかった場合の挙動

　リソースを『resource.js』に書くと『main.js』で先読みされるようになっています。
　『resource.js』に書かずに、『var mainscene = ccs.load("res/TitleScene.json");』のようにベタ書きした場合、『デバッグ実行（Mac OSX上）』ではシーンが表示されていたのに、『ブラウザ起動』と『HTML5パッケージ』ではシーンが表示されないという現象が起きました。

シーンの入れ替え（replaceScene）について

　シーンを入れ替える時に、サンプルコードではよく『cc.director.replaceScene(scene)』が使われていますが、これも『ブラウザ起動』と『HTML5パッケージ』、つまり『Cocos2d-JS』では使えません。しかし、『デバッグ実行（Mac OSX上）』では動きます。
　両方で動くためには、『cc.director.runScene(scene)』を使う必要があります。『Cocos2d-JS』では画面の入れ替えも『cc.director.runScene(scene)』で良いそうです。

今回作成したもの

　『タイトル画面』と『メイン画面』がボタンをタッチするごとに入れ替わります。
　画面の違いはキャプションしかありませんが；
http://githubmorley.github.io/cocosprojects-pages/hellococos02/
　
以上です。

あとがき

　『Cocosを試してみました。 - モーリーのメモ』で失敗していた『シーンに組み込んだレイヤー上にあるボタンの操作』がやっとできました。『Cocosキュメント』の『シーンとUI』でさらっと作成しているのですが、コードを書くとなると難しかったです。
　また、『Cocos Code IDE』の『デバッグ実行（Mac OSX上）』では動いていたのに、いざ『ブラウザ』で実行すると動かないということがありました。『JavaScript』で動いているのと『変換』されて動いているのとの違いでしょうか。両方で動くようにするには気をつけないといけないですね。