JavaScriptの連想配列の作り方と、CocosCreatorの画像読み込み修正版

8585 ワード
CocosCreator JavaScript JavaScript テキストリンク

こんばんは、やわらーです。
先日書いた画像の一括読み込みの記事ですが、どうやらスマホなどのスペックの低い端末では正常に動作しないことが判明しました。
読み込み順はフォルダ内の順番ではないようです。
今回はそれの修正です。

環境

windows10
Cocos Creator v1.9.0

連想配列へ要素の追加

読み込みがフォルダの順番通りにいかないのなら、ファイル名を取得して連想配列にするしかないじゃない！
というわけで、ファイル名の取得と連想配列の作り方です。

LoadResources.js
cc.Class({
    extends: cc.Component,

    properties: {
        imageData: null,
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this._loadImages();
    },

    // resourcesフォルダの読み込み
    _loadImages(){
        this.imageData = new Array();
        let self = this;
        cc.loader.loadResDir("Images", cc.SpriteFrame, function(err, assets){
            if(err){
                cc.error(err);
                return;    
            }
            for(let storage of assets){
                self.imageData[storage.name] = storage; // 名前をKeyに要素を追加
            }
        })
    },
});

読み込んだ画像ファイルの名前はnameで取得することができます。その名前をキーにし、配列に要素を追加していきます。

配列へのアクセス


画像ファイルは前回と同様にいらすとや様のものを使用しています。

SpriteChange.js
let LoadResources = require("LoadResources")

cc.Class({
    extends: cc.Component,

    properties: {
        loadResources: {
            default: null,
            type: LoadResources
        },
        sprite: {
            default: null,
            type: cc.Sprite
        },
        _timer: 3,
        _imageNumber: 0,

        _imageName: null,
    },

    onLoad(){
        this._imageName = ["image1", "image2", "image3"];
    },

    update (dt) {
        this._timer -= dt;
        if(this._timer < 0){
            this._timer = 3;
            this._imageNumber ++;
            if(this._imageNumber > 2){
                this._imageNumber = 0;
            }
            this.sprite.spriteFrame = 
                this.loadResources.imageData[this._imageName[this._imageNumber]];
        }

    },
});

imageName配列に画像の名前を入れ、それをKeyとして使用しています。連想配列にするとlengthで長さが取得できないようです。

結果は前回と同じなので割愛。
これで画像ファイルとファイル名の連想配列が作れました。

以上がJavaScriptの連想配列の作り方と、CocosCreatorの画像読み込み修正版です。
これで画像がフォルダ内の順番通りに読み込まれなくても正しい画像が取得できるようになりました。