モーリーのメモ

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

モーリーのメモ

Cocos Studio 2 - ProgressBar（LoadingBar）とSliderの使い方：Cocos2d-x v3.7（JavaScript）

Cocos Cocos Code IDE Cocos Studio2 JavaScript Mac

　『Cocos Studio 2』には画面を作成するために利用できるオブジェクトがいくつか用意されています。
　
　今回はその中の『ProgressBarオブジェクト』と『Sliderオブジェクト』を使用方法について調べました。
　
　『ProgressBarオブジェクト』は進捗状況が全体の何％であるか視覚的に表示するオブジェクトです。進捗状態に限らず、何かの割合をパーセント表示するために使用できます。『Cocos Studio 2』では『ProgressBar』という名前ですが、『Cocos API』では『LoadingBar』という名前です。
　
　『Sliderオブジェクト』は何かの割合を視覚的に表示するとともに、ユーザーがつまみをスライドさせて、その割合を設定することができるオブジェクトです。
　
　『Cocos Studio 2』で『ProgressBarオブジェクト』と『Sliderオブジェクト』の配置とプロパティの設定を行い、『Cocos Code IDE』でイベントを受け取るためのコードを書きます。

目次

作成する内容

　イベントを受け取る方法と、値の取得・設定方法を確認するために下記の内容を作成しました。

  • 画面に『ProgressBarオブジェクト』と『Sliderオブジェクト』を配置
  • 『Sliderオブジェクト』のつまみをスライドすると、『ProgressBarオブジェクト』も同じ値に変化する

『Cocos Studio 2』での作業

新規プロジェクトの作成

新規プロジェクトから作成します。

  1. 『Cocos Studio2』を起動
  2. アプリケーションメニューの『File』-『New Project...』をクリック
  3. 開いたウィンドウで『All』の『Cocos Project』を選択し、『Next』をクリック
  4. 次のように設定を行った後、『Finished』をクリック
    • 『Project Name（プロジェクト名）』：HelloCocos（任意のプロジェクト名）
    • 『Orientation（画面の向き）』：『縦向きの画面のアイコン』を選択
    • 『Engine Version（cocos2d-xのバージョン）』：『cocos2d-x-3.7』を選択
    • 『Project Language（使用するプログラミング言語）』：『JavaScript』を選択

『ProgressBarオブジェクト』と『Sliderオブジェクト』で使用する画像

　デフォルトで画像が設定されていますが、オリジナルの画像を設定することが出来ます。
　下記の画像を用意しました。『ProgressBarオブジェクト』と『Sliderオブジェクト』で画像を併用しています。
　画像を右クリックして、画像の右に書いた名前を付けて保存して下さい。

バー背景 f:id:mmorley:20151011093546p:plain:w200 progressbar_base.png
バー f:id:mmorley:20151011093602p:plain:w200 progressbar.png
スライダー：通常時 f:id:mmorley:20151011093614p:plain slider_normal.png
スライダー：タッチ時 f:id:mmorley:20151011093626p:plain slider_pressed.png
スライダー：使用不可時 f:id:mmorley:20151011093638p:plain slider_disabled.png

　『バー』の画像は、『バー背景』の画像より見た目が小さいですが、周囲に透明部分があり画像の大きさは『バー背景』と同じです。
　『スライダー：タッチ時』の画像は、タッチしたときに動きを付けるために他の状態のスライダーの画像より見た目を小さくしていますが、周囲に透明な部分があり、画像の大きさは他の背景の画像と同じにしてあります。
　オブジェクトの大きさに合わせて画像が引き伸ばされるので、見た目の大きさに差をつける場合は透明部分を設ける必要があります。

プロジェクトへの画像の追加

  1. 『Cocos Studio 2』の画面左下の『Resourcesウインドウ』内で右クリックし、『Import Resources...』をクリック
  2. 先ほど保存した５枚の画像を選択し、『Open』をクリック

スプライトシートの追加

インポートした画像をスプライトシートにまとめます。

  1. アプリケーションメニューの『File』-『New File...』をクリック
  2. 開いたウインドウで、下記のように設定し、『New』をクリック
    • 『Type』：SpriteSheet
    • 『Name』：Plist
  3. 『Resourcesウインドウ』でインポートした５枚の画像を選択し、『Canvas（画面作成等の作業をするウインドウ）』の『Plist.csi』にドラッグアンドドロップ

『Spriteオブジェクト』の配置とプロパティの設定

『ProgressBarオブジェクト』の背景として『Spriteオブジェクト』を使用します

  1. 『Canvas』上部の『MainScene.csd』のタブをクリック
    『MainScene.csd』の編集に戻ります。
  2. 『Cocos Studio 2』の画面左上の『Objectsウインドウ』の『Basic Objects』の『Spriteオブジェクト』を『Canvas』にドラッグアンドドロップ
  3. 画面右の『Propertiesウインドウ』で『Spriteオブジェクト』のプロパティを下記のように変更
    ＊書いていないパラメータは変更していません。
    • 『Name』：SpriteLoadingBarBase
    • 『Position & Size』-『Position』：X 180、Y 900
    • 『Feature』
      • 『Image Resource』：progressbar_base.png

　『Resourcesウインドウ』から画像ファイルをドラッグアンドドロップして登録します。

『ProgressBarオブジェクト』の配置とプロパティの設定

  1. 『Objectsウインドウ』の『Widgets』の『ProgressBarオブジェクト』を『Canvas』にドラッグアンドドロップ
  2. 『Propertiesウインドウ』で『ProgressBarオブジェクト』のプロパティを下記のように変更
    • 『Name』：ProgressBar_1
    • 『Position & Size』-『Position』：X 180、Y 900
    • 『Feature』
      • 『Background』：progressbar.png

『Sliderオブジェクト』の配置とプロパティの設定

  1. 『Objectsウインドウ』の『Widgets』の『Sliderオブジェクト』を『Canvas』にドラッグアンドドロップ
  2. 『Propertiesウインドウ』で『Sliderオブジェクト』のプロパティを下記のように変更
    • 『Name』：Slider_1
    • 『Position & Size』-『Position』：X 180、Y 840
    • 『Feature』
      • 『Background』-『Background』：progressbar_base.png
      • 『Background』-『Inner Progress Bar』：progressbar.png
      • 『Node Style』-『Normal』：slider_normal.png
      • 『Node Style』-『Pressed』：slider_pressed.png
      • 『Node Style』-『Disabled』：slider_disabled.png

　『Resourcesウインドウ』からそれぞれ画像ファイルをドラッグアンドドロップして登録します。
f:id:mmorley:20151011102808p:plain

プロジェクトの保存とパブリッシュ

  1. アプリケーションメニューの『File』-『Save All』をクリック
  2. アプリケーションメニューの『Project』-『Publish and Package...』をクリック
  3. 『Publish』- 『Publish Type』- 『Publish To Code IDE』をクリック
  4. 『OK』をクリック

作成したプロジェクトがパブリッシュされて、『Cocos Code IDE』が起動します。

『Cocos Code IDE』での作業

『resource.js』の編集

スプライトシートを登録します。
スプライトシートのファイルは、『res』フォルダ内の『Plist.png』と『Plist.plist』です。

  1. 『Cocos Code IDE』の画面左の『Explorer』で、『srcフォルダ』にある『resource.js』をダブルクリックして開く
  2. 『resource.js』に、下記のようにリソースファイルを登録
var res = {
    HelloWorld_png : "res/HelloWorld.png",
    MainScene_json : "res/MainScene.json",
    Plist_png : "res/Plist.png", // スプライトシートの画像ファイル
    Plist_plist : "res/Plist.plist" // スプライトシートのplistファイル
};

『app.js』の編集

『HelloWorldLayer』に、下記のようにコードを書き加えます。

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);
      
        var progressBar = ccui.helper.seekWidgetByName(mainscene.node, "ProgressBar_1") // ProgressBar_1を取得
        var perProgressBar = progressBar.getPercent(); // ProgressBar_1の値を取得
        
        var slider = ccui.helper.seekWidgetByName(mainscene.node, "Slider_1"); // Slider_1を取得
        slider.setPercent(perProgressBar); // ProgressBar_1の値をSlider_1に設定
        //slider.setEnabled(false); // Slider_1に使用不可に設定
        //slider.setTouchEnabled(false); // Slider_1にタッチ不可に設定
        //slider.setBright(false); // Slider_1に使用不可表示にする
        
        slider.addEventListener(function(sender, type){ // Slider_1がイベントを受け取れるようにする
        	switch (type) {
        	case ccui.Slider.EVENT_PERCENT_CHANGED: // Slider_1の値が変更された場合
        		var perSlider = slider.getPercent(); // Slider_1の値を取得
        		progressBar.setPercent(perSlider); // ProgressBar_1の値を変更
        		break;
        	}
        });
        
        return true;
    }
});

『ProgressBarオブジェクト』のメソッド

『progressBar.getPercent()』

戻り値で、『ProgressBar』の値をNumber値で返します。

『progressBar.setPercent(Number値)』

『ProgressBar』の値をNumber値で設定します。

『Sliderオブジェクト』のメソッド

『Slider.getPercent()』

戻り値で、『Slider』の値をNumber値で返します。

『Slider.setPercent(Number値)』

『Slider』の値をNumber値で設定します。

『Slider.setEnabled(boolean値)』

『Slider』の使用可否をboolean値で設定します。
（true：使用可能、false：使用不可）

『Slider.setTouchEnabled(boolean値)』

『Slider』のタッチ可否をboolean値で設定します。
（true：タッチ可能、false：タッチ不可）

『Slider.setBright(boolean値)』

『Slider』の使用可否状態の表示をboolean値で設定します。
（true：通常時表示、false：使用不可時表示）

『Sliderオブジェクト』使用不可の設定について

　使用不可にするには、『setEnabled(false)』もしくは『setTouchEnabled(false)』で設定しますが、見た目は通常時のままです。
　見た目を使用不可時の表示にするには、『setBright(false)』で設定します。
　
以上です。

あとがき

　『ProgressBar』は、右左どちらを0%にするか『Cocos Studio 2』の『Propertiesウインドウ』の『Features』-『Progress Type』で変更できます。
　向きを変えるのって、対戦格闘の体力ゲージとかでしょうか。