モーリーのメモ

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

モーリーのメモ

JSONファイルの読み込み:Cocos2d-x v3.9(JavaScript)

JSON形式のデータファイルを読み込んで、データを使用する方法です。
読み込んだデータが連想配列に変換されるので、簡単に利用できます。

使用環境

私が使用している環境です。

  • OS:Mac OS X El Capitan Version 10.11.3
  • Cocos2d-x Version 3.9(Javascript
  • Cocos Studio 2 Version 2.3.3
  • Cocos Code IDE Version Version 1.2.0
  • Xcode Version 7.2.1
  • ブラウザ:Google Chrome Version 49.0.2623.87 (64-bit)

作成する内容

実装内容

  • JSONファイルから月ごとの時候の挨拶を読み込む
  • ListViewに読み込んだ月を表示
  • ListViewで選択された月の時候の挨拶をLabelに表示

作成するプログラムのデモ

 下記のリンクから動作を確認できます。

 デモは、『Cocos Studio 2』で『HTML5』パッケージを作成して『GitHub Page』にアップしたものです。
  アップする方法は、下記の記事を参考にして下さい。

作業手順(Cocos Studio 2)

1.Cocos Studio 2を起動

  1. 『/Applications/Cocos/Cocos Studio 2』を起動

2.新規プロジェクトを作成

  1. アプリケーションメニューの『File』-『New Project...』をクリック
    f:id:mmorley:20160309120815p:plain:w300
  2. 開いたウィンドウで『All』の『Cocos Project』を選択し、『Next』をクリック
    f:id:mmorley:20160309171301p:plain:w400
  3. 次のように設定を行った後、『Finished』をクリック
    • 『Project Name(プロジェクト名)』:HelloCocos_JSON(任意の名前)
    • 『Project Path(プロジェクトの保存先)』:(任意のフォルダ)
    • 『Orientation(画面の向き)』:『縦向きの画面のアイコン』を選択
    • 『Engine Version(Cocos2d-xのバージョン)』:『cocos2d-x-3.9』を選択
    • 『Project Language(使用するプログラミング言語)』:『JavaScript』を選択
      f:id:mmorley:20160323235348p:plain:w400

3.時候の挨拶表示用のLabelを配置

  1. 画面左上の『Objects』ウインドウの『Widgets』の『Label』を『Canvas』にドラッグ&ドロップ
  2. 『Properties』ウインドウで『Label』のプロパティを下記のように変更
    *書いていないパラメータは変更していません。
    グループプロパティ名
    -NameLabel
    Position & SizePositionX 320、Y 840
    SizsX 500、Y 30
    FeatureCustom Sizeチェックを入れる
    Text時候の挨拶
    V-AlienMiddle Align
    Font Style#000000、22

3.ListViewを配置

  1. 画面左上の『Objects』ウインドウの『Containers』の『ListView』を『Canvas』にドラッグ&ドロップ
  2. 『Properties』ウインドウで『ListView』のプロパティを下記のように変更
    *書いていないパラメータは変更していません。
    グループプロパティ名
    -NameListView
    Position & SizeAnchor PointX 0.5、Y 0.5
    PositionX 320、Y 480
    SizeX 400、Y 500
    FeatureClippingチェックを入れる

6.保存

これまでの作業を保存します。

  1. アプリケーションメニューの『File』-『Save All』をクリック

7.プロジェクトのパブリッシュ

  1. アプリケーションメニューの『Project』-『Publish and Package...』をクリック
  2. 開いたウインドウで下記のように設定し、『OK』をクリック
    • 『Publish』の『Publish Type』の『Publish to Code IDE』を選択
      f:id:mmorley:20160315180529p:plain:w300

『Cocos Code IDE』が起動し、プロジェクトが読み込まれます。

作業手順(Cocos Code IDE

1.JSONデータを作成

JSONデータは、下記のサイトでCSVデータを変換して作成しました。

month,word
1月,新春を寿ぎ(ことほぎ)
2月,余寒厳しき折柄(おりから)
3月,春寒料峭(しゅんかんりょうしょう)のみぎり
4月,うららかな好季節を迎え
5月,青葉若葉の好季節
6月,若葉青葉の候(こう)
7月,三伏大暑の候(さんぷくたいしょのこう)
8月,残暑厳しき折
9月,新秋快適の候(こう)
10月,秋涼爽快の候(こう)
11月,秋気いよいよ深く
12月,寒気厳しき折から
[
{ "month": "1月",  "word": "新春を寿ぎ(ことほぎ)"}, 
{ "month": "2月",  "word": "余寒厳しき折柄(おりから)"}, 
{ "month": "3月",  "word": "春寒料峭(しゅんかんりょうしょう)のみぎり"}, 
{ "month": "4月",  "word": "うららかな好季節を迎え"}, 
{ "month": "5月",  "word": "青葉若葉の好季節"}, 
{ "month": "6月",  "word": "若葉青葉の候(こう)"}, 
{ "month": "7月",  "word": "三伏大暑の候(さんぷくたいしょのこう)"}, 
{ "month": "8月",  "word": "残暑厳しき折"}, 
{ "month": "9月",  "word": "新秋快適の候(こう)"}, 
{ "month": "10月",  "word": "秋涼爽快の候(こう)"}, 
{ "month": "11月",  "word": "秋気いよいよ深く"}, 
{ "month": "12月",  "word": "寒気厳しき折から"}
]

2.JSONファイルの作成

  1. 『Cocos Code IDE』の画面左の『Explorer』で『res』フォルダを右クリックし、『New』-『ファイル』をクリック
  2. 開いたウインドウで、『ファイル名』に『Data.json』を入力し、『終了』ボタンをクリック
  3. 『res』フォルダに追加された『Data.json』をダブルクリックして開く
  4. 上記のJSONデータを『Data.json』に貼り付ける

3.『resource.js』にリソースファイルを登録

  1. 『Cocos Code IDE』の『Explorer』で、『src』フォルダにある『resource.js』をダブルクリックして開く
  2. 『resource.js』に、下記のようにリソースファイルを登録
var res = {
    HelloWorld_png : "res/HelloWorld.png",
    MainScene_json : "res/MainScene.json",
    Data_json : "res/Data.json" // 時候の挨拶のJSONファイル
};

2.『app.js』の編集

  1. 『Cocos Code IDE』の『Explorer』で、『srcフォルダ』にある『app.js』をダブルクリックして開く
  2. 『app.js』の『HelloWorldLayer』を下記のように編集します。
var HelloWorldLayer = cc.Layer.extend({ // cc.Layerを継承
	ctor:function () { // コンストラクタ
		this._super();  // 親クラスのメソッドを継承
		var mainscene = ccs.load(res.MainScene_json); // MainSceneのJSONファイルを読み込む
		this.addChild(mainscene.node);  // レイヤーに追加
		
		var labelWord = mainscene.node.getChildByName("Label"); // Labelを取得
		var listView = mainscene.node.getChildByName("ListView"); // ListViewを取得
		listView.setBounceEnabled(true); // スクロールの端で跳ね返るように設定
		listView.setItemsMargin(20); // リストの項目の間隔を設定
		
        cc.loader.loadJson(res.Data_json, function(err, data){ // JSONファイルからデータを読み込む
        	if (!err) { // エラーがない場合
        		var label = new ccui.Text(); // ラベルを作成
        		label.setFontSize(28); // フォントサイズを設定
        		//label.setTextColor(cc.color(0, 0, 0, 255)); // フォントの色を黒に設定
        		label.setTouchEnabled(true); // リストで選択可能にする
        		listView.setItemModel(label); // ラベルをリストの項目用のオブジェクトとして設定
        		for (var int = 0; int < data.length; int++) { // データの数だけループ
        			listView.insertDefaultItem(int); // int番目(0始まり)にデフォルトの項目を挿入
        			listView.getItem(int).setString(data[int].month); // 挿入したラベルにデータを表示
        		}
        		listView.addEventListener(function(list, type){ // ListViewのイベントを設定
        			switch (type) {
        			case ccui.ListView.ON_SELECTED_ITEM_START: // アイテムにタッチ開始時;
        				break;
        			case ccui.ListView.ON_SELECTED_ITEM_END: // アイテム選択時(タッチ後スクロールせずに手を離した場合)
        				labelWord.setString(data[list.getCurSelectedIndex()].word); // 選択した月のワードを表示
        				break;
        			}
        		}, this);
        	}
        });
        return true;
    }
});

 
以上で、作成作業は完了です。
実行して動作を確認してください。

使用した関数

ListViewのメソッド

『ListView.setBounceEnabled(バウンス機能の有無)』
機能 キーとして設定した文字列に関連付けて、値を保存します。
引数 バウンス機能の有無:boolean値(true:有り、false:無し)
『ListView.setItemsMargin(項目の間隔)』
機能 リストの項目の間隔を設定します。
引数 項目の間隔:Number値
『ListView.setItemModel(項目にするオブジェクト)』
機能 リストの項目用のデフォルトのオブジェクトを設定します。
引数 項目にするオブジェクト:Widgetクラスをオブジェクト
『ListView.insertDefaultItem(リストのインデックス)』
機能 インデックスの場所にsetItemModelでしたオブジェクトのクローンを挿入します。
引数 リストのインデックス:Number値

あとがき

 前回は、ListViewの設定を『Cocos Studio 2』で行ったので、今回はできるだけコード上で行おうと思ったのですが、リストからはみ出した項目を表示しない設定が上手く動きませんでした。