小遊戲開發之資源管理(跨引擎)

前言

資源管理是內存優化的一部分，對於大型遊戲，資源管理不明確，很容易出現內存不足而閃退的狀況。
說到資源也就涉及到了資源劃分，這部份內容能夠看另外一篇文章《遊戲開發之目錄劃分》。

資源管理器須要考慮的狀況

1. 加載完成的回調
2. 加載失敗後的嘗試
3. 多個相同請求的處理。
4. 未加載成功以前已經刪除。
5. 資源的使用狀況，記數。
6. 跨引擎使用。

各個引擎須要提供的輔助類須要實現的接口

/**
 * 自定義的資源分類，對應各個引擎中相同的資源。
 */
export enum ResType {
    Texture2D,
    SpriteFrame,
    SpriteAtlas,
    Prefab,
    Json,
    Scene,
    Material,
    AnimationClip,
    Mesh,
    Particle2D,//粒子效果
    AudioClip,
}

export type ResCallback = (err: any, res: any) => void

/**
 * 是否使用引用記數 
 * 對於一些資源不多的小遊戲不須要清理資源，因此能夠設置爲false。
 */
export let RECORD_RES_COUNT: boolean = true

/**
 * 各個引擎須要提供資源的輔助類須要實現的接口
 */
export default interface ResInterface {
    /**
     * 
     * @param url 加載資源
     * @param type 
     * @param callback 
     */
    loadRes(url: string, type: ResType, callback: ResCallback): void;

    /**
     * 清理資源
     * @param url 
     */
    release(url: string): void;

    /**
     * 獲取資源
     * @param url 
     * @param ResType 自定義的資源類型 
     */
    getRes(url: string, type: ResType): any;

    /**
     * 得到資源的依賴資源
     * @param url 
     */
    getDependsRecursively(url: any): any;


}

資源類的封裝和記數處理

import ResHelper from "../../engine/ResHelper";
import { ResType, RECORD_RES_COUNT } from "./ResInterface";

export default class ResItem {

    // 全局資源使用計數器。
    protected static resCountMap: {} = {};

    //嘗試加載次數
    private loadCount: number = 0;
    //以來資源
    protected resources: {} = {};

    //使用次數
    protected useCount: number = 0;

    //資源id
    private url: string;

    //資源類型
    private type: ResType;

    //加載是否結束
    protected loadFinish: boolean = false;

    //資源自己
    private res: any;

    //須要通知的函數
    private callbackList: Function[] = []


    constructor(url: string, type?: ResType) {
        this.url = url;
        this.type = type;
    }

    addCallback(func: Function) {
        this.callbackList.push(func)
    }

    //是否加載完畢
    isDone() {
        return this.loadFinish;
    }

    getUrl() {
        return this.url;
    }

    getType() {
        return this.type;
    }

    getRes() {
        if (RECORD_RES_COUNT) {
           
            this.addCount();
        }
        if (!this.res) {
            this.res = ResHelper.instance().getRes(this.url, this.type)
        }
        return this.res;
    }

    /**
     * 加載完成調用
     * @param flag 
     */
    setLoadingFlag(flag: boolean) {
        this.loadFinish = flag;
        if (flag) {
            while (this.callbackList.length > 0) {
                let func = this.callbackList.shift();
                func(null, this)
            }
        }
    }
    /**
     * 因爲引擎加載機制，加載完成就已經使用，
     */
    cacheRes(res: any) {
        this.res = res;
        if (RECORD_RES_COUNT) {
            let depands = ResHelper.instance().getDependsRecursively(res)
            for (let key of depands) {
                this.resources[key] = true;
            }
            //加載成功後直接加1，以避免被其餘模塊的記載器清理掉。
            this.addCount()
        }

    }

    //得到加載次數
    getLoadCount() {
        return this.loadCount;
    }
    //更新加載次數
    updateLoadCount() {
        this.loadCount++;
    }
    //得到使用次數
    getUseCount() {
        return this.useCount;
    }

    releaseAll() {
        if (RECORD_RES_COUNT) {
            while (this.useCount > 0) {
                this.release();
            }
        }
    }
    release() {
        if (RECORD_RES_COUNT) {
            if (this.useCount > 0) {
                this.subCount();
                if (this.useCount == 0) {
                    return true;
                } else {
                    return false;
                }
            } else {
                return true;
            }
        }


    }


    subCount() {
        this.useCount --;
        let resources: string[] = Object.keys(this.resources);
        for (let index = 0; index < resources.length; index++) {
            const key = resources[index];
            if (ResItem.resCountMap[key] > 0) {
                ResItem.resCountMap[key]--;
                if (ResItem.resCountMap[key] == 0) {
                    ResHelper.instance().release(key)
                    delete this.resources[key];
                    delete ResItem.resCountMap[key];
                }
            }
        }
    }

    addCount() {
        this.useCount++;
        let resources: string[] = Object.keys(this.resources);
        for (let index = 0; index < resources.length; index++) {
            const key = resources[index];
            ResItem.resCountMap[key]++;
        }
    }

    /**
     * 刪除沒有使用的資源
     */
    static removeUnUsedRes() {
        let resources: string[] = Object.keys(this.resCountMap);
        for (let index = 0; index < resources.length; index++) {
            const key = resources[index];
            const count = this.resCountMap[key];
            if (count === 1) {
                // cc.log("removeUnUsedRes uuid  " + key + "  count  " + ResItem.resCountMap[key])
                ResHelper.instance().release(key)
                delete this.resCountMap[key];
            }
        }
    }
}

資源管理器

import ResItem from "./ResItem";
import ResInterface, { ResCallback, ResType } from "./ResInterface";
import ResHelper from "../../engine/ResHelper";

export default class ResLoader {

    private helper: ResInterface = null;

    constructor() {
        this.helper = ResHelper.instance();
    }

    protected resCache = {}
    /**
     * 清理單個資源
     * @param url 
     * @param type 
     */
    releaseRes(url: string, type: ResType) {
        let ts = this.getKey(url, type);
        let item = this.resCache[ts];
        if (item) {
            if (item.release()) {
                this.resCache[ts] = null;
            }
        }
    }

    /**
    * 刪除全部資源
    */
    release() {
        console.log(' ResLoader release ================== ')
        let resources: string[] = Object.keys(this.resCache);
        for (let index = 0; index < resources.length; index++) {
            const key = resources[index];
            const element: ResItem = this.resCache[key];
            if (element) {
                element.releaseAll();
                this.resCache[key] = null;
            } else {
                // console.warn("ResLoader release url  =  is error  ",key)
            }
        }

    }

    private getKey(url: string, type: ResType) {
        let key = url + type;
        return key;
    }
    /**
     * 同時加載多個資源。
     * @param list 須要加載的資源列表
     * @param type 須要加載的資源類型，要求全部資源統一類型
     * @param func 加載後的回調
     * @param loader 資源加載管理器，默認是全局管理器。
     */
    loadArray(list: Array<string>, type: ResType, func: (err: string, process: number) => void) {
        let resCount = 0;
        for (let index = 0; index < list.length; index++) {
            const element = list[index];
            this.loadRes(element, type, (err) => {
                // 不管是否都加載成功都返回。
                if (err) {
                    console.log(err);
                    func(err, resCount / list.length);
                    return;
                }
                resCount++;
                func(err, resCount / list.length);
            });
        }
    }


    getItem(url: string, type: ResType) {
        let ts = this.getKey(url, type)
        if (this.resCache[ts]) {
            return this.resCache[ts]
        } else {
            let item = new ResItem(url, type);
            this.resCache[ts] = item;
        }

    }
    /**
     * 加載單個文件
     * @param url 
     * @param type 
     * @param callback 
     */
    loadRes(url: string, type: ResType, callback: (err: string, res: ResItem) => void) {
        let ts = this.getKey(url, type);
        let item: ResItem = this.resCache[ts]
        // cc.log(" loadRes url ",url,' ts ',ts);
        if (item && item.isDone()) {
            callback(null, item);
            return;
        } else {
            if (item) {
                item.addCallback(callback)
                return;
            } else {
                item = new ResItem(url, type);
                this.resCache[ts] = item;
            }

        }


        let func: ResCallback = (err: any, res: any) => {
            item.updateLoadCount();
            if (err) {
                if (item.getLoadCount() <= 3) {
                    console.warn(" item.getLoadCount()  =========== ", item.getLoadCount())
                    this.helper.loadRes(url, type, func);
                } else {
                    console.warn(" res load fail url is " + url);
                    this.resCache[ts] = null;
                    callback(err, null);
                }
            } else {
                item.cacheRes(res);
                if (this.resCache[ts]) {
                    item.setLoadingFlag(true)
                    callback(err, item);
                } else {
                    //處理加載完以前已經刪除的資源
                    item.subCount();
                }


            }
        }
        this.helper.loadRes(url, type, func);
    }



    /**
     * 獲取資源的惟一方式 
     * @param url 
     * @param type 
     */
    getRes(url: string, type: ResType) {
        let ts = this.getKey(url, type)
        let item = this.resCache[ts];
        if (item) {
            return item.getRes();
        } else {
            let res = this.helper.getRes(url, type);
            if (res) { // 若是其餘管理器已經加載了資源，直接使用。
                console.log(' 其餘加載器已經加載了次資源 ', url)
                let item = new ResItem(url, type);
                item.cacheRes(item)
                this.resCache[ts] = item
                return item.getRes();
            } else {
                console.warn('getRes url ', url, ' ts ', ts)
            }

        }
        return null;
    }

}

CocosCreator資源輔助類

import ResInterface, { ResType, ResCallback } from "../cfw/res/ResInterface";

/**
 * 各個引擎提供的資源輔助類。須要實現ResInterface接口
 */
export default class ResHelper implements ResInterface {

    private static ins: ResInterface;

    static instance() {
        if (!this.ins) {
            this.ins = new ResHelper()
        }
        return this.ins;
    }

    /**
      * 加載資源
      * @param url 
      * @param type 
      * @param callback 
      */
    loadRes(url: string, type: ResType, callback: ResCallback): void {
        switch (type) {
            case ResType.Prefab:
                cc.loader.loadRes(url, cc.Prefab, callback)
                break;
            case ResType.Texture2D:
                cc.loader.loadRes(url, cc.Texture2D, callback)
                break;
            case ResType.SpriteFrame:
                cc.loader.loadRes(url, cc.SpriteFrame, callback)
                break;
            case ResType.Json:
                cc.loader.loadRes(url, cc.JsonAsset, callback)
                break;
            case ResType.SpriteAtlas:
                cc.loader.loadRes(url, cc.SpriteAtlas, callback)
                break;
            case ResType.Particle2D:
                cc.loader.loadRes(url, cc.ParticleAsset, callback)
                break;
            case ResType.AudioClip:
                cc.loader.loadRes(url, cc.AudioClip, callback)
                break;
        }
    }

    /**
     * 清理資源
     * @param url 
     */
    release(url: string): void {
        cc.loader.release(url);
    }

    getRes(url: string, type: ResType): any {
        switch (type) {
            case ResType.Prefab:
                return cc.loader.getRes(url, cc.Prefab);
            case ResType.Texture2D:
                return cc.loader.getRes(url, cc.Texture2D);
            case ResType.SpriteFrame:
                return cc.loader.getRes(url, cc.SpriteFrame);
            case ResType.Json:
                return cc.loader.getRes(url, cc.JsonAsset);
            case ResType.SpriteAtlas:
                return cc.loader.getRes(url, cc.SpriteAtlas);
            case ResType.Particle2D:
                return cc.loader.getRes(url, cc.ParticleAsset)
            case ResType.AudioClip:
                return cc.loader.getRes(url, cc.AudioClip)
            default:
                console.error(' getRes error url is ', url, ' type is ', type)
                return null;
        }
    }

    getDependsRecursively(res: any): any {
        return cc.loader.getDependsRecursively(res)
    }
}

如何使用

1. 我通常會先定義一個模塊類，管理資源

//模塊id
export enum ModuleID {
    LOGIN,
    LOADING,
    GAME,
    LOBBY,
    PUBLIC,
    MAX
}

import ResLoader from "../../cfw/res/ResLoader";
import AudioManager from "../../cfw/audio/AudioManager";

export default class Module {

    private loader: ResLoader;

    protected audio: AudioManager;

    protected name: string = ''
    constructor(moduleName: string) {
        this.name = moduleName;
        this.loader = new ResLoader()
        this.audio = new AudioManager(moduleName, this.loader)
    }

    getName() {
        return this.name;
    }

    getLoader() {
        return this.loader;
    }

    getAudio() {
        return this.audio;
    }
}

1. 而後使用模塊管理器管理模塊

import { ModuleID } from "./Config";
import Module from "./Module";

export default class ModuleManager {

    private static mgrMap: Module[] = []

    private static moduleID: ModuleID = ModuleID.LOADING;

    static init(projectName: string) {
        for (let index = 0; index < ModuleID.MAX; index++) {
            this.mgrMap[index] = new Module(projectName + index);
        }
    }

    static getAudio(id: ModuleID = this.moduleID) {
        return this.mgrMap[id].getAudio()
    }

    static publicAudio() {
        return this.mgrMap[ModuleID.PUBLIC].getAudio()
    }

    static publicLoader() {
        return this.mgrMap[ModuleID.PUBLIC].getLoader()
    }

    static setModuleID(id: ModuleID) {
        this.moduleID = id;
    }
    static getLoader(id: ModuleID = this.moduleID) {
        return this.mgrMap[id].getLoader()
    }

}

1. 使用

結語

歡迎掃碼關注公衆號《微笑遊戲》，瀏覽更多內容。

歡迎掃碼關注公衆號《微笑遊戲》，瀏覽更多內容。