Creator3D：入門一定要會的幾種資源載入

搬磚小菜鳥發表於2020-09-23
3D

前言

今天菜鳥整理了一些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格式圖片顯示將其顯示

地址

  • 微信公眾號：搬磚小菜鳥
  • 掃碼關注公眾號，傳送"python"可獲取原始碼
  • 菜鳥同時建立了一個qq群（960124989）大家可以新增一下，方便大家在使用過程中遇見問題的溝通

相關文章