LoginSignup
2
2

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-04-23

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

2018/05/02追記

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

環境

windows10
Cocos Creator v1.9.0

画像の読み込み、変更

1.CocosCreator側の準備

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

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

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秒ごとに自動的に画像が変わるようにしてみました。

bandicam 2018-04-23 22-51-29-481.jpg

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

実行確認

ここまで出来ましたら実際に確認してみます。
images.gif
ちゃんと3秒ごとに画像が切り替わっているかと思います。


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

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2