コルダが観たり聴いたり遊んだり創ったり

制作について考えたり、ゲーム・アニメ・書籍・映画等の感想。気ままブログです。こんてんつぶそく。

【Cocos Creator】ローカルストレージへの保存と読込

Cocos Creatorに関するブログなのに、Cocos Creatorの記事が1つも無い!

ということで、たった今実装したこと、データの保存と読込について。

■どの関数を使えばいいの?

/*--------------------------------------------------------------------
    セーブ  /  ロード  /  全削除
--------------------------------------------------------------------*/
    saveData: function(key, value) {
        cc.sys.localStorage.setItem(key, value);
    },
    
    loadData: function(key) {
        return cc.sys.localStorage.getItem(key);
    },

    removeAllData: function() {
        cc.sys.localStorage.clear();
    },

    foo: function() {
        // 保存
        this.saveData("player_level", 3);

        // 読込
        var a = this.loadData("player_level");
        if (a !== null) this.a = a;

        // 全削除
        this.removeAllData();
    },

cc.sys.localStorage.setItem(key, value) で保存

cc.sys.localStorage.getItem(key) で読込

cc.sys.localStorage.clear() で全削除です。

ただし、getItem(key)で指定したkeyの値が無かった場合、nullが返されますので、null判定の必要があります。


2016/05/09時点では、APIリファレンスには、cc.sysにlocalStorageの記述はありますが、setItemやgetItemの記述は確認できませんでした。。。
cocos2d-jsではこの方法で保存&読込している人が多いようですし、パッとみた感じ他に方法も無いので、これで良いと思います。


■私がハマったところ

ある数値の変数を0として保存して、すぐに読み込んで、その変数に30加算すると、「030」となりました。

上記の方法で保存&読込は可能ですが、
setItemで保存した値をgetItemで読み込んだ時

数値型だったものが、文字列型になっているようです。

私はプログラミングレベルも低く、javascriptに触り始めて1ヶ月経っていないのであまりわかりませんが、
文字列としてシリアライズしていて、かつ変数がvar型というjavascriptの仕様上、しかたないことなのでしょうか??

とにかく、読み込んだ時に、元の型に変換してやる必要があります。

●文字列 to 数値

Number(str) で変換できます。
    // 読込
    var a = this.loadData("player_level");
    if (a !== null) this.a = Number(a); // 数値に変換

■まとめ

これで問題なく元の変数と変わりない変数(Number)が取得できました。

ちなみに私は、上記のsaveData()とloadData()を、CanvasノードのプロパティのGameControllerスクリプトに記述しておいて
他のノードから呼出して使っています。

    loadPlayerData: function() {
        /* nullだった場合、何もしない(=プロパティのデフォルト値になる) */
        /* セーブ時に文字列化されてしまっているので、値化する必要がある*/
        
        // レベル
        var level = this.gameController.loadData("player_level");
        if (level !== null)  this.level = Number(level);
        // 経験値
        var exp = this.gameController.loadData("player_exp");
        if (exp !== null)  this.exp = Number(exp);
        // HP
        var maxHP = this.gameController.loadData("player_maxHP");
        if (maxHP !== null)  this.maxHP = Number(maxHP);
        // 攻撃力
        var atacckPower = this.gameController.loadData("player_attack");
        if (atacckPower !== null)  this.atacckPower = Number(atacckPower);
        // 防御力
        var defensePower = this.gameController.loadData("player_defense");
        if (defensePower !== null)  this.defensePower = Number(defensePower);
    },

そのうち、TiledMapについて書きたいのですが、ちょっと長くなりそうですねー