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

モーリーのメモ

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

Cocos Studio 2 - ListViewの使い方:Cocos2d-x v3.9(JavaScript)

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

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

使用環境

  • 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

作成する内容

実装内容

  • 『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
捕捉:『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