00003 不思议迷宫.0009.2.2：自动换装：界面模拟

这两天一直在研究游戏的csb解析显示、重用luac之类的问题，中间遇到各种问题，各种痛苦。唉，还是知识储备不足啊，耽搁了不少时间。其实这些东西是没必要作的。如果我的手机越狱或者root了，就可以直接在真机上替换有限的几个文件，很方便试验、调试。现在条件有限，只能先在电脑上模拟一下，至少保证界面上不要出错，再打包到真机上试试。

自动换装仅发生于地牢中，地牢界面显示可参考“不思议迷宫.0010.1”中的两篇文章。但这两篇文章中的显示内容并不完整，缺少事件和装备界面等等。本篇文章需要把它补齐，并且实现自动换装的初始操作界面（对cocos2dx-lua真心不熟，查查干干，唉，慢）。

交互：地牢界面中点击“装备按钮”，弹出装备界面

注册事件回调，原版已经帮我们做好了：

self:registerTouchEvent();

不过它做得比我们需要的要多，所以就去除一些：

--注册点击事件

functionUIDungeonMain:registerTouchEvent()

-- 宝物按钮

local btnTreasure =tolua.cast(findChildByName(self.node, "CT2/baowu"),"ccui.Button");

local function onTreasureOnClick(sender,eventType)

if eventType ~=ccui.TouchEventType.ended then return end;

if equipsUI == nil then

equipsUI = UIEquips.create();

equipsUI:retain();

self:addChild(equipsUI);

end

equipsUI:setVisible(true);

end

AddTouchEventListener(btnTreasure,onTreasureOnClick);

end

其中用到了UIEquips，和UIDungeonMain类似，在my下创建luac文件，从原版拷贝所需内容，再修改修改：

UIEquips= class("UIEquips",function()

return cc.Layer:create();

end);

functionUIEquips.create(openType, extraPara)

return UIEquips.new(openType, extraPara);

end

--装备界面打开的方式

EQUIP_OPEN_TYPE_DEFAULT = 0; -- 默认打开

EQUIP_OPEN_TYPE_BLACKSMITH = 1; -- 工坊打开

EQUIP_OPEN_TYPE_DEMON = 2; -- 魔神雕像打开

--构造函数

--@param openType 界面打开的方式

--@param extraPara 附加参数

functionUIEquips:ctor(openType, extraPara)

-- 初始化

me = self;

self:setName("UIEquips");

local node = cc.CSLoader:createNode("layout/equip/equip.csb");

self:addChild(node);

self.node = node;

local CT =node:getChildByName("CT");

local panel =CT:getChildByName("page_view");

openType = openType orEQUIP_OPEN_TYPE_DEFAULT;

self.openType = openType;

self.extraPara = extraPara or {};

self.CT = CT;

local BT =node:getChildByName("BT");

self.BT = BT;

self.panel = panel;

self.data = {};

-- 设置下滚动面板的信息

panel:removeAllPages();

panel:setCustomScrollThreshold(100);

panel:setUsingCustomScrollThreshold(true);

……

-- 注册点击事件

self:registerTouchEvent(node);

-- 适配

self:resize();

-- 设置panel尺寸

panel:setContentSize(panel:getContentSize().width, totalHeight);

end

--注册点击事件

functionUIEquips:registerTouchEvent(node)

-- 注册返回按钮点击事件

local btnBack =tolua.cast(findChildByName(node, "BT/btn_back"),"ccui.Button");

local function onBackClick(sender,eventType)

if eventType ~=ccui.TouchEventType.ended then return end;

self:setVisible(false);

end

-- AddTouchEventListener在引导时自动发布TAEGET_CLICK事件

AddTouchEventListener(btnBack,onBackClick);

TextStyleM.setTextStyle(btnBack,TextStyleM.TEXT_SIZE_MIDDLE, TextStyleM.TEXT_COLOR_BROWN_YELLOW, true);

btnBack:setTitleText(getLocStr("btn_text_back"));

end

functionUIEquips:resize()

local node = self.node;

-- bg居中显示并充满整个屏幕

AlignM.fitToScreen(node, "bg");

-- CT居中并缩放至合适大小

AlignM.alignToCenter(node, "CT");

-- BT置于底部并缩放至合适大小

AlignM.alignToBottomCenter(node,"BT");

end

装备界面的打开、关闭这样就可以了。

交互：装备界面中点击“装备槽”，弹出自动换装配置界面

现在要继续玩上装备界面，当玩家点击“装备槽”时，需要弹出换装配置界面。那这个配置界面怎么来呢？较好的办法是找到和cocos2dx3.3rc0配套的CocosStudio，弄个csb出来。另一个办法是自己用代码手工实现。由于配置界面并不复杂，我就凑合着自己写了。

在my目录下新建UIAutoEquipingConfig.luac，编辑内容：

require("game/logic/base/Equip");

require("my/UIPositioning");

UIAutoEquipingConfig= class("UIAutoEquipingConfig",function()

return cc.Layer:create();

end);

functionUIAutoEquipingConfig.create(equipType)

return UIAutoEquipingConfig.new(equipType);

end

localgrayedEquipments =

{

[EQUIP_TYPE_HELMET] ="images/ui/equip/equip4.png",

[EQUIP_TYPE_ARMOR] ="images/ui/equip/equip6.png",

[EQUIP_TYPE_GLOVE] ="images/ui/equip/equip7.png",

[EQUIP_TYPE_BELT] ="images/ui/equip/equip11.png",

[EQUIP_TYPE_NECKLACE] ="images/ui/equip/equip3.png",

[EQUIP_TYPE_RING] ="images/ui/equip/equip2.png",

[EQUIP_TYPE_BOOT] ="images/ui/equip/equip10.png",

[EQUIP_TYPE_CLOAK] ="images/ui/equip/equip5.png",

[EQUIP_TYPE_TRUMP] = "images/ui/equip/baowu.png",

[EQUIP_TYPE_WEAPON] ="images/ui/equip/equip8.png",

[EQUIP_TYPE_MEDAL] ="images/ui/equip/equip9.png",

[EQUIP_TYPE_RISKER] ="images/ui/equip/equip12.png",

[EQUIP_TYPE_COSTUME] ="images/ui/equip/equip1.png",

}

localHSPACING = 30;

localVSPACING = 30;

localFONT = "fonts/simhei.ttf";

localFONT_SIZE = 20;

localBUTTON_IMAGE_NORMAL = "images/ui/button/btn_large_yellow1.png";

localBUTTON_IMAGE_SELECTED = "images/ui/button/btn_large_yellow2.png";

localBUTTON_TEXT = "更换";

functionUIAutoEquipingConfig:ctor(equipType)

self:setName("UIAutoEquipingConfig");

local background =cc.Sprite:create("images/ui/button/btn_large_disable.png");

self:addChild(background);

UIPositioning.fitToScreen(background);

local button_close =ccui.Button:create("images/ui/equip/222.png");

local function onButton_close(sender,eventType)

self:getParent():removeChild(self)

end

AddTouchEventListener(button_close,onButton_close);

self:addChild(button_close);

UIPositioning.rightTop(button_close);

local grayedEquipment =grayedEquipments[equipType];

local label_goingFloor =cc.Label:createWithTTF("进入下一层",FONT, FONT_SIZE);

local icon_goingFloor =cc.Sprite:create(grayedEquipment);

local button_goingFloor =ccui.Button:create(BUTTON_IMAGE_NORMAL, BUTTON_IMAGE_SELECTED);

button_goingFloor:setTitleText(BUTTON_TEXT);

button_goingFloor:setTitleFontName(FONT);

button_goingFloor:setTitleFontSize(FONT_SIZE);

local function onButton_goingFloor(sender,eventType)

print("onButton_goingFloor");

end

AddTouchEventListener(button_goingFloor,onButton_goingFloor);

self:addChild(label_goingFloor);

self:addChild(icon_goingFloor);

self:addChild(button_goingFloor);

local label_arrivingFloor =cc.Label:createWithTTF("进到下一层",FONT, FONT_SIZE);

local icon_arrivingFloor =cc.Sprite:create(grayedEquipment);

local button_arrivingFloor =ccui.Button:create(BUTTON_IMAGE_NORMAL, BUTTON_IMAGE_SELECTED);

button_arrivingFloor:setTitleText(BUTTON_TEXT);

button_arrivingFloor:setTitleFontName(FONT);

button_arrivingFloor:setTitleFontSize(FONT_SIZE);

local functiononButton_arrivingFloor(sender, eventType)

print("onButton_arrivingFloor");

end

AddTouchEventListener(button_arrivingFloor,onButton_arrivingFloor);

self:addChild(label_arrivingFloor);

self:addChild(icon_arrivingFloor);

self:addChild(button_arrivingFloor);

local label_clickingColumn =cc.Label:createWithTTF("胜利者石柱",FONT, FONT_SIZE);

local icon_clickingColumn =cc.Sprite:create(grayedEquipment);

local button_clickingColumn =ccui.Button:create(BUTTON_IMAGE_NORMAL, BUTTON_IMAGE_SELECTED);

button_clickingColumn:setTitleText(BUTTON_TEXT);

button_clickingColumn:setTitleFontName(FONT);

button_clickingColumn:setTitleFontSize(FONT_SIZE);

local functiononButton_clickingColumn(sender, eventType)

print("onButton_clickingColumn");

end

AddTouchEventListener(button_clickingColumn, onButton_clickingColumn);

self:addChild(label_clickingColumn);

self:addChild(icon_clickingColumn);

self:addChild(button_clickingColumn);

UIPositioning.hvCenter({

{label_goingFloor, icon_goingFloor, button_goingFloor,},

{label_arrivingFloor, icon_arrivingFloor, button_arrivingFloor,},

{label_clickingColumn, icon_clickingColumn, button_clickingColumn,},

}, HSPACING, VSPACING);

return self

end

好几处类似的代码，这个需要重构。

UIPositioning是自己编写的界面排版函数。原版中提供了AlignM，但它有针对性。

用到的一些资源都是原版中自带的，随便找的，所以界面很丑陋：

还有两个交互要做：交互：自动换装配置界面中点击“装备图标”，弹出装备信息界面（含“卸下”按钮）、交互：自动换装配置界面中点击“选择按钮”，弹出装备装备选择界面（不能穿戴的装备灰掉）。但它们需要在真实环境中才能正常运行。