浏览器上 Canvas 显示不正常, WEBGL 下加载一个已经释放了的资源报错

是这样的,一个简单的helloworld项目,设置了一个简单的纯色背景,结果Canvas显示不出来

预想效果

canvas效果

webGL效果

然后,我在浏览器的webGL模式下,重新加载一个已经释放过的spriteFrame,会报以下错误

并且是一个黑块

canvas模式和模拟器是正常的,代码如图

我在两个函数间切换调用,在加载一个资源的同时释放另一个资源,在模拟器和canvas下是正常的,在webGL下报错,然后canvas不知为啥又显示不出来背景图片

以下是demo

webGL.zip (531.0 KB)

所以我到底该怎么办?creator 1.3.3正式版和1.4.0 beta6 都是这样 @nantas @zilong @jare

自己顶,大神来帮忙看看,是我操作有问题吗?

因为你把 Texture 也跟着释放了。而你原来的 SpriteFrame 并没有释放,还指向旧的纹理。这个问题不单单只有 webgl 存在只不过是 canvas 模式下没有表现出来罢了。

额,谢谢指点,现在可以了,我以为改变spriteFrame的值那个资源就释放了呢,结果要先释放spriteFrame,建议加载和释放资源写个详细的文档吧,不然我这中小白完全不知道该怎么办:joy:

那canvas下背景无法显示是什么问题呢?

有范例嘛?我这边没问题啊

我上传了一个demo在一楼最下面

demo里释放了spriteFrame是可以了没问题,但是我实际项目里还有animationClip,我要想达到的目的是

比如我要换一个新的装备(装备是344张spriteFrame的atlas),我要把以前旧的装备的atlas和clip释放,那么我该怎么办呢?我用以下代码来操作还是会报错,会产生黑块

var clips = this.weapon.getComponent(cc.Animation)._clips
cc.loader.releaseAsset(this.weapon.getComponent(cc.Sprite).spriteFrame);
for (var key in clips) {
    if (clips.hasOwnProperty(key)) {
         var element = clips[key];
          cc.loader.releaseAsset(element);
     }
}
clips.splice(0, clips.length);
cc.loader.releaseRes("atlas/" + this._weapon);

我要怎么操作才能正确有效的释放以前的clips和旧的图集呢?释放是应该在新图集加载完成后释放呢还是加载前就可以释放呢?如果我不手动释放的话,引擎会不会自动释放呢?

releaseRes 传入第二个参数 cc.SpriteFrame 应该就不会有黑块了。

你现在的方法就可以,不过要注意你只是直接释放了资源本身,资源依赖的精灵帧或者纹理不会被释放。

资源不用时就能释放。引擎不会自动释放。

我改成了这样

var clips = this.weapon.getComponent(cc.Animation)._clips
cc.loader.releaseAsset(this.weapon.getComponent(cc.Sprite).spriteFrame);
for (var key in clips) {
    if (clips.hasOwnProperty(key)) {
         var element = clips[key];
          cc.loader.releaseAsset(element);
     }
}
clips.splice(0, clips.length);
cc.loader.releaseRes("atlas/" + this._weapon, cc.SpriteFrame);

依然是有黑块和报错

这里我最后不是不是释放了整个图集吗?难道clips里的精灵帧我需要逐帧释放?原谅我不懂这些底层的东西:joy:

黑块问题麻烦做一个小 demo 验证一下。
clips 里面的精灵帧,还有精灵帧用到的纹理,需要你主动释放。
如果你觉得这么做很麻烦,可以这样来递归释放所有依赖的资源。

var deps = cc.loader.getDependsRecursively(clip);
cc.loader.release(deps);

忘了说了,不是释放资源后产生的黑块,而是释放资源,删除所有clip之后,我又加载了另一张图集,设置了相应节点的spriteFrame,并且新创建了clip,然后播放动画就是黑块

嗯,应该是释放了错误的资源引起的。

马上,我正在做demo,等会儿麻烦你帮我看看:slightly_smiling:

背景在 Canvas 下无法显示的问题是因为你用了 SLICED 模式,由于原始图片是 2 * 2 的小图,如果用 SLICED 模式导致 0.5 * 0.5 个像素被扩充在 Canvas 中无法显示,只要将 Sprite 设置为 SIMPLE 模式就可以了

@jare老师@panda老师,demo来了,就是在衣服1和衣服2之间切换,在浏览器webgl模式下就会变成黑块,有空帮我看看,谢谢

132label.zip (2.2 MB)

ok,谢谢panda老师:grin:

我上面释放的代码如果没有最后一句释放图集的操作就不会出问题,有这句代码就会有问题

cc.loader.releaseRes("atlas/" + this._weapon, cc.SpriteFrame);

并且clips释放我照你说的改成这样

    for (var key in clips) {
        if (clips.hasOwnProperty(key)) {
            var element = clips[key];
            //cc.loader.releaseAsset(element);
            var deps = cc.loader.getDependsRecursively(element);
            cc.loader.release(deps);
            cc.log("key = " + key);
        }
    }

还是没有解决:joy:

自己顶一下:sunglasses:

我晚点帮你看下~~

改成 cc.loader.releaseRes("m12yf001", cc.SpriteAtlas) 就行啦,原因你猜~~~