モーリーのメモ

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

モーリーのメモ

Cocos Studio 2 - ListViewの使い方：Cocos2d-x v3.9（JavaScript）

Cocos Cocos Code IDE Cocos Studio2 JavaScript Mac

『ListView』は、複数のオブジェクトをスクロール付きのリストとして表示することが出来るオブジェクトです。

今回は、『ListView』を使って下図のようなステージ選択画面を作成しました。
f:id:mmorley:20160316173452p:plain:w200
『Cocos Studio 2』でオブジェクトの配置とプロパティの設定等を行い、『Cocos Code IDE』でイベントの実装等のコード等を書きます。

目次

使用環境

作成する内容

実装内容

  • 『ListView』で『ImageView』をステージ選択用のパネルとしてリスト表示する
  • パネルに、ビットマップフォントでステージの番号、難易度を表示する
  • パネルにNewの文字のアニメーションを表示する
  • タッチしたパネルのステージ番号を上部の『Label』に表示し、Newの表示を消す
  • 『ListView』のスクロール位置をトップに移動させるボタンを作成する

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

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

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

作業手順（Cocos Studio 2）

1.使用するデータを準備

  1. 下記のリンク先のページ内の『Raw』を右クリックして、『リンク先を別名で保存』をクリック
    https://github.com/githubmorley/blog-files/blob/master/160317/resources.zip
  2. ダウンロードした『resources.zip』をダブルクリックで解凍

『resources』フォルダには、下記のファイルが含まれています。

  • panel.png
  • new_0.png
  • new_1.png
  • new_2.png
  • new_3.png
  • new_4.png
  • fontCaption.fnt
  • fontCaption.png
  • fontStage.fng
  • fontStage.png
捕捉：『panel.png』の作成方法

下記の記事で、作成方法を説明しています。

捕捉：『new_0.png』〜『new_4.png』の作成方法

下記の記事で、作成方法を説明しています。

捕捉：『font~~.fnt』、『font~~.png』の作成方法

このファイルそのものを作成する方法ではありませんが、下記の記事で、作成するソフトとその使い方を説明しています。

2.Cocos Studio 2を起動

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

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

  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_ListView（任意の名前）
    • 『Project Path（プロジェクトの保存先）』：（任意のフォルダ）
    • 『Orientation（画面の向き）』：『縦向きの画面のアイコン』を選択
    • 『Engine Version（Cocos2d-xのバージョン）』：『cocos2d-x-3.9』を選択
    • 『Project Language（使用するプログラミング言語）』：『JavaScript』を選択
      f:id:mmorley:20160310105352p:plain:w400

4.データのインポート

  1. 画面左下の『Resources』ウインドウ内で右クリックし、『Import Resources...』をクリック
  2. 手順1で準備した全てのファイルを選択し、『Open』をクリック

5.スプライトシートの作成

  1. アプリケーションメニューの『File』-『New File...』をクリック
  2. 開いたウインドウで下記のように設定し、『New』をクリック
    • 『Type』：SpriteSheet
    • 『Name』：Plist
      f:id:mmorley:20160311115332p:plain:w400
  3. 『Resources』ウインドウで下記の画像を選択し、『Canvas（画面作成等の作業をするウインドウ）』の『Plist.csi』にドラッグ＆ドロップ
  • 『panel.png』
  • 『new_0.png』 〜 『new_4.png』の5枚

6.ListViewの配置

  1. 『Canvas』上部の『MainScene.csd』のタブをクリックし、『MainScene.csd』の編集に戻る
  2. 画面左上の『Objects』ウインドウの『Containers』の『Listview』を『Canvas』にドラッグ＆ドロップ
  3. 画面右の『Properties』ウインドウで『Listview』のプロパティを下記のように変更
    ＊書いていないパラメータは変更していません。
    グループプロパティ名値
    -NameListView
    Position & SizeAnchor PointX 0.5、Y 0.5
    PositionX 320、Y 480
    SizeX 500、Y 500
    FeatureClippingチェックを入れる
    Bounce Backチェックを入れる
    Child AlignmentAlign Horizontal Center
    Child Spacing30
    Color#000000

7.パネル用のImageViewを配置

  1. 『Objects』ウインドウの『Widgets』の『Image』を画面下部の『Animation』ウインドウの『ListView』上にドラッグ＆ドロップ
    f:id:mmorley:20160314224950p:plain:w200
  2. 『Properties』ウインドウで『Image』のプロパティを下記のように変更
    ＊書いていないパラメータは変更していません。
    ＊『Image Resource』を最初に登録して下さい。（9-Sliceが画像に合わせて調整されます。）

    グループプロパティ名値
    -NameImagePanel_0
    Position & SizeSizeX 480、Y 110
    GeneralTouchableチェックを入れる
    9-Slice9-Sliceチェックを入れる
    FeatureImage Resourcepanel.png（『Resources』ウインドウから
    ドラッグアンドドロップして登録）

8.ステージ番号表示用のBitmapLabelを配置

  1. 『Objects』ウインドウの『Widgets』の『BitmapLabel』を『Animation』ウインドウの『ImagePanel_0』上にドラッグ＆ドロップ
  2. 『Properties』ウインドウで『BitmapLabel』のプロパティを下記のように変更
    ＊書いていないパラメータは変更していません。
    グループプロパティ名値
    -NameBitmapFontLabelStage
    Position & SizePositionX 330、Y 55
    FeatureFont FilefontStage.fnt（『Resources』ウインドウから
    ドラッグ＆ドロップして登録）
    Textステージ：01

9.難易度表示用のBitmapLabelを配置

  1. 『Objects』ウインドウの『Widgets』の『BitmapLabel』を『Animation』ウインドウの『ImagePanel_0』上にドラッグ＆ドロップ
  2. 『Properties』ウインドウで『BitmapLabel』のプロパティを下記のように変更
    ＊書いていないパラメータは変更していません。
    グループプロパティ名値
    -NameBitmapFontLabelLevel
    Position & SizeAnchor PointX 0、Y 0
    PositionX 30、Y 22
    FeatureFont FilefontCaption.fnt（『Resources』ウインドウ
    からドラッグ＆ドロップして登録）
    Text難易度：★★★

作業後、『Animation』ウインドウは下図のようになります。
f:id:mmorley:20160314230035p:plain

10.パネルの複製

　パネルをコピーして全部で6ステージ分のパネルを作成します。

  1. 『Animation』ウインドウで『ImagePanel_0』を右クリックし、キーボードの『command + c』を押下してコピー
  2. キーボードの『command + v』を5回押下して、パネルを5つ複製
  3. 複製してできた『ImagePanel_0_0』〜『ImagePanel_0_4』の名前を『ImagePanel_1』〜『ImagePanel_5』に変更

作業後、『Animation』ウインドウは下図のようになります。
f:id:mmorley:20160314231757p:plain:w200

11.選択したステージ番号表示用のラベルを配置

  1. 『Objects』ウインドウの『Widgets』の『Label』を『Canvas』にドラッグ＆ドロップ
  2. 『Properties』ウインドウで『Label』のプロパティを下記のように変更
    ＊書いていないパラメータは変更していません。
    グループプロパティ名値
    -NameLabelStage
    Position & SizePositionX 320、Y 840
    FeatureTextステージ：01
    Font Style#000000、48

12.トップへ移動用ボタンを配置

  1. 『Objects』ウインドウの『Widgets』の『Button』を『Canvas』にドラッグ＆ドロップ
  2. 『Properties』ウインドウで『Button』のプロパティを下記のように変更
    ＊書いていないパラメータは変更していません。
    グループプロパティ名値
    -NameButtonTop
    Position & SizePositionX 320、Y 120
    SizeX 240、Y 80
    FeatureTextトップへ移動
    Font Style#000000、24

    『Canvas』は下図のようになります。
    f:id:mmorley:20160316151446p:plain:w200

13.NodeNew.csdの作成

　Newの文字のアニメーションを含んだノードを作成します。

  1. アプリケーションメニューの『File』-『New File...』をクリック
  2. 開いたウインドウで、下記のように設定し、『New』をクリック
    • 『Type』：Node
    • 『Name』：NodeNew
      f:id:mmorley:20160315111327p:plain:w400

14.アニメーションの作成

  1. 『Resources』ウインドウで、『new_0.png』〜『new_4.png』の5枚の画像をクリックして同時選択（キーボードの『command』を押しながら選択）して右クリックし、『Create SpriteSheet Animation...』をクリック
    f:id:mmorley:20160315114329p:plain:w300
  2. 開いたウインドウで下記のように設定し、『OK』をクリック
    • 『Start』：0
    • 『Spacing』：1
    • 『Append the first frame as end frame』：チェックを入れる
      f:id:mmorley:20160315141719p:plain:w250
  3. 『Animation』ウインドウで、『FPS』を10に設定
  4. 『Animation』ウインドウで、『+』ボタンをクリック
    f:id:mmorley:20160315152406p:plain:w250
  5. 開いたウインドウで下記のように設定し、『OK』をクリック
    • 『Name』：animation
    • 『Start Frame』：0
    • 『End Frame』：15
      f:id:mmorley:20160315152942p:plain:w250

15.保存

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

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

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

  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.『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",
    NodeNew_json : "res/NodeNew.json", // Newの文字のアニメーションのノードファイル
    Plist_plist : "res/Plist.plist", // スプライトシートのplistファイル
    Plist_png : "res/Plist.png" // スプライトシートの画像ファイル
};

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);  // レイヤーに追加
        
    	// ステージ番号、難易度、Newの表示
    	var listView = mainscene.node.getChildByName("ListView"); // ListViewを取得
    	var imagePanel = listView.getItems(); // パネルの配列を取得
    	for (var int = 0; int < imagePanel.length; int++) { // パネル数分ループ
    		// ステージ番号表示
    		var labelStage = imagePanel[int].getChildByName("BitmapFontLabelStage"); // ステージ番号表示用のLavelを取得
    		labelStage.setString("ステージ：" + ("0" + (int + 1)).slice(-2)); // ラベルにステージ番号を表示、slice(-2)：右から2文字切り出す

    		// 難易度表示
    		var labelStage = imagePanel[int].getChildByName("BitmapFontLabelLevel"); // 難易度用のLabelを取得
    		var strLevel = "難易度：★"; // 難易度の文字列を作成
        	var count = Math.floor(int / 2); // 2ステージごとに1カウントを増やす
        	for (var int2 = 0; int2 < count; int2++) { // カウント数分ループ
        		strLevel += "★"; // ★を追加
        	}
        	labelStage.setString(strLevel); // ラベルに表示
        
        	// Newのアニメーションを表示
        	var nodeNew = ccs.load(res.NodeNew_json); // NodeNewのJSONファイルを読み込む
        	nodeNew.node.runAction(nodeNew.action); // アニメーションを設定
        	nodeNew.action.play("animation", true); // アニメーションを再生
        	nodeNew.node.setPosition(115, 75); // 位置を設定
        	nodeNew.node.setTag(10); // タグを設定（後で取得するため）
        	imagePanel[int].addChild(nodeNew.node); // パネルに追加
        }

    	listView.addEventListener(function(list, type){ // ListViewのイベントを設定
    		switch (type) {
    		case ccui.ListView.ON_SELECTED_ITEM_START: // アイテムにタッチ開始時;
    			break;
    		case ccui.ListView.ON_SELECTED_ITEM_END: // アイテム選択時（タッチ後スクロールせずに手を離した場合）
    			labelStage.setString("ステージ：" + ("0" + (list.getCurSelectedIndex() + 1)).slice(-2)); // 選択したステージ番号を表示
    			var nodeNew = imagePanel[list.getCurSelectedIndex()].getChildByTag(10); // Newのオブジェクトを取得
    			nodeNew.setVisible(false); // Newを非表示にする
    			break;
    		}
    	}, this);
    	
    	var labelStage = mainscene.node.getChildByName("LabelStage"); // 現在のステージ数ラベルの取得
    	var buttonTop = mainscene.node.getChildByName("ButtonTop"); // トップへ戻るボタンを取得
    	buttonTop.addTouchEventListener(function(sender, type){ // ボタンイベントを設定
        	switch (type) {
        	case ccui.Widget.TOUCH_ENDED: // ボタンを離した時
        		listView.scrollToTop(0.5, true); // リストのトップにスクロールする（0.5秒、速度減衰有り）
        		break;
        	}
        }, this);
        return true;
    }
});

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

ListViewのメソッド

　メソッドの一部です。

『ListView. setDirection(スクロール方向)』
機能 ListViewの内部の表示位置を一番上にスクロールします。
引数 スクロール方向：次の定義済みの値を設定
ccui.ScrollView.DIR_VERTICAL：縦方向
ccui.ScrollView.DIR_HORIZONTAL：横方向
『ListView. setGrabity(項目の位置)』
機能 ListViewの内部の項目の位置（右寄せ等）を設定します。
引数 スクロール方向：次の定義済みの値を設定
ccui.ListView.GRAVITY_LEFT：左寄せ
ccui.ListView.GRAVITY_RIGHT：右寄せ
ccui.ListView.GRAVITY_CENTER_HORIZONTAL：中央寄せ
『ListView.jumpToTop()』
機能 ListViewの内部の表示位置を一番上に移動します。
同様にjumpToBottom ()、jumpToLeft ()、jumpToRight ()が有ります。
『ListView. scrollToTop(移動移動時間[秒], 速度の減衰の有無)』
機能 ListViewの内部の表示位置を一番上にスクロールします。
同様にscrollToBottom ()、scrollToLeft ()、scrollToRight ()が有ります。
引数1 移動時間[秒]：浮動小数点値
引数2 速度の減衰の有無：boolean値（true：減衰有り、false：減衰無し）

あとがき

　今回は、以前このブログで作成方法を紹介した画像を使用しました。
　Newの文字のアニメーションは、最初に下記の方法でやってみたのですが、表示がおかしくなるので諦めました。
mmorley.hatenablog.com