游戏商城实现全纪录（egret）

写在前面

本人菜鸟菜鸟菜鸟！欢迎指正，或者是有更好的想法也欢迎提出来大家一起分享！本文仅适用于新入行游戏前端的新手，大神可以退出去了==

皮肤

至少需要两个皮肤，一个商城（ShopSkin.exml)，一个列表子项皮肤（ShopItemSkin.exml)。我就随便画画吧，毕竟每个项目都不同，这也仅仅作为参考而已。 FarmShopSkin.exml

ShopSkin在拖动scroller以后需要将里面默认的group删掉，我们这里换成list，将list的条目皮肤设置成列表子项的皮肤（ShopItemSkin.exml)。

FarmShopItemSkin.exml

列表子项的皮肤就按美术设计稿拼就行，可能有需要用到自定义组件的地方需要注意，比如很多地方都需要用到的进度条等等。

皮肤还是比较简单的，可以直接拖控件，相比于开发网站来说方便快捷多了。

具体实现

新建一个ShopPanel类，里面只需要实现关闭按钮，以及列表呈现就行。具体代码如下：

     /**
     * 物理返回键
     */
    public onBackSpace(): void
    {
        FarmShopPanel.close();
    }

/**
     * 刷新数据列表
     */
    private updateList(): void
    {
        let data = model.FarmModel.getInstance().animalList;

        let collection = this.list.dataProvider;

        if(collection == null)
        {
            collection = new eui.ArrayCollection(data);

            this.list.dataProvider = collection;
        }
        else
        {
            (<eui.ArrayCollection>this.list.dataProvider).replaceAll(data);
        }
    }

对于商城列表子项呈现的内容则需要根据项目具体需求来实现，我这里就贴个例子：

    /**
     * 升级
     */
    private btnUpgradeHandler(): void
    {

      
        let info: proto.p_zoo_animal = this.data;

        let needLevel: number = LocalDataUtil.getFarmAnimalSettingByProperty("type", info.id).farm_level;

        if(model.FarmModel.getInstance().farmLevel < needLevel)
        {
            TipView.open("等级不足，无法解锁");

            return;
        }

        let maxTicket: number = model.FarmModel.getInstance().getAnimalUpgradeTicket(info.id, info.lv);

        let maxExp: number = model.FarmModel.getInstance().getAnimalUpgradeExp(info.id, info.lv);

        let needTicket: number = Math.ceil(maxTicket * (1-(info.exp / maxExp)));

        if(model.LoginModel.getInstance().diamond < needTicket)
        {
            TipView.open("奖券不足"); 

            return;
        }

        modulecontroller.FarmModuleController.getInstance().requestUpdateZooAnimal(info.id);

    }

我们项目列表中是升级按钮，如果是购买或者其他按钮也是类似的，具体情况具体分析！

/**
     * 更新状态
     */
    private updateState(): void
    {
        let info: proto.p_zoo_animal = this.data;

        if(info.lv == 0)
        {
            this.currentState = this.UNLOCKED;
        }
        else
        {
            this.currentState = this.LOCKED;
        }
    }

    protected dataChanged(): void
    {
        let info: proto.p_zoo_animal = this.data;

        let animalInfo: lo.ZooAnimalOddsSetting = LocalDataUtil.getZooAnimalOddsSettingById(info.id);

        this.lbl_name.text = animalInfo.name;

        this.img_animal.source = animalInfo.icon;

        this.lbl_level.text = `${info.lv}级`;

        let exp: number = model.FarmModel.getInstance().getAnimalUpgradeExp(info.id, info.lv)

        let ticket: number = model.FarmModel.getInstance().getAnimalUpgradeTicket(info.id, info.lv);

        this.bar.setProgress(info.exp, exp, true);

        if(info.exp >= exp)
        {
            this.lbl_spend.text = `0`;
        }
        else
        {
             this.lbl_spend.text = `${Math.ceil(ticket * (1 - (info.exp / exp)))}`;

             this.img_tips.visible = false;
        }

        this.lbl_reward.text = `${model.FarmModel.getInstance().getAnimalReward(info.id, info.lv)}/小时`;

        this.updateState();

    }    
}

总结

这是自己入行游戏的第一个项目，之前也没学过TypeScript，白鹭引擎也不懂，啥也不会，好在公司有前辈肯带我，才慢慢实现了自己负责的这个大的模块，当然还有其他一些功能，不仅仅是商城，但由于不典型，这里就不写出来了。 从实习开始就是做的网站，没想到自己会从事游戏行业，更没想到还挺好玩？？真香！ 继续努力吧哈哈！