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，但它有针对性。
用到的一些资源都是原版中自带的，随便找的，所以界面很丑陋：
扫一扫
1139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
