Cocos Studio及ListView使用简介
2015-12-31 18:33
633 查看
Cocos Studio版本:v2.3.2
首先把需要用到的素材拷贝到项目文件夹res下,这里新建了一个imgs文件夹,将本次用到的素材拷贝到res/imgs/下,路径里不要包含中文。打开Cocos Studio后新建一个项目,在选择项目类型界面可以看到没有空项目可选,所以随便选择了一个示例,下一步后可以编辑项目名称,项目路径,点击完成之后可以看到生成的示例。因为不需要用到这些所以在左下角的资源窗口中,将所有的素材删除,可以选择移除也可以选择删除到回收站,然后选中ccs右键在菜单中选择“导入资源”,
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/13/15ae344ec6835a0fe16df1f7e8c5f7d2)
在选择窗口中找到imgs文件夹后导入。导入资源之后,新建文件,可以新建Scene、Layer、Node、Plist、Scene3D、Skeleton,Scene不能编辑大小
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/13/9f2e26d908bf017a1254556382d76151)
大小和左上选择的分辨率一致,所以需要提前选择好分辨率,而Layer可以编辑大小
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/13/d550c49b23b364553b65d6181ab67646)
新建一个Layer,然后可以编辑这个界面,如果将一张图片直接拖到画布上,那么创建的是一个Sprite,也可以在控件窗口中拖一个ImageView,然后将图片拖到右侧ImageView的图片资源中,具体使用什么基础对象、控件、容器根据需求来选择。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/13/a1e013cc2b0e9b69790bf2f933ea7df6)
在这个Layer中加入了一个ListView和Button,可以很清楚的看到它们之间的父子节点关系。选中ListView可以看到右侧的属性区域下可见性,交互性,位置、尺寸等选项,而且可给ListView添加背景图片,并对图片进行九宫格调整,这样比代码来设置方便了很多。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/13/fa87a080bafefe83bc7c7b4c5730c8a0)
接下来编辑好Layer后要导出这个文件
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/13/77de60f4b62c0bcdc4192b1293f7af38)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/13/bc7e914e166dd7e48b4b140fd46fee7e)
因为之前已经将用到的所有资源放在了res/imgs/下,所以选择“仅发布项目文件”,再设置发布路径,需要完整的路径,发布到项目文件夹的res/下的一个位置,格式默认是二进制式的csb文件,如果安装了Lua插件,可以导出成Lua文件。设置完之后进行发布
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/13/dc5d6c8fb53d517f5f4fd7285bcf1383)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/13/f70fc03a8905bf89edd3fd8f90015886)
点击确定之后,可以在之前设置的发布路径下看到导出的Layer.csb文件。
下面在代码中使用csb
这段代码实现的效果是
首先把需要用到的素材拷贝到项目文件夹res下,这里新建了一个imgs文件夹,将本次用到的素材拷贝到res/imgs/下,路径里不要包含中文。打开Cocos Studio后新建一个项目,在选择项目类型界面可以看到没有空项目可选,所以随便选择了一个示例,下一步后可以编辑项目名称,项目路径,点击完成之后可以看到生成的示例。因为不需要用到这些所以在左下角的资源窗口中,将所有的素材删除,可以选择移除也可以选择删除到回收站,然后选中ccs右键在菜单中选择“导入资源”,
在选择窗口中找到imgs文件夹后导入。导入资源之后,新建文件,可以新建Scene、Layer、Node、Plist、Scene3D、Skeleton,Scene不能编辑大小
大小和左上选择的分辨率一致,所以需要提前选择好分辨率,而Layer可以编辑大小
新建一个Layer,然后可以编辑这个界面,如果将一张图片直接拖到画布上,那么创建的是一个Sprite,也可以在控件窗口中拖一个ImageView,然后将图片拖到右侧ImageView的图片资源中,具体使用什么基础对象、控件、容器根据需求来选择。
在这个Layer中加入了一个ListView和Button,可以很清楚的看到它们之间的父子节点关系。选中ListView可以看到右侧的属性区域下可见性,交互性,位置、尺寸等选项,而且可给ListView添加背景图片,并对图片进行九宫格调整,这样比代码来设置方便了很多。
接下来编辑好Layer后要导出这个文件
因为之前已经将用到的所有资源放在了res/imgs/下,所以选择“仅发布项目文件”,再设置发布路径,需要完整的路径,发布到项目文件夹的res/下的一个位置,格式默认是二进制式的csb文件,如果安装了Lua插件,可以导出成Lua文件。设置完之后进行发布
点击确定之后,可以在之前设置的发布路径下看到导出的Layer.csb文件。
下面在代码中使用csb
local MainScene = class("MainScene", cc.load("mvc").ViewBase) function MainScene:ctor() self:enableNodeEvents() self.root = cc.CSLoader:createNode('res/Layer.csb') end function MainScene:onEnter() local _size = cc.Director:getInstance():getWinSize() local sp=cc.Sprite:create('res/HelloWorld.png') self:addChild(sp) sp:setPosition(_size.width/2,_size.height/2) self:createUI() end function MainScene:createUI() local _size = cc.Director:getInstance():getWinSize() local _widget = tolua.cast(self.root,'Widget') local function close(sender,event) if event == ccui.TouchEventType.ended then print('---close---') end end local Button_1 = ccui.Helper:seekWidgetByName(_widget,'Button_1') Button_1:addTouchEventListener(close) local function btnClicked(sender,_type) print('--btn click--') end local btn = ccui.Button:create('res/DS07.png','res/DS08.png','res/DS09.png') self:addChild(btn) btn:setPosition(_size.width/3,_size.height/3) btn:addTouchEventListener(btnClicked) local function btnClicked2(sender,_type) print('--btn2 click--') end local btn2 = ccui.Button:create('res/DS10.png','res/DS11.png','res/DS12.png') self:addChild(btn2) btn2:setPosition(_size.width/3,_size.height/4.5) btn2:addTouchEventListener(btnClicked2) self:setListView() self:addChild(self.root) end function MainScene:setListView() local _widget = tolua.cast(self.root,'Widget') local list = ccui.Helper:seekWidgetByName(_widget,'ListView_1') local panel = ccui.Helper:seekWidgetByName(list,'Panel_1') panel:setVisible(false) local Image_1 = ccui.Helper:seekWidgetByName(panel,'Image_1') local sp = Image_1:getChildByName('ic_egyviper_blue_1') sp:setVisible(false) local function change(sender,_type) if _type == ccui.TouchEventType.ended then sender:loadTexture('res/imgs/Cn21.png',0) end end local Image_5 = ccui.Helper:seekWidgetByName(panel,'Image_5') Image_5:setTouchEnabled(true) Image_5:addTouchEventListener(change) for i=1,10 do local _panel = panel:clone() list:pushBackCustomItem(_panel) end local b = 1 local d = 0 local chs = list:getChildren() local < ace2 span class="hljs-keyword">function show() local item = chs[b] item:setVisible(true) b = b + 1 end local function scrolling() d = d + 100*(1/11) list:scrollToPercentVertical(d,0.5,false) end local delay1 = cc.DelayTime:create(0.2) local delay2 = cc.DelayTime:create(0.5) local seq = cc.Sequence:create(delay1,cc.CallFunc:create(show),delay2,cc.CallFunc:create(scrolling)) list:runAction(cc.Repeat:create(seq,11)) local function test(sender,_type) if _type == 1 then local index = sender:getCurSelectedIndex() print("--index--",index) end end list:addEventListener(test) end return MainScene
这段代码实现的效果是
相关文章推荐
- Cocosd使用骨骼动画Spine
- Cocos2d中动作详解
- 快速入门Spine
- COCOS学习笔记--自定义绘制
- cocos2d-x缺少Default-568h@2x.png导致iPhone app 上下黑白的解决办法
- cocos2d-x Jnihelper类的使用
- quick-cocos2dx实现弹窗背景虚化
- cocos2d-x调用摄像头和相册并裁减图片
- cocos2d-x调用摄像头和相册并裁减图片
- cocos2dx内嵌gamecenter时的解决方案
- cocosjs+ccs在iphone6上花屏进展
- cocos run -p android 无法真机调试
- [Cocos2d-x开发问题-3] cocos2dx动画Animation介绍
- 【cocos2d-x 3.x 学习与应用总结】3: CallFunc系列
- cocos2d-x 3.0游戏实例学习笔记《卡牌塔防》第八部---怪物出场
- Cocos2d_android你所需要知道的一切(下)
- 【Cocos2d-x源码分析】 FileUtils如何跨平台查找文件
- 【cocos2d-x 3.4】全屏显示窗口,隐藏标题栏
- Cocos2d-x 3.0坐标系详解
- cocostudio1.6UI编辑器中动画使用 cocos2dx3.3 播放问题记录