简单背包系统分享

夏季凉风 · 发表于 2023-7-6 15:27:02

本帖最后由夏季凉风于 2023-7-6 15:39 编辑

一. 演示视频：

二. 一分钟上手指南：
下载下面 demo，运行即可

demoBag.rar (63.99 KB, 下载次数: 94)

2023-7-6 15:26 上传

点击文件名下载附件

三. 原理：
这个背包模块主要实现了物品的读取和存储显示。所有物品存储都只存储 id和数量，物品的具体属性留给大家扩展。

四. 实现方式：
1. 首先实现 BagModule 模块，简单实现物品的增删查改和数据的持久化：

前端模块 BagModuleC：

export class BagModuleC extends ModuleC<BagModuleS, BagModuleData>{



    protected onStart(): void {

        UI.UIManager.instance.show(UIHUD);

    }



    /**

     * 获取物品数量

     * @param goodsID 物品 id

     * @returns 

     */

    public getGoods(goodsID: number): number {

        return this.data.getGoods(goodsID);

    }



    /**

     * 增加物品

     * @param goodsID 物品 id

     * @param count 物品数量

     */

    public async addGoods(goodsID: number, count: number): Promise<void> {

        await this.server.net_addGoods(goodsID, count);

        this.data.addGoods(goodsID, count);

    }



    /**

     * 获取所有物品

     * @returns 

     */

    public getAllGoods(): BagBook {

        return this.data.goodsBook;

    }



}

后端模块 BagModuleS:

export class BagModuleS extends ModuleS<BagModuleC, BagModuleData>{



    /**

     * 获取物品数量

     * @param goodsID 物品 id

     * @returns 

     */

    public getGoods(player: Gameplay.Player, goodsID: number): number {

        return this.getPlayerData(player).getGoods(goodsID);

    }



    /**

     * 增加物品

     * @param goodsID 物品 id

     * @param count 物品数量

     */

    public addGoods(player: Gameplay.Player, goodsID: number, count: number): void {

        this.getPlayerData(player).addGoods(goodsID, count);

    }





    /**

     * 增加物品

     * @param player 玩家

     * @param goodsID 物品 id

     * @param count 数量

     */

    public net_addGoods(goodsID: number, count: number): void {

        this.currentData.addGoods(goodsID, count);

    }



}

数据模块 BagModuleData

/** 物品表的类型 */

export type BagBook = { [goodsID: number]: number };



/**

 * 背包模块数据

 */

export class BagModuleData extends Subdata {



    /** 物品表 */

    @Decorator.saveProperty

    public goodsBook: BagBook = {};



    /**

     * 初始化默认数据

     */

    protected initDefaultData(): void {

        this.goodsBook = {};

    }



    /**

     * 增加物品

     * @param goodsID 物品 id

     * @param count 物品数量

     */

    public addGoods(goodsID: number, count: number): void {

        this.goodsBook[goodsID] = Math.max(0, (this.goodsBook[goodsID] || 0) + count);

        this.save(false);

    }



    /**

     * 获取物品数量

     * @param goodsID 物品 id

     * @returns 

     */

    public getGoods(goodsID: number): number {

        return this.goodsBook[goodsID] || 0;

    }



}

在背包中前后端数据是分开改变的，这样减少数据量的传输。

背包界面中，使用了简单的对象池来缓存每个格子。

class UIPool {



    /** 缓存对象池 */

    private _hide: UIBagItem[] = [];



    /** 缓存对象池 */

    private _show: UIBagItem[] = [];



    /**

     * 构造函数

     * @param _parent 父节点

     * @param _hideParent 隐藏时父节点

     */

    constructor(private _parent: UI.Canvas, private _hideParent: UI.Canvas) {



    }



    /**

     * 获取一个对象

     * @returns 

     */

    public spawn(): UIBagItem {

        let item: UIBagItem;

        if (this._hide.length) {

            item = this._hide.pop();

        } else {

            item = UI.UIManager.instance.create(UIBagItem);

        }

        this._show.push(item);

        this._parent.addChild(item.uiObject);

        return item;

    }



    /**

     * 销毁一个对象

     * @param item 

     */

    public destroy(item: UIBagItem) {

        this._hide.push(item);

        this._hideParent.addChild(item.uiObject);

        const idx = this._show.indexOf(item);

        if (idx != -1) {

            this._show.splice(idx, 1);

        }

    }



    /**

     * 销毁所有对象

     */

    public hideAll() {

        this._show.forEach((item) => {

            this._hide.push(item);

            this._hideParent.addChild(item.uiObject);

        })

        this._show.length = 0;

    }



}

每个物品 id 对应的显示，如果要扩展，可以修改 setData 接口：

class UIBagItem extends BagItem_Generate {



    /**

     * 设置数据

     * @param icon 图片

     * @param count 数量

     */

    public setData(goodsID: number, count: number) {

        this.mIcon.imageGuid = GoodsConfig[goodsID].icon;

        this.mCount.text = "" + count;

    }



}

背包主界面的逻辑就很简单了：

export class UIBagView extends BagView_Generate {



    /** 对象池 */

    private _pool: UIPool;



    onStart() {

        this.mHide.visibility = UI.SlateVisibility.Collapsed;

        this._pool = new UIPool(this.mContent, this.mHide);



        this.mAdd.onClicked.add(() => {

            this.addTest();

        })

        this.mSub.onClicked.add(() => {

            this.subTest();

        })

        this.mClose.onClicked.add(() => {

            UI.UIManager.instance.hide(UIBagView);

        })

    }



    /**

     * 显示界面

     * @param info 

     */

    protected onShow() {

        const info = ModuleManager.getInstance().getModule(BagModuleC).getAllGoods();

        this._pool.hideAll();

        for (let k in info) {

            if (info[k] <= 0) {

                continue;

            }

            const item = this._pool.spawn();

            item.uiObject.size = new Type.Vector2(214, 214);

            item.setData(parseInt(k), info[k]);

        }

    }





    private _addTestIndex: number = 0;



    /**

     * 添加物品测试

     */

    public async addTest() {

        this._addTestIndex = (this._addTestIndex + 1) % 6;

        await ModuleManager.getInstance().getModule(BagModuleC).addGoods(this._addTestIndex + 1, 1);

        this.onShow();

    }



    private _subTestIndex: number = 0;



    /**

     * 减少物品测试

     */

    public async subTest() {

        this._addTestIndex = (this._addTestIndex + 1) % 6;

        await ModuleManager.getInstance().getModule(BagModuleC).addGoods(this._addTestIndex + 1, -1);

        this.onShow();

    }

}