高手帮帮忙,有没有办法读取图片不使用loader.load

Creator 2.x
#1

正规在js网页上读取图片并不是使用cc.loader.load,而是url(./xxxx)

例如在cocos内打入

loadingBG : HTMLElement;
onLoad () {
this.loadingBG = document.createElement(“div”);
this.loadingBG.style.backgroundColor = “#fafbd8”;
this.loadingBG.style.opacity = “1”;
this.loadingBG.style.position = “absolute”;
this.loadingBG.style.width = “0%”;
this.loadingBG.style.height = “0%”;
this.loadingBG.style.top = “0”;
this.loadingBG.style.left = “0”;
this.loadingBG.style.background = “#171717 url(./favicon.ico) no-repeat center”;
this.loadingBG.style.backgroundSize = “450px”;
document.body.appendChild(this.loadingBG);
}

则可以压一张大的cocos的logo在专案内当作loading条

loading完成时可以把这个HTMLElement给remove掉

问题:

有没有办法把这个url(./favicon.ico)转换成spriteframe?

(我想直接用这样的读取方式读取档案应该会比cc.loader.load的url还要快,毕竟是本地文件读取)

#2

有高手知道吗? 怎么把./url转成spriteframe

#3

我记得前端时间看源码好像texture2D有HTMLElement构建的方法，然后texture2D可以转spriteFrame，你要不去看下试试

1赞
#4

有了!!! 感謝，分享給各位試試

const { ccclass, property } = cc._decorator;

@ccclass

export default class NewClass extends cc.Component {

@property(cc.Sprite)

sprite: cc.Sprite;

loadingBG: HTMLElement;

onLoad() {

    // this.urlSetting();



    this.urlToSpriteframe()

    // this.sprite.spriteFrame = this.loadingBG.style.background;

}

urlToSpriteframe() {

    // date is for update img everytime if you need to change the img instant (for testing)

    var dataURL = "./favicon.ico" + "?t=" + Date.now();

    var img = new Image();

    var texture = new cc.Texture2D();

    img.src = dataURL;

    texture.initWithElement(img);

    texture.handleLoadedTexture();

    this.sprite.spriteFrame.setTexture(texture)

    cc.log("loadingComplete");

}

// urlSetting() {

//     this.loadingBG = document.createElement("div");

//     this.loadingBG.style.backgroundColor = "#fafbd8";

//     this.loadingBG.style.opacity = "1";

//     this.loadingBG.style.position = "absolute";

//     this.loadingBG.style.width = "0%";

//     this.loadingBG.style.height = "0%";

//     this.loadingBG.style.top = "0";

//     this.loadingBG.style.left = "0";

//     this.loadingBG.style.background = "#171717 url(./favicon.ico) no-repeat center";

//     this.loadingBG.style.backgroundSize = "450px";

//     document.body.appendChild(this.loadingBG);

// }

}

1赞
#5

我以前是做原生的，H5这块没怎么了解过，上次遇到个需求，http下载一个头像，然后在网页端canvas去裁剪成圆形，再生成spriteframe，结果没搞定，不知道是裁剪出问题了还是裁剪后转texture出问题了，就是展示不出来，只好放弃了换成mask去展示，性能上感觉要差一些，这块你这边有类似处理方案吗？

#6

texture剪裁我只在unity做过类似,那时是用两个同样大小图,像你的话一个是头像,
一个则是边框(png档,中间透明)
转成byte两个比对,以边框为基准去一个一个byte裁减头像(opacity)
,我的js基础很差,都是靠unity的经验用ts写,如果mask很吃效能,
也可以考虑用shader看看能不能做个假的mask效能也许会也会比mask较好

想顺便问问这个png可以读是很棒,但如果是spine这种要读json的有没有办法一样这样读取啊?

#7

好吧，最开始都考虑过，但是说shader增大了计算量而且必然会更改材质，更改材质的话也是会打断drawcall的，跟mask一样，所以难受了

#8

spine没试过，一般不是直接sp组件直接播了么。。。

#9

还是有远程的,这样就加个时间参数就可以热更新

@zzf_2025 大神有没有什么想法?

#web端本地读取spine

#10

该主题在最后一个回复创建后7天后自动关闭。不再允许新的回复。