Creator3D:入门一定要会的几种资源加载

前言

今天菜鸟整理了一些Creator3D最常见的资源加载方面的东西和大家分享一下,希望对大家有所帮助,

正文

菜鸟今天写的主要是项目中常见的动态加载图片显示和json读取。

在Creator3D中进行动态加载和Cocos Creator中一样,首先需要确保动态加载的资源应该存放在根目录assets 下的resources文件夹中,当然resources这个文件夹本身是不存在的,需要大家自己手动去创建。

1. 加载Json文件

  • 首先咱们来加载本地resources下的test.json文件
  • 先看一下json读取成功后显示的内容

    直接上代码:
loader.loadRes("test", JsonAsset, (err, jsonRes) => {
  ....         
});

在这里咱们重点说明一下加载成功后的格式问题:

  • 加载成功后的数据格式是JsonAsset
  • 最终的json内容存放在JsonAsset 下的json属性下

2. 加载spriteFrame和texture

在项目中图片资源最常见的格式就是spriteFrame和texture,

在Creator3D中两种格式的加载用的是同一个方法,

  loader.loadRes("gzh_s/spriteFrame", SpriteFrame, (err: any, spriteFrame: SpriteFrame) => {
      ....
        });
// 加载 texture
        loader.loadRes("gzh_t/texture", Texture2D, (err: any, texture: Texture2D) => {
           ....
        });

在加载过程中有几点需要注意:

  • loader.loadRes中第二个参数应该与属性面板中图片的Type相对应
  • 第一个参数:资源路径中gzh_t和gzh是图片的名字,而最后边的”/spriteFrame”和”/texture”表示的是加载图片资源的类型,是必须加的

2. base64格式图片显示

除了常见的png和jpg,还有一种常见的图片格式base64,他是将图片转换为字符的形式,

那么如果有一个这种格式的图片应该怎么显示出来呢?
大家直接看代码吧

//base64
let self = this;
let img = new Image();
img.src = base64;
let tex = new Texture2D();
img.onload = function () {
    tex.reset({
        width: img.width,
        height: img.height,
    });
    tex.uploadData(img, 0, 0);
    tex.loaded = true;
    let spriteFrame = new SpriteFrame();
    spriteFrame.texture = tex;
    self.nodeBase.getComponent(Sprite).spriteFrame = spriteFrame;
};

3. zip压缩包中图片获取显示

大家都清楚zip文件其实就是二进制数据,

那么怎样加载二进制的zip文件呢,其实菜鸟在Creator3D:JSZip_压缩
中已经说过了。

let path: string = url.raw("resources/gzh.zip");
loader.load({ url: path, type: "binary", }, (err, res) => {
...
}
  • 加载完成后通过JSZip进行解压,在解析时选择解析输出类型为base64,
  • 通过base64格式图片显示将其显示

地址

  • 微信公众号:搬砖小菜鸟
  • 扫码关注公众号,发送"资源加载"可获取源码
  • 菜鸟同时创建了一个qq群(960124989)大家可以添加一下,方便大家在使用过程中遇见问题的沟通
3赞

base64那个原生平台也能直接用吗?