cocos2dx 背包界面的实现

由于最近负面情绪比较多，说以废话比较多。看博客的朋友可以直接跳到下面的==正题==

如果是连博客都不想看的，可以直接看代码（最下方）。

最近的2周感觉被项目给压榨了。连着忙了2周，任务比较赶是一个，其二，是我们程序这边终于有了个管事的了。

上周6下午开会讨论了一下我们工作中的问题。主要有4个。

各个人做的事情没有人确认。所以定了个这样的流程。

通过禅道系统。

1. 比如，现在有一个任务：背包系统。项目经理把任务会指派给策划。
2. 策划完成策划案后，交给项目经理确认。
3. 项目经理在确认之后，再把任务指派给美术和程序，美术和程序此时需要做确认操作（看策划案，理清需求。美术会在这个时候拆分任务，估计时间。程序暂时只是了解一下，等到美术出图再做任务拆分和时间估计）。
4. 美术绘图拆图完成后，把图片上传到svn的某个位置。交给项目经理确认。
5. 项目经理确认后，美术把任务指派给程序。程序确认策划案和图片资源后，开工。
6. 程序完成后，先给美术确认。美术确认后，交给策划确认（策划还负责测试工作）
7. 策划确认后，项目经理关闭任务。

不知道同事做了什么。

以后要写任务日志了。而且要及时的把已经完成的任务关闭。

通过禅道，每个人都要记录下自己在做某个任务的时候，做了什么，以及耗时，预计剩余时间。

时间粒度最好在0.5小时到2小时之间。比如：背包界面的日志如下：

• 开始做背包界面 预计剩余耗时： 10小时
• 界面UI摆放及按钮事件的相应 耗时：2小时 预计剩余耗时： 8小时
• 背包中单个物品（图标，等级、数量、品质、名字的显示） 耗时： 2小时 预计剩余耗时： 6小时
• 背包右侧滑块的实现（滑块大小的调整已经位置同步）（滑块用于提示背包滚动的百分比） 耗时：2小时 预计剩余耗时 4小时
• fix bug ： 触摸机制导致点在物品上时不能滑动背包，只有点在物品间空隙位置时才能滑动背包（已解决） 耗时：1小时 预计剩余耗时 4小时
• 背包中单个物品（装备满级标志，装备碎片标志，已装备的表示的显示） 耗时： 1小时
• 背包界面以实现，实际耗时8小时

弃用qq，改用rtx（qq太多干扰的信息了，）。虽然通信靠吼是最实时的，但容易打断思路，如果同时正在专注中，用rtx。

测试力度不够，人都是有惰性的。一个迭代是否完成了，需要认真的测试。而不是仅仅看看程序的演示。

ok，上周6下午的讨论大致就是上面4个。

就这样，周一实践了现在。感觉就是，工作效率是蛮高的，气氛也蛮不错。

当然，也有一个负面的情绪。。现在下班后完全不想动脑子了，上班太累了。这个也是自己的问题，以后不要一直坐在那，要多去阳台喝喝水。

说到游戏，我近几个月都在都战斗，所以UI也有点生疏了。之前的UI是用cocosstudio1.6的ui编辑器弄的。我感觉既然需要重新熟悉一遍，还不如就用最新的cocos 2.2.6。

背包系统包括了：

1. 背包界面（背包里有装备，装备碎片，道具，宝箱，开宝箱的钥匙）
2. 装备详情，强化，出售
3. 选择装备界面（用于伙伴选择装备（一个玩家可以有n个伙伴），装备强化也是吃装备的（这个是脑子进水了的））
4. 装备碎片合成装备
5. 道具？？？（突然发现我也不知道道具有那些要做）
6. 开宝箱（又是一个脑子进水的，要在背包系统里面开宝箱，这明明是宝箱系统的东西）

— 以上写于20150514：周4夜间

周五开会说要在月底之前赶出：商城、新手引导。加上之前的需要重做的背包系统、伙伴系统、主界面、关卡选择。还有那些需要换皮的界面（可以说是所有以前做过的界面、策划说功能没怎么改、可实际情况是、以前的界面都是全屏的、现在是类似弹出的对话框的、都需要重新摆界面）。还有就是暂时被搁置的战斗系统（说是UI太赶，要我先做UI，可，我的战斗系统就没事了吗？）

可以说是一次完整的换皮加添加新功能。程序这边是从5月7号才开始有事做的。也就是说，在我预计需要6-7周的工作，需要在3周内做完。

不要问为什么需要这么久。我们程序虽然有4个，但客户端包括我只有2个程序。还有1个是服务器端。

还有一个是大牛，30岁左右，之前主要做服务器端，是项目经理以前的同事。因为项目赶，上周加入了我们项目。他的C++是很牛逼的。但由于他对cocos2d-x和cocostudio摆UI不熟悉。他能做的也就是管理进度，然后，叫我们加班（比如周六加班啦，平时延长工作时间啦。）。（其实我火了，他竟然扬言晚上会陪我们程序到最后一个人。呵呵，不知道我离公司就20分钟。其实我习惯在公司待到10点，因为公司网速好。但我不是加班，是在弄自己的事。）

好吧，其实我发现了，我们程序这边算是有个头头了。

呵呵，又写了一大堆废话。有部分原因是赶进度真的是身心疲惫。第二个原因是。策划那边严重的混日子。周五我们有个策划正式离职了（公司11个人，他请了我，和另外两个程序吃饭。4个人吃了三百七十多，够可以的了。如果说同事之间是不传递负面情绪的。那我们4个算是朋友吧，有什么不爽都会说的那种。）。项目经理（兼系统策划）在陪产，他老婆就这几天的预产期（不是昨天就是今天了）。还有一个策划，是老板的堂弟，用他的话说，他的工资只有2k多，天天上班玩玩游戏看看游戏直播的。

老板提的需求的改动，策划那边活活从4月初弄到了5月初，美术那边都没赶玩，我们程序这边就更不好开工了。而且很多的交互也提示对话框都没有考虑到。

好了，说了这么多，都是别人的锅。但结果是，要我们背。呵呵，网络是个好东西，可以发泄负面情绪。

正题

背包界面（背包里有装备，装备碎片，道具，宝箱，开宝箱的钥匙）的实现。

界面摆放

先上图，第一张是美术给的效果图

第二张是摆好后的背包界面

下面说说界面摆放的一些技巧。我的习惯是把美术给的效果图直接放在cocos的最底层，然后就可以很方便的对坐标了。如果有某些图片或者控件挡住了效果图的画，我会把他暂时设置为透明度0%。在位置摆好后，再把透明度设置为100%。

接下来是背包的item

ok，UI摆好后，就可以写代码了。

—以上写于20150518：周日夜间(周一凌晨吧)

根据我的习惯，会把界面中的变量剥离处理，我叫他界面model。游戏项目遗留问题我们项目的UI系统是用C++写的。

好了，先定义界面的模型，也就是界面要显示的内容

#ifndef DialogBagModel_h__
#define DialogBagModel_h__

#include <vector>
#include <string>
#include <stdint.h>
#include "NodeBagItemModel.h"

//背包界面的model
struct DialogBagModel
{
    //背包列表
    std::vector<NodeBagItemModel> item_list;

    //背包上限
    int capacity_limit;

    //创建测试数据
    void createTestData(){

        capacity_limit = 90;

        for (int i = 0; i < 20; i++)
        {
            NodeBagItemModel a;
            a.gridModel.grid_bg_color = i % 5 + 1;
            a.gridModel.icon_id = 10001 + i;
            a.gridModel.level = i+1;
            a.gridModel.type = NodeBagGridModel::Equip;
            a.name = "zhuang bei";
            item_list.push_back(a);
        }

    }

    //从模型层获取数据
    void crateFromModel();

};

#endif // DialogBagModel_h__

代码很简单，一个列表，一个上限。还有1个函数用于生成测试数据。

由于项目需要联网获取用户信息，其实是一件比较不利于快速调试的事情。所以，自己生成界面会用到的数据，而不是依赖网络，是一个好的做法。

这样做可以确保如果有问题，可以很容易的分辨是显示的问题还是服务器端数据的问题。

#ifndef DialogBag_h__
#define DialogBag_h__

#include "cocos2d.h"
#include "ui/CocosGUI.h"
#include "cocostudio/CocoStudio.h"
USING_NS_CC;
using namespace ui;
using namespace cocostudio;

#include <vector>
#include <string>
#include "NodeBagItem.h"
#include "DialogBagModel.h"

//背包界面
class DialogBag : public Layer{
public:
    //创建界面
    CREATE_FUNC(DialogBag);

    //界面初始化
    virtual bool init();

    virtual void onEnter();
    virtual void onExit();

    //设置界面显示内容
    void setupDialogBag(DialogBagModel* model);

    //绑定cocos文件到程序控件
    void bindingNode(cocos2d::Node* dialog);

    void onBtnCallback(Ref *object, Widget::TouchEventType type);

    //ScrollView滚动事件的回调
    void onSVCallback(Ref*, ui::ScrollView::EventType type);

    //ScrollView触摸事件的回调
    void onSVTouch(Ref *object, Widget::TouchEventType type);

    //背包中某一个item被点击
    void onItemClick(int sno, int id);

    //该函数响应背包内容更新的事件
    void doUpdateViewEvent(EventCustom* event);

    virtual ~DialogBag();
    DialogBag();
private:

    Button* btn_close;