CocosCreator v1.9.0で画像の一括読み込みと、画像変更のやり方

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

こんばんは、やわらーです。
本日詰まった画像読み込みと、画像の変更に関して早速メモ的に書いていきます。

2018/05/02追記

画像の読み込みですが、正確にはフォルダ内の順番ではないようです。修正版の記事を書きましたので、合わせてお読みください。
JavaScriptの連想配列の作り方と、CocosCreatorの画像読み込み修正版

環境

windows10
Cocos Creator v1.9.0

画像の読み込み、変更

1.CocosCreator側の準備

CocosCreatorの画像はリソースフォルダから読み込まれます。なのでまずはリソースフォルダを作ります。Assetの+マークまたは右クリックでフォルダ作成、名前はresourcesにしてください。
今回はその下にImagesフォルダを作成しました。

また、画像はいらすとや様のものを使用しています。

2.スクリプト作成

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

    properties: {
        imageData: null,
    },

    // LIFE-CYCLE CALLBACKS:

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

    // resourcesフォルダの読み込み
    _loadImages(){
        let self = this;
        cc.loader.loadResDir("Images", cc.SpriteFrame, function(err, assets){
            if(err){
                cc.error(err);
                return;    
            }
            self.imageData = assets;
        })
    },
});

リソースフォルダから一括で読み込むにはcc.loader.loadResDir()を使います。
引数は
url:リソースフォルダから見た読み込みたいフォルダのディレクトリ
type:読み込むファイルのタイプ
CallbackFunction:コールバック関数
です。
これでresources/Imagesに入っている画像が読み込まれました。

3.画像変更

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,
    },

    update (dt) {
        this._timer -= dt; // タイマー減少
        if(this._timer < 0){
            this._timer = 3; // タイマーリセット
            this._imageNumber ++; // 画像切り替え
            // 配列の長さを超えたら番号をリセットする
            if(this._imageNumber > this.loadResources.imageData.length - 1){
                this._imageNumber = 0;
            }
            this.sprite.spriteFrame = this.loadResources.imageData[this._imageNumber]; // 画像切り替え
        }

    },
});

読み込まれた画像は配列に格納されています。
今回は3秒ごとに自動的に画像が変わるようにしてみました。

今回はCanvasノードにLoadResources.jsとSpriteChange.jsをAddComponentしその子にSpriteノードをつけています。CanvasノードのSpriteChangeにはそれぞれCanvasとSpriteを入れます。

実行確認

ここまで出来ましたら実際に確認してみます。

ちゃんと3秒ごとに画像が切り替わっているかと思います。

以上がCocosCreator v1.9での画像読み込みと切り替え方法です。
読みづらい部分や間違っている部分などがありましたらTwitter(@Yawara_Mireille)かここのコメントで教えていただけますととてもありがたいです。