在Cocos Creator游戲開發(fā)中，經(jīng)常需要?jiǎng)討B(tài)加載資源，所以了解并熟悉cc.loader的使用非常必要。

一、cc.loader簡介

1:有三個(gè)默認(rèn)的Pipeline:

? ? (1) assetLoader: 主要用于加載資源, 加載asset類型資源，和釋放這些資源;

? ? (2) downloader: 主要用于下載文件, 文本,圖像,腳本,聲音,字體, 自定義的download;

? ? (3) loader: ?第三個(gè)默認(rèn)的Pipeline，可以加載json, image, plist, fnt, uuid;

2: 資源分為本地(assets目錄下)與遠(yuǎn)程資源;

3: ?加載異步的;

二、本地資源加載

1: 在代碼里面加載資源必須要求資源在assets/resources/文件夾下;

? ?(1)根據(jù)場景的依賴關(guān)系來打包我們的資源; ?去掉不用的資源

? ?(2)無法判斷在代碼里面加載的資源，是哪些？-->所有的resources目錄下的資源，都會(huì)被打包進(jìn)去,你在代碼里面就能加載到它了。

? ?如果資源不在代碼里面加載，一般不要放到resources目錄下 ,如果放到了，這個(gè)資源不關(guān)你有沒有用，都會(huì)被打包進(jìn)去;

2: 資源的url不需要加assets/resources這個(gè)部分,路勁不需要加這個(gè)前綴;

3:cc.loader.loadRes(url, onComplete回掉函數(shù));

4: loadResArray([], type類型, progressCallback， completeCallback);

5: loadResDir (url [type ] [progressCallback ] [completeCallback ]) 加載一個(gè)路徑下的資源;

6: getRes(url, [type]); 獲取資源id;

const {ccclass, property} = cc._decorator;

@ccclass

export default class GameMgr extends cc.Component {

? ?@property(cc.AudioSource)

bgAudio : cc.AudioSource = null;

? ?@property({type:cc.Sprite, tooltip:"精靈組件"})

bgSprite : cc.Sprite = null;

? ?onLoad () {

this.localLoad();

? ?}

? ?localLoad(){

? ? ? ?cc.loader.loadRes("bg", function(err, ret){

? ? ? ? ? ?if(err){

? ? ? ? ? ? ? ?cc.error(err.messager || err);

? ? ? ? ? ? ? ?return;

? ? ? ? ? ?}

? ? ? ? ? ?// 動(dòng)態(tài)加載的音效資源

this.bgAudio.clip = ret;

this.bgAudio.play();

? ? ? ?}.bind(this));

? ? ? ?// 動(dòng)態(tài)加載圖片

? ? ? ?cc.loader.loadRes("imgs/disk", cc.SpriteFrame, function(err, ret){

? ? ? ? ? ?if(err){

? ? ? ? ? ? ? ?cc.error(err.messager || err);

? ? ? ? ? ? ? ?return;

? ? ? ? ? ?}

console.log(ret)

console.log(this.bgSprite);

this.bgSprite.spriteFrame = ret;

? ? ? ?}.bind(this));

? ?}

}

運(yùn)行結(jié)果如下：

三、遠(yuǎn)程資源加載

1: cc.loader.load(url, 結(jié)束回掉函數(shù));

2: cc.loader.load({url: “”, type: “”}, 結(jié)束回掉函數(shù));

3: 遠(yuǎn)程加載任意類型文件;

我們采用NodeJS環(huán)境測試。

注意：NodeJS環(huán)境中需要設(shè)置跨域訪問，如下：

//設(shè)置跨域訪問

app.all('*', function(req, res, next) {

? ?res.header("Access-Control-Allow-Origin", "*");

? ?res.header("Access-Control-Allow-Headers", "X-Requested-With");

? ?res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

? ?res.header("X-Powered-By", ' 3.2.1');

? ?res.header("Content-Type", "application/json;charset=utf-8");

? ?next();

});

GameMgr.ts代碼修改如下：

? ?onLoad () {

? ? ? ?//this.localLoad();

this.remoteLoad();

? ?}

? ?remoteLoad(){

? ? ? ?cc.loader.load({url:"http://127.0.0.1:6080/res/bg.mp3", type:"mp3"},function(err, ret){

? ? ? ? ? ?if(err){

? ? ? ? ? ? ? ?cc.error(err.message || err);

? ? ? ? ? ? ? ?return;

? ? ? ? ? ?}

? ? ? ? ? ?// 動(dòng)態(tài)加載的音效資源

this.bgAudio.clip = ret;

this.bgAudio.play();

? ? ? ?}.bind(this));

? ? ? ?cc.loader.load("http://127.0.0.1:6080/res/disk.png",function(err, ret){

? ? ? ? ? ?if(err){

? ? ? ? ? ? ? ?cc.error(err.message || err);

? ? ? ? ? ? ? ?return;

? ? ? ? ? ?}

? ? ? ? ? ?//console.log(ret);

? ? ? ? ? ?// 加載時(shí)候會(huì)自動(dòng)識(shí)別資源類型，cc.Texture2D

this.bgSprite.spriteFrame.setTexture(ret);

? ? ? ? ? ?// 需要修改圖片精靈所在節(jié)點(diǎn)的大小

this.bgSprite.node.setContentSize(ret.width, ret.height);

? ? ? ?}.bind(this));

? ?}

四、資源卸載

1:每個(gè)場景有個(gè)自動(dòng)釋放資源

? ?勾選上這個(gè)場景的資源會(huì)自動(dòng)釋放，不勾選上這個(gè)場景的資源不釋放

2: 代碼加載的資源，默認(rèn)是不會(huì)受這個(gè)選項(xiàng)的影響的,除非設(shè)置

? ? cc.loader.setAutoRelease(url, brealse)

3: 手動(dòng)釋放資源

? ?loadRes/ releaseRes ?

? ?load / release

? ?releaseAsset (資源對象的object);

今天的分享就到這里，更多教學(xué)視頻請點(diǎn)擊：

https://bycwedu.vipwan.cn/promotion_channels/630597732