CocosCreator知识库<三>关于CocosCreator中更换图片的三种方式_通用方式_"当前"尺寸_"原有"尺寸

CocosCreator知识库<三>关于CocosCreator中更换图片的三种方式<26/12/2017>

首先,准备两张图,建立resources文件夹并且将该两张图放入该文件夹下,拖其中一张图至Canvas下并且挂上我们唯一的脚本.

通用方法:(其实也就是方法二)

//*************<通用方法>**************//

this.getComponent(cc.Sprite).spriteFrame =this.birdSprite;

示例脚本:

cc.Class({
    extends: cc.Component,

    properties: {
        open: true,
        texturePut: 0,

        birdSprite: cc.SpriteFrame,
        cocosSprite: cc.SpriteFrame,
    },

    update: function (dt) { //每过0.3秒切换一张图片
        if (this.open) {
            this.open = false;
            if (this.texturePut == 0) {
                this.scheduleOnce(function () {
                    this.texturePut = 1;
                    this.open = true;


                    //*************<通用方法>**************//
                    this.getComponent(cc.Sprite).spriteFrame = this.birdSprite;

                }, 0.3);
            } else {
                this.scheduleOnce(function () {
                    this.texturePut = 0;
                    this.open = true;


                    //*************<通用方法>**************//
                    this.getComponent(cc.Sprite).spriteFrame = this.cocosSprite;


                }, 0.3);
            }
        }
    },
});

创建一个SpriteFrame的类型的

//************************************核心代码*************************************//

//*************<方法一>**************//

//路径一定要放在资源管理器的绝对路径下,不然会一直报错说在resources文件下找不到

var realUrl =cc.url.raw('resources/2.png');

var texture =cc.textureCache.addImage(realUrl);

this.getComponent(cc.Sprite).spriteFrame.setTexture(texture);

//*************<方法二>**************//

cc.loader.loadRes("2",cc.SpriteFrame,function (err,spriteFrame) {

self.node.getComponent(cc.Sprite).spriteFrame = spriteFrame;

});

<方法一>演示效果:("当前"尺寸,更换进来的图片会进行缩放)

奉上方法一唯一脚本:(这个脚本挂图上)

cc.Class({
    extends: cc.Component,

    properties: {
        open: true,
        texturePut: 0
    },

    update: function (dt) { //每过0.3秒切换一张图片
        if (this.open) {
            this.open = false;
            if (this.texturePut == 0) {
                this.scheduleOnce(function () {
                    this.texturePut = 1;
                    this.open = true;


                    //*************<方法一>**************//
                    //路径一定要放在资源管理器的绝对路径下,不然会一直报错说在resources文件下找不到(不知原因)
                    var realUrl = cc.url.raw('resources/2.png');
                    var texture = cc.textureCache.addImage(realUrl);
                    this.getComponent(cc.Sprite).spriteFrame.setTexture(texture);


                }, 0.3);
            } else {
                this.scheduleOnce(function () {
                    this.texturePut = 0;
                    this.open = true;


                    //*************<方法一>**************//
                    //路径一定要放在资源管理器的绝对路径下,不然会一直报错说在resources文件下找不到(不知原因)
                    var realUrl = cc.url.raw('resources/1.png');
                    var texture = cc.textureCache.addImage(realUrl);
                    this.getComponent(cc.Sprite).spriteFrame.setTexture(texture);


                }, 0.3);
            }
        }
    },
});

<方法二>演示效果:("原有"尺寸,按照原有尺寸替换,不进行缩放)

奉上方法二唯一脚本:(脚本挂图片上)

cc.Class({
    extends: cc.Component,

    properties: {
        open: true,
        texturePut: 0
    },

    update: function (dt) { //每过0.3秒切换一张图片
        if (this.open) {
            this.open = false;
            if (this.texturePut == 0) {
                this.scheduleOnce(function () {
                    this.texturePut = 1;
                    this.open = true;


                    //*************<方法二>**************//
                    // 加载 SpriteFrame
                    var self = this;
                    cc.loader.loadRes("2", cc.SpriteFrame, function (err, spriteFrame) { //这个方法
                        self.node.getComponent(cc.Sprite).spriteFrame = spriteFrame;
                    });


                }, 0.3);
            } else {
                this.scheduleOnce(function () {
                    this.texturePut = 0;
                    this.open = true;


                    //*************<方法二>**************//
                    // 加载 SpriteFrame
                    var self = this;
                    cc.loader.loadRes("1", cc.SpriteFrame, function (err, spriteFrame) {
                        self.node.getComponent(cc.Sprite).spriteFrame = spriteFrame;
                    });


                }, 0.3);
            }
        }
    },
});