南锋

南奔万里空,脱死锋镝余

Cocos2dx(3.17)中csb文件使用方法

开发环境:xcode 、vscode
开发语言:lua

一、手写代码加载csb文件,并获取控件

1
2
3
4
5
6
7
8
9
10
11
12
13
--加载csb场景文件,并将场景添加到节点中。
local node = cc.CSLoader:createNode("MenuScene.csb")
self:addChild(node)
--获取场景中的根节点(场景的跟节点一般是容器)
local rootLayout = node:getChildByName("Panel_2")
--强制转换,目前还没搞懂为啥要强制转换,可有可无,测试不写这串代码,一样可以获取到它的子节点。
-- local rootNode = tolua.cast(root, "ccui.Widget")
--获取控件(按钮 复选框 图片 文本 进度条 滑动条 出入框等)
local button =rootLayout:getChildByName("Button_2")
--给控件添加事件(不同控件,他的事件类型不同,使用的方法也就不同,),下面是给按钮添加点击事件
button:addClickEventListener(function(sender,eventType)
print("点击了开始按钮")
end)

控件的通用事件

一般想封装控件的通用事件的话,可以通过addTouchEventListener(sender,eventType)来添加事件,下面示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
--[[
btn 控件本身对象
ended 事件类型(放开)对应的回调函数
began 事件类型(按下)对应的回调函数
moved 事件类型(移动)对应的回调函数
canceled 事件类型(取消)对应的回调函数
]]
function cc.exports.setButtonFunction(btn, ended, began, moved, canceled)
btn:addTouchEventListener(function(sender, eventType)
if eventType == ccui.TouchEventType.began then
if began then began(sender) end
elseif eventType == ccui.TouchEventType.ended then
if ended then ended(sender) end
elseif eventType == ccui.TouchEventType.moved then
if moved then moved(sender) end
elseif eventType == ccui.TouchEventType.canceled then
if canceled then canceled(sender) end
end
end)
end

二、通过mvc ViewBase加载csb文件

博主一般都采用这种方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
local MainScene = class("MainScene",cc.load("mvc").ViewBase)
MainScene.RESOURCE_FILENAME="MenuScene.csb" --自己在Cocos studio上建立的csb文件导入工程文件res文件夹下面
MainScene.RESOURCE_BINDING = {
["Button_2"] = {

["varname"] = "bn_StartGame",

["events"] = {
{
event = "touch" ,
method ="onBack"
}
}
}
}
funcation MainScene:ctor()
self.bn_StartGame:addClickEventListener(function(sender,eventType)
print("点击了开始按钮")
end)
end

funcation MainScene:onBack()
print("触摸了")
end

return MainScene

1、MainScene.RESOURCE_FILENAME=”MenuScene.csb”

这个变量是设置场景的csb文件名称,读取时在ViewBase类中读取的
下面会讲一下ViewBase类怎么读取的。

2、MainScene.RESOURCE_FILENAME

这个变量是设置绑定控件,获取控件的实例

1
2
3
4
5
6
7
8
9
10
11
12
13
MainScene.RESOURCE_BINDING = {
["Button_2"] = {

["varname"] = "bn_StartGame",

["events"] = {
{
event = "touch" ,
method ="onBack"
}
}
}
}

使用方式模板(两种方式):

1
2
3
4
5
6
7
8
9
10
11
MainScene.RESOURCE_BINDING =
{
--不添加事件
["Cocos控件名"] = {["varname"] = "引用变量名" }
--添加事件
["Cocos控件名"] = {["varname"] = "引用变量名",["events"]={{["event"]="事件类型(原生现在支持一种)",["method"]="回调函数"},...}}
}

获取子控件
self.root = self:getResourceNode()
local Button = self.root:getChildByName("Button_1")

三、ViewBase类源码讲解

源码示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
local ViewBase = class("ViewBase", cc.Node)

function ViewBase:ctor(app, name)
self:enableNodeEvents()
self.app_ = app
self.name_ = name

-- 检查子类中是否设置RESOURCE_FILENAME属性,并得到他的value值
local res = rawget(self.class, "RESOURCE_FILENAME")
if res then
--加载csb文件
self:createResourceNode(res)
end
--检查子类中是否设置RESOURCE_BINDING属性,并得到他的value值
local binding = rawget(self.class, "RESOURCE_BINDING")
if res and binding then
--获取控件的实例
self:createResourceBinding(binding)
end
--判断子类有没有重写onCreate方法,有,调用子类的onCreate方法
if self.onCreate then self:onCreate() end
end

function ViewBase:getApp()
return self.app_
end

function ViewBase:getName()
return self.name_
end

function ViewBase:getResourceNode()
return self.resourceNode_
end
--[[
*加载csb文件的方法
*resourceFilename 文件名称(带后缀名)
]]
function ViewBase:createResourceNode(resourceFilename)
--判断是否已经加载过csb文件
if self.resourceNode_ then
--移除自己
self.resourceNode_:removeSelf()
--设置为nil
self.resourceNode_ = nil
end
--通过CSLoader加载csb文件,得到一个节点
self.resourceNode_ = cc.CSLoader:createNode(resourceFilename)
assert(self.resourceNode_, string.format("ViewBase:createResourceNode() - load resouce node from file \"%s\" failed", resourceFilename))
--将节点添加到该父节点(场景,层)中
self:addChild(self.resourceNode_)
end
--[[
*绑定控件
*binding 在ViewBase子类中设置的RESOURCE_BINDING(规则模板(表))
]]
function ViewBase:createResourceBinding(binding)
assert(self.resourceNode_, "ViewBase:createResourceBinding() - not load resource node")
--遍历规则表
for nodeName, nodeBinding in pairs(binding) do
--节点通过名称直接获取子控件实例
--这里就是我上面说的问题所在了,这里是直接通过根节点获取控件,往往,根节点的子节点是容器,而不是控件,所以这里会得不到控件
local node = self.resourceNode_:getChildByName(nodeName)
--如果设置变量名不为nil
if nodeBinding.varname then
--则将node赋值类nodeBinding.varname变量
self[nodeBinding.varname] = node
end
--遍历规则表中的事件
--nodeBinding.events or {}这个表达式相当于三目运算 nodeBinding.events~=nil?nodeBinding.events:{}
for _, event in ipairs(nodeBinding.events or {}) do
--原生这里只支持touch事件,如果有别的需求可自行添加
if event.event == "touch" then
--给控件设置onTouch事件并设置回调函数。
node:onTouch(handler(self, self[event.method]))
end
end
end
end
--[[
*跳转场景(翻译:展示场景)
*transition 衔接动画
*time 衔接动画播放时间
*more 动画类型
]]
function ViewBase:showWithScene(transition, time, more)
self:setVisible(true)
local scene = display.newScene(self.name_)
scene:addChild(self)
display.runScene(scene, transition, time, more)
return self
end

return ViewBase

修改createResourceBinding方法,达到可以使用RESOURCE_BINDING来绑定控件事件的目的(修复原生方法不能绑定使用容器包裹的控件的问题。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
--新增一个dom树表,用于存储dom树各个节点
ViewBase.dom = {}
--[[
*递归遍历整个场景树中的容器和控件,将容器和控件存入dom表中
*rootNode 节点类型
]]
local function recursionChlidNOde(rootNode)
local children = rootNode:getChildren()
for _,childNOde in ipairs(children or {}) do
local name =childNOde:getName()
print("name ",name)
ViewBase.dom[name]=childNOde
recursionChlidNOde(childNOde)
end

end
function ViewBase:createResourceBinding(binding)
assert(self.resourceNode_, "ViewBase:createResourceBinding() - not load resource node")
recursionChlidNOde(self.resourceNode_)
for bindWidgetName, ruleTable in pairs(binding) do
for widgetName,node in pairs(ViewBase.dom) do
print(widgetName,tolua.type(node))
if ruleTable.varname and widgetName==bindWidgetName then
self[ruleTable.varname] = node
for _, event in ipairs(ruleTable.events or {}) do
if event.event == "touch" then
node:onTouch(handler(self, self[event.method]))
end
end
end
end

end
end
+