モーリーのメモ

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

モーリーのメモ

値を保存する方法(Local Storage):Cocos2d-x v3.9(JavaScript)

 ユーザー設定値等、アプリを終了しても保持したい値を保存する方法です。
 Cocos2d-xのC++版の『CCUserDefault』の代替となるものを探していたのですが、JavaScript版では『cc.sys.localStorage』を使用するようです。

使用環境

  • 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)

作成する内容

実装内容

  • アプリ起動時に起動時間を保存し、次回起動時に『前回の起動時間』として表示
  • チェックボックスの値を変更時に保存し、次回起動時に値を読み込む
  • スライダーの値を変更時に保存し、次回起動時に値を読み込む
  • 『全て削除ボタン』により保存した値を全て消去する

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

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

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

3.前回起動時間表示用のLabelを配置

  1. 画面左上の『Objects』ウインドウの『Widgets』の『Label』を『Canvas』にドラッグ&ドロップ
  2. 『Properties』ウインドウで『Label』のプロパティを下記のように変更
    *書いていないパラメータは変更していません。
    グループプロパティ名
    -NameLabelTime
    Position & SizePositionX 320、Y 840
    FeatureText前回の起動時間:00:00:00
    H-AlienCenter
    Font Style#000000、36

3.CheckBoxを配置

  1. 画面左上の『Objects』ウインドウの『Widgets』の『CheckBox』を『Canvas』にドラッグ&ドロップ
  2. 『Properties』ウインドウで『CheckBox』のプロパティを下記のように変更
    *書いていないパラメータは変更していません。
    グループプロパティ名
    -NameCheckBox
    Position & SizePositionX 320、Y 760

4.Sliderを配置

  1. 画面左上の『Objects』ウインドウの『Widgets』の『Slider』を『Canvas』にドラッグ&ドロップ
  2. 『Properties』ウインドウで『Slider』のプロパティを下記のように変更
    *書いていないパラメータは変更していません。
    グループプロパティ名
    -NameSlider
    Position & SizePositionX 320、Y 680
    SizeX 180、Y 60

5.データ全削除用のButtonを配置

  1. 画面左上の『Objects』ウインドウの『Widgets』の『Button』を『Canvas』にドラッグ&ドロップ
  2. 『Properties』ウインドウで『Button』のプロパティを下記のように変更
    *書いていないパラメータは変更していません。
    グループプロパティ名
    -NameButtonClear
    Position & SizePositionX 320、Y 580
    FeatureText全削除
    Font Style##414146、24

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

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 labelTime = mainscene.node.getChildByName("LabelTime"); // LabelTimeを取得
		var checkBox = ccui.helper.seekWidgetByName(mainscene.node, "CheckBox"); // CheckBoxを取得
		var slider = ccui.helper.seekWidgetByName(mainscene.node, "Slider"); // Sliderを取得
		var buttonClear = mainscene.node.getChildByName("ButtonClear"); // ButtonClearを取得
		
		// 前回の起動時間の取得
		var date = cc.sys.localStorage.getItem("TIME"); // 前回の起動時間を取得
		if (date != null) { // 値が存在する場合
			labelTime.setString("前回の起動時間:" + date); // ラベルに表示
		} else { // 値がない場合
			labelTime.setString("前回の起動時間:初回起動"); // ラベルに表示
		}
		cc.sys.localStorage.setItem("TIME", (new Date()).toLocaleTimeString()); // 今回の起動時間を保存

		// CheckBox
		var check = cc.sys.localStorage.getItem("CHECK"); // 保存された値を取得
		if (check != null) { // 値が存在する場合
			checkBox.setSelected(check); // CheckBoxの値を設定
		} else { // 値がない場合
			checkBox.setSelected(false); // CheckBoxの値をfalseに設定
		}
		checkBox.addEventListener(function(sender, type){ // CheckBoxがイベントを受け取れるようにする
			switch (type) {
			case ccui.CheckBox.EVENT_SELECTED: // チェック状態になった場合
			case ccui.CheckBox.EVENT_UNSELECTED: // 非チェック状態になった場合
				cc.sys.localStorage.setItem("CHECK", String(checkBox.isSelected())); // CheckBox値を保存
				break;
			}
		}, this);

		// Slider
		var perSlider = cc.sys.localStorage.getItem("Slider"); // 保存された値を取得
		if (perSlider != null){
			slider.setPercent(perSlider); // Sliderの値を設定
		} else { // 値がない場合
			slider.setPercent(50); // 50に設定
		}
		slider.addEventListener(function(sender, type){ // Sliderがイベントを受け取れるようにする
			switch (type) {
			case ccui.Slider.EVENT_PERCENT_CHANGED: // Sliderの値が変更された場合
				cc.sys.localStorage.setItem("Slider", slider.getPercent()); // Sliderの値を保存
				break;
			}
		});

		// 全削除ボタン
		buttonClear.addTouchEventListener(function(sender, type){ // ボタンイベントを設定
			switch (type) {
			case ccui.Widget.TOUCH_ENDED: // ボタンを離した時
				//cc.sys.localStorage.removeItem("TIME"); // 前回の起動時間を削除
				cc.sys.localStorage.clear(); // 保存された値を全て削除
				labelTime.setString("前回の起動時間:初回起動"); // ラベルに表示
				checkBox.setSelected(false); // CheckBoxの値をfalseに設定
				slider.setPercent(50); // 50に設定
				break;
			}
		}, this);

		return true;
	}
});

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

使用した関数

『cc.sys.localStorage.setItem("キー", 値)』
機能 キーとして設定した文字列に関連付けて、値を保存します。
引数1 キー:文字列、任意の文字列を設定できます。
引数2 値:保存する値
『cc.sys.localStorage.getItem("キー")』
機能 キーに関連付けられた値を取得します。
引数 キー:文字列、保存時に設定した文字列を指定します。
『cc.sys.localStorage.removeItem("キー")』
機能 キーに関連付けられた値を削除します。
引数 キー:文字列、保存時に設定した文字列を指定します。
『cc.sys.localStorage.clear()』
機能 全ての値を削除します。

あとがき

 Mac上のシミュレータだけでなく、ブラウザ上、iOSシミュレータ上でも正しく動作しました。